ICM Week Four Assignment

This week we focused on reorganizing the code and creating / calling additional functions through the draw function. The code has been cleaned up quite a bit (examples below) and the fire now is called when the mouse hovers over the nose.

I will be aiming to create a for loop that will have the fire animated out as well as have the wings move in the next version.

x.

var clouds = [];
var dragonBreath = false;
var dragonBreathPos = 0;
var dragonBreathLngth = 30;
var dragonWings = false;
var dragonWingsPos = 0

function setup() {
  createCanvas(400, 600);
  colorMode(RGB, 255, 255, 255, 1);
}

function draw() {

  background(random(255), 255, 255);

  for (i = 0; i < clouds.length; i++) {
    var currentObj = clouds[i];
    cloud(currentObj.xpos, currentObj.ypos, currentObj.size);
    currentObj.xpos += 0.5;
    currentObj.ypos += random(-0.5, 0.5);
    if (clouds[i].xpos > width + 20) {
      clouds.splice(i, 1);
    }

  }
  // tail();
  rightWing();
  leftWing();
  body();
  //edit this to be within draw loop
  if (dist(mouseX, mouseY, 170, 225) < 50) {
    print('mouseX');

    showDragonBreath();

  }
}

//Functions
function showDragonBreath() {
  dragonBreath = true;
  // print(pmouseX + ' -> ' + mouseX);
  fire1();
  fire2();
  fire3();
}

function rightWing() {
  noStroke()
  fill(125, 4, 235);
  var rw1 = {
      x: 220,
      y: 245
    },
    rw2 = {
      x: 380,
      y: 350
    },
    rw3 = {
      x: 330,
      y: 200
    },
    rw4 = {
      x: 220,
      y: 245
    };
  quad(rw1.x, rw1.y, rw2.x, rw2.y, rw3.x, rw3.y, rw4.x, rw4.y);
}

function leftWing() {
  noStroke()
  fill(125, 4, 235);
  var lw1 = {
      x: 180,
      y: 245
    },
    lw2 = {
      x: 20,
      y: 350
    },
    lw3 = {
      x: 70,
      y: 200
    },
    lw4 = {
      x: 180,
      y: 245
    };

  quad(lw1.x, lw1.y, lw2.x, lw2.y, lw3.x, lw3.y, lw4.x, lw4.y);
}

//body

function body() {
  fill(125, 75, 200);
  noStroke();
  strokeWeight(3);
  // fill(125, 4, 235);
  var t1 = {
      x: 220,
      y: 450
    },
    t2 = {
      x: 300,
      y: 400
    },
    t3 = {
      x: 280,
      y: 380
    },
    t4 = {
      x: 300,
      y: 370
    };
  quad(t1.x, t1.y, t2.x, t2.y, t3.x, t3.y, t4.x, t4.y);

  noStroke()
  fill(125, 75, 200);
  ellipse(200, 340, 120, 300);

  noFill();
  stroke(125, 4, 235);
  strokeWeight(3);

  var scl1 = {
      x: 175,
      y: 255,
      w: 50,
      h: 20,
      r: 10,
    },

    scl2 = {
      x: 170,
      y: 285,
      w: 60,
      h: 20,
      r: 10,
    },
    scl3 = {
      x: 165,
      y: 315,
      w: 70,
      h: 20,
      r: 10,
    },
    scl4 = {
      x: 160,
      y: 345,
      w: 80,
      h: 20,
      r: 10,
    },
    scl5 = {
      x: 165,
      y: 375,
      w: 70,
      h: 20,
      r: 10,
    },
    scl6 = {
      x: 170,
      y: 405,
      w: 60,
      h: 20,
      r: 10,
    },
    scl7 = {
      x: 175,
      y: 435,
      w: 50,
      h: 20,
      r: 10,
    };

  rect(scl1.x, scl1.y, scl1.w, scl1.h, scl1.r);
  rect(scl2.x, scl2.y, scl2.w, scl2.h, scl2.r);
  rect(scl3.x, scl3.y, scl3.w, scl3.h, scl3.r);
  rect(scl4.x, scl4.y, scl4.w, scl4.h, scl4.r);
  rect(scl5.x, scl5.y, scl5.w, scl5.h, scl5.r);
  rect(scl6.x, scl6.y, scl6.w, scl6.h, scl6.r);
  rect(scl7.x, scl7.y, scl7.w, scl7.h, scl7.r);

  //legs
  noStroke()
  fill(125, 4, 200);


  ellipse(180, 490, 35, 60);
  ellipse(220, 490, 35, 60);

  //feet
  fill(125, 75, 200);
  ellipse(170, 510, 35, 35);
  ellipse(230, 510, 35, 35);

  //arms
  noStroke()
  fill(125, 4, 200);
  ellipse(140, 320, 25, 60);
  ellipse(260, 320, 25, 60);

  //hands
  fill(125, 75, 200);
  ellipse(140, 330, 20, 25);
  ellipse(260, 330, 20, 25);

  //head
  noStroke()
  fill(125, 4, 200);
  ellipse(200, 160, 150, 100);

  //ears
  fill(125, 4, 200);
  triangle(155, 130, 195, 130, 180, 75);
  triangle(210, 130, 250, 130, 225, 75);

  fill(100, 4, 200);
  triangle(170, 110, 185, 110, 180, 95);
  triangle(220, 110, 235, 110, 225, 95);

  //nose
  fill(125, 4, 200);
  //ellipse(200, 200, 70, 60);
  arc(200, 200, 80, 80, 0, PI, OPEN);

  fill(0);
  ellipse(185, 215, 10, 20);
  ellipse(215, 215, 10, 20);

  //eyes
  fill(150);
  ellipse(175, 155, 20, 30);
  ellipse(225, 155, 20, 30);

  fill(0, 255, 165);
  ellipse(175, 155, 10, 10);
  ellipse(225, 155, 10, 10);
}
//smoke
function fire1() {
  fill(255, 100, 40);
  strokeWeight(15);
  stroke(255, 100, 40, 0.5);
  var sml1 = {
      x: 185,
      y: 231,
      h: 15,
      w: 20
    },

    smr1 = {
      x: 215,
      y: 231,
      w: 20,
      h: 15
    };
  ellipse(sml1.x, sml1.y, sml1.w, sml1.h);
  ellipse(smr1.x, smr1.y, smr1.w, smr1.h);
}

