trial3

//start the x position

let x1 = 10 ;

let x2 = 310;

let x3 = 0;

let x4 = 590;

let x5 = 210;

let x6 = 220;

let x7 = 600;

let x8 = 295;

let x9 = 290;

​

//start the y position 

let y1 = 0 ;

let y3 = 590;

let y2 = 0;

let y5 = 590;

let y4 = 310;

let y6 = 295;

​

//size of the shape

let s1 = 10 ;

let s2 = 294;

let s6 = 20;

let s4 = 600;

​

let ruler = new p5.Utils();

function setup() {

  createCanvas(600, 600);

  background(0,0,0);

  ruler.enableRuler();

}

​

function draw() {

​

//right circle shape

fill(57, 1, 140);

circle(x2, y3, s6+s6*39);

fill(201, 97, 0);

circle(x2, y3, s6+s6*38);

fill(8, 153, 0);

circle(x2, y3, s6+s6*37);

fill(245, 225, 5);

circle(x2, y3, s6+s6*36);

fill(0, 137, 201);

circle(x2, y3, s6+s6*35);

fill(201, 0, 0);

circle(x2, y3, s6+s6*34);

fill(57, 1, 140);

circle(x2, y3, s6+s6*33);

fill(201, 97, 0);

circle(x2, y3, s6+s6*32);

fill(8, 153, 0);

circle(x2, y3, s6+s6*31);

fill(245, 225, 5);

circle(x2, y3, s6+s6*30);

fill(0, 137, 201);

circle(x2, y3, s6+s6*29);

fill(201, 0, 0);

circle(x2, y3, s6+s6*28);

fill(57, 1, 140);

circle(x2, y3, s6+s6*27);

fill(201, 97, 0);

circle(x2, y3, s6+s6*26);

fill(245, 225, 5);

circle(x2, y3, s6+s6*25);

fill(0, 137, 201);

circle(x2, y3, s6+s6*24);

fill(201, 0, 0);

circle(x2, y3, s6+s6*23);

fill(8, 153, 0);

circle(x2, y3, s6+s6*22);

fill(201, 97, 0);

circle(x2, y3, s6+s6*21);

fill(0, 137, 201);

circle(x2, y3, s6+s6*20);

fill(245, 225, 5);

circle(x2, y3, s6+s6*19);

fill(57, 1, 140);

circle(x2, y3, s6+s6*18);

fill(201, 0, 0);

circle(x2, y3, s6+s6*17);

fill(201, 97, 0);

circle(x2, y3, s6+s6*16);

fill(57, 1, 140);

circle(x2, y3, s6+s6*15);

fill(0, 137, 201);

circle(x2, y3, s6+s6*14);

fill(8, 153, 0);

circle(x2, y3, s6+s6*13);

fill(57, 1, 140);

circle(x2, y3, s6+s6*12);

fill(245, 225, 5);

circle(x2, y3, s6+s6*11);

fill(201, 0, 0);

circle(x2, y3, s6+s6*10);

fill(8, 153, 0);

circle(x2, y3, s6+s6*9);

fill(8, 153, 0);

circle(x2, y3, s6+s6*3);  

fill(201, 97, 0);

circle(x2, y3, s6+s6*8);

fill(0, 137, 201);

circle(x2, y3, s6+s6*7);

fill(245, 225, 5);

circle(x2, y3, s6+s6*6);

fill(57, 1, 140);

circle(x2, y3, s6+s6*5);

fill(201, 0, 0);

circle(x2, y3, s6+s6*4);

fill(8, 153, 0);

circle(x2, y3, s6+s6*3);  

fill(201, 97, 0);

circle(x2, y3, s6+s6*2);

fill(57, 1, 140);

circle(x2, y3, s6+s6);

fill(0, 137, 201);

circle(x2, y3, s6);

​

​

//horizontal lines 

  fill(76,0,153);

  rect(y1,x1,s1,s2);

  fill(76,0,153);

  rect(y1+s1,x1,s1,s2);

  fill(255,128,0);

  rect(y1+s1*2,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*3,x1,s1,s2);

  fill(255,255,0);

  rect(y1+s1*4,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*5,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*6,x1,s1,s2);

  fill(51,0,102);

  rect(y1+s1*7,x1,s1,s2);

  fill(255,255,0);

  rect(y1+s1*8,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*9,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*10,x1,s1,s2);

​

  fill(255,128,0);

  rect(y1+s1*11,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*12,x1,s1,s2);

  fill(0,0,153);

  rect(y1+s1*13,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*14,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*15,x1,s1,s2);

  fill(255,128,0);

  rect(y1+s1*16,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*17,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*18,x1,s1,s2);

  fill(255,255,0);

  rect(y1+s1*19,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*20,x1,s1,s2);

  fill(51,0,102);

  rect(y1+s1*21,x1,s1,s2);

  fill(255,102,102);

  rect(y1+s1*22,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*23,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*24,x1,s1,s2);

  fill(255,255,0);

  rect(y1+s1*25,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*26,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*27,x1,s1,s2);

  fill(51,0,102);

  rect(y1+s1*28,x1,s1,s2);

  fill(255,255,0);

  rect(y1+s1*29,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*30,x1,s1,s2);

  fill(255,153,153);

  rect(y1+s1*31,x1,s1,s2);

  fill(255,102,102);

  rect(y1+s1*31,x1,s1,s2);

  fill(51,0,102);

  rect(y1+s1*32,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*33,x1,s1,s2);

  fill(255,255,0);

  rect(y1+s1*34,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*35,x1,s1,s2);

  fill(255,128,0);

  rect(y1+s1*36,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*37,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*38,x1,s1,s2);

  fill(76,0,153);

  rect(y1+s1*39,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*40,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*41,x1,s1,s2);

  fill(255,128,0);

  rect(y1+s1*42,x1,s1,s2);

  fill(76,0,153);

  rect(y1+s1*43,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*44,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*45,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*46,x1,s1,s2);

  fill(255,128,0);

  rect(y1+s1*47,x1,s1,s2);

  fill(0,0,153);

  rect(y1+s1*48,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*49,x1,s1,s2);

  fill(255,255,0);

  rect(y1+s1*50,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*51,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*52,x1,s1,s2);

  fill(255,102,102);

  rect(y1+s1*53,x1,s1,s2);

  fill(255,128,0);

  rect(y1+s1*54,x1,s1,s2);

  fill(255,255,0);

  rect(y1+s1*55,x1,s1,s2);

  fill(76,0,153);

  rect(y1+s1*56,x1,s1,s2);

  fill(0,102,0);

  rect(y1+s1*57,x1,s1,s2);

  fill(204,0,0);

  rect(y1+s1*58,x1,s1,s2);

  fill(0,128,255);

  rect(y1+s1*59,x1,s1,s2);

  //frame separator 

fill(0, 0, 0);

rect(x3, y2, s1, s4);

rect(x3, y2, s4, s1);

rect(x4, y2, s1, s4);

rect(x3, y5, s4, s1);

rect(x9,y6,s1,s4);

rect(x3, y6, s4, s1);

}