Life of Tree - OpenProcessing

mySketch.js
style.css
index.html
xxxxxxxxxx
 
var tickets=('f4e409-eeba0b-c36f09-a63c06-710000').split("-").map(a => "#" + a)
const Y_AXIS = 1;
const X_AXIS = 2;
let c1, c2;
​
function setup() {
  createCanvas(900, 900);
  background(255)
  ra=int(random(0, 4));
  ra1=int(random(0, 4));
  ra2=int(random(0, 4));
  ra3=int(random(0, 4));
  //noLoop();
}
​
function draw() {
  c1=color(mouseX*0.2+mouseY*0.2,169,127)
  c2=color(255, 255, 255)
  setGradient(0, 0, width, height/2, c1, c2, Y_AXIS);
  if(mouseIsPressed===true){
    ra=int(random(0, 4));
    ra1=int(random(0, 4));
    ra2=int(random(0, 4));
    ra3=int(random(0, 4));
  }
  branch();
  crown();
  leaf();
  leaf2()
  leaf3();
  dec();
  flowers();
  icon();
}
​
function branch(){
  strokeWeight(5)
  stroke(tickets[4])
  //主幹
  line(width/2, 700, width/2, 300)
  //下主枝
  bezier(width/2, 700, 500 , 800, 700, 600, 800, 650)
  bezier(width/2, 700, 400 , 800, 200, 600, 100, 650)
  //上主枝
  bezier(width/2, 450, 500 , 455, 500, 410, 600, 400)
  bezier(width/2, 450, 400 , 455, 400, 410, 300, 400)
  //下細枝1
  strokeWeight(3)
  bezier(width/2+10, 715, 500 , 800, 700, 775, 770, 800)
  bezier(width/2-10, 715, 400 , 800, 200, 775, 130, 800)
  //下細枝2
  bezier(width/2+100, 717, 575 , 710, 650, 525, 700, 600)
  bezier(width/2-100, 717, 325 , 710, 250, 525, 200, 600)
  //上細枝
  bezier(width/2+50, 430, 500 , 455, 530, 320, 570, 370)
  bezier(width/2-50, 430, 400 , 455, 370, 320, 330, 370)
}
​
function flowers(){
  push();
  strokeWeight(7)
  //頂
  fill(tickets[ra]);
  circle(width/2, 260, 50+mouseX/50)
  //上
  strokeWeight(5)
  fill(tickets[ra1]);
  circle(300, 360, 30+mouseX/50)
  circle(600, 360, 30+mouseX/50)
  fill(tickets[ra2]);
  circle(350, 385, 10+mouseX/60)
  circle(550, 385, 10+mouseX/60)  
  push()
  fill('white');
  noStroke();
  circle(400, 460, 32)
  circle(500, 460, 32)
  pop()
  circle(400, 460, 10+mouseX/60)
  circle(500, 460, 10+mouseX/60)
  //下
  push()
  fill('white');
  noStroke();
  circle(770, 600, 60)
  circle(130, 600, 60)
  pop()
  fill(tickets[ra3]);
  circle(770, 600, 50+mouseX/50)
  circle(130, 600, 50+mouseX/50)
  push()
  fill('white');
  noStroke();
  circle(720, 750, 55)
  circle(180, 750, 55)
  pop()
  fill(tickets[ra2]);
  circle(720, 750, 30+mouseX/50)
  circle(180, 750, 30+mouseX/50)
  pop();
}
​
function leaf3(){
  strokeWeight(2)
  //right 1
  push();
  translate(100,-45)
  scale(0.5)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 1
  push();
  translate(350,-45)
  scale(0.5)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
  
  //right 2
  push();
  translate(95,-25)
  scale(0.5)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 2
  push();
  translate(355,-25)
  scale(0.5)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
  
  //right 3
  push();
  translate(95,0)
  scale(0.5)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 3
  push();
  translate(355,0)
  scale(0.5)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
  
  //right 4
  push();
  translate(95,25)
  scale(0.5)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 4
  push();
  translate(355,25)
  scale(0.5)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
}
​
function leaf2(){
  strokeWeight(2)
  //right 1
  push();
  translate(-150,-245)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 1
  push();
  translate(150,-245)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
  
  //right 2
  push();
  translate(-180,-235)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 2
  push();
  translate(180,-235)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
  
  //right 3
  push();
  translate(-210,-220)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 3
  push();
  translate(210,-220)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
}
​
function leaf(){
  //下粗
  beginShape();
  strokeWeight(5)
  vertex(800, 650)
  bezierVertex(835, 620, 850, 630, 820, 650)
  vertex(820, 650)
  bezierVertex(835, 660, 845, 690, 800, 650)
  endShape();
  beginShape();
  strokeWeight(5)
  vertex(100, 650)
  bezierVertex(65, 620, 50, 630, 80, 650)
  vertex(80, 650)
  bezierVertex(65, 660, 55, 690, 100, 650)
  endShape();
  //上粗
  beginShape();
  strokeWeight(5);
  vertex(600,400)
  bezierVertex(650, 360, 670, 380, 650, 390)
  vertex(650, 390);
  bezierVertex(670, 390, 680, 405, 640, 410)
  vertex(640, 410);
  bezierVertex(650, 420, 625, 430, 600, 400)
  endShape();
  beginShape();
  strokeWeight(5);
  vertex(300,400)
  bezierVertex(250, 360, 230, 380, 250, 390)
  vertex(250, 390);
  bezierVertex(230, 390, 220, 405, 260, 410)
  vertex(260, 410);
  bezierVertex(250, 420, 275, 430, 300, 400)
  endShape();
  //下枝葉
  //right 1
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  //left 1
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  
  //right 2
  push();
  translate(-30, 10)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 2
  push();
  translate(30, 10)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
  
  //right 3
  push();
  translate(-60, 20)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 3
  push();
  translate(60, 20)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
  
  //right 4
  push();
  translate(-90, 35)
  beginShape();
  strokeWeight(2);
  vertex(715,650)
  bezierVertex(750, 680, 755, 685, 755, 670)
  endShape();
  push();
  beginShape();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(755, 670);
  bezierVertex(770, 665, 780, 705, 760, 690)
  vertex(760, 690);
  bezierVertex(750, 710, 740, 690, 745, 685)
  endShape();
  pop();
  pop();
  //left 4
  push();
  translate(90, 35)
  beginShape();
  strokeWeight(2);
  vertex(185,650)
  bezierVertex(150, 680, 145, 685, 145, 670)
  endShape();
  beginShape();
  push();
  rotate(sin(frameCount/30)/500)
  strokeWeight(3)
  stroke('white')
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  beginShape();
  strokeWeight(2)
  stroke(tickets[4])
  vertex(145, 670);
  bezierVertex(130, 665, 120, 705, 140, 690)
  vertex(140, 690);
  bezierVertex(150, 710, 160, 690, 155, 685)
  endShape();
  pop();
  pop();
}
​
function icon(){
  strokeWeight(4)
  push();
  translate(180, -300)
  for(var i=0;i<17;i++){
    square(480+i*5, 550-i*5, 1);
    square(480+i*5, 550+i*5, 1);
    square(560+i*5, 470+i*5, 1);
    square(560+i*5, 630-i*5, 1);
  }
  for(var j=0;j<13;j++){
    square(510+j*5, 560-j*5, 1);
    square(510+j*5, 540+j*5, 1);
    square(550+j*5, 500+j*5, 1);
    square(550+j*5, 600-j*5, 1);
  }
  square(480+7*5, 550-5*5, 1);
  square(480+8*5, 550-4*5, 1);
  square(480+11*5, 550-5*5, 1);
  square(480+10*5, 550-6*5, 1);
  square(480+11*5, 550-9*5, 1);
  square(480+12*5, 550-8*5, 1);
  
  square(480+7*5, 550+5*5, 1);
  square(480+8*5, 550+4*5, 1);
  square(480+11*5, 550+5*5, 1);
  square(480+10*5, 550+6*5, 1);
  square(480+11*5, 550+9*5, 1);
  square(480+12*5, 550+8*5, 1);
  
  square(480+21*5, 550+5*5, 1);
  square(480+22*5, 550+6*5, 1);
  square(480+21*5, 550+9*5, 1);
  square(480+20*5, 550+8*5, 1);
  square(480+25*5, 550+5*5, 1);
  square(480+24*5, 550+4*5, 1);
  
  square(480+21*5, 550-5*5, 1);
  square(480+22*5, 550-6*5, 1);
  square(480+21*5, 550-9*5, 1);
  square(480+20*5, 550-8*5, 1);
  square(480+25*5, 550-5*5, 1);
  square(480+24*5, 550-4*5, 1);
  pop();
  
  push();
  translate(-400, -300)
  for(var i=0;i<17;i++){
    square(480+i*5, 550-i*5, 1);
    square(480+i*5, 550+i*5, 1);
    square(560+i*5, 470+i*5, 1);
    square(560+i*5, 630-i*5, 1);
  }
  for(var j=0;j<13;j++){
    square(510+j*5, 560-j*5, 1);
    square(510+j*5, 540+j*5, 1);
    square(550+j*5, 500+j*5, 1);
    square(550+j*5, 600-j*5, 1);
  }
  square(480+7*5, 550-5*5, 1);
  square(480+8*5, 550-4*5, 1);
  square(480+11*5, 550-5*5, 1);
  square(480+10*5, 550-6*5, 1);
  square(480+11*5, 550-9*5, 1);
  square(480+12*5, 550-8*5, 1);
  
  square(480+7*5, 550+5*5, 1);
  square(480+8*5, 550+4*5, 1);
  square(480+11*5, 550+5*5, 1);
  square(480+10*5, 550+6*5, 1);
  square(480+11*5, 550+9*5, 1);
  square(480+12*5, 550+8*5, 1);
  
  square(480+21*5, 550+5*5, 1);
  square(480+22*5, 550+6*5, 1);
  square(480+21*5, 550+9*5, 1);
  square(480+20*5, 550+8*5, 1);
  square(480+25*5, 550+5*5, 1);
  square(480+24*5, 550+4*5, 1);
  
  square(480+21*5, 550-5*5, 1);
  square(480+22*5, 550-6*5, 1);
  square(480+21*5, 550-9*5, 1);
  square(480+20*5, 550-8*5, 1);
  square(480+25*5, 550-5*5, 1);
  square(480+24*5, 550-4*5, 1);
  pop();
}
​
function dec(){
  const phi = (1 + sqrt(5)) / 2;
  const thetaStep = PI / 180; 
  
  //left
  push();
  strokeWeight(5)
  translate(width/2-90, 580)
  scale(0.5)
  rotate(90)
  beginShape();
  for(let i = 0; i < 990; i++) {
      const theta = i * thetaStep;
      const r = pow(phi, theta * 2 / PI);
      const {x, y} = polarToCartesian(r, theta);
      vertex(x, y);
  }
  endShape();
  pop();
  push();
  strokeWeight(6)
  translate(width/2-140, 545)
  scale(0.3)
  rotate(90)
  beginShape();
  for(let i = 0; i < 990; i++) {
      const theta = i * thetaStep;
      const r = pow(phi, theta * 2 / PI);
      const {x, y} = polarToCartesian(r, theta);
      vertex(x, y);
  }
  endShape();
  pop();
  push();
  strokeWeight(5)
  translate(width/2-55, 650)
  scale(0.3)
  rotate(90)
  beginShape();
  for(let i = 0; i < 990; i++) {
      const theta = i * thetaStep;
      const r = pow(phi, theta * 2 / PI);
      const {x, y} = polarToCartesian(r, theta);
      vertex(x, y);
  }
  endShape();
  pop();
  
  //right
  push();
  strokeWeight(6)
  translate(width/2+90, 580)
  scale(0.5)
  rotate(-90)
  beginShape();
  for(let i = 0; i < 990; i++) {
      const theta = i * thetaStep;
      const r = pow(phi, theta * 2 / PI);
      const {x, y} = polarToCartesian(r, theta);
      vertex(-x, y);
  }
  endShape();
  pop();
  push();
  strokeWeight(5)
  translate(width/2+140, 545)
  scale(0.3)
  rotate(-90)
  beginShape();
  for(let i = 0; i < 990; i++) {
      const theta = i * thetaStep;
      const r = pow(phi, theta * 2 / PI);
      const {x, y} = polarToCartesian(r, theta);
      vertex(-x, y);
  }
  endShape();
  pop();
  push();
  strokeWeight(5)
  translate(width/2+55, 650)
  scale(0.3)
  rotate(-90)
  beginShape();
  for(let i = 0; i < 990; i++) {
      const theta = i * thetaStep;
      const r = pow(phi, theta * 2 / PI);
      const {x, y} = polarToCartesian(r, theta);
      vertex(-x, y);
  }
  endShape();
  pop();
}
​
function crown(){
  strokeWeight(5)
  //left
  push();
  beginShape();
  line(width/2-80, 260, width/2-80, 100)
  vertex(width/2-80, 100)
  bezierVertex(width/2-65, 110, width/2-63, 120, width/2-50, 200)
  vertex(width/2-50, 200)
  bezierVertex(width/2-70, 210, width/2-70, 230, width/2-20, 240)
  endShape();
  line(width/2-80, 260, width/2-20, 260)
  line(width/2-80, 213, width/2-63, 213)
  //right
  beginShape();
  line(width/2+80, 260, width/2+80, 100)
  vertex(width/2+80, 100)
  bezierVertex(width/2+65, 110, width/2+63, 120, width/2+50, 200)
  vertex(width/2+50, 200)
  bezierVertex(width/2+70, 210, width/2+70, 230, width/2+20, 240)
  endShape();
  line(width/2+80, 260, width/2+20, 260)
  line(width/2+80, 213, width/2+63, 213)
  pop();
  //center
  push();
  fill(tickets[ra3]);
  beginShape()
  vertex(width/2, 300)
  bezierVertex(width/2-20, 210, width/2-10, 230, width/2-5, 180)
  vertex(width/2-5, 180)
  bezierVertex(width/2-1, 140, width/2-15, 100, width/2, 80)
  endShape()
  beginShape()
  vertex(width/2, 300)
  bezierVertex(width/2+20, 210, width/2+10, 230, width/2+5, 180)
  vertex(width/2+5, 180)
  bezierVertex(width/2+1, 140, width/2+15, 100, width/2, 80)
  endShape()
  pop();
}
​
function polarToCartesian(r, theta) {
    return {
        x: r * cos(theta),
        y: r * sin(theta)
    };
}
​
function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
​
  if (axis === Y_AXIS) {
    for (let i = y; i <= y + h; i++) {
      let inter = map(i, y, y + h, 0, 1);
      let c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x + w, i);
    }
  } else if (axis === X_AXIS) {
    for (let i = x; i <= x + w; i++) {
      let inter = map(i, x, x + w, 0, 1);
      let c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y + h);
    }
  }
}