Making Visuals with code
This section shows how I coded some visual effects. I can code, debug, test and run Java, HTML, Javascript, CSS, Python, C#, C++ (coding language for Arduino), C programming, and Processing code. I also do block coding or node coding, for Max8, to create Audio-Visuals, which you can find in the section "Audio-Visuals (Max8)").
Coding- Processing code: Data Visualisation - Jacket colour data
Data was recorded on how many brown, green, and blue jackets were observed on people I saw on the weekend, Friday, Saturday and Sunday, AM and PM. This was to be compared with another observer’s data. ​
​
This visual was coded by me, in Processing Code. It shows these weekend days, AM an PM, with the darker colours representing my observations and the lighter observations from the other observer for how many blue, green and brown jackets were observed. ​
​
The data was recorded and input as 2 separate CSV files. The visual changes depending on the data.​
Coding-Processing code: Data Visualisation -​Wind data [0:09]
I came up with the concept of this visual to display the wind direction (white ball) and wind speed (black ball) across Canada on a given day. Data online was incomplete, so I filled in some blanks to demonstrate the concept. Data was for key locations where the wind was recorded (represented by the red dots). The red, yellow, green, blue represents the speed of wind, from slowest to fastest, as seen in the bottom bar of the video. The code will adjust color spectrum from red (slowest) to blue (fastest), for example, purple may even show up, depending on the data captured​.
Coding-Java: Colour editing photos using java code
Used java code to change the original image to the sepia image on the right.
Coding-Java: Java Drawings [0:26]
​I animated these geometric shapes in Java, not an animated software, just Java in an eclipse IDE using Turtle class. I wrote a program for the user to draw 2 sets of spiral patterns by entering 2 numbers, each number determines the number spirals/edges e.g. 3 is 3 spirals and originates from a triangle (3 edges) i.e 3 triangles spiraling from the centre. The Spiral video shows a visual that was generated with and input of 3 and 5, so the number of spirals emerging from the centre would be 3 sets of triangles, and then 5 sets of pentagons. The pentagon video just illustrates drawings in Java, making them disappear and moving them. The star video just illustrates drawing and changing color of pen.
Coding-Processing code: Data visualization – Sketch, what did I hear
I used processing code to draw what I heard on a given soundtrack. I input the the different sounds and when I heard them, into a program I wrote to output this visual description.​
​
The distinct sounds I heard, were footsteps, piano, a sci-fi sound and imagined the rest e.g. if a footstep was going backward or piano keys played were black instead of white.​
​
The left side of the visual is where the sound starts and the right side is where it ends.​
Coding-Javascript,HTML: Code to make web animations
I created these simple animations, 3D models and texturing using HTML, Javascript for a website. They have not been published to the web yet. The animation and model-building was all done in Javascript by me, as well as the buttons and window sizing in HTML. The user can toggle textures and toggle the animation on/off. Someone else did the CSS and the rest of the HTML work.
