Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*Processing Interactive Drawing
 CHRISTINA CHU
 GEOMETRIC Mercurial the Spectre, DOTA 2
 9/9/17
 A lot of code experimenting went into this and seeing previous examples of this project from past years has really helped me create this.
 */

void setup() {
  size(400, 400);
}

//Mouse press thing/////////////////////
//I wanted to do something awesome with the mousepress call, but I didn't want to change what I already had so I just made her say one of her in-game quotes.
void mousePressed() {
  println("The Spectre gathers.");
}

void draw() {
  frameRate(60);
  background(0, 0, 0);

  //BACKGROUND////////////////////////////////////////
  fill(9, 9, 20, 255-mouseY/3);
  ellipse(195, 224, 300, 500);
  fill(12, 11, 33, 255-mouseY/3);
  ellipse(195, 224, 200, 400);
  fill(28, 26, 81, 255-mouseY/3);
  ellipse(195, 224, 100, 300);

  //Floating crystals that are pleasing to the eye//
  //They fade in when Spectre is enraged (mouse movement down) and fade out when she's "okay" (mouse movement up)
  fill(116, 37, 219, 0+mouseY/2);
  quad(350, 82, 360, 62, 370, 82, 360, 105);
  fill(32, 21, 94, 0+mouseY);
  quad(340, 72, 350, 52, 360, 72, 350, 95); //right crystal

  quad(49, 94, 59, 114, 49, 139, 38, 114);
  fill(50, 21, 94, 0+mouseY/2);
  quad(59, 104, 69, 124, 59, 149, 48, 124); //left crystal

  fill(85, 26, 124, 0+mouseY);
  triangle(133, 0, 145, 16, 156, 0); //top crystal

  fill(71, 27, 79, 0+mouseY/4);
  quad(258, 244, 270, 224, 282, 244, 270, 264);//bottom right crystal

  fill(123, 71, 165, 0+mouseY/7);
  quad(342, 341, 347, 349, 342, 360, 337, 347);//bottom-most right crystal (tiny)

  fill(60, 36, 150, 0+mouseY/5);
  quad(23, 310, 15, 326, 25, 345, 34, 328);//bottom left crystal



  ellipseMode(CENTER);
  //HEAD/////////////////////////////////////////////////
  noStroke();
  /*Ghostly trail 
   supposed to look like they are individual triangles since it gives it a geometric "ghostly" effect, especially when you stretch out the trail.
   */
  //last triangle
  fill(64, 21, 162, 200-mouseY/2);
  triangle(305, 106+(cos(7+frameCount/4)), 341+mouseX/10, 155+(cos(20+frameCount/4))-mouseY/10, 264+(cos(4+frameCount/4)), 120+(cos(8+frameCount/4)));
  fill(97, 39, 186, 220-mouseY/3);
  triangle(254, 73+(cos(7+frameCount/4)), 321+mouseX/10, 101+(cos(60+frameCount/4))-mouseY/10, 215+(cos(4+frameCount/4)), 137+(cos(8+frameCount/4)));
  //first triangle
  fill(107, 39, 186, 250-mouseY/6);
  triangle(165, 85+(cos(7+frameCount/4)), 260+mouseX/10, 64+(cos(40+frameCount/4))-mouseY/10, 212+(cos(4+frameCount/4)), 143+(cos(8+frameCount/4)));
  //actual head
  fill(123-mouseY/6, 22-mouseY/6, 163-mouseY/6, 255);
  ellipse(170, 133, 90, 100);

  //EYES//////////////////////////////////
  fill(56, 255, 255);
  triangle(172, 135, 197, 115, 200, 130);
  fill(56, 255, 255);
  triangle(150, 136, 134, 116, 133, 133);

  //EYE GLOW///////////////////////////////
  //Figuring out how to make them go in opposite directions took me forever to figure out, but it paid off in the end
  fill(56, 255, 255, 100+mouseY/5);
  quad(172, 135, 198, 106, (((mouseY)*(0.05)+222)+cos(5+frameCount/5)), 96, 200, 129);
  quad(150, 136, 138, 108, (114-((mouseY/20))+cos(5+frameCount/5)), 102, 132, 131);

  //DRESS//////////////////////////////////
  //middle
  fill(32-mouseY/6, 12-mouseY/6, 61-mouseY/6);
  triangle(166, 186, 112-mouseY/20, 366, 248-mouseY/20, 366);
  //right
  fill(123-mouseY/6, 22-mouseY/6, 163-mouseY/6);
  quad(166, 186, 210-mouseY/20+cos(20+frameCount/3), 371+cos(20+frameCount/3), 290-mouseY/20+cos(20+frameCount/3), 386+cos(20+frameCount/3), 189+cos(20+frameCount/3), 196+cos(20+frameCount/3));
  //left
  fill(123-mouseY/6, 22-mouseY/6, 163-mouseY/6);
  quad(166, 186, 140-mouseY/20+cos(20+frameCount/3), 371+cos(20+frameCount/3), 86-mouseY/20+cos(20+frameCount/3), 386+cos(20+frameCount/3), 142+cos(5+frameCount/4), 198+cos(10+frameCount/5));

  /*LIL' SPEC BACKGROUND PROP////////////////////////////////////////////////////////////
   This lil' haunting spectre ghost follows the direction of the mouse cursor.
   */
  noStroke();
  //left arm
  fill(47, 22, 68, 255-mouseX/2);
  triangle(327+mouseX/6, 221+mouseY/6, 281+mouseX/6, 231+mouseY/6, 295+mouseX/6, 249+mouseY/6);
  triangle(281+mouseX/6, 231+mouseY/6, 270+mouseX/6, 241+mouseY/6, 288+mouseX/6, 239+mouseY/6);
  triangle(288+mouseX/6, 239+mouseY/6, 278+mouseX/6, 252+mouseY/6, 295+mouseX/6, 249+mouseY/6);
  //ghostly head trail
  fill(44, 12, 51, 255-mouseX/2);
  triangle(368+mouseX/6, 175+mouseY/6, (((mouseX)*(0.05)+382)+cos(5+frameCount/5))+mouseX/6, 230+mouseY/6, 361+mouseX/6, 189+mouseY/6);
  fill(47, 22, 68, 255-mouseX/2);
  triangle(332+mouseX/6, 188+mouseY/6, 349+mouseX/6, 213+mouseY/6, (((mouseX)*(0.05)+372)+cos(5+frameCount/5))+mouseX/6, 169+mouseY/6);
  fill(44, 21, 61, 255-mouseX/2);
  triangle(379+mouseX/6, 172+mouseY/6, 383+mouseX/6, 179+mouseY/6, (((mouseX)*(0.05)+394)+cos(5+frameCount/5))+mouseX/6, 169+mouseY/6);
  //body
  fill(67, 25, 104, 255-mouseX/2);
  quad(326+mouseX/6, 224+mouseY/6, 355+mouseX/6, 219+mouseY/6, 380+mouseX/6, 267+mouseY/6, 327+mouseX/6, 227+mouseY/6);
  //head
  quad(311+mouseX/6, 184+mouseY/6, 308+mouseX/6, 224+mouseY/6, 350+mouseX/6, 228+mouseY/6, 351+mouseX/6, 191+mouseY/6);
  //eye glow
  fill(56, 255, 255, 150-mouseX/2);
  triangle(342+mouseX/6, 202+mouseY/6, (((mouseX)*(0.05)+364)+cos(5+frameCount/5)) +mouseX/6, 197+mouseY/6, 341+mouseX/6, 213+mouseY/6);
  triangle(309+mouseX/6, 200+mouseY/6, 314+mouseX/6, 207+mouseY/6, (328-((mouseX/20))+cos(5+frameCount/5))+mouseX/6, 192+mouseY/6);
  //eyes
  fill(56, 255, 255, 255-mouseX/2);
  //right eye
  triangle(330+mouseX/6, 210+mouseY/6, 342+mouseX/6, 202+mouseY/6, 341+mouseX/6, 213+mouseY/6);
  //left eye
  triangle(316+mouseX/6, 207+mouseY/6, 310+mouseX/6, 199+mouseY/6, 309+mouseX/6, 209+mouseY/6);
  //right arm
  fill(47, 22, 68, 255-mouseX/2);
  quad(351+mouseX/6, 224+mouseY/6, 357+mouseX/6, 216+mouseY/6, 383+mouseX/6, 232+mouseY/6, 374+mouseX/6, 241+mouseY/6);
  triangle(383+mouseX/6, 232+mouseY/6, 390+mouseX/6, 238+mouseY/6, 379+mouseX/6, 236+mouseY/6);
  triangle(379+mouseX/6, 236+mouseY/6, 374+mouseX/6, 240+mouseY/6, 380+mouseX/6, 244+mouseY/6);
  //emblem
  fill(96, 9, 67, 255-mouseX/2);
  quad(324+mouseX/6, 222+mouseY/6, 321+mouseX/6, 231+mouseY/6, 332+mouseX/6, 234+mouseY/6, 334+mouseX/6, 226+mouseY/6);

  /*WEAPON/////////////////////////////////////////////
   The spectre's classic weapon of choice. It has the shape of a hula hoop and emits an ethereal glow.
   Held in one hand when the mouse moves to the left. Held in both when the mouse moves to the right.
   */  //////////////////////////////////////////////////
  stroke(255, 71, 193, 190);
  strokeWeight(7);
  noFill();
  ellipse(225-mouseX/5, 301, 100, 100);
  stroke(255, 71, 193, 100);
  ellipse(225-mouseX/5, 301, 105, 105);
  stroke(255, 71, 193, 150);
  ellipse(225-mouseX/5, 301, 110, 110);
  stroke(255, 71, 193, 150);
  ellipse(225-mouseX/5, 301, 95+cos(20+frameCount/2), 95+cos(20+frameCount/2));
  stroke(255, 71, 193, 100);
  ellipse(225-mouseX/5, 301, 100+cos(20+frameCount/2), 100+cos(20+frameCount/2));
  stroke(255, 71, 193, 50);
  ellipse(225-mouseX/5, 301, 120+cos(20+frameCount/2), 120+cos(20+frameCount/2));
  noStroke();

  //ARM (X movement) ////////////////////////////////////////
  //left
  fill(123-mouseY/6, 22-mouseY/6, 163-mouseY/6, 255);
  triangle(145, 197, 69+mouseX/6, 264, 41+mouseX/6, 243);
  //right finger
  triangle(71+mouseX/6, 263, 58+mouseX/6, 253, 52+mouseX/6, 275);
  //left finger
  triangle (42+mouseX/6, 242, 58+mouseX/6, 253, 35+mouseX/6, 270);
  stroke(0, 0, 0, 50); //line to allow user to differentiate the arm from body
  strokeWeight(1);
  //arm line
  line(145, 197, 69+mouseX/6, 264);
  //line for right finger
  line(71+mouseX/6, 263, 52+mouseX/6, 275);

  //ARM (X movement) ////////////////////////////////////////
  //right
  noStroke();
  fill(123-mouseY/6, 22-mouseY/6, 163-mouseY/6, 255);
  triangle(186, 197, 282-mouseX/6, 249, 237-mouseX/6, 262);
  //right finger
  triangle(281-mouseX/6, 248, 284-mouseX/4, 279, 258-mouseX/6, 254);
  //left finger
  triangle(236-mouseX/6, 261, 254-mouseX/5, 281, 258-mouseX/6, 254);
  stroke(0, 0, 0, 50); //line to allow user to differentiate the arm from body
  strokeWeight(1);
  line(186, 197, 236-mouseX/6, 261);
  line(186, 197, 282-mouseX/6, 249);
  //line for right finger
  line(284-mouseX/4, 279, 258-mouseX/6, 254);
  line(284-mouseX/4, 279, 281-mouseX/6, 248);
  //line for left finger
  line(258-mouseX/6, 254, 254-mouseX/5, 281);

  /*/////////////////////////////////////////////////////////
   These shoulder parts grow in size as the mouse cursor moves downwards.
   */  ////////////////////////////////////////////////////////
  //FLOWY SHOULDER RIGHT
  //top
  noStroke();
  fill(64+mouseY/10, 21, 162+mouseY/10, 150+mouseY/8);
  quad(175, 186, 226, 146, ((mouseY)*(0.09)+284), ((135-mouseY/20)+cos(20+frameCount/3)), 225, (((mouseY)*(0.025)+172))+cos(5+frameCount/5));
  fill(97+mouseY/10, 39, 186+mouseY/10, 150+mouseY/8);
  quad(175, 186, 231, 182, ((mouseY)*(0.09)+293), ((167-mouseY/20)+cos(20+frameCount/3)), 234, (((mouseY)*(0.025)+200))+cos(5+frameCount/5));
  fill(107+mouseY/10, 39, 186+mouseY/10, 150+mouseY/8);
  quad(175, 186, 234, 211, ((mouseY)*(0.09)+267), ((234-mouseY/20)+cos(20+frameCount/3)), 205, (((mouseY)*(0.025)+218))+cos(5+frameCount/5));


  //FLOWY SHOULDER LEFT/////////////////////////////////////////
  //top
  fill(64+mouseY/10, 21, 162+mouseY/10, 150+mouseY/8);
  quad(160, 186, 113, 149, ((73-(mouseY/20)+cos(5+frameCount/5))), ((134-mouseY/20)+cos(20+frameCount/3)), 112, (((mouseY)*(0.025)+175))+cos(5+frameCount/5));
  fill(97+mouseY/10, 39, 186+mouseY/10, 150+mouseY/8);
  quad(160, 186, 112, 185, ((69-(mouseY/20)+cos(5+frameCount/5))), ((178-mouseY/20)+cos(20+frameCount/3)), 104, (((mouseY)*(0.025)+200))+cos(5+frameCount/5));
  fill(107+mouseY/10, 39, 186+mouseY/10, 150+mouseY/8);
  quad(160, 186, 108, 209, ((82-(mouseY/20)+cos(5+frameCount/5))), ((232-mouseY/20)+cos(20+frameCount/3)), 131, (((mouseY)*(0.025)+212))+cos(5+frameCount/5));



  //CHEST EMBLEM///////////////////////////////////////////////////////
  fill(150 +mouseY/5, 20, 119);
  ellipse(165, 184, 25, 25);

  /*LIL' SPEC HAUNT (FOREGROUND)//////////////////////////////////////////////////////////////////////////////
   This lil' haunting spectre ghost manifests itself when the mouse cursor moves to the left. She fades out when the cursor goes to the right.
   */  /////////////////////////////////////////////////////////////////////////////////////////////////////////
  //body back
  fill(0, 0, 0, 255-mouseX);
  quad(74+mouseX/6, 344, 82+mouseX/6, 365, 99+mouseX/6, 359, 89+mouseX/6, 342);
  //chest
  fill(114-mouseY/6, 9-mouseY/6, 107-mouseY/6, 255-mouseX);
  quad(65+mouseX/6, 316, 54+mouseX/6, 345, 107+mouseX/6, 343, 108+mouseX/6, 318);
  //body
  quad(75+mouseX/6, 344, 87+mouseX/6, 381, 51+mouseX/6, 385, 54+mouseX/6, 344);
  quad(89+mouseX/6, 343, 106+mouseX/6, 372, 139+mouseX/6, 356, 107+mouseX/6, 342);
  //head
  //back head ghostly trail
  fill(64, 10, 50, 255-mouseX);
  triangle(104+mouseX/6, 279, (((mouseX)*(0.2)+150)+cos(5+frameCount/5)) +mouseX/6, 274, 120+mouseX/6, 316);
  fill(114-mouseY/6, 9-mouseY/6, 107-mouseY/6, 255-mouseX);
  ellipseMode(CENTER);
  ellipse(90+mouseX/6, 304, 80, 60);
  //eyes
  //right
  fill(56, 255, 255, 255-mouseX);
  triangle(85+mouseX/6, 301, 106+mouseX/6, 294, 109+mouseX/6, 305);
  //left
  triangle(72+mouseX/6, 299, 59+mouseX/6, 291, 56+mouseX/6, 301);
  //eye glow
  fill(56, 255, 255, 150-mouseX);
  triangle(85+mouseX/6, 299, (((mouseX)*(0.2)+113)+cos(5+frameCount/5)) +mouseX/6, 287, 110+mouseX/6, 306);
  triangle(72+mouseX/6, 299, (53-((mouseX/5))+cos(5+frameCount/5))+mouseX/6, 285, 56+mouseX/6, 301);
  //emblem
  fill(150 +mouseY/5, 20, 255, 255-mouseX);
  ellipse(83+mouseX/6, 332, 16, 20);
  //arms
  fill(155, 0, 145, 255-mouseX);
  //left arm
  triangle(59+mouseX/6, 326, 42+mouseX/6, 339, 64+mouseX/6, 340);
  triangle(42+mouseX/6, 339, 65+mouseX/6, 362, 81+mouseX/6, 342);
  triangle(65+mouseX/6, 362, 81+mouseX/6, 362, 72+mouseX/6, 352);
  triangle(81+mouseX/6, 341, 86+mouseX/6, 355, 72+mouseX/6, 352);
  //right arm
  triangle(108+mouseX/6, 330, 131+mouseX/6, 331, 123+mouseX/6, 342);
  triangle(127+mouseX/6, 336, 135+mouseX/6, 338, 131+mouseX/6, 331);
  triangle(127+mouseX/6, 336, 129+mouseX/6, 342, 122+mouseX/6, 342);
}