​

// the angle from which the structure spins

var angle = 0;

​

// flags to use for button functions

let freeze_flag = 1;

let reverse_flag = 1;

​

function setup() {

  let my_art = createCanvas(600, 600);

  angleMode(DEGREES);

  // freeze pattern

  freeze_button = createButton('step 1: freeze pattern');

  freeze_button.position(15, 610);

  freeze_button.mousePressed(freezePattern);

  freeze_button.style('font-size', '18px');

  freeze_button.style('background-color', 255);

  // reverse color

  reverse_button = createButton('step 2: reverse color');

  reverse_button.position(215, 610);

  reverse_button.mousePressed(reverseColor);

  reverse_button.style('font-size', '18px');

  reverse_button.style('background-color', 255);

  // save pattern

  save_button = createButton('step 3: save pattern');

  save_button.position(415, 610);

  save_button.mousePressed(saveDrawing);

  save_button.style('font-size', '18px');

  save_button.style('background-color', 255);

}

​

class Rectangle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.height = 500;

    this.width = 4;

  }

  move(m) { 

    this.m = m;

    rotate(angle);

    if (freeze_flag == 1) {

      rotate(angle);

      angle += m;

    }

  }

  show(fill_color, stroke_color) {

    this.fill_color = fill_color;

    this.stroke_color = stroke_color;

    fill(fill_color);

    stroke(stroke_color);

    rect(this.x, this.y, this.height, this.width);

  }

}

​

function Dandelion(x, y) { 

  // number of rectangles

  for(i=0; i<70;i++) {

    dandelion = new Rectangle(x,y);

    if(reverse_flag == 1) {

      dandelion.show("#87CEEB", 10);

    } else {

      dandelion.show("#f4c2c2", 10);

    }

    // you can control the speed of rectangles by changing the argument

    dandelion.move(0.00005);

  }

}

​

function draw() {

  if(reverse_flag == 1){

    background("#f4c2c2");

  } else {

    background("#87CEEB");

  }

  //this is where i want the rectangle to rotate from which is the center

  translate(width/2, width/2);

  // translate(300, 300);

  rectMode(CENTER);

  Dandelion(0,0);

  Dandelion(0,100);

  Dandelion(0,150);

  // Dandelion(0,200);

  // Dandelion(0,250);

}

​

function freezePattern() {

  freeze_flag = -freeze_flag;

}

​

function reverseColor() {

  reverse_flag = -reverse_flag;

}

​

function saveDrawing() {

  save("rug_pattern.png");

}

​

​

​

​