Final Project - Chromespace Update
An update on developments in the Final Project.
Our scope has been reduced significantly following the Requirements Spec presentation. We are now down to one surface one projector and one microphone with the projection animations and sounds occurring constantly to maintain viewer interest.
The user interaction will therefore change or distort the ongoing animations.
The development will most likely be in the CoreAudio environment on a mac provided enough progress can be made understanding the language.
The Design phase gave us an opportunity to display our prototype and the capabilities of the installation. We defined our roles and are now ready to begin full scale development in early June.
Modding Module Round-Up
Dynamic Web Module Round-up
I completed an iPhone application using the phonegap template via XCode as part of my Dynamic Web Module Submission.
This application used a provided database of student names, modules and teachers to create a basic course application that displayed information on the various components of the course.
The project was hugely time consuming and tedius with numerous coding issues in PHP and JQuery causing trouble throughout. However I feel I may have caused most issues myself by doing more than was required.
Overall I felt it was a success however time will tell ;).
The project report is quite long.. I will include elements of the development here.
Application Development Process
This section will outline the development process in creating the application from start to finish. Special mention will be made of specific functions and processes that fulfil the requirements set out in the project brief.
In order to avoid repetition, functions that work in tandem (i.e. JQuery with PHP/MySQL) and functions that carry-out very similar actions will be grouped together. One function in each group will be used as a case in point to demonstrate how all of the other functions in that group work. All functions concerned will be clearly labelled and any exceptions in the code will be given special mention.
All code is fully commented in their original files.
The HTML foundation for the application was provided as a Phonegap template via Adobe Dreamweaver. This template is HTML5 ready and comes loaded with the JQuery Mobile stylesheet and libraries for a complete phone application appropriate user interface.
Each application area is defined in the HTML as a JQuery data-role page and labelled with a page ID. Transitions between each page were therefore automatically handled by the JQuery functions.
Extra HTML elements created in the page could then be labelled with appropriate data-role attributes when needed. This was done most often with the “collapsible” and “listview” attributes when displaying information returned from server requests.
The core structure of the application was divided into two main sections.
- Student/Staff User Section
- Administrative User Section
These sections were clearly defined using individual html files for each.
The Student/Staff User Section provides limited, user specific data, while the Administrative User Section provides all data and the ability to change the data on the server.
The JQuery external stylesheet, provided by the Adobe Dreamweaver template is the core stylesheet for the application.
No effort was made to create a comprehensive stylesheet for the application as this was not specified as required in the project brief.
In-line styling was used however to display clearly the return of data from the server to the user. This data is most often provided on its own line and in a heading font in order to make it clearly discernible.
Styles implemented by the JQuery CSS were only ever changed when a refresh of the stylesheet was required. This occurred in situations when the data returned to the page from a server request was loaded after the page had finished loading. In these situations the JQuery styling needed to be refreshed using a JQuery function.
JavaScript is used throughout via JQuery and in calling functions.
The most significant use of JavaScript however was in the implementation of native HTML5 GeoLocationing which will be further explained in the core functions section.
JavaScript was also used in error handling of form input prior to the data being sent to the sever.
JQuery, while being inherent in the Phonegap template provided by Dreamweaver, was used throughout at the primary bridge between the user and the server side scripts.
$.getJSON()
This method was used to read JSON objects returned from PHP scripts in the server. The JSON data was held in an array and then distributed into the HTML using JQuery that isolated the IDs of objects and their innerHTML.
More information on specific JQuery functions using this method will be provided in the core functions section.
Server side PHP scripts with MySQL requests were used in order to select data from the database and return their values or results to the user.
While the SELECT method was used most in order to return values to the user, there were also instances where results were cross referenced using INNER JOIN and other values were updated using UPDATE and SET.
Error Handling
Errors in the PHP were recorded in an error log during development.
However errors in user input were handled in the PHP script using an error code. Using numbers 0-4 an error code value was held in a variable and outputted to the user. Errors would include a total server failure, a null result from the request or a mismatch in cross-referencing. A positive error value would be returned if the transaction was a result.
Json_encode
All results from the PHP/MySQL requests were contained in a JSON object using the json-encode() function and sent back to the JQuery to be distributed.
More specific information on PHP/MySQL use will be provided in the core functions section.
This section will highlight specific functions that occur throughout the application. These functions are being highlighted to emphasise the various requirements in coding that are underlined in the project brief.
In order to avoid repetition, functions that work in tandem (i.e. JQuery with PHP/MySQL) and functions that carry-out very similar actions will be grouped together. One function in each group will be used as a case in point to demonstrate how all of the other functions in that group work. All functions concerned will be clearly labelled and any exceptions in the code will be given special mention.
All code is fully commented in their original files.
Student, Staff and Module Lists – an example of JSON/PHP/MySQL Connectivity
This group of functions exemplify the most basic of JQuery.getJSON requests using PHP/MySQL scripts. The functions concerned in this section are listed below.
JQuery Function
PHP Function Called
getStudentListStaff()
getStudentListStaff.php
getStudentList()
getStudentList.php
getStaffListStaff()
getStaffListStaff.php
getStaffList()
getStaffList.php
getStaffListAdmin()
getStaffListAdmin.php
getStudentListAdmin()
getStudentListAdmin.php
getModuleListAdmin()
getModuleListAdmin.php
For the purposes of demonstration the getStudentList() function with the getStudentList.php function will be used as an example of how this group of functions work. All other functions in this group use similar coding techniques with minor changes. Any changes can be viewed in the source code and is accordingly commented.
The getStudentList() function is called by the onClick event handler in the student button on the Student Profile Page. The function immediately calls the $.getJSON() method. Here the method first specifies the php file to be used and then isolates the user ID as the data to be sent to the php file. The json array that is returned from the php file is contained in a variable called “data” and its contents are then split up into variables to be inserted into the html.
The function uses JQuery to isolate HTML list object ID and then inserts the <li> objects with the returned values attached.
The function finally refreshes the “listview” styling as this must be run for new content created after the html page has loaded.
The getStudentList.php file is called by the JQuery .getJSON function. The data sent by JQuery is contained in a variable. The connection to the database is established using the location, username and password for the database. The values required from the database are queried using the mysql_query() function and then displayed in an array.
In this case the module numbers of the user are cross referenced with the module numbers of all other students. Where students take the same modules their names and IDs are returned and contained in an array.
This array is then turned into a JSON object using the json_encode() function. This function is returned using echo and the connection to the database is closed.
Student/Staff/Admin Login - an example of Form Validation using Javascript and PHP
This group of functions exemplify the use of form validation in both Javascript and PHP. The functions concerned in this section are listed below.
JQuery Function
PHP Function Called
getStudent()
getStudent.php
getStaff()
getStaff.php
submitAdmin()
submitAdmin.php
editStudents()
editStudent.php
editStaffs()
editStaff.php
editModules()
editModule.php
For the purposes of demonstration the getStudent() function with the getStudent.php function will be used as an example of how this group of functions use Javascript and PHP validation. All other functions in this group use similar coding techniques with minor changes. Any changes can be viewed in the source code and is accordingly commented.
The editStudent/Staff/Module functions will be discussed at further length in the new operations section.
The getStudent() function is called when submitting the student login form on the application login page. The form does not use the form method and action attributes, instead this function first isolates the values inserted by the user and sends them to the php file using the getJSON method.
First, the user input is tested by javascript using the isNaN() function. If the return is true the function ends and the user is alerted of the issue. If the user input is valid the data is then sent to the php file using the getJSON method. The values returned in an array are then tested by the Javascript. The PHP file will return an error number, each number signifies a specific error, and the error is then displayed for the user.
If the errorAlert returns a positive result (1) the function then returns all of the users information and displays them on the user Profile page.
Part of the JSON array is separated into its respective HTML holder using JQuery calls for their IDs
The getStudent.php function is called by the getJSON method.
The function first holds the input data in variables and then establishes a connection to the database using mysql_connect.
The user input is then tested against the database for a match. If the results do not match up an $errorAlert variable is given a value. This value is then stored to be later returned in a JSON array.
If the result is positive the function continues to call all of the user’s data from the database and stores them in an array with the errorAlert. This array is then encoded in a JSON array and echoed back to the JQuery function for distribution and further testing.
The connection to the database is then closed.
This section demonstrates two new operations carried out by functions within the application as required by the project brief.
GeoLocationing - an example of new HTML5 Functionality
The showDir() function utilises the new geolocationing functionality built into HTML5 ready browsers and devices.
This function was made possible by utilising code found both at w3schools (http://www.w3schools.com/html5/html5_geolocation.asp) and on josemanuelperez.es (http://blog.josemanuelperez.es/2010/07/google-maps-geolocation-directions-specific-destination/) . The data gained at these sites was edited heavily in the function displayed here and altered to include the co-ordinates of the DIT buildings.
When returning the module details from the getModule() function a hidden holder is set to contain the co-ordinates of the building in question. These co-ordinates were found manually and are set to each module ID.
The co-ordinates are then used by the JavaScript function.
The Function first loads the google.maps.DirectionsService and renderer. It depends on a link to an external Google based JS file that is located in the head of the html page.
The module location co-ordinates are then loaded into the function and merged using a Google readable Co-ordinate. This co-ordinate is then used to define the end point of the directions while the start point is prepped in a variable (to be filled when geolocationing takes place).
The parameters of the map and its location on the html page are then specified. Any errors in setting up the directions and map, and their placement in the HTML files are then handled with error messages.
Geolocationing then takes place with a check on the capabilities of the browser. If successful the co-ordinates are loaded into the existing map. If unsuccessful a series of default locations are set in its place.
Updating the Database – An example of new functionality using PHP/MySQL
This function demonstrates a new operation, not covered in the course material. This group of functions all use the UPDATE and SET commands in MySQL in order to update the database.
The error handling methods of these functions have already been covered in the error handling function section.
JQuery Function
PHP Function Called
editStudents()
editStudent.php
editStaffs()
editStaff.php
editModules()
editModule.php
For the purposes of demonstration the editStudents() function with the editStudent.php function will be used as an example of how this group of functions use PHP/MySQL commands in order to update the database with new values. All other functions in this group use similar coding techniques with minor changes. Any changes can be viewed in the source code and are accordingly commented.
The editStudents() function is called onClick of the Update button on the edit page of the Admin section. The function first uses javascript to check the user input for errors and ensures that the code maintains a consistency in the database.
If the validation is false an error is relayed to the user. If successful the data from the form is sent to the PHP file and returned using the getJSON method. This form does not use the method and action attributes of the form.
The return from the database is then very simple. An errorAlert will indicate whether the update was successful or unsuccessful and the user is notified of that change after being returned to the control panel.
The editStudent.php function is called by the getJSON method in the javascript. The function first holds the input data in variables and then opens a connection to the MySQL database.
The function then uses the UPDATE and SET commands in the SQL in order to change each field using the WHERE value to specify the location.
The HTML in the form protects the ID value of the student and this is used as the control for setting the values in the SQL command. WHERE the user ID is ABC all of the other values are updated.
This ensures that user records do not get corrupted.
An error code is used to record whether the operation was a success or failure and the result is then relayed back in a JSON array.
The connection to the database is then closed.
The final stage of development involved the loading of the app into XCode 4 and the iPhone simulator on the Mac.
Various issues were encountered including the whitelisting of numerous Google API websites in order to allow for the map functionality to work. Furthermore changes to the code specifying the location of the PHP files were made.
XCode consistently shut down the MySQL capabilities on the MAMP server which could not be rectified without changing computer or restarting the machine.
The application did eventually work fully through XCode however the geolocationing failed to locate the user even after being prompted for permission.
Paul Pierce - The Truth | BIG NBA Commercial (by Bootsearle)
Motion Graphics Module Roundup
This is the completed motion graphics project video. Using After Effects, Photoshop and Illustrator.
Depicts the last second basket by Paul Pierce to defeat the New York Knicks during a regular season game December 2010.
I have put it up on Youtube during the Playoff run of the celtics and it is enjoying a healthy amount of views.. having trouble getting the right people to view it though.. Balls.ie featured it.. which is cool.. but if it doesn’t get seen by the Celtics community it wont take off.
Here is the project report for this module.
Concept
The intention of this motion graphics project was to create an advertisement for the NBA that was in line with the Association’s current campaign entitled “BIG”. The advert would have a similar aesthetic in using bold, white fonts and super slow motion phantom footage of NBA action from notable games. However, rather than place the text front and centre over the footage (as is the case in all of the current NBA adverts), an effort would be made to integrate the text into the action on the court using masks, 3D positioning and motion tracking.
This series of advertisements weigh heavily on music and scripts that are full of attitude and confidence. The project would therefore require a strong script and a score that would work closely with the action on screen.
Figure 1: Still of original BIG advertisement for NBA with Large text front and centre
An aesthetic similar to the title sequence of the movie “Stranger than Fiction” was seen as an technique that could be used to integrate the text into the action. Rich motion tracking of assets created in Photoshop, Illustrator and After Effects would be required and appropriate moments in the footage for this to occur would need to be defined.
The phantom slow motion footage was sourced from high definition videos on the NBA YouTube account while the NBA and “BIG” logo designs were sourced through Google.
The decision was made to focus on a sequence of play involving Paul Pierce from the Boston Celtics scoring a last second basket to beat their rivals the New York Knicks. The final piece features a script that highlights the pivotal moments of play and underlines the dramatic and definitive climax of the moment. The piece features music composed specially for the advertisement that is crafted to interact with the action on screen.
Development
Development of Concept
The Storyboard
Upon selecting the footage a storyboard of animation was created using stills from the footage. Each still featured what was deemed to be one of the pivotal or most dramatic moments in the sequence; A close up of Pierce before the play, dribbling with the ball in front of the defence, running past a screen from Garnett, running at his defender, stepping back to take a shot, the ball in the air, the ball going through the basket, and Pierce celebrating his achievement.
Figure 2: Storyboard of main moments in sequence with animation ideas included
The animations
Upon each still a range of possible animations were experimented with. A series of 10 second test animations considered a very technical approach, one which would highlight the statistics of the game around the action. However this was too visually complex and the decision was made to focus on a text based animation that was more pronounced and easier to read.
Figure 3: Storyboard still with detailed animations later removed in favour of simpler text
The Script
The script for this animation was informed by the commentary given on the day in the television coverage of the game. A transcription of this commentary was taken down and the most relevant passages were altered to provide the most dramatic and effective description of events.
Research
It was discovered that the player in question, Paul Pierce, is well known under the nickname “The Truth”. This fact led to the inclusion of a passage from the Bible, John 8:32 (“And ye shall know the truth, and the truth shall set you free”), that could be used to great dramatic effect in the script by suggesting “the truth“ referred to is in fact Paul Pierce.
Further research into the game itself revealed a plethora of statistics on the game in question and that Pierce scored a season high amount of points in the game. These statistics were used to inform the original design however they were set aside when the scope of the design was reduced for effect.
Design
Assets were originally designed in Photoshop and Illustrator, and then imported to After Effects as layers via their original files. The more complex design with which the project began was scaled back when it was clear the assets were too complex and fine for the information to be in any way readable for the viewer. The scope was thus reduced to a text only design and all text assets were then created in After Effects.
Development Structure
The aforementioned storyboard provided a task sequence that could be executed over a period of time. Each “moment” in the action sequence could be worked on individually using pre-compositions in After Effects with the text assets and their animations being worked on individually over a 5 week period.
Eventually the individual animation sections were joined into a single pre-composition and configured to work smoothly together with the footage.
Development on the footage itself was set aside at the beginning of the process, editing the original footage to its required length and speeds, before the animations could then be mapped to it and masks drawn over it.
Execution
Once all assets were prepared and footage fully edited the final implementation of the concept could begin.
The edited footage was fully time remapped to emphasise each moment in the narrative of the action. Transition moments were sped up while important moments were slowed down (even slower than the original slow motion footage.).
The final composition was loaded into Premier and mixed with the composed score before being exported for marking.
Time Remapping
To avoid issues with motion tracking this time remapped footage was rendered and then re-imported to the project.
Time remapping involved enabling the effect in After Effects and then carefully introducing and manipulating keyframes in order to stretch and compress time.
Each animation was then edited into the footage and further tailored to suit the specific action on screen.
Motion Tracking
The assets were initially motion tracked to a specific part of the action. This motion tracking was then cleaned up and smoothed out to ensure legibility and a seamless appearance in the action. A certain amount of movement was left in the animations so as to achieve a particular aesthetic and to separate the text from its environment just enough for the viewer to notice it.
3D Positioning
The motion tracked assets were then animated to move slightly in the space of the action by rotating around their x and y axis. These rotations were extremely slow to ensure that they did not seem faster than the footage itself. As well as the motion tracking most text was given intro and outro positioning through hand crafted keyframes to ensure appropriate movement into and out of the shot and to introduce them momentarily (at least) into the action and/or title safe area of the screen.
Masking
Masks were used to position the text between figures in the original footage and to create the illusion that the animations existed in the same time and space.
The white mask layers were animated and positioned by hand, frame by frame, to track the movement of each figure that obscured the text. The masks were then hidden and the accompanying white text was set to Alpha so as to become hidden when moving behind the mask.
In one instance a mask was placed inside another mask and then inverted to create a hole in the mask. This was done to allow text to be read between the arm and the body of a figure.
Figure 5: Example of Masking design in After Effects
Text Animations and Transitions
Most text was introduced and removed through simple positioning changes or opacity animations using keyframes.
For the introduction sequence the text was animated by hand using the Source Text option. Each frame a series of characters were introduced and removed from the source text. Eventually the series of changes resulted in an animation that seemed to type out the text and fix its own grammatical errors. This animation was then integrated into the adverts “title” by framing “Paul Pierce, The Truth” in a series of asterisks.
The final “Game Over” text was used in the same fashion as the other adverts in the original NBA series of ads and this was done in order to identify this example with that which inspired it.
Figure 6: Stills demonstrating use of text in project
Footage Saturation
The footage was altered slightly to increase its colour saturation. This gave more punch to the colour of the players and the court and allowed the text to stand stronger against the backdrop of the darkened crowd.
Flashing Effect
A flash effect was overlaid on the final composition at moments when time sped up and text appeared. This was done sparingly to mask transitions and to break up the aesthetic just enough to keep the viewer interested.
Composition of the Score
Finally a score was composed to work specially with the advertisement. This was done using Reason 4, and Ableton Live 7 music software. The intention was to create music that gradually introduced the tension of the moment and which built to its dramatic climax. The music needed to be full of confidence and attitude so as to compliment the feel of the series of advertisements the concept was based on. It also needed to compliment both contemporary electronic pop music and traditional rap culture that is so closely associated with basketball.
This was achieved by using a soft, dramatic bed of synth, with a rising 4/4 bass drum and harsh lead synth loop. This would then drop off as the ball flies through the air before climaxing with an explosion of sound as the basket is scored, including a hip hop break beat drum pattern.
User Testing
The final iterations were showed to independent observers to ensure that the text was legible, the animations successful and the music effective. An overall impression was sought also and any suggestions welcomed in order to achieve a better result.
Resulting changes included:
· Slowing down the introduction text sequence for better legibility
· Slowing down the music to have it suit the pace of the imagery
· Steadying overly shaky positioning of motion tracked text for legibility
Analysis
The initial design concept was too complex for it to achieve its goal. Even though it would have incorporated more richly designed assets, it was the easier and simpler option that proved most effective. The original tests using the more complex assets were quite impressive however and the process of creating those tests open options for more suitable projects in the future.
Time Remapping proved extremely challenging and powerful. Combined with the flash effect it proved a useful tool to define the main “moments” of the advert, however if not completed before other effects and animations the Time Remapping could make other actions impossible or more difficult.
Completing many tasks by hand rather than using presets or effects proved both enlightening and effective. Often the motion tracking was jumpy at best and these positions needed to be reconfigured by hand, while the handmade introduction text paid off hugely when compared to the text animation presets that could have been used.
The masking could have been achieved to a greater accuracy around the figures (in particular the hands) however to do this would have been extremely time consuming considering the masking was created to every frame and took up 90% of the time in creating the advert. It did however prove to be extremely effective and any inaccuracies are evident only to the keenest of observers.
The goal to create an advert in line with existing NBA ads was successful. This is due to the adverts ability to convey the attitude and confidence of the game and its best players. The original music and animations set it aside from other examples and give it a unique quality, while the features that evoked the original ads maintained its link with the established aesthetic.
Source: youtube.com
Last day of game development.. (Taken with instagram)
Source: SoundCloud / jackm22
Wh..What happened!?
So there I was trying out instagram and all of a sudden it takes over my development blog. Woops.. I must stop posting random pictures here, I bet there is a setting on the App that I can press.
Must sort that out.
Updates soon!
Settings settings… Dublin overtime. (Taken with instagram)
In the studio with Jack… (Taken with instagram)
Workin late (Taken with instagram)
