This animation is the backside of a snowman.
The snowman animation was made with the program listed below. The version on the left uses poor variable and method names. The version on the right has been edited to use clearer names (and includes comments!). They both run exactly the same way.
Look at the bolded items have been changed to make the program more readable. Just as naming variables properly makes your code more readable, naming methods properly does the same.
Original Version
float [] sfx;
float [] sfy;
float [] sfd;
int nf;
public void setup() {
size(400, 400);
background(255);
nf = 25;
sfx = new float[nf];
blitzen(sfx, width);
sfy = new float[nf];
blitzen(sfy, height * -1);
sfd = new float[nf];
blitzen(sfd, 8);
}
public void blitzen(float[] arr, float m) {
int i = 0;
while( i < arr.length ) {
arr[i] = random(min(1, m), max(1, m));
i = i + 1;
}
}
public void draw() {
dasher();
comet();
cupid();
}
public void cupid() {
int i = 0;
noStroke();
fill(255);
while(i < sfx.length) {
ellipse(sfx[i], sfy[i], sfd[i], sfd[i]);
sfy[i] = sfy[i] + random(1,3);
if(sfy[i] > height + 5) {
sfy[i] = random(-5, -10);
sfx[i] = random(1, width);
}
i = i + 1;
}
}
public void comet() {
stroke(100);
strokeWeight(2);
fill(255);
float db = height / 4;
float dm = height / 5;
float dt = height / 6;
ellipse(width/2, height - db / 2, db * 1.2f, db);
ellipse(width/2, height - db - dm / 2, dm *1.2f, dm);
ellipse(width/2, height - db - dm - dt / 2, dt *1.2f, dt);
}
public void dasher() {
// Light Blue
float rd = 135;
float gn = 206;
float bl = 245;
strokeWeight(1);
int steps = (int)height;
float dr = (255 - rd) / steps;
float dg = (255 - gn) / steps;
float db = (255 - bl) / steps;
int stripe = 0;
while(stripe < steps) {
stroke(rd, gn, bl);
line(0, stripe, width, stripe + 1);
stripe = stripe + 1;
rd = rd + dr;
gn = gn + dg;
bl = bl + db;
}
}
Clearer Version
float [] snowFlakeXList;
float [] snowFlakeYList;
float [] snowFlakeDiameterList;
int numFlakes;
public void setup() {
size(400, 400);
background(255); // White
numFlakes = 25;
snowFlakeXList = new float[numFlakes];
randomizeList(snowFlakeXList, width);
snowFlakeYList = new float[numFlakes];
randomizeList(snowFlakeYList, height * -1);
snowFlakeDiameterList = new float[numFlakes];
randomizeList(snowFlakeDiameterList, 8);
}
// Set each item in the given list to a value between 1 and maxValue
public void randomizeList(float[] list, float maxValue) {
int i = 0;
while( i < list.length ) {
list[i] = random(min(1, maxValue), max(1, maxValue));
i = i + 1;
}
}
public void draw() {
drawSky();
drawSnowMan();
drawSnowFlakes();
}
public void drawSnowFlakes() {
int i = 0;
noStroke();
fill(255);
while(i < snowFlakeXList.length) {
ellipse(snowFlakeXList[i], snowFlakeYList[i], snowFlakeDiameterList[i], snowFlakeDiameterList[i]);
snowFlakeYList[i] = snowFlakeYList[i] + random(1,3);
if(snowFlakeYList[i] > height + 5) { // if flake falls off bottom
snowFlakeYList[i] = random(-5, -10); // move it to the top
snowFlakeXList[i] = random(1, width); // change its size
}
i = i + 1;
}
}
public void drawSnowMan() {
stroke(100);
strokeWeight(2);
fill(255);
float bottomDiameter = height / 4;
float middleDiameter = height / 5;
float topDiameter = height / 6;
ellipse(width/2, height - bottomDiameter / 2, bottomDiameter * 1.2f, bottomDiameter);
ellipse(width/2, height - bottomDiameter - middleDiameter / 2, middleDiameter *1.2f, middleDiameter);
ellipse(width/2, height - bottomDiameter - middleDiameter - topDiameter / 2, topDiameter *1.2f, topDiameter);
}
public void drawSky() {
// Light Blue to white gradient
float red = 135;
float green = 206;
float blue = 245;
strokeWeight(1);
int steps = (int)height;
float redChange = (255 - red) / steps;
float greenChange = (255 - green) / steps;
float blueChange = (255 - blue) / steps;
int stripe = 0;
while(stripe < steps) {
stroke(red, green, blue);
line(0, stripe, width, stripe + 1);
stripe = stripe + 1;
red = red + redChange;
green = green + greenChange;
blue = blue + blueChange;
}
}
In the example above, notice how we changed the name of the dasher() function to drawSky() both in the section of code that calls it as well as the section of code that defines it (lists the steps to drawSky()). That's all we're asking you to do here, but for the highway animation.
This animation was made with this Processing code.
The programmers made an interesting animation, but the code is a little hard to follow because they did not use very helpful variable and function names.
Highway Animation Code