I Used Code to Create Animation. Here’s How. | by Matt Przybyla | Towards Data Science

IntroductionProcessingCodingExampleSummaryReferences
Introduction
Processing
Coding
Example
Summary
References
From my article you will learn two main takeaways:
1. What the Processing software platform is.
2. How to execute code to create an entertaining and beautiful animation.
You do not need to be an expert coder or software developer to create awesome visualizations. In this tutorial and outline, there are several ways to show off what you can do with a little bit of code and a little bit of Processing magic. All of the principles from this article can be applied to visualizing data science initiatives as well. Ultimately, you will be able to present a moving animation; an infographic, a funny cartoon, or a story with powerful visuals. This tool can be used for explaining complex data science results to nontechnical uses through the use of easy to digest visualization and animation.
The example in this article is specifically displaying a sailboat going through a thunderstorm on the ocean. Charts, graphs, and maps, akin to Excel, Tableau, or Google Data Studio can be executed in Processing as well. To learn more about Processing read below, as well as further explanations of the code used, and resources for more code. Finally, if you would like to skip to the animation at the end, click on the video.
Processing [3] is a software that not many people have heard of but is extremely valuable, and of course, fun to use. It is considered a sketchbook for coding unique visualizations. These visuals can be considered art even, and because the code is written line by line by the user, the number of creations are endless. Mainly composed of Java code, the user creates programming classes and voids that inherit from one another, which will ultimately create shapes that move and become animated.
The great part about Processing and Java is that you do not need to be an expert data scientist or software engineer to use this tool.
Because it is open-source, meaning there is tons of available information and code out there to use, you can find templates, tutorials, and ideas, right on their site that allows you to make those same visualizations and animations. Once you get used to it, too, and learn from it, you can then add your own code and spin to create a personalized output to share.
If you are interested in the code itself, read here; if not, keep scrolling to see what the finished product looks like, as well as information on usable templates and examples.
Lightning Animation
I will outline one of the classes used in the final visualization of this article here. The lightning class is a yellow, animated shape that will hit the boat in this rainstorm. It is a class that includes the color, position, and shape coordinates of the object. As you can see, there are several vertexes, which are the positions of the X and Y coordinates, ultimately serving as the outline of the lightning shape. You fill the lighting outline with that same color so that it looks completely solid. The code [6] below, is what creates the lightning shape:
class Lightning {color c;float xpos;float ypos;Lightning(color tempc, float tempxpos, float tempypos) {c = tempc;xpos = tempxpos;ypos = tempypos;}void display(){beginShape();noStroke();fill(c);vertex(xpos+246, 0);vertex(xpos+145, ypos-285);vertex(xpos+172, ypos-269);vertex(xpos+54, ypos-184);vertex(xpos+89, ypos-178);vertex(xpos, ypos);vertex(xpos+112, ypos-187);vertex(xpos+94, ypos-191);vertex(xpos+210, ypos-278);vertex(xpos+189, ypos-291);vertex(xpos+300, 0);endShape(CLOSE);endShape(CLOSE);}}
The above code refers to a specific shape, however, there is a certain template or format that you can follow to develop your first, simple animation. The usual template of code is:
void setup() — the size of the shape
void draw() — the color of the background
There are several other parts of Processing that are unique, like mouse-clicked, which means when you click your mouse this X animation will occur.
To find an abundance of examples to practice with, OpenProcessing[5] compiles a unique list on their website.
This code [6] is some of the code used to create the animation in the video. It is quite comprehensive but is a beneficial way to learn how to include different colors, shapes, and animations.
The final product. Here is the animation [7]. After executing the code, or ‘hitting play’, the sailboat will start moving in the rainstorm, followed by some damage in the boat from the strike of the lightning, and will continue moving to the right on the water, also becoming closer to the moving windmill:
Processing can seem intimidating at first, but with the use of code samples, examples, and tutorials, you can learn to animate pretty much anything you want. Whether it is abstract art, a chart, a comic book-like animation, or a boat sailing through the water in a storm, Processing allows users to express their creativity. With tools like Tableau being the frontrunner of visualizations, this software proves to be a unique skill set you could employ as a part of your resume, education, or job, especially as a data scientist and even a software engineer. I hope you found this article interesting, thank you for reading! If you have any questions, feel free to comment below.
[1] Photo by KOBU Agency on Unsplash, (2018)
[2] M.Przybyla, Processing screenshot, (2020)
[3] Processing, (2020)
[4] Photo by Irvan Smith on Unsplash, (2018)
[5] OpenProcessing, (2020)
[6] M.Przybyla, gist, (2020)
[7] M.Przybyla, animation, (2020)