Exercise:

Interesting functions I used:

fill, ellipse, noStroke

mousePressed

keyPressed

Drawing on what I learned in class this week, I modified the code for a bouncing ball and made it a sketch with 2 colorful bouncing balls. To change the balls’ color, I used both keyPressed and mousePressed. I separate the code for color-changing, so that the 2 balls would display different colors whenever I hit the mouse or the keyboard. I also made the 2 balls bouncing in a symmetric manner, it is interesting to see them crossing each other.

the code:

float x = 0;
float y = 0;
float Xspeed = 5;
float Yspeed = 3;

float red = 255;
float green = 255;
float blue = 255;

void setup(){
  size(500, 500);
  background(0);
}
void draw(){
  noStroke();
  fill(255, 255, 255, 50);
  rect(0, 0, width, height);
  
 fill(red, green, blue);
  if(keyPressed){
  fill(random(255), random(255), random(255));
  }
  ellipse(x, y, 50, 50);
  
 fill(green, red, blue);
 if(keyPressed){
   fill(random(255), random(255), random(255));
 }
  ellipse(y, x, 50, 50);
 
  if (x > width || x < 0){
    Xspeed=-Xspeed;
  }
    if (y > height || y < 0){
      Yspeed = -Yspeed;
  }
  x = x + Xspeed;
  y = y + Yspeed;
}
void mousePressed(){
  red = random (255);
  green = random (255);
  blue = random (255);
}

Homework:

Step 1: the basics

Code:

size(600, 600);
background(255);
stroke(0);
strokeWeight(18);
ellipse(width/2, height/2, 280, 280);

Step 2:  to expand and contract

In order to expand and contract the circle, I defined the circleSize function. Using the “if” sentence I can expand the circle as I want, but to contract is more difficult. At first I wrote the code as follows:

  if (circleSize<=120){

    ellipse(circleX, circleY, circleSize, circleSize);

    circleSize = circleSize + 0.5;

  }

  if (circleSize>120){

    ellipse(circleX, circleY, circleSize, circleSize);

    circleSize = circleSize – 0.5;

The problem with this is the circle does not contract when it reaches the limit. Because the when circleSize>120, circleSize-0.5, and it goes back to the first stage and increases 0.5, then it enters the second stage again. So it is an endless and meaningless loop. I cannot write the code like this. With a Fellow’s help I separate the process into 2 stages. The following code works:

//speed control
if (state ==1){
circleSize=circleSize+5;
}

if (state ==2){
circleSize=circleSize-5;
}

ellipse(circleX, circleY, circleSize, circleSize);

//change state

if(circleSize>=250){
state=2;
}

if(circleSize<=50){
state=1;
}
}

Step 3: to add color

I changed the colorMode to HSB, defined “float c” and used the code

stroke(c, 255, 255);

Step 4: to move around with keyboard arrows

To move the circle around with keyboard, I used the “void keyPressed(){ ” I made the center of the circle a variable, and sets its initial place at the center of the canvas. Using the following if/else sentence I can move the circle freely.

if (keyCode == UP) {
circleY -= 10;
} else if (keyCode == DOWN) {
circleY += 10;
}

complete code:

float circleSize = 20.0;
int state = 1;

int circleX;
int circleY;
float c;

// state 1 = increase, state 2 = decrease;

void setup() {
  size(600, 600);
  colorMode(HSB);

  circleY = height / 2;
  circleX = width / 2;
}

void draw(){
  background(0, 0, 255);
 if (c>=255) c=0; else c++;

stroke(c, 255, 255);
strokeWeight(18);

//speed control
if (state ==1){
circleSize=circleSize+5;
}

if (state ==2){
  circleSize=circleSize-5;
}

ellipse(circleX, circleY, circleSize, circleSize);

//change state

if(circleSize>=250){
 state=2; 
}

if(circleSize<=50){
  state=1;  
}  
}

//to move around
void keyPressed(){
  
    if (keyCode == UP) {
      circleY -= 10;
    } else if (keyCode == DOWN) {
      circleY += 10;
    } 
     if (keyCode == LEFT) {
      circleX -= 10;
    } else if (keyCode == RIGHT) {
      circleX += 10;
    } 
}

The video：