Recitation-Processing basis: Amber

This is the picture I chose. I saw this picture from a blogger I follow on the social media account but this mills wall really impresses me a lot. So I wanted to draw a mills wall myself using processing.

This is what  I drew during recitation:

This is my code:

float [] angle;
int [] r;
int [] g;
int [] b;
int m = 0, c=100;
float v = 1;

void setup() {
  size(600, 600);
  angle = new float[50];
  r = new int[50];
  g = new int[50];
  b = new int[50];
    r[1] = int(random(255));
    g[1] = int(random(230,255));
    b[1] = int(random(230,255));
  for (int i = 2; i < 30; i = i + 1) {
    r[i] = r[i-1];
    g[i] = g[i-1]-10;
    b[i] = r[i-1]-10;
  }
  for (int j=1;j<26;j=j+1){
    angle[j]=0;
  }
}

void draw() {
  // fill(255);
  // textFont('Georgia');
  background(255);
  
  for (int a=0;a<height;a++){
    push();
    stroke(map(a,0,height,100,255));
    line(0,a,width,a);
    pop();
  }
  for (int x = 0; x < width + 10; x = x + 100) {
    for (int y = 0; y < height + 10; y = y + 100) {
      m = m + 1;
      triRotate(x, y, m);
    }
  }
  m=0;
  fill(c);
  textSize(30);
   text("Click the mouse to blow the wind",45,550); 
  c=c+1;
  if (c>255){
    c=100;
  }
}

void triRotate(int x, int y, int k) {
  if (mousePressed == true && v <= 10){
    v = v+0.01;
  }else if(v > 1){
    v = v-0.01;
  }
  push();
  float posX = map(mouseX, 0, width, -10, 10);
  float posY = map(mouseY, 0, width, -10, 10);
  translate(x + posX, y + posY);
  rotate(radians(angle[k]));
  angle[k] = angle[k] + v;
  //console.log(angle[k])
  Tri();
  pop();
}

void Tri() {
  for (int i = 0; i < 9; i = i + 1) {
    fill(r[i],g[i],b[i]);
    triangle(0, 0, -30, 0, -30, -30);
    rotate(radians(45 * i));
  }
}

void mousePressed(){
    r[1] = int(random(255));
    g[1] = int(random(230,255));
    b[1] = int(random(230,255));
  for (int i = 2; i < 30; i = i + 1) {
    r[i] = r[i-1];
    g[i] = g[i-1]-10;
    b[i] = r[i-1]-10;
  }
}

Reflection  

I think basically, the picture drawn by processing is not as real as the photo and was monotonous. But by using “rotate” function, I can create a mill by only drawing one triangle. Then using two “for” loops, I can create a wall of mills. So compared to drawing by hand, coding by processing is a much faster and convenient way. Maybe with more advanced knowledge, I can have my drawing in processing much more beautiful.