​

​

function preload() {

  song = loadSound("Eva-B-Rozi-trim.mp3");

}

​

// notice we are NOT using the draw() loop here

function setup()

{

  var canvas = createCanvas(1000, 1000);

  background('white')

  canvas.drop(gotFile)

  song.play();

  doAsyncAwaitThings();

}

​

function gotFile(file) {

    if (file.type === 'audio') {

        song = loadSound(file, song.stop());

    } else {

        alert("Not an audio file!");

    }

}

​

async function doAsyncAwaitThings()

{

  strokeWeight(3)

  stroke('#FF57227F')

  line(0, width/2, 1000, height/2)

  await sleep(1315)

  stroke('#FF57227F')

  noFill()

  ellipse(width/2,height/2, 300, 300)

  await sleep(1315)

  stroke('#FF57227F')

  noFill()

  ellipse(650,height/2, 300, 300)

  await sleep(1315)

  stroke('#FF57227F')

  noFill()

  ellipse(575,630, 300, 300)

  await sleep(1315)

  stroke('#FF57227F')

  noFill()

  ellipse(425,630, 300, 300)

  await sleep(1315)

  stroke('#FF57227F')

  noFill()

  ellipse(350,height/2, 300, 300)

  await sleep(1315)

  stroke('#FF57227F')

  noFill()

  ellipse(425,370, 300, 300)

  await sleep(1315)

  stroke('#FF57227F')

  noFill()

  ellipse(575,370, 300, 300)

  await sleep(220)

  stroke('#FF57227F')

  noFill()

  ellipse(725,630, 300, 300)

  await sleep(220)

  stroke('#FF57227F')

  noFill()

  ellipse(500,760, 300, 300)

  await sleep(220)

  stroke('#FF57227F')

  noFill()

  ellipse(275,630, 300, 300)

  await sleep(220)

  stroke('#FF57227F')

  noFill()

  ellipse(275,370, 300, 300)

  await sleep(220)

  stroke('#FF57227F')

  noFill()

  ellipse(500,240, 300, 300)

  await sleep(220)

  stroke('#FF57227F')

  noFill()

  ellipse(725,370, 300, 300)

  stroke('#7955487F')

  strokeWeight(2)

  await sleep(220)

  line(500, 0, 500, 1000)

  await sleep(1315)

  line(0, 210, 1000, 790)

  await sleep(1315)

  line(0, 790, 1000, 210)

  await sleep(1315)

  line(275, 0, 275, 1000)

  await sleep(1315)

  line(725, 0, 725, 1000)

  await sleep(1315)

  line(0, 470, 915, 1000)

  await sleep(1315)

  line(85, 0, 1000, 530)

  await sleep(1315)

  line(0, 530, 915, 0)

  await sleep(1315)

  line(85, 1000, 1000, 470)

  //first set of orange lines - straight top to bottom

  await sleep(170)

  strokeWeight(3)

  stroke('#7955487F')

  line(370, 165, 630, 165)

  await sleep(170)

  line(370, 315, 630, 315)

  await sleep(170)

  line(145, 295, 405, 295)

  await sleep(170)

  line(145, 445, 405, 445)

  await sleep(170)

  line(595, 295, 855, 295)

  await sleep(170)

  line(595, 445, 855, 445)

  await sleep(170)

  line(370, 425, 630, 425)

  await sleep(170)

  line(370, 575, 630, 575)

  await sleep(170)

  line(145, 555, 405, 555)

  await sleep(170)

  line(145, 705, 405, 705)

  await sleep(170)

  line(595, 555, 855, 555)

  await sleep(170)

  line(595, 705, 855, 705)

  await sleep(170)

  line(370, 685, 630, 685)

  await sleep(170)

  line(370, 835, 630, 835)

​

  //second set of orange lines - bottom left to top right

  await sleep(500)

  //ellipse(275,630, 300, 300) line(145, 555, 405, 555)

  line(145, 555, 275, 780)

  await sleep(170)

  //ellipse(275,630, 300, 300) line(145, 705, 405, 705)

  line(275, 480, 405, 705)

  await sleep(170)

  //ellipse(275,370, 300, 300) line(145, 295, 405, 295)

  line(145, 295, 275, 520)

  await sleep(170)

  //ellipse(275,370, 300, 300) line(145, 445, 405, 445)

  line(275, 220, 405, 445)

  await sleep(170)

  //ellipse(500,760, 300, 300) line(370, 685, 630, 685)

  line(370, 685, 500, 910)

  await sleep(170)

  //ellipse(500,760, 300, 300) line(370, 835, 630, 835)

  line(500, 610, 630, 835)

  await sleep(170)

  //line(370, 425, 630, 425)

  line(370, 425, 500, 650)

  await sleep(170)

  //line(370, 575, 630, 575)

  line(500, 350, 630, 575)

  await sleep(170)

  //ellipse(500,240, 300, 300) line(370, 165, 630, 165)

  line(370, 165, 500, 390)

  await sleep(170)

  //ellipse(500,240, 300, 300) line(370, 315, 630, 315)

  line(500, 90, 630, 315)

  await sleep(170)

  //ellipse(725,370, 300, 300) line(595, 295, 855, 295)

  line(595, 295, 725, 520)

  await sleep(170)

  //ellipse(725,370, 300, 300) line(595, 445, 855, 445)

  line(725, 220, 855, 445)

  await sleep(170)

  //ellipse(725,630, 300, 300) line(595, 555, 855, 555)

  line(595, 555, 725, 780)

  await sleep(170)

  //ellipse(725,630, 300, 300) line(595, 705, 855, 705)

  line(725, 480, 855, 705)

  //third set of orange lines - bottom right to top left

  await sleep(500)

  //ellipse(725,630, 300, 300) bottom right line(595, 555, 855, 555)

  line(725, 480, 595, 705)

  await sleep(170)

  //ellipse(725,630, 300, 300) bottom right line(595, 705, 855, 705)

  line(855, 555, 725, 780)

  await sleep(170)

  //ellipse(725,370, 300, 300) top right line(595, 295, 855, 295)

  line(725, 220, 595, 445)

  await sleep(170)

  //ellipse(725,370, 300, 300) top right line(595, 445, 855, 445)

  line(855, 295, 725, 520)

  await sleep(170)

  //ellipse(500,240, 300, 300) top middle line(370, 165, 630, 165)

  line(500, 90, 370, 315)

  await sleep(170)

  //ellipse(500,240, 300, 300) top middle line(370, 315, 630, 315)

  line(630, 165, 500, 390)

  await sleep(170)

  //line(370, 425, 630, 425) middle

  line(500, 350, 370, 575)

  await sleep(170)

  //line(370, 575, 630, 575) middle

  line(630, 425, 500, 650)

  await sleep(170)

  //ellipse(275,370, 300, 300) top left line(145, 295, 405, 295)

  line(275, 220, 145, 445)

  await sleep(170)

  //ellipse(275,370, 300, 300) top left line(145, 445, 405, 445)

  line(405, 295, 275, 520)

  await sleep(170)

  //ellipse(275,630, 300, 300) bottom left line(145, 555, 405, 555)

  line(275, 480, 145, 705)

  await sleep(170)

  //ellipse(275,630, 300, 300) bottom left line(145, 705, 405, 705)

  line(405, 555, 275, 780)

  await sleep(170)

  //ellipse(500,760, 300, 300) bottom middle line(370, 685, 630, 685)

  line(500, 610, 370, 835)

  await sleep(170)

  //ellipse(500,760, 300, 300) bottom middle line(370, 835, 630, 835)

  line(630, 685, 500, 910)

  //red lines diagonal top left to bottom right -75 +20 +75 -20

  await sleep(500)

  strokeWeight(2)

  stroke('#FF57227F')

  //ellipse(500,240, 300, 300) top middle -- 500, 90, 500, 390

  line(425, 110, 575, 370)

  await sleep(300)

  //ellipse(725,370, 300, 300) top right  -- 725, 220, 725, 520

  line(650, 240, 800, 500)

  await sleep(300)

  //ellipse(725,630, 300, 300) bottom right -- 725, 480, 725, 780

  line(650, 500, 800, 760)

  await sleep(300)

  // middle -- 500, 500

  line(425, 370, 575, 630)

  await sleep(300)

  //ellipse(275,370, 300, 300) top left -- 275, 220, 275, 520

  line(200, 240, 350, 500)

  await sleep(300)

  //ellipse(275,630, 300, 300) bottom left -- 275, 480, 275, 780

  line(200, 500, 350, 760)

  await sleep(300)

  //ellipse(500,760, 300, 300) bottom middle -- 500, 610, 500, 910

  line(425, 630, 575, 890)

  //red lines straight -75 +130 +75 -130

  await sleep(500)

  //ellipse(500,240, 300, 300) top middle 

  line(350, 240, 650, 240)

  await sleep(170)

  //ellipse(725,370, 300, 300) top right  

  line(575, 370, 875, 370)

  await sleep(170)

  //ellipse(725,630, 300, 300) bottom right 

  line(575, 630, 875, 630)

  await sleep(170)

  // middle -- 500, 500

  line(350, 500, 650, 500)

  await sleep(170)

  //ellipse(275,370, 300, 300) top left 

  line(125, 370, 425, 370)

  await sleep(170)

  //ellipse(275,630, 300, 300) bottom left 

  line(125, 630, 425, 630)

  await sleep(170)

  //ellipse(500,760, 300, 300) bottom middle 

  line(350, 760, 650, 760)

  //red lines diagonal bottom left to top right +75 +130 -75 -130

  await sleep(500)

  //ellipse(500,240, 300, 300) top middle 

  line(425, 370, 575, 110)

  await sleep(170)

  //ellipse(725,370, 300, 300) top right  

  line(650, 500, 800, 240)

  await sleep(170)

  //ellipse(725,630, 300, 300) bottom right 

  line(650, 760, 800, 500)

  await sleep(170)

  // middle -- 500, 500

  line(425, 630, 575, 370)

  await sleep(170)

  //ellipse(275,370, 300, 300) top left 

  line(200, 500, 350, 240)

  await sleep(170)

  //ellipse(275,630, 300, 300) bottom left 

  line(200, 760, 350, 500)

  await sleep(170)

  //ellipse(500,760, 300, 300) bottom middle 

  line(425, 890, 575, 630)

  //purple lines bottom right to top left

  await sleep(500)

  stroke('#FF57227F')

  strokeWeight(3)

  line(575, 890, 125, 630) 

  await sleep(330)

  line(650, 760, 200, 500)

  await sleep(330)

  line(800, 760, 125, 370) 

  await sleep(330)

  line(875, 630, 200, 240)

  await sleep(330)

  line(800, 500, 350, 240)

  await sleep(330)

  line(875, 370, 425, 110)

  //purple lines top to bottom & left to right

  await sleep(330)

  line(200, 240, 200, 760) 

  await sleep(330)

  line(350, 240, 350, 760)

  await sleep(330)

  line(425, 110, 425, 890) 

  await sleep(330)

  line(575, 110, 575, 890)

  await sleep(330)

  line(650, 240, 650, 760)

  await sleep(330)

  line(800, 240, 800, 760)

  //purple lines bottom left to top right

  await sleep(330)

  line(425, 890, 875, 630) 

  await sleep(330)

  line(350, 760, 800, 500)

  await sleep(330)

  line(200, 760, 875, 370) 

  await sleep(330)

  line(125, 630, 800, 240)

  await sleep(330)

  line(200, 500, 650, 240)

  await sleep(330)

  line(125, 370, 575, 110)

  //black stroke bottom right to top left (direction left to right)

  await sleep(660)

  stroke('#FF5722B2')

  //stroke('#FFEB3B')

  strokeWeight(20)

  line(425, 890, 470, 865)

  line(650, 760, 605, 785)

  line(650, 760, 695, 735)

  line(875, 630, 830, 655)

  await sleep(660)

  line(350, 760, 395, 735) 

  line(575, 630, 530, 655)

  line(575, 630, 620, 605)

  line(800, 500, 755, 525)

  await sleep(660)

  line(200, 760, 245, 735) 

  line(425, 630, 380, 655)

  line(425, 630, 470, 605)

  line(650, 500, 605, 525)

  line(650, 500, 695, 475)

  line(875, 370, 830, 395)

  await sleep(660)

  line(125, 630, 170, 605) 

  line(350, 500, 305, 525)

  line(350, 500, 395, 475)

  line(575, 370, 530, 395)

  line(575, 370, 620, 345)

  line(800, 240, 755, 265)

  await sleep(660)

  line(200, 500, 245, 475) 

  line(425, 370, 470, 345)

  line(425, 370, 380, 395)

  line(650, 240, 605, 265)

  await sleep(660)

  line(125, 370, 170, 345) 

  line(350, 240, 395, 215)

  line(350, 240, 305, 265)

  line(575, 110, 530, 135)

  //black stroke top to bottom left to right 

  await sleep(660)

  line(800, 240, 800, 295) 

  line(800, 500, 800, 445)

  line(800, 500, 800, 555)

  line(800, 760, 800, 705)

  await sleep(660)

  line(650, 240, 650, 295) 

  line(650, 500, 650, 445)

  line(650, 500, 650, 555)

  line(650, 760, 650, 705)

  await sleep(660)

  line(575, 110, 575, 165) 

  line(575, 370, 575, 425)

  line(575, 370, 575, 315)

  line(575, 630, 575, 685)

  line(575, 630, 575, 575)

  line(575, 890, 575, 835)

  await sleep(660)

  line(425, 110, 425, 165) 

  line(425, 370, 425, 425)

  line(425, 370, 425, 315)

  line(425, 630, 425, 685)

  line(425, 630, 425, 575)

  line(425, 890, 425, 835)

  await sleep(660)

  line(350, 240, 350, 295) 

  line(350, 500, 350, 445)

  line(350, 500, 350, 555)

  line(350, 760, 350, 705)

  await sleep(660)

  line(200, 240, 200, 295) 

  line(200, 500, 200, 445)

  line(200, 500, 200, 555)

  line(200, 760, 200, 705)

  //black stroke bottom left to top right (direction right to left)

  await sleep(660)

  line(575, 890, 530, 865) 

  line(350, 760, 395, 785)

  line(350, 760, 305, 735)

  line(125, 630, 170, 655)

  await sleep(660)

  line(650, 760, 605, 735) 

  line(425, 630, 470, 655)

  line(425, 630, 380, 605)

  line(200, 500, 245, 525)

  await sleep(660)

  line(800, 760, 755, 735) 

  line(575, 630, 620, 655)

  line(575, 630, 530, 605)

  line(350, 500, 395, 525)

  line(350, 500, 305, 475)

  line(125, 370, 170, 395)

  await sleep(660)

  line(875, 630, 830, 605) 

  line(650, 500, 695, 525)

  line(650, 500, 605, 475)

  line(425, 370, 470, 395)

  line(425, 370, 380, 345)

  line(200, 240, 245, 265)

  await sleep(660)

  line(800, 500, 755, 475) 

  line(575, 370, 620, 395)

  line(575, 370, 530, 345)

  line(350, 240, 395, 265)

  await sleep(660)

  line(875, 370, 830, 345) 

  line(650, 240, 695, 265)

  line(650, 240, 605, 215)

  line(425, 110, 470, 135)

  //black stroke join top to bottom

  await sleep(660)

  line(425, 165, 575, 165)

  await sleep(330)

  line(650, 295, 800, 295)

  line(200, 295, 350, 295)

  await sleep(330)

  line(425, 315, 575, 315)

  await sleep(330)

  line(425, 425, 575, 425)

  await sleep(330)

  line(650, 445, 800, 445)

  line(200, 445, 350, 445)

  await sleep(330)

  line(200, 555, 350, 555)

  line(650, 555, 800, 555)

  await sleep(330)

  line(425, 575, 575, 575)

  await sleep(330)

  line(425, 685, 575, 685)

  await sleep(330)

  line(650, 705, 800, 705)

  line(200, 705, 350, 705)

  await sleep(330)

  line(425, 835, 575, 835)

  //black stroke diagonal join left to right  done

  await sleep(330)

  line(170, 605, 245, 735)

  await sleep(330)

  line(470, 865, 395, 735)

  line(170, 345, 245, 475)

  await sleep(330)

  line(380, 655, 305, 525)

  await sleep(330)

  line(470, 605, 395, 475)

  await sleep(330)

  line(530, 655, 605, 785)

  line(470, 345, 395, 215)

  await sleep(330)

  line(620, 605, 695, 735)

  line(380, 395, 305, 265)

  await sleep(330)

  line(605, 525, 530, 395)

  await sleep(330)

  line(620, 345, 695, 475)

  await sleep(330)

  line(755, 525, 830, 655)

  line(605, 265, 530, 135)

  await sleep(330)

  line(830, 395, 755, 265)

  //black stroke diagonal join right to left 

  await sleep(330)

  line(755, 735, 830, 605)

  await sleep(330)

  line(530, 865, 605, 735)

  line(830, 345, 755, 475)

  await sleep(330)

  line(695, 525, 620, 655)

  await sleep(330)

  line(530, 605, 605, 475)

  await sleep(330)

  line(470, 655, 395, 785)

  line(620, 395, 695, 265)

  await sleep(330)

  line(305, 735, 380, 605)

  line(530, 345, 605, 215)

  await sleep(330)

  line(395, 525, 470, 395)

  await sleep(330)

  line(305, 475, 380, 345)

  await sleep(330)

  line(170, 655, 245, 525)

  line(395, 265, 470, 135)

  await sleep(330)

  line(170, 395, 245, 265)

  await sleep(660)

  fill(0)

  polygon(500,500, 75, 6);

  await sleep(660)

  fill(0)

  polygon(725,630, 75, 6);

  await sleep(660)

  fill(0)

  polygon(500,760, 75, 6);

  await sleep(660)

  fill(0)

  polygon(275,630, 75, 6);

  await sleep(660)

  fill(0)

  polygon(275,370, 75, 6);

  await sleep(660)

  fill(0)

  polygon(500,240, 75, 6);

  await sleep(660)

  fill(0)

  polygon(725,370, 75, 6);

}

​

function polygon(x, y, radius, npoints) {

  let angle = TWO_PI / npoints;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a) * radius;

    let sy = y + sin(a) * radius;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

​

​

// a custom 'sleep' or wait' function, that returns a Promise that resolves only after a timeout

function sleep(millisecondsDuration)

{

  return new Promise((resolve) => {

    setTimeout(resolve, millisecondsDuration);

  })

}