Pikachu in Processing Js

// If you click Pikachu, you just might get zapped! /** * Pikachu from Pokémon, as seen in Super Smash Bros for Wii U/Nintendo 3DS. * * Reference Image: http://www.smashbros.com/images/character/pikachu/main.png * * Programming Experience: 20+ months and I've finally finished learning Processing Js! */ ellipse(177,235,114,107); // Conveniently, Pikachu is bilaterally symmetrical. Axis of symmetry x = 173 /** * For those interested, I have many more programs like this. * Check out the "Well-Known Characters" tag: * www.khanacademy.org/cs/all-programs/6171340237307904 */ mouseClicked = function(){ if(mouseX > 340 && mouseX < 390 && mouseY > 340 && mouseY < 390){ println("Created by DY (darryl-yeo.com)\n\nCheck out all my programs at www.khanacademy.org/cs/all-programs/6171340237307904"); } }; var mouseIsOver; mouseOver = function(){mouseIsOver = true; mouseMoved();}; mouseOut = function(){mouseIsOver = false; mouseMoved();}; // Sets a default yellow fill and thin gray stroke, unless the "apply" parameter is false. var pikachuYellow = function(apply){ if(apply){return;} fill(255, 220, 0); /* fill(0, 0, 0, 0); fill(lerpColor( color(0, 0, 0, 50), color(255, 220, 0), mouseX/ 400//sin(frameCount) * 0.5 + 0.5 )); */ stroke(97, 79, 24); strokeWeight(0.12); }; //Draws Pikachu, or a glowing outline if "outline" is true. In the outline, some body parts are not included, and pikachuYellow() will not set a fill or stroke. var pikachu = function(outline){ pushMatrix(); //translate(0, -10); /* background(255, 254, 252); for(var y = 250; y < 400; y += 3){ stroke(lerpColor( color(255, 254, 252), color(255, 179, 0), (y - 250) / (400 - 250) )); line(0, y, width, y); } */ // *Bzzzzt!* if(outline){ stroke(lerpColor( color(255, 255, 255, 200), color(255, 227, 84, 100), random() )); strokeWeight(random(5, 9)); strokeJoin(ROUND); } //Tail pikachuYellow(outline); beginShape(); vertex(235, 267); vertex(260, 269); vertex(253, 240); vertex(296, 244); vertex(284, 193); vertex(336, 196); bezierVertex(346, 183, 358, 154, 366, 132); bezierVertex(339, 133, 276, 143, 243, 154); vertex(262, 217); vertex(232, 222); vertex(240, 255); vertex(232, 256); vertex(237, 266); endShape(); if(!outline){ //Tail Mark fill(168, 78, 0); beginShape(); vertex(235, 267); vertex(260, 269); vertex(253, 243); vertex(253, 249); vertex(248, 244); vertex(248, 251); vertex(243, 244); vertex(243, 248); vertex(238, 241); vertex(238, 246); vertex(240, 255); vertex(232, 256); endShape(); } pikachuYellow(outline); //Right Foot beginShape(); vertex(127, 337); bezierVertex(124, 339, 123, 342, 123, 347); vertex(125, 346); vertex(126, 349); vertex(127, 347); vertex(130, 349); bezierVertex(137, 346, 145, 345, 145, 336); endShape(); //Left Foot beginShape(); vertex(219, 337); bezierVertex(222, 339, 223, 342, 223, 347); vertex(221, 346); vertex(220, 349); vertex(219, 347); vertex(216, 349); bezierVertex(209, 346, 201, 345, 201, 336); endShape(); //Body beginShape(); vertex(120, 201); vertex(116, 241); bezierVertex(113, 259, 106, 288, 106, 297); bezierVertex(106, 320, 114, 330, 122, 334); bezierVertex(141, 346, 162, 324, 173, 328); bezierVertex(184, 324, 205, 346, 224, 334); bezierVertex(232, 330, 240, 320, 240, 297); bezierVertex(240, 288, 233, 259, 230, 242); vertex(226, 201); endShape(); if(!outline){ //Hand Shadows fill(100, 100, 100, 100);fill(0, 0, 0, 13); noStroke(); pushMatrix(); translate(140, 252); rotate(-22); for(var i = 0.6; i <= 1; i += 0.04){ ellipse(-2, 0, i * 45, i * 75); } //ellipse(0, 0, 48, 72); popMatrix(); pushMatrix(); translate(206, 252); rotate(22); for(var i = 0.6; i <= 1; i += 0.04){ ellipse(2, 0, i * 45, i * 75); } popMatrix(); } //Chest /*fill(255, 220, 0); noStroke(); quad(123, 203, 223, 203, 185, 270, 161, 270);*/ //Right Hand pikachuYellow(outline); beginShape(); vertex(120, 198); bezierVertex(106, 253, 123, 265, 147, 283); vertex(150, 281); vertex(152, 282); vertex(154, 280); vertex(157, 280); vertex(158, 278); vertex(161, 276); vertex(160, 274); vertex(161, 273); bezierVertex(166, 267, 156, 241, 141, 220); endShape(); //Left Hand beginShape(); vertex(226, 198); bezierVertex(240, 253, 223, 265, 199, 283); vertex(196, 281); vertex(194, 282); vertex(192, 280); vertex(189, 280); vertex(188, 278); vertex(185, 276); vertex(186, 274); vertex(185, 273); bezierVertex(180, 267, 190, 241, 205, 220); endShape(); if(!outline){ //Head Shadow fill(0, 0, 0, 6); noStroke(); for(var i = 0; i <= 1; i += 0.04){ ellipse(173, 190, i * 115, i * 80); } } //Head pikachuYellow(outline);//noStroke(); beginShape(); vertex(75, 63); bezierVertex(85, 65, 116, 80, 138, 108); bezierVertex(156, 94, 192, 93, 209, 108); bezierVertex(225, 96, 267, 88, 281, 89); vertex(272, 113); bezierVertex(262, 117, 242, 122, 223, 123); bezierVertex(238, 155, 240, 182, 224, 200); bezierVertex(198, 224, 148, 224, 122, 200); bezierVertex(104, 187, 114, 138, 123, 123); bezierVertex(106, 113, 92, 106, 80, 93); bezierVertex(70, 83, 71, 74, 75, 63); endShape(); if(!outline){ //Chin Shadow noFill(); strokeWeight(9); for(var i = 0.8; i <= 1; i += 0.02){ stroke(0, 0, 0, (i - 0.7) * 10); arc(173, 148, i * 190, i * 140, 56.5, 124.5); } } //Right Ear if(!outline){ fill(24, 27, 12); } beginShape(); vertex(75, 63); bezierVertex(70, 60, 59, 56, 49, 56); bezierVertex(56, 74, 71, 87, 81, 95); bezierVertex(75, 85, 72, 74, 75, 63); endShape(); //Left Ear beginShape(); vertex(281, 89); bezierVertex(289, 87, 299, 88, 307, 90); bezierVertex(296, 103, 287, 108, 272, 113); bezierVertex(277, 104, 278, 101, 280, 89); endShape(); if(!outline){ //Eyes stroke(37, 6, 6); strokeWeight(20); //Right point(140, 154); //Left point(206, 154); //Pupils stroke(254, 255, 223); strokeWeight(9); //Right point(142, 150); //Left point(204, 150); //Nose noFill(); stroke(0); strokeWeight(1.5); arc(173, 166, 6, 3, 45, 135); //Mouth stroke(184, 138, 88); strokeWeight(1); bezier(154, 179, 159, 189, 169, 178, 173, 179); bezier(192, 179, 187, 189, 177, 178, 173, 179); //Cheeks fill(255, 0, 0); noStroke(); translate(123, 179); rotate(-18); ellipse(0, 0, 22, 36); rotate(18); translate(-123, -179); translate(223, 179); rotate(18); ellipse(0, 0, 22, 36); rotate(-18); translate(-223, -179); } popMatrix(); }; draw = function() { background(255, 179, 0); //Shadow fill(0, 0, 0, 10); noStroke(); for(var i = 0; i < 10; i++){ ellipse(173, 347, i * 20, i * 2.5); } //Click for a shock. if(mouseIsPressed){ pikachu(true); /* if(floor(random(10)) !== 0){ pikachu(); } */ }//else{ pikachu(); //} if(mouseIsOver){ if(mouseX > 340 && mouseX < 390 && mouseY > 340 && mouseY < 390){ noFill(); stroke(255); strokeWeight(1); rect(337, 337, 55, 55); cursor(HAND); }else if(!mouseIsPressed){ fill(255); noStroke(); //ellipse(mouseX, mouseY, 8, 8); cursor(ARROW); } if(!mouseIsPressed){ stroke(0, 0, 0, 50); strokeWeight(1); line(173, 0, 173, 400); fill(255); textAlign(LEFT, BOTTOM); text(mouseX + ", " + mouseY, 10, 390); textAlign(CENTER, CENTER); text(173, 173, 370); } } //DY Logo { pushMatrix(); translate(340, 340); scale(1/8, 1/8); noStroke(); fill(0, 174, 255, 50); rect(0, 0, 400, 400); fill(212, 89, 208); triangle(249, 200, 200, 125, 200, 275); strokeWeight(6); fill(84, 194, 109); stroke(158, 38, 38); bezier(50, 50, 275, 60, 275, 340, 50, 350); line(50, 51, 50, 349); strokeWeight(5); stroke(81, 81, 173); line(150, 50, 248, 197); line(350, 50, 250, 200); line(150, 350, 250, 200); noStroke(); fill(255, 208, 66, 150); triangle(170, 50, 330, 50, 250, 170); fill(255, 188, 117, 150); triangle(350, 70, 170, 350, 350, 350); popMatrix(); } }; //mouseMoved(); /* var a = function(x, y){ pushStyle(); fill(255, 0, 0); ellipse(x, y, 2, 2); popStyle(); };*/ /*var shapes = [ [ new V(75, 63), new BV(95, 68, 116, 80, 138, 108), new BV(156, 94, 192, 93, 209, 108), new BV(225, 96, 267, 85, 281, 89), new V(272, 114), new BV(262, 117, 242, 123, 227, 124), new BV(238, 155, 240, 182, 227, 200), new BV(208, 224, 148, 223, 122, 200), new BV(104, 187, 114, 138, 123, 123), new BV(106, 113, 92, 106, 80, 93), new BV(70, 83, 71, 74, 75, 63) ], [ new V(75, 63), new BV(66, 57, 59, 56, 49, 57), new BV(56, 74, 71, 89, 81, 95), new BV(75, 85, 72, 74, 75, 63) ], [ new V(281, 89), new BV(289, 87, 299, 88, 307, 90), new BV(296, 103, 287, 108, 272, 113), new BV(277, 104, 278, 101, 280, 88) ] ];*/ /*var shapes = [ [ new V(239, 257), new V(262, 260), new V(255, 231), new V(298, 235), new V(286, 184), new V(338, 187), new BV(348, 174, 360, 145, 368, 123), new BV(333, 122, 278, 134, 245, 145), new V(264, 208), new V(234, 213), new V(242, 246), new V(234, 247), new V(239, 257) ] ];*/ /*var shapes = [ [ new V(121, 197), new BV(106, 253, 123, 267, 148, 283), new V(150, 281), new V(152, 283), new V(154, 280), new V(157, 280), new V(158, 277), new V(161, 278), new BV(166, 267, 156, 241, 141, 220) ] ];*/

1 Response

After 20+ months I have finally completed the Processing Js course!
Sources: https://www.youtube.com/watch?v=QMwbghhOEtM
| processingjs.org | processingjs.org/learning/ | https://www.khanacademy.org/computing/computer-programming/pjs-documentation

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.