Journal Entry for Unit 5

 

Weblinks

Site location: http://student.athabascau.ca/~trevorgi4/Unit5/

Animation 1: http://student.athabascau.ca/~trevorgi4/Unit5/projectControls.htm

Animation 2: http://student.athabascau.ca/~trevorgi4/Unit5/processProcedures.htm

Animation 3: http://student.athabascau.ca/~trevorgi4/Unit5/softwareDevelopment.htm (and main page).

 

Introduction

 

To better understand JavaScript I apoted to do some Animations, although these are mainly for ‘flair’ they all me to have a deeper understanding of how JavaScript works.

To do this work, I continued to do the Lynda.com ‘Web Developer’ learning path.

https://www.lynda.com/learning-paths/Web/become-a-web-developer

Specifically the JavaScript Essential Training by Morten Rand-Herdiksen

https://www.lynda.com/JavaScript-tutorials/JavaScript-Essential-Training/574716-2.html

This allowed me to explore the many features and functions that JavaScript has, and how it ties into the overall development of a website.

 

For my task specifically, which was to create animations (both canvas and SVG), I also researched the following:

 

I began by creating simple SVGs to work from. To do this is originally used InkScape to create the SVGs and then various SVG optimization tools to get simplified versions of the animations for the final. There are many optimization tools out there and some are described in the section of this document that is related.

In the end however I ended up just creating the very specific coordinates for my animations on graph paper and converting these into SVGs.

There are 2 SVGs that I use in my final site. Because these are both animated in a similar function, they share a common script. This script is somewhat versatile, meaning it is somewhere between custom for this assignment and a framework. However to be an actual framework, there would need to be a complete re-build. It does however allow for other animations, that are similar, to be built with relative ease.

The second part was to use the HTML 5 Canvas object. For this I made a modified version of my unit 4 submission “MatixRain” where random streams of text go across the screen. Once a stream has passed then the final text of the image appears.

In this script a json object can be taken in and converted to a similar animation. It takes into account the size of the canvas and converts the text into the appropriate size to fit and final colors that should be rendered.

This script is also somewhere between custom for this assignment and a more generally usable script. In future iterations a text editor can be created that converts text entered into the json object that will be rendered. For this assignment however the json object is part of the script.

By creating both of these scripts I was able to get a good understanding of the following JavaScript principles:

What follows are the approaches that I took and the challenged that I faced to finish this assignment.

 

Starting out – Creating an animation

 

I began with the SVG animations, first is the “Bar Chart” SVG Animation, found on the “Project Controls” section of my website. Here are the notes that were created during completion of the task.

The starting code to animate one line:                

               

Some interesting methods from the SVG:

Thoughts on the way I am going about this:

Questions include:

I am having trouble getting the "Animation" to handle all of the amination functions. This is mainly because the requestAnimationFrame is scoped to the 'window' object, so I lose currently scoped referenced. After several hours of tying I have now turned to putting the animation separate from the class. To do this I am having a function in global scope responsible for the rAF (requestAnimationFrame).

Once the frame callback is executed the function will iterate over a list of objects that need the frame information and calls their animation function (i.e. - they will animate themselves). This is done with the use of 'static' list (which is not supported well in js and I am starting with a global variable) and a bool on the object (whether it wants to stay on the list). If the list is empty, the request frame function will stop.

