​

let palette;

let bodyColour, legColour;

​

let pattern;

let wingShape;

​

let circlePackCircles = [];

​

let wingsVectors, bodyVectors;

​

let beetles = [];

let beetleIndex = 0;

let ctx;

​

let downloadButtonGreyImage, downloadButtonBlackImage;

​

let s; // scale

​

function preload() {

  downloadButtonGreyImage = loadImage("download-icon-grey.png");

  downloadButtonBlackImage = loadImage("download-icon-black.png");

}

​

function setup() {

  document.addEventListener('touchstart', {});

  let windowBounds = windowWidth < windowHeight ? windowWidth : windowHeight;

  windowBounds = windowBounds < 600 ? windowBounds : 600;

  s = windowBounds > 600 ? 1 : windowBounds/600;

  createCanvas(windowBounds, windowBounds);

  angleMode(DEGREES);

  imageMode(CENTER);

}

​

function draw() {

  if (frameCount == 1) {

    newBeetle();

    displayBeetle(width/2, height/2);

    beetles.push(ctx);

  }

  image(beetles[beetleIndex], width/2, height/2);

  displayUI();

}

​

function keyPressed() {

  if (keyCode == LEFT_ARROW) {

    leftButtonPressed = true;

    if (beetleIndex > 0) {

      beetleIndex--;

    } else {

      newBeetle();

      displayBeetle(width/2, height/2);

      beetles.unshift(ctx);

    }

  } else if (keyCode == RIGHT_ARROW) {

    rightButtonPressed = true;

    if (beetleIndex+1 < beetles.length) {

      beetleIndex++;

    } else {

      beetleIndex++;

      newBeetle();

      displayBeetle(width/2, height/2);

      beetles.push(ctx);

    }

  }

}

​

function mousePressed() {

  let leftX = 20;

  let leftY = height/2;

  let rightX = width-20;

  let rightY = height/2;

  if (dist(leftX, leftY, mouseX, mouseY) < 50) {

    if (beetleIndex > 0) {

      beetleIndex--;

    } else {

      newBeetle();

      displayBeetle(width/2, height/2);

      beetles.unshift(ctx);

    }

  } else if (dist(rightX, rightY, mouseX, mouseY) < 50) {

    if (beetleIndex+1 < beetles.length) {

      beetleIndex++;

    } else {

      beetleIndex++;

      newBeetle();

      displayBeetle(width/2, height/2);

      beetles.push(ctx);

    }

  } else if (dist(width-35, 35, mouseX, mouseY) < 50) {

    save(beetles[beetleIndex], "beetle", "png");

  }

}

​

function newBeetle() {

  circlePackCircles = [];

  palette = {

    white: color(random(222, 255), random(222, 255), random(222, 255)),

    light: color(random(110, 230), random(110, 230), random(110, 230)),

    mid: color(random(0, 200), random(0, 200), random(0, 200)),

    dark: color(random(0, 110), random(0, 110), random(0, 110)),

    black: color(random(30, 60), random(30, 60), random(30, 60)),

  };

  bodyColour = random([palette.mid, palette.dark]);

  legColour = random([palette.mid, palette.dark, palette.black]);

  while(bodyColour == legColour) legColour = random([palette.mid, palette.dark, palette.black]);

  createPattern();

  createWingShape();

  wingsVectors = [random(180, 250), random(180, 210)];

  bodyVectors = [random(100, 140), random(250, 280), random(150, 180), random(180, 220)];

}

​

function displayBeetle(x, y) {

  ctx = createGraphics(width, height);

  ctx.angleMode(DEGREES);

  ctx.rectMode(CENTER);

  ctx.imageMode(CENTER);

  ctx.push();

  ctx.translate(width*0.1, height*0.1);

  ctx.scale(0.8*s);

  ctx.translate(0, 35);

  ctx.translate(x/s, y/s);

  ctx.background(244);

  displayAntenna(ctx);

  displayLegs(ctx);

  displayBody(ctx);

  displayWings(ctx);

  ctx.pop();

  image(ctx, 0, 0);  

}

​

function createPattern() {

  pattern = createGraphics(width, height);

  let patterns = ["circles", "circlePack", "stripesV", "stripesH"];

  let chosenPattern = random(patterns);

  if (chosenPattern == "circles") {  

    createCircles();

  } else if (chosenPattern == "circlePack") {

    createCirclePack();

  } else if (chosenPattern == "stripesV") {

    createStripes(true);

  } else if (chosenPattern == "stripesH") {

    createStripes(false);

  }

}

​