function fire2() {
  fill(255, 100, 40);
  strokeWeight(15);
  stroke(255, 100, 40, 0.5);
  var sml1 = {
      x: 185,
      y: 231,
      h: 15,
      w: 20
    },
    sml2 = {
      x: 180,
      y: 248,
      w: 30,
      h: 20
    },
    smr1 = {
      x: 215,
      y: 231,
      w: 20,
      h: 15
    },
    smr2 = {
      x: 220,
      y: 248,
      w: 30,
      h: 20
    };

  ellipse(sml1.x, sml1.y, sml1.w, sml1.h);
  ellipse(sml2.x, sml2.y, sml2.w, sml2.h);
  ellipse(smr1.x, smr1.y, smr1.w, smr1.h);
  ellipse(smr2.x, smr2.y, smr2.w, smr2.h);
}

function fire3() {
  fill(255, 100, 40);
  strokeWeight(15);
  stroke(255, 100, 40, 0.5);
  var sml1 = {
      x: 185,
      y: 231,
      h: 15,
      w: 20
    },
    sml2 = {
      x: 180,
      y: 248,
      w: 30,
      h: 20
    },
    sml3 = {
      x: 170,
      y: 272,
      w: 40,
      h: 30
    },
    smr1 = {
      x: 215,
      y: 231,
      w: 20,
      h: 15
    },
    smr2 = {
      x: 220,
      y: 248,
      w: 30,
      h: 20
    },
    smr3 = {
      x: 230,
      y: 272,
      w: 40,
      h: 30
    };

  ellipse(sml1.x, sml1.y, sml1.w, sml1.h);
  ellipse(sml2.x, sml2.y, sml2.w, sml2.h);
  ellipse(sml3.x, sml3.y, sml3.w, sml3.h);
  ellipse(smr1.x, smr1.y, smr1.w, smr1.h);
  ellipse(smr2.x, smr2.y, smr2.w, smr2.h);
  ellipse(smr3.x, smr3.y, smr3.w, smr3.h);
}


function cloud(x, y, size) {
  fill(255, 255, 255);
  noStroke();
  arc(x, y, 25 * size, 20 * size, PI + TWO_PI, TWO_PI);
  arc(x + 10, y, 25 * size, 45 * size, PI + TWO_PI, TWO_PI);
  arc(x + 25, y, 25 * size, 35 * size, PI + TWO_PI, TWO_PI);
  arc(x + 40, y, 30 * size, 20 * size, PI + TWO_PI, TWO_PI);
}

function mousePressed() {
  var newCloud = {
    xpos: mouseX,
    ypos: mouseY,
    size: random(0.5, 5)
  };
  clouds.push(newCloud);
}

