Recitation: Array-Amber

Step 1&2

This is what I built based on the Taichi I made for the last recitation:

And here is my code:

float []angle;
float []Scale;
int []tScale;
int m=0;
color []colors;

void setup(){
  size(600,600);
  angle = new float[50];
  Scale = new float[50];
  tScale = new int[50];
  colors = new color[50];
  for (int i = 0; i<30; i++){
    tScale[i] = 1;
    Scale[i] = 1;
    colors[i] = color(random(255),random(255),random(255));
  }
}

void draw(){
  background(255);
  for (int a = 1; a<5; a++){
    for (int b = 1; b<5; b++){
      rotateTaichi(75+(a-1)*150,75+(b-1)*150,m,colors[m]);
      m = m+1;
    }
  }
  m = 0;
  //println(m);
}

void taichi(color c){
  fill(c);
  arc(0,0,100,100,0,PI,PIE);
  fill(255);
  arc(0,0,100,100,PI,2*PI);
  
  noStroke();
  fill(c);
  circle(-25,0,50);
  fill(255);
  circle(25,0,50);
  
  noStroke();
  fill(c);
  circle(25,0,20);
  fill(255);
  circle(-25,0,20);
}

void rotateTaichi(int x,int y,int k,color c){
  Scale[k] = Scale[k]+0.01*tScale[k];
  if (Scale[k]<0.3 || Scale[k]>1){
    tScale[k] = -tScale[k];
  }
  //println(k,Scale[k],tScale[k]);
  push();
  translate(x,y);
  rotate(radians(angle[k]));
  angle[k] = angle[k]+1;
  
  scale(Scale[k]);
  taichi(c);
  pop();
}

Step 3

In this step, I planned to make many bouncing Taichis in the screen but I have already made the bouncing smiling faces in class. So I made all the Taichis to rotate and the center is the center of the screen. This is what I made:

This is my code: 

color []colors;
float []x;
float []y;
float []dia;
float []angle;
float []Scale;
float []spd;


void setup(){
  size(600,600);
  colors = new color[50];
  x = new float[50];
  y = new float[50];
  dia = new float[50];
  angle = new float[50];
  Scale = new float[50];
  spd = new float[50];
  for (int i=0; i<50; i++){
    colors[i] = color(random(255),random(255),random(255));
    x[i] = random(100,width-100);
    y[i] = random(100,height-100);
    dia[i] = random(15,40);
    angle [i] = 0;
    Scale[i] = random(0.5,1);
    spd[i] = random(0.5,2.5);
  }
}

void draw(){
  background(255);
  for (int i=0; i<50;i++){
    taichi(x[i],y[i],colors[i],Scale[i],angle[i]);
    angle[i] = angle[i]+spd[i];
  }
}

void taichi(float x,float y, color c,float Scale,float angle){
  push();
  translate(300,300);
  rotate(radians(angle));
  scale(Scale);
  fill(c);
  arc(x,y,100,100,0,PI,PIE);
  fill(255);
  arc(x,y,100,100,PI,2*PI);
  
  push();
  noStroke();
  fill(c);
  circle(x-25,y,50);
  fill(255);
  circle(x+25,y,50);
  
  noStroke();
  fill(c);
  circle(x+25,y,20);
  fill(255);
  circle(x-25,y,20);
  pop();
  pop();
}

I think the most challenging part is to use the function translate() and push(), pop() properly to make each Taichi rotate.

Additional

Instead of rectangles, I use some loops instead. Actually they are just circles with stroke that weighs 1/3 diameter of the circle. This is what I made:

This is the code:

float []x;
float []y;
float []dia;
float []dis;
int []colors;

void setup(){
 size(600,600);
 colorMode(HSB,100);
 x = new float[24*24];
 y = new float[24*24];
 dia = new float[24*24];
 colors = new int[24*24];
 dis = new float[24*24];
 for (int i=0; i<24*24;i++){
   colors[i] = int(random(0,100));
 }
}

void draw(){
  background(0,0,0);
  for (int i = 0; i<23; i++){
    for(int j = 0; j<23; j++){
      int index = i + j*23;
      dis[index] = dist(mouseX,mouseY,x[index],y[index]);
      dia[index] = 15;
      x[index] = i*25+25;
      y[index] = j*25+25;
      colors[index] = colors[index]+1;
      if (colors[index] >= 100){
        colors[index] = 0;
      }
      //if (dis[index]<=100){
      //  dia[index] = map(dis[index],0,100,5,15);
      //}
      dia[index] = map(constrain(dis[index],0,100),0,100,5,15);
       dot(i*25+25,j*25+25,dia[index],color(colors[index],50,100));
    }
  }
}

void dot(float x, float y,float d, color c){
  strokeWeight(d/3);
  stroke(c);
  fill(0,0,0);
  circle(x,y,d);
}

I actually misunderstood the hint of using function constrain() as in my assumption, I should use map() and an if statement. Later I found out that does this mean. I should get the distance of each circle to mouseX and mouseY and I only need the distances that are smaller than 100. Then I just need to use constrain instead of using a long if statement to save spaces. I keep my if statement here to remind me of the process and effort I’ve made.