Reflection
I wanted to enhance my skills then apply it to my final project, so I chose this OOP workshop. Firstly, we created a class called “Emoji” in another tab. In this class, we defined the values, Emoji ( later I learned that “Emoji” it’s the abbreviation of “Emoji Emoji” adjusted by the developer. ), display(), and move(). After that, in the first tab, we uploaded every new emoji in the setup() function and used them in the draw() function. To improve the codes, we added the mouse press interaction and put all the emojis in an array, which has a different format from the array I learned before.
After class, I realized this works well when we need to draw things in a same pattern. So maybe we don’t need to do the same things to pictures in our final project. But still, I did some improvements to the codes.
Processing Codes
ArrayList<Shape> shapeList;
void setup() {
size(600, 600);
background(255);
shapeList = new ArrayList<Shape>();
//draw the new shape
for (int i=0; i<50; i++) {
shapeList.add(new Shape(random(width), random(height), color(0, 0, random(255),200)));
}
}
void draw() {
//background(255);
for(int i=0; i<shapeList.size();i++){
Shape temp = shapeList.get(i);
temp.display(); //same as emojiList[i]
temp.move();
}
}
void mousePressed(){
float x =map(mouseX, 0, width, width/4, 3*width/4);
float y =map(mouseX, 0, height, height/4, 3*height/4);
shapeList.add(new Shape(x, y, color(random(255), random(255), random(255))));
}
#TabName: Shape
class Shape {
//only define them w/o value. The default values are all 0 here
float x, y;
float size;
color clr;
float spdX;
Shape(float startingX, float startingY, color startingColor) { //without the para, it will be the same;
//Not x,y, or it will not refer to the one defined at the beginning
x = startingX;
y = startingY;
size = random(50, 200);
clr = startingColor;
spdX = random(-10, 10);
}
void display() {
noStroke();
fill(clr);
square(x,y,size);
}
void move() {
x += spdX;
if (x<0 || x>width) {
spdX = -spdX;
}
}
}
Final Creation
Basically, there are all blue squares moving horizontally. When they touch the edges they will bounce back. When you press your mouse, a new square with random color will pop up and also begin to move.