var bodyx = 300;

var bodyy1 = 320;

var bodyy2 = 380;

var bodyy3 = 450;

var bodyw = 20;

var bodyh = 200;

​

//wings variables Y-axis

var wingY1 = 380;

var wingY2 = 210;

var wingY3 = 270;

var wingY4 = 460;

​

​

//right wing X-axis

var rightX1 = 310;

var rightX2 = 420;

var rightX3 = 540;

​

​

//left wing X-axis

var leftX1 = 290;

var leftX2 = 180;

var leftX3 = 60;

​

​

//make arrays to hold colors

var bodycolors = ["#22333b", "#22223b", "#4a4e69", "#432818", "#081c15", "#9c6644"];

​

var wingcolors = ["#184e77", "#1e6091", "#1a759f", "#168aad", "#34a0a4", "#52b69a", "#76c893", "#99d98c", "#b5e48c", "#d9ed92"];

​

​

​

//pattern of shapes 

var patternshapes = ["circle", "square", "triangle"];

var patternpositions = [

    { x: 130, y: 300, size: 40 },

    { x: 180, y: 320, size: 30 },

    { x: 215, y: 335, size: 15 }

  ];

​

//array for pattern colors

var patterncolors = [ "#ffdd00", "#ffc300", "#ffb700", "#ffaa00", "#ff9500" ]

​

​

​

function setup() {

    createCanvas(600, 600);

    background("#f6fff8");

    noLoop();

  bodycolor = random(bodycolors);

  bigWingcolor = random(wingcolors);

  smallWingcolor = random(wingcolors);

  patterncolor = random(patterncolors);

}

​

​

function draw() {

  noStroke();

//body of butterfly

fill(bodycolor); 

triangle(bodyx,bodyy1,bodyx + 12,bodyy2,bodyx,bodyy3);

triangle(bodyx,bodyy1,bodyx - 12,bodyy2,bodyx,bodyy3);  

//right big wing  

fill(bigWingcolor);

triangle(rightX1,wingY1,rightX2,wingY2,rightX3,wingY3);

triangle(rightX1,wingY1,rightX2 + 40,wingY1,rightX3,wingY3);  

//right small wing

fill(smallWingcolor); 

triangle(rightX1,wingY1,rightX2 + 20,wingY1 + 20,rightX2 + 40,wingY4);  

triangle(rightX1,wingY1,rightX2 - 20,wingY1 + 100,rightX2 + 40,wingY4);  

//left big wing

fill(bigWingcolor);

triangle(leftX1,wingY1,leftX2,wingY2,leftX3,wingY3);

triangle(leftX1,wingY1,leftX2 - 60,wingY1,leftX3,wingY3);  

//left small wing

fill(smallWingcolor);

triangle(leftX1,wingY1,leftX2 - 20,wingY1 + 20,leftX3 + 80,wingY4);

triangle(leftX1,wingY1,leftX2 + 20,wingY4 + 30,leftX3 + 80,wingY4);  

//call function to add random patterns on the wings

wingPatterns();

​

}

​

​

​

function wingPatterns() {

  fill(patterncolor);

​

  for (var pos of patternpositions) {

    var shape = random(patternshapes);

    if (shape == "circle") {

      ellipse(pos.x, pos.y, pos.size, pos.size);

      ellipse(600 - pos.x, pos.y, pos.size, pos.size);

    }

    else if (shape == "square") {

      rect(pos.x - pos.size / 2, pos.y - pos.size / 2, pos.size, pos.size);

      rect(600 - pos.x - pos.size / 2, pos.y - pos.size / 2, pos.size, pos.size);

    } 

    else if (shape == "triangle") {

      triangle(

        pos.x, pos.y - pos.size / 2,

        pos.x - pos.size / 2, pos.y + pos.size / 2,

        pos.x + pos.size / 2, pos.y + pos.size / 2

      );

      triangle(

        600 - pos.x, pos.y - pos.size / 2,

        600 - (pos.x - pos.size / 2), pos.y + pos.size / 2,

        600 - (pos.x + pos.size / 2), pos.y + pos.size / 2

      );

    }

  }

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​