Category: Inmi

Recitation 10: Object Oriented Programming by Lifan Yu (ly1164)

My object called “Plastic” contain all images of plastic bottles and their movements. This way, we can not only control the common ways of their movements (or their common parameters)  but also control their movements and parameters individually.

Source of the used image: Lifan Yu

Code:

ArrayList<Plastic> plasticList;
 PImage img2;
 
 void setup(){
   size(800,800);
 plasticList = new ArrayList<Plastic>();
  img2=loadImage("plastic.png");
 }
 
 void draw(){
   background(255);
   imageMode(CENTER);
    for(int k=0; k<plasticList.size(); k++){
    Plastic temp=plasticList.get(k);
    temp.display();
    temp.move();
   
  }
 }
 
 
   void keyPressed(){
  float x=map(mouseX,0,width,width/4,3*width/4);
  float y=map(mouseY,0,height,height/4,3*height/4);
  plasticList.add(new Plastic(x,y));
  
    
}

Create another tag called “Plastic”:

class Plastic {

  float x,y;
  float size;
  float speedX;
  float speedY;
  Plastic(float startingX, float startingY){
    x=startingX; 
    y=startingY;
    size=random(50,150);

    speedX=random(-10,10);
    speedY=random(1,15);
  }

    void display(){
      image(img2,x,y,size,size);
  }
  

  void move(){
    x+=speedX;
    y+=speedY;
    if(x<=0||x>=width){
      speedX=-speedX;
    }
    
    if(y<=0||y>=height){
      speedY=-speedY;
    }
    
  }
  
}

For this recitation, we first went through the content about “map()” function concerning what it is used for and how to use it. After this, we went separately to attend different workshops. I participated in the Object Oriented Programming workshop hosted by Tristan. 

During the workshop, we learned about two parts of an “object”, “class” and “instance”, and how to use them. By using “class”, we can make our code more concise and clear to read. We can also use “ArrayList” to create multiple objects. 

Exercise:

For exercise, I created a “class” called “Image” that generated two ellipses and one rectangle. I put them into random colors and set 20 of them off from the center of the canvas. For interaction, I used a “mouseMoved” function so that it can display the images based on the location of my mouse.

Here is the animation of my work.

Here is my code:

ArrayList<Image> images;

void setup(){
  size(1000,600);
  colorMode(HSB,360,100,100);
  images = new ArrayList<Image>();
  
  for(int i=0; i<20; i++){
    images.add(new Image(width/2, height/2,random(-5,5),random(-5,5),color(random(360),100,100)));    
  }
}

void draw(){
  background(270,100,100);
  
  for(int i=0; i<images.size(); i++){
    Image temp = images.get(i);
    temp.display();
    temp.move();
  }  
}

void mouseMoved(){
  images.add(new Image(mouseX,mouseY,random(-5,5),random(-5,5),color(random(360),100,100)));    
}

class Image{
  float x,y,spdX,spdY;
  color c;
  
  Image(float newX, float newY, float newSpdX, float newSpdY, color newC){
    spdX = newSpdX;
    spdY = newSpdY;
    c = newC;
    
    x = newX;
    y = newY;
  }
  
  void move(){
    x += spdX;
    y += spdY;
    if (x > width || x < 0){
      spdX *= -1;
    }
    if (y > height || y < 0){
      spdY *= -1;
    }
  }
  
  void display(){
    fill(c);
    ellipse(x,y,30,30);
    ellipse(x+40,y,30,30);
    rect(x,y,40,40);
  }
}

Code:

https://github.com/JooooosephY/Recitation-10/tree/master/animation

Introduction:

For recitation 10, we attended the workshop for map() function and we could choose another workshop based on our interest. Since my group decides to make a game for the final project, the way to organize the code is really important. Thus, I attended the Object-Oriented Programming workshop. In the workshop, Tristan taught us something about class. Basically, he showed us how to code as well as why we should do it in this way. In this sense, we can directly see the structure of the code so that we can understand OOP well. As for the exercise, we were required to use OOP to write an animation with some interaction at some level. Besides, we also need to use the map() function when we wrote the code. Here are the videos about how my exercise looks like. 

Basically, when you press the space on the keyboard, it will generate several crying faces with different colors and sizes from random positions. And the speed of each face depends on where the mouse is when you press the space. And I map the position of the mouse to the speed of the faces. Thus, when you interact with it, it seems all the new faces are moving towards the mouse.