Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*******************
  DRAGON
  By Reilly MacKay
  • Control the Dragon by moving your cursor around the screen
  • Click to make the Dragon breathe fire
********************/

void setup() {
  size(400, 400); //sets window size to 400x400px
}

void draw(){
//bg = grey
background(100);
//set base framerate
frameRate(60);

//mountains
fill(70);
triangle(200, 0, 180, 20, 200, 80);
quad(200, 0, 200, 120, 380, 120, 280, 0);

fill (50);

triangle(300, 0, 280, 80, 400, 0);
triangle(300, 30, 210, 120, 300, 120);

quad(60, 0, 180, 0, 190, 35, 35, 35);
quad(190, 35, 35, 35, 35, 40, 200, 40);
quad(200, 40, 35, 40, 35, 70, 210, 70);
quad(210, 70, 35, 70, 35, 120, 280, 120);


fill(30);
quad(0, 0, 0, 20, 55, 20, 30, 0);
quad(0, 20, 0, 40, 60, 40, 55, 20);
quad(0, 40, 0, 120, 160, 120, 60, 40);

quad(400, 0, 320, 0, 305, 20, 400, 20);
quad(305, 20, 400, 20, 400, 60, 295, 60);
quad(295, 60, 400, 60, 400, 70, 280, 70);
quad(280, 70, 400, 70, 400, 120, 220, 120);



//tail - moves as mouse moves
stroke(95, 25, 34);
fill(95, 25, 34);
quad(mouseX/-120 + 120, mouseY/120 + 80, 90, 110, mouseX/-120 + 75,  mouseY/120 + 85, mouseX/-120 + 110,  mouseY/120 + 70);
quad(mouseX/-120 + 75,  mouseY/120 + 85, mouseX/-170 + 75, mouseY/-170 + 60, mouseX/-170 + 105, mouseY/-17 + 55, mouseX/-120 + 110,  mouseY/120 + 70);
quad(mouseX/-170 + 75, mouseY/-170 + 60, mouseX/-170 + 85, mouseY/-170 + 45, mouseX/-170 + 107, mouseY/-170 + 50, mouseX/-170 + 105,  mouseY/-170 + 55);
quad(mouseX/-170 + 85, mouseY/-170 + 45, mouseX/-140 + 107, mouseY/-140 + 50, mouseX/-140 + 110, mouseY/-140 + 45, mouseX/-170 + 110, mouseY/-170 + 30);
quad(mouseX/-140 + 110, mouseY/-140 + 30, mouseX/-140 + 110, mouseY/-140 + 45, mouseX/-130 + 125, mouseY/-130 + 37, mouseX/-130 + 125, mouseY/-130 + 27);
quad(mouseX/-140 + 125, mouseY/-140 + 37, mouseX/-140 + 125, mouseY/-140 + 27, mouseX/-120 + 140, mouseY/-120 + 22, mouseX/-120 + 140, mouseY/-120 + 27);
quad(mouseX/-120 + 140, mouseY/-120 + 22, mouseX/-120 + 140, mouseY/-120 + 26, mouseX/-120 + 144, mouseY/-120 + 22, mouseX/-120 + 147, mouseY/-120 + 17); 

//remove outline for rest of drawing
noStroke();




//shoulder - lifts at shoulder as mouse goes downwards
fill(106, 35, 50);
quad(170, 80, 170, 110, 215, 110, 220, mouseY/-40 + 90);
//block
rect(190, 100, 80, 40);

//body - moves slightly with mouse
fill(100, 29, 41);
ellipse(mouseX/-120 + 150, mouseY/120 + 125, 110, 110);





// wings - adjust to downwards and follow shoulders
fill(106, 35, 50);

//shoulders
ellipse(mouseX/-180 + 230, mouseY/-40 + 105, 40, 40); //viewer right
ellipse(mouseX/-180 + 140, mouseY/-40 + 105, 40, 40); //viewer left




//viewer left wing
triangle(mouseX/-180 + 130, mouseY/-40 + 90, mouseY/-40 + 130, mouseY/-40 + 105, mouseX/-180 + 80, mouseY/-40 + 105);
quad(mouseX/-180 + 40, mouseY/-35 + 100, mouseY/-40 + 60, mouseY/-40 + 120, 130, 120, 130, mouseY/-40 + 100);
quad(mouseX/-170 + 65, mouseY/-75 + 100, mouseX/-70 + 40, mouseY/-75 + 100, 40, mouseY/-75 + 80, 55, mouseY/-75 + 80);
quad(40, 80, 55, 80, mouseX/70 + 60, 50, 40, 50);

//thin part
fill(31, 1, 11);
quad(mouseX/50 + 45, 50, 0, 50, 0, 80, 40, 80); 
quad(0, 80, 40, 80, mouseX/-60 + 60, 115, 0, 115);
quad(120, mouseY/-70 + 115, 0, mouseY/-30 + 115, 0, 130, 120, 130);

//foldover
fill(106, 35, 50);
triangle(mouseX/70 + 60, 50, 30, mouseY/150 + 30, 30, mouseY/50 + 55);
quad(30, mouseY/150 + 30, mouseX/70 + 30, mouseY/50 + 55, 0, mouseY/70 + 100, 0, mouseY/70 + 20); 

//thin part - pt 2
fill(50, 9, 20);
triangle(mouseX/70 + 45, 47, mouseY/-50 + 30, 37, 25, mouseY/70 +  50);
quad(30, mouseY/150 + 37,  mouseX/-70 + 0, mouseY/50 + 27, 0, mouseY/70 + 85, 25, mouseY/50 + 50);



//viewer right wing
fill(106, 35, 50);
triangle(mouseX/-180 + 240, mouseY/-40 + 90, mouseY/-40 + 240,  mouseY/-40 + 120, mouseX/-180 + 290, mouseY/-40 + 105);
quad(mouseX/-110 + 240,  mouseY/-35 + 105, mouseY/-40 + 275, mouseY/-40 + 120, 330, 100, 330,  mouseY/-40 + 60);
quad(mouseX/-50 + 305, mouseY/-75 + 40,  mouseX/-70 + 330, mouseY/-75 + 40, 330, mouseY/-75 + 60, 300, mouseY/-35 + 80);

//thin part
fill(31, 1, 11);
quad(mouseX/-50 + mouseY/-70 + 320, 40, 400, 40, 400, 80, mouseX/-90 + 315, 80);
quad(mouseX/-50 + 220, mouseY/-120 + 130, 400, 130, 400, 80, mouseX/-90 + 315, mouseY/-50 + 80);

//foldover
fill(106, 35, 50);
triangle(mouseX/-50 + 305, mouseY/-75 + 40, mouseX/40 + 330, 20, 330, mouseY/80 + 40);
quad( mouseX/40 + 330, 20, 330,  mouseY/80 + 40, mouseX/70 + 360,  mouseY/40 + 45, mouseX/70 + 360, mouseY/70 + 10);
quad(mouseX/70 + 360, mouseY/70 + 10, 400,  mouseY/40 + 8, mouseX/80 + 400, mouseY/30 + 60, mouseX/70 + 360, mouseY/40 + 45);

//thin part - pt 2
fill(50, 9, 20);
triangle(mouseX/-50 + 325, mouseY/150 + 33, 335, mouseY/80 + 33, 335,27);
quad(335, mouseY/80 + 33, 335, 27, 360,  mouseY/80 + 17, 360, mouseY/50 + 37);
quad(360, mouseY/80 + 17, 360,  mouseY/50 + 37, 400,  mouseY/30 + 50, 400, mouseY/40 + 15);

//ground
fill(7);
rect(0, 300, 400, 100);

//wall
fill(200);
rect(0, 130, 400, 190);

//taller things
fill(200);
rect(0, 110, 40, 20);
rect(80, 110, 40, 20);
rect(240, 110, 40, 20);
rect(320, 110, 40, 20);

//bricks
rectMode(CORNERS);
fill(167, 160, 160);
rect(0, 307, 5, 317);
rect(10, 307, 25, 317);
rect(30, 307, 45, 317);
rect(50, 307, 65, 317);
rect(70, 307, 85, 317);
rect(90, 307, 105, 317);
rect(110, 307, 125, 317);
rect(130, 307, 145, 317);
rect(150, 307, 165, 317);
rect(170, 307, 185, 317);
rect(190, 307, 205, 317);
rect(210, 307, 225, 317);
rect(230, 307, 245, 317);
rect(250, 307, 265, 317);
rect(270, 307, 285, 317);
rect(290, 307, 305, 317);
rect(310, 307, 325, 317);
rect(330, 307, 345, 317);
rect(350, 307, 365, 317);
rect(370, 307, 385, 317);
rect(390, 307, 400, 317);

//

rect(0, 292, 15, 302);
rect(20, 292, 35, 302);
rect(40, 292, 55, 302);
rect(60, 292, 75, 302);
rect(80, 292, 95, 302);
rect(100, 292, 115, 302);
rect(120, 292, 135, 302);
rect(140, 292, 155, 302);
rect(160, 292, 175, 302);
rect(180, 292, 195, 302);
rect(200, 292, 215, 302);
rect(220, 292, 235, 302);
rect(240, 292, 255, 302);
rect(260, 292, 275, 302);
rect(280, 292, 295, 302);
rect(300, 292, 315, 302);
rect(320, 292, 335, 302);
rect(340, 292, 355, 302);
rect(360, 292, 375, 302);
rect(380, 292, 395, 302);

//

rect(0, 277, 5, 287);
rect(10, 277, 25, 287);
rect(30, 277, 45, 287);
rect(50, 277, 65, 287);
rect(70, 277, 85, 287);
rect(90, 277, 105, 287);
rect(110, 277, 125, 287);
rect(130, 277, 145, 287);
rect(150, 277, 165, 287);
rect(170, 277, 185, 287);
rect(190, 277, 205, 287);
rect(210, 277, 225, 287);
rect(230, 277, 245, 287);
rect(250, 277, 265, 287);
rect(270, 277, 285, 287);
rect(290, 277, 305, 287);
rect(310, 277, 325, 287);
rect(330, 277, 345, 287);
rect(350, 277, 365, 287);
rect(370, 277, 385, 287);
rect(390, 277, 400, 287);

//start midtone
fill(184, 180, 180);
rect(0, 262, 15, 272);
rect(20, 262, 35, 272);
rect(40, 262, 55, 272);
rect(60, 262, 75, 272);
rect(80, 262, 95, 272);
rect(100, 262, 115, 272);
rect(120, 262, 135, 272);
rect(140, 262, 155, 272);
rect(160, 262, 175, 272);
rect(180, 262, 195, 272);
rect(200, 262, 215, 272);
rect(220, 262, 235, 272);
rect(240, 262, 255, 272);
rect(260, 262, 275, 272);
rect(280, 262, 295, 272);
rect(300, 262, 315, 272);
rect(320, 262, 335, 272);
rect(340, 262, 355, 272);
rect(360, 262, 375, 272);
rect(380, 262, 395, 272);

//

rect(0, 247, 5, 257);
rect(10, 247, 65, 257);
rect(30, 247, 45, 257);
rect(50, 247, 65, 257);
rect(70, 247, 85, 257);
rect(90, 247, 105, 257);
rect(110, 247, 125, 257);
rect(130, 247, 145, 257);
rect(150, 247, 165, 257);
rect(170, 247, 185, 257);
rect(190, 247, 205, 257);
rect(210, 247, 225, 257);
rect(230, 247, 245, 257);
rect(250, 247, 265, 257);
rect(270, 247, 285, 257);
rect(290, 247, 305, 257);
rect(310, 247, 325, 257);
rect(330, 247, 345, 257);
rect(350, 247, 365, 257);
rect(370, 247, 385, 257);
rect(390, 247, 400, 257);

//

rect(0, 232, 15, 242);
rect(20, 232, 35, 242);
rect(40, 232, 55, 242);
rect(60, 232, 75, 242);
rect(80, 232, 95, 242);
rect(100, 232, 115, 242);
rect(120, 232, 135, 242);
rect(140, 232, 155, 242);
rect(160, 232, 175, 242);
rect(180, 232, 195, 242);
rect(200, 232, 215, 242);
rect(220, 232, 235, 242);
rect(240, 232, 255, 242);
rect(260, 232, 275, 242);
rect(280, 232, 295, 242);
rect(300, 232, 315, 242);
rect(320, 232, 335, 242);
rect(340, 232, 355, 242);
rect(360, 232, 375, 242);
rect(380, 232, 395, 242);

//start light
fill(194, 190, 190);
rect(0, 217, 5, 227);
rect(10, 217, 25, 227);
rect(30, 217, 45, 227);
rect(50, 217, 65, 227);
rect(70, 217, 85, 227);
rect(90, 217, 105, 227);
rect(110, 217, 125, 227);
rect(130, 217, 145, 227);
rect(150, 217, 165, 227);
rect(170, 217, 185, 227);
rect(190, 217, 205, 227);
rect(210, 217, 225, 227);
rect(230, 217, 245, 227);
rect(250, 217, 265, 227);
rect(270, 217, 285, 227);
rect(290, 217, 305, 227);
rect(310, 217, 325, 227);
rect(330, 217, 345, 227);
rect(350, 217, 365, 227);
rect(370, 217, 385, 227);
rect(390, 217, 400, 227);

//

rect(0, 202, 15, 212);
rect(20, 202, 35, 212);
rect(40, 202, 55, 212);
rect(60, 202, 75, 212);
rect(80, 202, 95, 212);
rect(100, 202, 115, 212);
rect(120, 202, 135, 212);
rect(140, 202, 155, 212);
rect(160, 202, 175, 212);
rect(180, 202, 195, 212);
rect(200, 202, 215, 212);
rect(220, 202, 235, 212);
rect(240, 202, 255, 212);
rect(260, 202, 275, 212);
rect(280, 202, 295, 212);
rect(300, 202, 315, 212);
rect(320, 202, 335, 212);
rect(340, 202, 355, 212);
rect(360, 202, 375, 212);
rect(380, 202, 395, 212);

//

rect(0, 187, 5, 197);
rect(10, 187, 25, 197);
rect(30, 187, 45, 197);
rect(50, 187, 65, 197);
rect(70, 187, 85, 197);
rect(90, 187, 105, 197);
rect(110, 187, 125, 197);
rect(130, 187, 145, 197);
rect(150, 187, 165, 197);
rect(170, 187, 185, 197);
rect(190, 187, 205, 197);
rect(210, 187, 225, 197);
rect(230, 187, 245, 197);
rect(250, 187, 265, 197);
rect(270, 187, 285, 197);
rect(290, 187, 305, 197);
rect(310, 187, 325, 197);
rect(330, 187, 345, 197);
rect(350, 187, 365, 197);
rect(370, 187, 385, 197);
rect(390, 187, 400, 197);

//lightest
fill(198, 196, 196);
rect(0, 172, 15, 182);
rect(20, 172, 35, 182);
rect(40, 172, 55, 182);
rect(60, 172, 75, 182);
rect(80, 172, 95, 182);
rect(100, 172, 115, 182);
rect(120, 172, 135, 182);
rect(140, 172, 155, 182);
rect(160, 172, 175, 182);
rect(180, 172, 195, 182);
rect(200, 172, 215, 182);
rect(220, 172, 235, 182);
rect(240, 172, 255, 182);
rect(260, 172, 275, 182);
rect(280, 172, 295, 182);
rect(300, 172, 315, 182);
rect(320, 172, 335, 182);
rect(340, 172, 355, 182);
rect(360, 172, 375, 182);
rect(380, 172, 395, 182);

//

rect(0, 157, 5, 167);
rect(10, 157, 25, 167);
rect(30, 157, 45, 167);
rect(50, 157, 65, 167);
rect(70, 157, 85, 167);
rect(90, 157, 105, 167);
rect(110, 157, 125, 167);
rect(130, 157, 145, 167);
rect(150, 157, 165, 167);
rect(170, 157, 185, 167);
rect(190, 157, 205, 167);
rect(210, 157, 225, 167);
rect(230, 157, 245, 167);
rect(250, 157, 265, 167);
rect(270, 157, 285, 167);
rect(290, 157, 305, 167);
rect(310, 157, 325, 167);
rect(330, 157, 345, 167);
rect(350, 157, 365, 167);
rect(370, 157, 385, 167);
rect(390, 157, 400, 167);

//

rect(0, 142, 15, 152);
rect(20, 142, 35, 152);
rect(40, 142, 55, 152);
rect(60, 142, 75, 152);
rect(80, 142, 95, 152);
rect(100, 142, 115, 152);
rect(120, 142, 135, 152);
rect(140, 142, 155, 152);
rect(160, 142, 175, 152);
rect(180, 142, 195, 152);
rect(200, 142, 215, 152);
rect(220, 142, 235, 152);
rect(240, 142, 255, 152);
rect(260, 142, 275, 152);
rect(280, 142, 295, 152);
rect(300, 142, 315, 152);
rect(320, 142, 335, 152);
rect(340, 142, 355, 152);
rect(360, 142, 375, 152);
rect(380, 142, 395, 152);


//broken part of wall (same colour as dragon's body
fill(100, 29, 41);
quad(150, 130, 155, 140, 180, 150, 180, 130);
triangle(155, 130, 180, 160, 180, 150);
quad(210, 130, 200, 150, 180, 160, 180, 130);

//border between bricks and arches 
fill(200);
rectMode(CORNER);
ellipse(88, 250, 90, 90);
rect(43, 250, 90, 70);
ellipse(312, 250, 90, 90);
rect(267, 250, 90, 70);

//arch
fill(170);
ellipse(88, 250, 80, 80);
rect(48, 250, 80, 70);
ellipse(312, 250, 80, 80);
rect(272, 250, 80, 70);

//hole
fill(7);
ellipse(88, 250, 60, 60);
rect(58, 250, 60, 70);
ellipse(312, 250, 60, 60);
rect(282, 250, 60, 70);

//smoke
fill(0, 0, 0, 50);
ellipse(43, 300, 40, 40);
ellipse(273, 320, 50, 50);
ellipse(154, 310, 40, 40);
ellipse(80, 320, 30, 30);
ellipse(372, 300, 70, 70);
ellipse(272, 290, 50, 50);
ellipse(100, 320, 50, 50);
ellipse(17, 310, 30, 30);
ellipse(293, 330, 60, 60);
ellipse(73, 320, 70, 70);
ellipse(143, 310, 90, 90);
ellipse(350, 320, 70, 70);
ellipse(158, 320, 70, 70);
ellipse(27, 320, 70, 70);
ellipse(260, 320, 70, 70);
ellipse(310, 320, 70, 70);
ellipse(373, 320, 70, 70);
fill(0, 0, 0, 100);
ellipse(67, 300, 60, 60);
ellipse(362, 305, 70, 70);
ellipse(387, 310, 60, 60);
ellipse(80, 315, 60, 60);
ellipse(48, 308, 70, 70);
ellipse(72, 320, 50, 50);
ellipse(266, 310, 80, 80);
ellipse(115, 330, 70, 70);
ellipse(315, 307, 60, 60);
ellipse(285, 315, 60, 60);
ellipse(34, 320, 70, 70);
ellipse(297, 320, 50, 50);
fill(0, 0, 0, 150);
ellipse(272, 300, 70, 70);
ellipse(342, 290, 50, 50);
ellipse(90, 310, 50, 50);
ellipse(117, 320, 30, 30);
ellipse(296, 310, 60, 60);
ellipse(45, 320, 70, 70);
ellipse(143, 310, 80, 80);
ellipse(370, 300, 70, 70);
ellipse(258, 320, 40, 40);
ellipse(334, 310, 70, 70);
ellipse(340, 320, 50, 50);
ellipse(27, 320, 70, 70);
ellipse(309, 320, 60, 60);


//neck - moves to follow head, half anchored in place
fill(106, 35, 50);
quad(170, 100, 160, 115, 170, 137, 195, 105);
quad(195, 105, 170, 137, mouseX/8 + 180, mouseY/10 + 130, mouseX/8 + 205, mouseY/10 + 120);

//horns - follow head
fill(150);
quad(mouseX/12 + 160, mouseY/10 + 75, mouseX/10 + 162, mouseY/10 + 105, mouseX/10 + 170, mouseY/10 + 125, mouseX/10 + 185, mouseY/10 + 110);
quad(mouseX/13 + 230, mouseY/10 + 75, mouseX/11 + 228, mouseY/10 + 105, mouseX/10 + 220, mouseY/10 + 125, mouseX/10 + 205, mouseY/10 + 110);
triangle(mouseX/12 + 155, mouseY/10 + 120, mouseX/10 + 180, mouseY/10 + 130, mouseX/9 + 180, mouseY/10 + 150); 
triangle(mouseX/12 + 235, mouseY/10 + 120, mouseX/10 + 210, mouseY/10 + 130, mouseX/10 + 210, mouseY/10 + 150);
triangle(mouseX/11 + 170,  mouseY/10 + 143, mouseX/8 + 180,  mouseY/10 + 160, mouseX/10 + 180,  mouseY/10 + 147); 
triangle(mouseX/9 + 220,  mouseY/10 + 143, mouseX/10 + 210,  mouseY/10 + 160, mouseX/10 + 210,  mouseY/10 + 147);

//head - moves with mouse, looks as if turning slightly
fill(106, 35, 50);
ellipse(mouseX/10 + 195, mouseY/10 + 125, 50, 50);
ellipse(mouseX/8 + 195, mouseY/10 + 165, 30, 30);
quad(mouseX/10 + 170, mouseY/10 + 125, mouseX/8 + 180, mouseY/10 + 165, mouseX/8 + 210, mouseY/10 + 165, mouseX/10 + 220, mouseY/10 + 125); 

//face - moves with mouth, follows face, illusion of turning
fill(0);
ellipse(mouseX/8 + 185, mouseY/10 + 140, 11, 11);
ellipse(mouseX/8.2 + 205, mouseY/10 + 140, 11, 11);
strokeWeight(1);
stroke(0);
line(mouseX/7 + 187, mouseY/10 + 165, mouseX/7 + 190, mouseY/10 + 170);
line(mouseX/8 + 203, mouseY/10 + 165, mouseX/7.7 + 200, mouseY/10 + 170);
noStroke();
fill(106, 35, 50);
quad(mouseX/8 + 175, mouseY/10 + 132, mouseX/9.3 + 215, mouseY/10 + 132, mouseX/7.5 + 200, mouseY/10 + 146, mouseX/8 + 190, mouseY/10 + 146);

} 