function createCircles() {

  pattern.background(palette.dark);

  pattern.noStroke();

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

    pattern.fill(palette.light);

    pattern.ellipse(random(width/s), random(height/s), random(120, 200)*s, random(120, 200)*s);

    pattern.fill(palette.dark);

    pattern.ellipse(random(width/s), random(height/s), random(120, 200)*s, random(120, 200)*s);

    pattern.fill(palette.mid);

    pattern.ellipse(random(width/s), random(height/s), random(120, 200)*s, random(120, 200)*s);

  }

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

    pattern.fill(bodyColour);

    pattern.ellipse(random(width/s), random(height/s), random(4, 15)*s);

  }

}

​

function createCirclePack() {

  pattern.background(palette.mid);

  pattern.noStroke();

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

      pattern.fill(palette.mid);

      pattern.ellipse(random(width/s), random(height/s), random(120, 200)*s, random(120, 200)*s);

      pattern.fill(palette.dark);

      pattern.ellipse(random(width/s), random(height/s), random(120, 200)*s, random(120, 200)*s);

  }

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

    circlePackCircles.push(new CirclePack());

  }

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

    for (let j = 0; j < circlePackCircles.length; j++) {

      circlePackCircles[j].grow();

      if (i == 200) circlePackCircles[j].display();

    }

  }

}

​

function createStripes(vertical) {

  pattern.background(palette.mid);

  pattern.noStroke();

  if (vertical) {

    let stripeCount = int(random(6, 10));

    let stripeThickness = random(0, 50);

    let spacing = random(10, 30);

    for (let i = 0; i <= width/s; i+=width/s/stripeCount) {

      for (let j = 0; j <= height/s; j+=spacing) {

        pattern.fill(palette.light);

        pattern.ellipse(i+random(-2, 2), j+random(-2, 2), random(stripeThickness, stripeThickness+50));

      }

    }

​

    for (let i = 0; i <= width/s; i+=width/s/stripeCount) {

      for (let j = 0; j <= height/s; j+=spacing) {

        pattern.fill(palette.dark);

        pattern.ellipse(i+random(-2, 2), j+random(-2, 2), random(stripeThickness/2, stripeThickness/2+20));

      }

    }

  } else {

    let stripeCount = int(random(2, 4)/s);

    let stripeThickness = random(50, 100);

    for (let i = 0; i <= width/s; i+=30) {

      for (let j = 0; j <= height/s; j+=height/s/stripeCount) {

        pattern.fill(palette.light);

        pattern.ellipse(i+random(-2, 2), j+random(-2, 2), random(stripeThickness, stripeThickness+50));

      }

    }

​

    for (let i = 0; i <= width/s; i+=30) {

      for (let j = 0; j <= height/s; j+=height/s/stripeCount) {

        pattern.fill(palette.dark);

        pattern.ellipse(i+random(-2, 2), j+random(-2, 2), random(60));

      }

    }

  }

}

​

function createWingShape() {

  wingShape = createGraphics(width, height);

  wingShape.fill(legColour);

  wingShape.noStroke();

  wingShape.rectMode(CENTER);

  wingShape.rect(width/2, height/2, width/2, height, random(80, 150)*s, random(10, 30)*s, random(10, 50)*s, 500);

}

​

function displayAntenna(ctx) {

  ctx.noFill();

  ctx.stroke(legColour);

  ctx.strokeWeight(10);

  let antenna = [-random(0, 50), -random(50, 150), -random(50, 150), -random(50, 180), -random(50, 180), -random(150, 200)];

  ctx.push();

  ctx.translate(-20, -120);

  ctx.bezier(0, 0, antenna[0], antenna[1], antenna[2], antenna[3], antenna[4], antenna[5]);

  ctx.pop();

  ctx.push();

  ctx.scale(-1, 1);

  ctx.translate(-20, -120);

  ctx.bezier(0, 0, antenna[0], antenna[1], antenna[2], antenna[3], antenna[4], antenna[5]);

  ctx.pop();

}

​

