let w = 256;

let rad = w*0.9;

let xc = w/2;

let yc = 720*0.25;

let yp = 720*0.75;

var ease = new p5.Ease();

let dark = "#4d1a00";

let bg = "#ffd24d";

​

function setup() {

  createCanvas(1280, 720);

}

​

//creates spinning ring at the top

function spinRing(delay){

  var myEasingFunc = ease['doubleExponentialSigmoid'];

​

  var t01 = abs(sin(theta - PI/20*delay));

  var delta = myEasingFunc(t01, 0.7, 0) ;

  fill('#ff9966');

  ellipse(xc , yc - rad*0.4*0.1, rad*0.4*delta, rad*0.4);

  fill(bg);

  ellipse(xc , yc, rad*0.3*delta, rad*0.3);

  noFill();

}

//draws all of the wings

function drawFan(){

  fill('#b38900');

  drawFanBlade(0.1);

  drawFanBlade(0.3);

  drawFanBlade(0.5);

  drawFanBlade(0.7);

  drawFanBlade(0.9);

  noFill();

}

​

//draws insect body

function drawBody(){

  fill('#ff5500');

  bodyWidth = 720/40 ; 

  bodyLength = 720 /2.5;

  quad(xc, yp, 

       xc + bodyWidth, yp + bodyWidth,

       xc , yp + bodyWidth*2, 

       xc - bodyWidth, yp + bodyWidth);

  quad(xc, yp, 

       xc + bodyWidth*0.75, yp - bodyWidth,

       xc , yp - bodyLength, 

       xc - bodyWidth*0.75, yp - bodyWidth);

  noFill();

}

​

//draws the wings of the wasp - symmetrical

function drawFanBlade(offset){

  angleMap = map(cos(theta + offset), cos(0),

            cos(PI), cos(0), cos(PI*5/6));

  fLen = rad*0.55;

  triangle(xc, yp,

            xc + abs(fLen*cos(angleMap)),

            yp - abs(rad*sin(angleMap)),

            xc + abs(fLen*cos(angleMap + 0.1)),

            yp - abs(rad*sin(angleMap + 0.1)));

  triangle(xc, yp,

            xc - abs(fLen*cos(angleMap)),

            yp - abs(rad*sin(angleMap)),

            xc - abs(fLen*cos(angleMap +  0.1)),

            yp - abs(rad*sin(angleMap + 0.1)));

}

​

function drawPattern(section){

  rad = w*0.9;

  xc = w/2;

  yc = 720*0.25;

  yp = 720*0.75;

  stroke('#fff9e6');

  strokeWeight(4);

  //two outer circles - forms outer ring

  fill(dark);

  circle(xc, yc, rad);

  fill(bg);

  circle(xc , yc, rad*0.8);

  //eyeball shape

  fill(dark);

  circle(xc , yc - rad*0.4*0.1, rad*0.4);

  circle(xc , yc, rad*0.3);

  circle(xc , yc, rad*0.15);

  //bottom circles

  fill(bg);

  circle(xc, yc + 420, rad * 1.13);

  fill(dark);

  circle(xc, yc + 380, rad*0.6);

  fill(bg);

  circle(xc, yc + 380, rad*0.5);

  //draw white lines under wasp

  for (let i = 9; i >= 3; i--){

    line(xc, yp, xc + cos(PI/12*i)*rad/2,

         yc + sin(PI/12*i)*rad/2);

  }

//draw the two lines on the side and top

​

  line(xc, 0, xc, 45);

​

  line(xc + cos(PI/12)*rad/2, 

        720 * 0.925,

        xc + cos(PI/12)*rad/2,

        yc*1.3 + sin(PI/12)*rad/2);

  line(xc + cos(PI + PI/12)*rad/2, 

        720 * 0.925,

        xc + cos(PI + PI/12)*rad/2,

        yc*1.3 + sin(PI/12)*rad/2);

  //draw wasps and rings

  drawFan();

  drawBody();

}

​

function draw() {

  background(" #ffd24d");

  for (i = 1; i <= 5; i++){

    push();

    if(i%2 == 0){

      translate(w*i, 720);

      rotate(PI);

      drawPattern();

      spinRing(i);

    }else{

      translate(w*(i-1), 0);

      drawPattern();

      spinRing(i);

    }

    pop();

  }

​

  noFill();

  theta = 0.0002 * millis();

  var myEasingFunc = ease['doubleExponentialSigmoid'];

  // Draw a dot moving in a shaped way

  fill("#4d1a00");

  noStroke();

  var t01 = ((millis() % 2000) / 2000.0)

  var y = 50 - (myEasingFunc(t01, 0.7, 0) * 50);

}