void mousePressed() {
  
//FIRE - doesn't follow cursor, stays in lower right corner (so it looks as normal as possible)
frameRate(5);
fill(255, 69, 36);
quad(mouseX/8 + 160, mouseY/8 + 250, mouseX/10 + 180, mouseY/10 + 300, mouseX/8 + 200, mouseY/10 + 170, mouseX/8 + 190, mouseY/10 + 170);
quad(mouseX/8 + 210, mouseY/6 + 320, mouseX/10 + 190, mouseY/10 + 290, mouseX/8 + 197, mouseY/10 + 170, mouseX/8 + 230, mouseY/8 + 290);
quad(mouseX/10 + 250, mouseY/10 + 250, mouseX/8 + 250, mouseY/10 + 300, mouseX/8 + 190, mouseY/10 + 170, mouseX/8 + 200, mouseY/10 + 170);

fill(252, 218, 76);
quad(mouseX/8 + 177, mouseY/8 + 220, mouseX/10 + 180, mouseY/10 + 250, mouseX/8 + 200, mouseY/10 + 170, mouseX/8 + 190, mouseY/10 + 170);
quad(mouseX/8 + 210, mouseY/6 + 290, mouseX/10 + 200, mouseY/10 + 250, mouseX/8 + 197, mouseY/10 + 170, mouseX/8 + 215, mouseY/8 + 250);
quad(mouseX/10 + 235, mouseY/10 + 230, mouseX/8 + 240, mouseY/10 + 260, mouseX/8 + 190, mouseY/10 + 170, mouseX/8 + 200, mouseY/10 + 170);


//parts of head and nose are redrawn so fire appears under them rather than over them
fill(106, 35, 50);
ellipse(mouseX/8 + 195, mouseY/10 + 165, 30, 30);

strokeWeight(1);
stroke(0);
line(mouseX/7 + 187, mouseY/10 + 165, mouseX/7 + 190, mouseY/10 + 170);
line(mouseX/8 + 203, mouseY/10 + 165, mouseX/7.7 + 200, mouseY/10 + 170);

}