Tatami Galaxy Clock

'use strict';

let angleSeparate =  1;

​

let H = [];

let S = [];

let B = 50;

let edge = [];

let innerX = [];

let innerY = [];

let time = 1

​

function setup() {

  createCanvas(720, 720);

  colorMode(HSB,360,100,100);

  rectMode(CENTER);

  textSize(20);

  let angleSeparate =  4;

​

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

    H[i] = int(random(30,240));

    S[i] = int(random(100));

    edge[i] = int(random(2,8));

    innerX[i] = random(-0.5,0.5);

    innerY[i] = random(-0.5,0.5);

  }

}

​

function draw() {

  background(44,31,85);

  let mx = 30*sin(PI*frameCount/60)**2 + 1;

  let my = 150*sin(PI*frameCount/200) + 460;

  let distance = 100*my/height + 1;

  let count = 0;

​

  for(let j = distance;j <= width;j += distance){

    let r = j*sin(radians(180/angleSeparate));

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

      let index = count%64;

      drawTatami(width/2 + j*cos(radians(360*i/angleSeparate)),

      height/2 + j*sin(radians(360*i/angleSeparate)),

      r*mx*10/width,index);

      count++;

    }

  }

  if(frameCount%60 === 0){

    angleSeparate = (angleSeparate)%10 + 1;

    time++;

  }

}

​

function drawTatami(x,y,size,index){

  rectMode(CENTER);

  fill(H[index],S[index],B);

  stroke(0);

  strokeWeight(edge[index]);

  rect(x,y,size,size);

  strokeWeight(1);

  line(x+size*innerX[index],y-size/2,x+size*innerX[index],y+size/2);

  line(x+size*innerX[index],y+size*innerY[index],x+size/2,y+size*innerY[index]);

}