Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Loading Pikachu
ID	6753789317251072
Created	7 years ago, 1531600589968
Updated	7 years ago, 1531600606405
Code	/** * Loading Pikachu * Entry to KAO JS (Animation) Challenge * * Chester Banks @chesterbanks * Heat 3 * 🍊 Team Orange Leaf 🍊 * * based off of (only visual reference, no copied code): https://codepen.io/Tetsu/pen/rLJyPp / // I use my own frame counter instead of frameCount. var FRAME_RATE = 50; var myFrames = 0; // Variables for foot movement var feet = {r1: 0, r2: 0}; // Color scheme object. I made this so I can easily change the colors here instead of going to each fill() and stroke() command to change them. var colors = { body: color(255, 255, 87), // change to white for Snow Pikachu ears: color(130, 122, 113), cheek: color(232, 139, 201), eye: color(94, 48, 24), stroke: color(107, 82, 70) }; / Custom shape functions / // Rectangle var Rect = function(x, y, w, h, r){ pushMatrix(); translate(x, y); rotate(r); strokeWeight(w); line(0, -h / 2, 0, h / 2); popMatrix(); }; // Ellipse var Ellipse = function(x, y, w, h, r){ pushMatrix(); translate(x, y); rotate(r); arc(0, 0, w, h, 0, 360); popMatrix(); }; // Arc with rotation parameter var rotateArc = function(x, y, w, h, start, stop, r){ pushMatrix(); translate(x, y); rotate(r); arc(0, 0, w, h, start, stop); popMatrix(); }; /* Pikachu / var BackFoot = function(){ // back foot pushMatrix(); translate(sin(-myFrames 10) * 20, 30 + cos(-myFrames * 10) * 2); rotate(feet.r2); if(sin(-myFrames * 10) > 0.8){ feet.r2 += (-30 - feet.r2) / 5; } else { feet.r2 /= 1.5; } translate(0, -30); noStroke(); fill(red(colors.body) - 30, green(colors.body) - 30, blue(colors.body) - 30); Ellipse(3, 41, 24, 5); Ellipse(7, 38, 20, 9); noFill(); strokeWeight(1); stroke(colors.stroke); arc(-30, 21, 100, 100, 19, 28); line(-13, 45, 14, 45); arc(19, 83, 100, 100, 232, 245); popMatrix(); }; var backEar = function(){ pushMatrix(); translate(-40, -94); rotate(-5 + sin((myFrames) * 20) * 9); translate(44, 94); noStroke(); fill(red(colors.body) - 20, green(colors.body) - 20, blue(colors.body) - 20); Ellipse(-14, -113, 72, 21, -13); fill(colors.ears); stroke(colors.ears); Rect(9, -114, 25, 4, -26); Rect(9, -121, 18, 4, 9); Rect(2, -115, 11, 4, 102); Ellipse(7, -117, 13, 8); noFill(); strokeWeight(1); stroke(colors.stroke); arc(0, -75, 100, 100, -107, -65); arc(-36, -151, 148, 100, 40, 81); arc(72, -100, 148, 166, 185, 197); popMatrix(); }; var tail = function(){ pushMatrix(); rotate(sin(-myFrames * 20) * 3); // tail fill stroke(colors.body); Rect(85, -72, 31, 41, 64); Rect(80, -86, 10, 50, 52); Rect(100, -85, 10, 39, -18); Rect(70, -49, 16, 50, -3); Rect(64, -21, 16, 21, -127); Rect(58, -8, 14, 33, 0); stroke(colors.ears); Rect(51, 10, 8, 19, 60); Rect(57, 4, 8, 11, -3); Rect(56, -1, 8, 6, -124); // tail outline strokeWeight(1); stroke(colors.stroke); line(60, -76, 101, -110); line(109, -69, 101, -110); line(109, -69, 81, -50); line(82, -24, 81, -50); line(61, -13, 82, -24); line(61, -13, 62, 9); line(48, 16, 62, 9); line(45, 11, 52, 6); line(52, -23, 52, 6); line(52, -23, 63, -33); line(60, -76, 63, -33); line(52, 0, 56, -6); line(62, 0, 56, -6); popMatrix(); }; var body = function(){ /** Body / pushMatrix(); translate(0, sin(myFrames 20) * 2); rotate(3 + sin(myFrames * 20) * 2); // body fill noStroke(); fill(colors.body); Ellipse(-5, 0, 77, 71); Ellipse(13, 0, 68, 74); Ellipse(-20, -58, 84, 97); Ellipse(-39, -70, 65, 72); Ellipse(-53, -39, 28, 21); Ellipse(18, -39, 72, 21, 52); Ellipse(-51, -1, 25, 19); Ellipse(-34, -19, 63, 19, -45); fill(colors.ears); rotateArc(37, -29, 29, 10, -90, 90, -206); // back stripe 1 rotateArc(45, -12, 23, 8, -90, 90, -196); // back stripe 2 strokeWeight(1); stroke(colors.stroke); // body noFill(); arc(-149, 6, 394, 225, -28, 2); arc(22, 10, 52, 50, 1, 81); line(27, 35, 16, 37); arc(-16, 9, 50, 50, 125, 182); line(-41, 3, -41, 9); arc(-3, 14, 72, 47, 88, 140); line(-3, 38, 17, 37); arc(-33, -57, 115, 106, 279, 336); arc(-29, -53, 106, 124, 336, 365); arc(-34, -58, 80, 100, 205, 249); arc(8, -73, 157, 100, 174, 187); arc(-21, -76, 100, 100, 153, 170); arc(-74, -49, 18, 20, -19, 26); arc(-63, -39, 10, 13, 120, 184); line(-65, -46, -68, -39); arc(-36, -73, 100, 100, 98, 127); line(-40, -18, -43, -23); arc(25, 60, 192, 214, -141, -123); arc(-54, 1, 22, 14, -262, -74); arc(-67, -56, 140, 130, 51, 81); arc(-103, -57, 140, 130, 32, 53); rotateArc(37, -29, 29, 10, -90, 90, -206); rotateArc(45, -12, 23, 8, -90, 90, -196); // phone? pushMatrix(); translate(0, -5); stroke(143, 143, 143); Rect(-61, -3, 19, 5, 14); stroke(51, 51, 51); Rect(-61, -3, 11, 3, 14); strokeWeight(1); stroke(colors.stroke); line(-53, -3, -70, -8); line(-72, -2, -70, -8); line(-72, -2, -54, 2); line(-53, -3, -50, 0); line(-55, 2, -50, 0); popMatrix(); // mouth line(-57, -28, -53, -36); // eye & blush pushMatrix(); translate(-31, -47); rotate(-43); fill(colors.cheek); stroke(0, 0, 0, 100); arc(0, 0, 20, 23, 0, 360); fill(colors.eye); arc(-12, -23, 5, 14, 0, 360); popMatrix(); popMatrix(); // end body }; var FrontFoot = function(){ // front foot pushMatrix(); strokeWeight(1); translate(sin(myFrames * 10) * 15, 30 + cos(myFrames * 10) * 2); rotate(feet.r1); if(sin(myFrames * 10) > 0.8){ feet.r1 += (-30 - feet.r1) / 5; } else { feet.r1 /= 1.5; } translate(0, -30); noStroke(); fill(colors.body); Ellipse(3, 41, 24, 5); Ellipse(7, 38, 20, 16); noFill(); stroke(colors.stroke); arc(-30, 21, 100, 100, 19, 28); //arc(2, -7, 99, 106, 77, 106); line(-13, 45, 14, 45); arc(19, 92, 100, 122, 232, 245); popMatrix(); }; var frontEar = function(){ pushMatrix(); translate(-40, -94); rotate(-5 + sin((myFrames) * 20) * 9); translate(44, 94); // front ear fill noStroke(); fill(colors.body); Ellipse(-31, -116, 68, 16, -52); // ear tips fill noStroke(); fill(colors.ears); Ellipse(-15, -134, 17, 10, -43); stroke(colors.ears); Rect(-19, -129, 16, 4, 57); Rect(-10, -136, 25, 4, -61); Rect(-13, -140, 25, 4, -32); // ears noFill(); strokeWeight(1); stroke(colors.stroke); arc(-182, -233, 400, 400, 26, 46); arc(32, -66, 178, 179, 199, 248); arc(44, -168, 148, 166, 146, 157); popMatrix(); }; /* The loading text. I'm pretty pleased with how it turned out without being able to use beziers! / var loadingText = function(x, y, s){ strokeCap(ROUND); //strokeWeight(1); pushMatrix(); translate(x, y); scale(0.8); noFill(); // l line(-80, -28, -80, 30); line(-68, 30, -80, 30); // o arc(-50, -15, 20, 30, -180, 0); arc(-50, 15, 20, 30, 0, 180); line(-40, -15, -40, 15); line(-60, -15, -60, 15); // a arc(-20, -15, 20, 30, -180, 0); line(-10, -14, -10, 30); arc(-20, 16, 20, 27, -260, -18); line(-20, 30, -10, 30); // d line(0, -30, 0, 30); arc(7, 0, 30, 59, -74, 73); arc(0, 30, 118, 120, -89, -80); arc(0, -30, 118, -120, -89, -80); //line(0, -30, 9, -29); //line(0, 30, 10, 29); // i line(30, -30, 30, 30); // n line(40, -30, 40, 30); //line(40, -30, 60, 30); //line(60, -30, 60, 30); arc(50, -15, 20, 30, -180, 0); line(60, -14, 60, 30); // g arc(80, -15, 20, 30, -180, 0); line(70, -15, 70, 15); arc(80, 15, 20, 30, 0, 180); line(90, -5, 90, 15); line(90, -5, 79, -5); // dots arc(120, 0, 20, 20, 0, 360); arc(-120, 0, 20, 20, 0, 360); popMatrix(); }; / Loading circles / var rotation = 0, destination = 145; // Variables for where the next circle should be placed. Rotation is the rotation (no way!) in relation to the center, destination is how far away from the center the circle should be placed. // Constructor - where each circle's "this variables" are put. var Circle = function(r, destination){ this.x = 0; this.d = destination; this.r = r; }; // Circle prototype - where everything is put that should be drawn or animated. Circle.prototype.draw = function() { pushMatrix(); translate(200, 200); rotate(this.r); noStroke(); fill(colors.body); ellipse(this.x, 0, 20 + sin(-this.r+this.d+myFrames 10) * 20, 20 + sin(-this.r+myFrames * 15) * 20); noFill(); (stroke)(colors.stroke, 50); strokeWeight(1); ellipse(this.x + 3, 2, 20 + sin(-this.r+this.d+myFrames * 10) * 20, 20 + sin(-this.r+myFrames * 15) * 20); popMatrix(); this.x += (this.d - this.x) / 5; }; // Array for every circle. var Circles = []; /* Draw function / draw = function() { strokeCap(SQUARE); background(255, 255, 255); // Add the circles to the Circles array every fifth frame. if(frameCount % 5 === 0 && Circles.length < 18 5){ Circles.push(new Circle(rotation, destination)); // Shift the rotation for the next circle. rotation += 20; // When the circles have been draw all the way around (so 18 circles have been drawn), move the upcoming circles a row out and rotate them half a circle back. if(Circles.length % 18 === 0){ rotation -= 10; destination += 30; } } // Draw each and every circle. for(var i = Circles.length - 1; i >= 0; i --){ Circles[i].draw(); } // Draw Pikachu. pushMatrix(); translate(200, 249); // Shadow strokeWeight(1); stroke(0, 0, 0, 30); fill(0, 0, 0, 30); ellipse(0, 46, 100, 9); // Call each of the functions backEar(); BackFoot(); tail(); body(); FrontFoot(); frontEar(); popMatrix(); // momMatrix() childMatrix() /* Draw the text. / pushMatrix(); translate(200, 350); rotate(sin(myFrames 15) * 5); stroke(217, 217, 217); strokeWeight(7); loadingText(0, 3); stroke(colors.stroke); strokeWeight(6); loadingText(0, 0); stroke(colors.body); strokeWeight(4); loadingText(0, 0); popMatrix(); // My custom frame rate. Change 0.6 to change the speed. myFrames += FRAME_RATE / 100; };
Folds	19,25
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJLpkdH_Cww
Votes	170
Spin-Offs	3
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"6257980020654080","title":"JS (Animation) Challenge - KAO 2018","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Chester Banks
Author Name	chesterbanks
Author ID	kaid_910220310264858588057640
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739461374454
Updated	10 months ago, 1739461381755
Source Deleted	unknown