On April 11, I attended the Processing Workshop held by Leon. In this workshop, we reviewed the functions in Processing we learned before and practiced them to make animation. We first reviewed some 2D primitives fictions such as ellipse(), rect() and so on. Leon also clearly introduced how to use rectMode() and ellipseMode() to adjust the position of the base point of the graph rotation. We used the following exercise to apply the functions we learned to make a red circle move.
Video of My Work 1
Code
int sizeOfBall=200;
void setup(){//This happens once
size (1000,800);
background(255,100,0);//background (0-255),background(r,g,b)
frameRate(15);//By default, the frameRate is 60 fps…
rectMode(CENTER);
}
void draw(){
println(frameCount);
background(255);
fill(255,0,0);//fill (r,g,b)
ellipse(width/2,frameCount, sizeOfBall, sizeOfBall);//a ball should exist…
//strokeWeight(5);
//stroke(0,255,0);
noStroke();
//the ball should go down…
//the ball should bounce back up when it hits the edge…
}
Then we learned how to change the color of a pattern, how to determine the rotation vertex of the pattern, how to make the pattern move with the mouse. Through Leon’s detailed explanation, I understand the meaning of each function. For example, I asked Leon what the frameRate function is. And then I learned that the frameRate is the frequency at which a continuous image is displayed. This workshop helped me solve my question about pushMatrix() and popMatrix(). I learned these two functions is just like the bracket to make a certain code only happen between push&pop.
Also, I learn the new functions vertex() and endShape(). With these two functions, I was able to draw patterns arbitrarily through Processing, which facilitated my ability to draw with Processing. This workshop is helpful for me as a beginner of Processing.
Video of My Work 2
Code
int sizeOfBall=200;
float r,g,b;
void setup(){//This happens once
size (1000,800);
background(255,100,0);//background (0-255),background(r,g,b)
frameRate(15);//By default, the frameRate is 60 fps…
// rectMode(CENTER);
}
void draw(){
println(frameCount);
background(255);
// r= random (255);// random( lowerValue, upperValue)
// g= random (255);
// b= random (255);
//fill(r,g,b,150);//fill (r,g,b,alpha)
colorMode(HSB);//h/s/b
//ellipse(mouseX,mouseY, sizeOfBall, sizeOfBall);//a ball should exist…
//strokeWeight(5);
//stroke(0,255,0);
noStroke();
//the ball should go down…
//the ball should bounce back up when it hits the edge…
//beginShape();
//vertex (10,45);
//vertex(50,200);
//vertex(20,600);
//vertex(700,50);
//endShape(CLOSE);
pushMatrix();
translate(width/2,height/2);//imagine a new screen vertex start from middle//my 0,0 position is width/2,height/2
rotate(radians(45));
rect(0,0,sizeOfBall,sizeOfBall);
popMatrix();//only happen between push&pop
fill(frameCount,255,255);
rect(mouseX, mouseY, 100,100);
//beginShape();
// vertex (mouseX+100, mouseY-50);
// vertex(mouseX-500,mouseY+60);
// vertex(mouseX+300,mouseY-54);
//endShape(CLOSE);
ellipse(0,0, sizeOfBall, sizeOfBall);
}