​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

  frameRate(20);

  textAlign(CENTER);

  textSize(50);

  textStyle(BOLD);

  noStroke();

}

​

function draw() {

    //background(0, 0, 255);

    push();

​

    for (let a = 0; a < 8; a+=2){

    for (let b = 0; b < 8; b+=2)

    drawPattern(width*(1+a)/8,height*(1+b)/8);

  }

​

​

if (mouseIsPressed) {

    blendMode(BLEND);

    noStroke();

    fill(random(23, 50), random(27, 60), random(125, 200));

    circles.push(new drawCircle());

    for(let i=0;i<circles.length;i++){

          circles[i].display();

    }

  } else {

    blendMode(MULTIPLY);

    circles=[];

  }

  fill(241, 243, 244);

  noStroke();

   scale(1, 1.5);

  text('製年一十正至國元大', width / 2, height / 2-80);

​

  pop();

​

}

​

​

function drawPattern(x,y){

  push();

  translate(x,y);

  scale(0.25);

  noStroke();

​

  for (let i = 0; i < 5; i++){

        rotate(90);

    for(let j = 10; j > 0; j--){

      if(j % 2 == 1 && i % 2 ==0 || j % 2 == 0 && i % 2 ==1){

       fill(random(23, 50), random(27, 60), random(125, 200));

      } else {

        fill(241, 243, 244);

      } 

      rect(0, 0, 30*j, 30*j);

​

    }

​

  }

  pop(); 

}

​

class drawCircle {

  constructor() {

    this.x = mouseX;

    this.y = mouseY;

    this.diameter = 100;

    //this.speed = 1;

  }

​

​

​

  display() {

    ellipse(this.x, this.y, this.diameter);

  }

}