Old code below…

var clouds = [];

// var breath = [];

function setup() {

createCanvas(400, 600);

colorMode(RGB, 255, 255, 255, 1);

}

function draw() {

background(random(255), 255, 255);

// display

for (i = 0; i < clouds.length; i++) {

var currentObj = clouds[i];

cloud(currentObj.xpos, currentObj.ypos, currentObj.size);

currentObj.xpos += 0.5;

currentObj.ypos += random(-0.5, 0.5);

if (clouds[i].xpos > width + 20) {

clouds.splice(i, 1);

}

}

//tail

fill(125, 75, 200);

stroke(125, 4, 200);

strokeWeight(3);

quad(220, 450, 300, 400, 280, 380, 300, 370, 270, 370);

// Right_Wing

noStroke()

fill(125, 4, 235);

var pr1 = {

x: 220,

y: 245

},

pr2 = {

x: 380,

y: 350

};

var pr3 = {

x: 330,

y: 200

},

pr4 = {

x: 220,

y: 245

};

quad(pr1.x, pr1.y, pr2.x, pr2.y, pr3.x, pr3.y, pr4.x, pr4.y);

// Left_Wing

noStroke()

fill(125, 4, 235);

var pl1 = {

x: 180,

y: 245

},

pl2 = {

x: 20,

y: 350

};

var pl3 = {

x: 70,

y: 200

},

pl4 = {

x: 180,

y: 245

};

quad(pl1.x, pl1.y, pl2.x, pl2.y, pl3.x, pl3.y, pl4.x, pl4.y);

//body

noStroke()

fill(125, 75, 200);

ellipse(200, 340, 120, 300);

noFill();

stroke(125, 4, 235);

strokeWeight(3);

rect(175, 255, 50, 20, 10);

rect(170, 285, 60, 20, 10);

rect(165, 315, 70, 20, 10);

rect(160, 345, 80, 20, 10);

rect(165, 375, 70, 20, 10);

rect(170, 405, 60, 20, 10);

rect(175, 435, 50, 20, 10);

//legs

noStroke()

fill(125, 4, 200);

ellipse(180, 490, 35, 60);

ellipse(220, 490, 35, 60);

//feet

fill(125, 75, 200);

ellipse(170, 510, 35, 35);

ellipse(230, 510, 35, 35);

//arms

noStroke()

fill(125, 4, 200);

ellipse(140, 320, 25, 60);

ellipse(260, 320, 25, 60);

//hands

fill(125, 75, 200);

ellipse(140, 330, 20, 25);

ellipse(260, 330, 20, 25);

//head

noStroke()

fill(125, 4, 200);

ellipse(200, 160, 150, 100);

//ears

fill(125, 4, 200);

triangle(155, 130, 195, 130, 180, 75);

triangle(210, 130, 250, 130, 225, 75);

fill(100, 4, 200);

triangle(170, 110, 185, 110, 180, 95);

triangle(220, 110, 235, 110, 225, 95);

//nose

fill(125, 4, 200);

//ellipse(200, 200, 70, 60);

arc(200, 200, 80, 80, 0, PI, OPEN);

fill(0);

ellipse(185, 215, 10, 20);

ellipse(215, 215, 10, 20);

//eyes

fill(150);

ellipse(175, 155, 20, 30);

ellipse(225, 155, 20, 30);

fill(0, 255, 165);

ellipse(175, 155, 10, 10);

ellipse(225, 155, 10, 10);

//smoke_left

fill(255, 100, 40);

strokeWeight(15);

stroke(255, 100, 40, .5);

ellipse(185, 231, 20, 15);

ellipse(180, 248, 30, 20);

ellipse(170, 272, 40, 30);

//smoke_right

ellipse(215, 231, 20, 15);

ellipse(220, 248, 30, 20);

ellipse(230, 272, 40, 30);

}

function cloud(x, y, size) {

fill(255, 255, 255);

noStroke();

arc(x, y, 25 * size, 20 * size, PI + TWO_PI, TWO_PI);

arc(x + 10, y, 25 * size, 45 * size, PI + TWO_PI, TWO_PI);

arc(x + 25, y, 25 * size, 35 * size, PI + TWO_PI, TWO_PI);

arc(x + 40, y, 30 * size, 20 * size, PI + TWO_PI, TWO_PI);

}

function mousePressed() {

var newCloud = {

xpos: mouseX,

ypos: mouseY,

size: random(0.5, 5)

};

clouds.push(newCloud);

var fireBreath = {

xpos: mouseX,

ypos: mouseY,

}

}