Having restructured the class and the animation callback the whole script is functioning well. I do realize that what I am trying to do has been done very well by other already (some notable examples include:

 Google charts https://developers.google.com/chart/

Vivsus https://maxwellito.github.io/vivus/

 javascript.info (where I got some of the math from) https://javascript.info/

This code is not the best but creating it did take me through the gambit of javascript, such as: normal conventions in js, like: anonymous functions, storing functions in a variable, etc. It also showed me how it differs from other languages I have used, like: no enums, little class support, many public variables, and a looser structure to the code.

I am learning to embrace this less structure, although I am still writing more lines than needed (by far), this is way for me to better understand how the code is functioning.

To complete this first module if learned (and in many cases incorporated) the following:

Some items that have not yet tackled that I will focus on in upcoming work, are:

Overall I am happy with the way this animation class module turned out. Going forward I will lean more on other developer's code to complete my own. I feel like I have a good idea on how to leverages other's work and know how to put it to good use.

The next step is to extend the framework to make another animation that includes animating over a spline. This will use the line animation and return a 'point at' where I will set the transform of another object.

 

Step 2 – Extending the script for another animation

First, what am I trying to do:

 

Discussion:

 

I have created a new SVG file in InkScape and cleaned it (reduced the SVG XML markup for production use). To do this I tried various optimizers online. Even after optimization though there was still cleaning to do. This was mainly around styles, path orders/groupings, and providing class/ids to each path.

 

The tools I tried for optimization are here:

In the end I used ofoct.com, but do think I will try to use petercollinridge.appspot.com first in the future, the class groping is a really smart idea.

 

First step is to modify the code to include a 'point-at' variable that tell me the location on the screen where the dasharrayoffset is. This will allow me to attach another object to that location. In other words:

 

Next, we are using different element types, so far there was only polylines. I could change all types to be polylines and continue, but I do want to limit the animation possibilities for this fact.

 

Next is how to get updates to the object is going to follow the spline animation. Right now, the spline is (or any animated object) is being updated through a call back. But what is needed here, is for the follow object to get the updated points at each frame and pass this on. This is needed so we do not have multiple objects requesting a frame (that do not need one). Meaning the ‘spline’ will take care of the progress measurement and should pass this on to its children.  

 

Finally, we need to take in an array of follow objects and aminate them over a single spline.

 

Notes of follow objects:

These are general notes on how the follow class should function (focusing on the group follow structure)

  1. Create lead follow object
  2. Create spline to be followed
  3. Create follower objects (array)
  4. Pass in the follower objects and the spline to the lead object
  5. Set off animation for spline
    1. Note: spline should always have a pointAt position (part of construction)
  6. Check the spline for timeout start/stop (even though this will have its own).
    1. Note: will this need a delay then? Could request frames and do nothing with them, but this is waste.
    2. If it does its timeout then alignment may be an issue (I.e. - could be a frame behind)
    3. Test this.
  7. Set off animation on lead follow object
    1. Note: this is only to be in the callback loop with the spline, all information about the animation should come from the spline
  8. Update cycle
    1. For each following object
      1. Set position to pointAt (either call as part of the parent or attach pointAt to this).
      2. Check to see if current position is farther along the path then when the follow object started
  1. Once list is empty, stop animation (is this needed if everything is based on the spline).

 

The above covers my thought process while getting the ‘spline’ animation to work with the original class. I did my best to explain this, but obviously one needs to read and understand the code with this explanation to see the challenges that were worked through in getting to a final working code.

 

Moving On – Working with the canvas

 

This will be the final animation that I put together for this unit.

 

In this animation I am taking a step back from SVGs and the animation class I created and will focus on using the canvas element.

 

This animation will follow the same idea that I did in Unit 4 with some modifications:

 

To do this I want to place and html element with the all the text (and white space) needed to render the final canvas.

 

The basic flow of the code is as follows:

One item I would have liked to incorporate into this is to have one char fade in at a time, rather than all at once, but this can be implemented in future versions of this code.

The final result took a while, with many challenges, but I am happy with the way it turned out.

 

Making It Production Ready

 

So far, the scripts have been created in line with their own HTML document, but for the final submission they needed to be able to be used as separately linked JavaScript files in my website. The following are notes from the code reviewed that I performed.

SVG

 

MatrixRain

 

Outro – Final Thoughts

 

In closing, I have created 3 aminations spanning 2 scripts. These scripts are flexible enough to take on different (specific) animations types. Through this process I have learned a lot about how JavaScript is created and implemented in web development.

Some items that I did not cover in great extent are accessing of the DOM and manipulating it. This was a conscious decision. The main reason I did not focus on this for unit is because I realized that there are a lot of frameworks and libraries dedicated to just this, and this is part of upcoming units.

With that said I took this opportunity to dive into vanilla JavaScript and work within it’s confines.

The final code also uses newer concepts of JavaScript, like classes, these would need to be converted to support older browsers as well. This is something that can be looked at in future units as well. One such library is “Babel” https://babeljs.io/.

 

Mapping – Back to the personas

 

Mapping this back to my persona’s is more difficult. My site is one that is more content based, meaning I am trying to deliver a more information focused site and animations do not really fit this. But having said there is not much JavaScript related that is a direct connection to these personas.

However, some of what I am trying to highlight on my site is software development, and in this context having custom made scripts can help highlight what my abilities are. In addition part of being a professional is polish and having these aminations is a type of polish to compliment my skills.

I will continue this type of polish in future units, by some redesign of the layout and using CSS/JS to give the overall look of the site a cleaner look and feel.