I attended a Processing Basics Workshop hosted by IMA Fellow Leon. I decided to attend the workshop because I had very little experience with coding and wanted to catch up on basic commands that still seemed really unfamiliar to me, like boolean values, push and popMatrix, and how those commands relate to animation.
We first learned how to make shapes using the ellipse() and rect() function, and how to use the stroke() and strokeWeight() to change the look of the shape. Secondly, we then learned how to use mousePressed() vs. keyPressed(), and learned how to control the animation using the mouse across the screen.
The last thing we learned is pushMatrix and popMatrix, and how the commands relate to animation. I wanted to figure out how to make the circle then to bounce back to the middle of the screen, but could not figure out how to make it come back despite using negative x and y values to move it back. The final code and animation is attached below:
//float: inbetween integers set in range
int sizeOfBall = 200;
float r, g, b;
int speedX= 10;
int speedY = 10;
int posX, posY;
void setup() { //this happens once
size (600, 600); //size (width, height)
background (0); //background (0-255), background (r,g,b)
//frameRate(100); //by default the frameRate is 60 fps
//rectMode(CENTER); //moves the middle of the rectangle the center point
colorMode(HSB); //(r,g,b) h = hue, s = saturation, b = brightness?
posX = width/2;
posY = height/2 ;
}
void draw() { // this happens again and again…
println(frameCount);
r= random (255); //random (lowerValue, upperValue)
g= random (10);
b = random (50);
fill(255, 0, 0, 150); //fill (r,g,b, alpha)
strokeWeight(5);
stroke(0,255,0);
noStroke();
ellipse(mouseX, mouseY, sizeOfBall, sizeOfBall); // ellipse (x, y, width, height)
//a ball should exist… ellipse
//a ball should go down…
// the ball should bounce back up when it hits the edge…
rotate(radians (5));
rect (width/2, height/2, sizeOfBall, sizeOfBall);
vertex (mouseX *100, mouseY/50);
vertex (mouseX – 500, mouseY+60);
vertex (mouseX +300, mouseY+50);
pushMatrix();
translate(width/2, height/2); // my 0,0 position is width/2, height/2
rotate(radians(45));
rect (0,0, sizeOfBall, sizeOfBall);
fill(255);
rect(500,500, 50, 50);
Overall I am really glad I went to this workshop, because it caught me up on a lot of basics I felt that a lot of people in the class already knew. I understood better how to plot points for each of the different shapes that allow for variables and animation, and it also taught me how to use int(), float(), and boolean values, which are really valuable once we start to get to harder material. I can see myself using the basics taught in this workshop to further my understanding of Processing, and will use what I’ve been taught to work towards a more comprehensive final project.