function displayLegs(ctx) {

  ctx.stroke(legColour);

  let topLegs = [random(40, 60), random(10, 20), random(60, 80), random(70, 90), random(110, 140), random(90, 130)];

  ctx.push();

  ctx.translate(-70, -70, -60);

  ctx.strokeWeight(20);

  ctx.line(0, 0, -topLegs[0], -topLegs[1]);

  ctx.strokeWeight(15);

  ctx.line(-topLegs[0], -topLegs[1], -topLegs[2], -topLegs[3]);

  ctx.strokeWeight(10);

  ctx.line(-topLegs[2], -topLegs[3], -topLegs[4], -topLegs[5]);

  ctx.pop();

  ctx.push();

  ctx.scale(-1, 1);

  ctx.translate(-70, -70, -60);

  ctx.strokeWeight(20);

  ctx.line(0, 0, -topLegs[0], -topLegs[1]);

  ctx.strokeWeight(15);

  ctx.line(-topLegs[0], -topLegs[1], -topLegs[2], -topLegs[3]);

  ctx.strokeWeight(10);

  ctx.line(-topLegs[2], -topLegs[3], -topLegs[4], -topLegs[5]);

  ctx.pop();

  let middleLegs = [random(30, 50), random(0, 10), random(80, 100), random(60, 90), random(130, 150), random(100, 120)];

  ctx.push();

  ctx.translate(-90, 0);

  ctx.strokeWeight(20);

  ctx.line(0, 0, -middleLegs[0], middleLegs[1]);

  ctx.strokeWeight(15);

  ctx.line(-middleLegs[0], middleLegs[1], -middleLegs[2], middleLegs[3]);

  ctx.strokeWeight(10);

  ctx.line(-middleLegs[2], middleLegs[3], -middleLegs[4], middleLegs[5]);

  ctx.pop();

  ctx.push();

  ctx.scale(-1, 1);

  ctx.translate(-90, 0);

  ctx.strokeWeight(20);

  ctx.line(0, 0, -middleLegs[0], middleLegs[1]);

  ctx.strokeWeight(15);

  ctx.line(-middleLegs[0], middleLegs[1], -middleLegs[2], middleLegs[3]);

  ctx.strokeWeight(10);

  ctx.line(-middleLegs[2], middleLegs[3], -middleLegs[4], middleLegs[5]);

  ctx.pop();

  let bottomLegs = [random(20, 40), random(10, 30), random(20, 40), random(100, 130), random(50, 70), random(140, 170)];

  ctx.push();

  ctx.translate(-90, 80);

  ctx.strokeWeight(20);

  ctx.line(0, 0, -bottomLegs[0], bottomLegs[1]);

  ctx.strokeWeight(15);

  ctx.line(-bottomLegs[0], bottomLegs[1], -bottomLegs[2], bottomLegs[3]);

  ctx.strokeWeight(10);

  ctx.line(-bottomLegs[2], bottomLegs[3], -bottomLegs[4], bottomLegs[5]);

  ctx.pop();

  ctx.push();

  ctx.scale(-1, 1)

  ctx.translate(-90, 80);

  ctx.strokeWeight(20);

  ctx.line(0, 0, -bottomLegs[0], bottomLegs[1]);

  ctx.strokeWeight(15);

  ctx.line(-bottomLegs[0], bottomLegs[1], -bottomLegs[2], bottomLegs[3]);

  ctx.strokeWeight(10);

  ctx.line(-bottomLegs[2], bottomLegs[3], -bottomLegs[4], bottomLegs[5]);

  ctx.pop();

}

​

function displayBody(ctx) {

  ctx.noStroke();

  ctx.stroke(legColour);

  ctx.strokeWeight(2);

  ctx.fill(bodyColour);

  ctx.rect(0, 0, bodyVectors[0], bodyVectors[1], 50);

  ctx.fill(bodyColour);

  ctx.rect(0, 0, bodyVectors[2], bodyVectors[3], 50);

}

​

function displayWings(ctx) {

  let wingPattern = pattern.get();

  wingPattern.mask(wingShape);

  let wingWidth = wingsVectors[1];

  ctx.image(wingShape, -wingWidth/4, -height/s/2 + height/s/5*3, wingWidth+4, wingsVectors[0]+4);

  ctx.image(wingPattern, -wingWidth/4, -height/s/2 + height/s/5*3, wingWidth-4, wingsVectors[0]);

  ctx.scale(-1, 1);

  ctx.image(wingShape, -(wingWidth/4), -height/s/2 + height/s/5*3, wingWidth+4, wingsVectors[0]+4);

  ctx.image(wingPattern, -(wingWidth/4), -height/s/2 + height/s/5*3, wingWidth-4, wingsVectors[0]);

}

​

function displayUI() {

  let leftX = 20;

  let leftY = height/2;

  let rightX = width-20;

  let rightY = height/2;

  let leftHover = dist(leftX, leftY, mouseX, mouseY) < 50;

  let rightHover = dist(rightX, rightY, mouseX, mouseY) < 50;

  displayArrow(leftX, leftY, 180, leftHover ? 50 : 210);

  displayArrow(rightX, rightY, 0, rightHover ? 50 : 210);

  let downloadHover = dist(width-35, 35, mouseX, mouseY) < 50;

  image(downloadHover ? downloadButtonBlackImage : downloadButtonGreyImage, width-35, 35, 65, 65);

}

​

function displayArrow(x, y, rotation, opacity) {

  push();

  translate(x, y);

  rotate(rotation);

  stroke(opacity);

  strokeWeight(5);

  line(-5, -10, 5, 0);

  line(-5, 10, 5, 0);

  pop();

}