Viewing Program

Program Data

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

Title	Morning Fishing - My Entry
ID	4573630226956288
Created	8 years ago, 1501545869200
Updated	8 years ago, 1501545892127
Code	/** Fishing in the Morning My entry to JS (Animation) Round 2. > Name: Chester Banks > Username: @chesterbanks > KAO Team: Gray Leaf / /* Variables for the animation. / var start = false; // start the animation? var fishStatus = 'none'; // this has three modes which determine what is happening - 'none', 'caught', and 'reel' var poleY = 0; // The y position of the end of the pole. When this changes, it looks like the pole bends. var hookY = 7; // The y position of the hook. The position of the worm is also determined by this variable. var catchTimer = 0; // This helps there be a little space of time between when the fish bites, and when the person reels it up. var rippleX = 10; // The place where the ripples around the fishing line are, where it goes into the water. It has to change to look realistic. // Variables for the splash page, put into an object to make it neater. var splash = { trans2: 255, trans: 255, wordsX: 300, wordsSz: -400, wordsRot: 360, }; var hand = new PVector(352, 132); // The position of the guy's hand. /* OOP constructor, OOP prototype, and array. This controls everything with the fish. / / Fish constructor / var Fish = function(){ // "this" variables for each fish. this.way = floor(random(2)); // is it going left or right? this.x = this.way === 0 ? -50 : 650; // if it is going right, start on the left side of the screen. If it is going left, start on the right side of the screen. this.y = random(450, 600); // random y position in the water. this.sz = random(0.2, 0.7); // size of fish. this.speed = this.sz 5; // speed of fish - the bigger the fish, the faster. this makes it look like the smaller fish are farther away. this.caught = false; // did the fish take the bait? /* OOP for bubbles / this.Bubble = function(x, y){ this.x = x; this.y = y; this.sz = random(30); this.plusSz = this.sz; this.offset = random(100); this.trans = 50; }; this.Bubble.prototype.draw = function() { noStroke(); fill(255, 255, 255, this.trans); ellipse(this.x + sin(frameCount + this.offset 35)15, this.y, this.sz - this.plusSz, this.sz - this.plusSz); this.y -= this.sz / 20; this.plusSz /= 1.1; this.trans /= 1.01; }; this.Bubbles = []; }; Fish.prototype.draw = function() { // Add a new bubble to the this.Bubbles array every tenth frame. if(frameCount % 10 === 0){ this.Bubbles.push(new this.Bubble(this.x + 25, this.y)); } // Draw each bubble, and remove them from the array when they float out of sight. for(var i = this.Bubbles.length - 1; i >= 0; i --){ this.Bubbles[i].draw(); if(this.Bubbles[i].y < 379){ this.Bubbles.splice(i, 1); } } // The fish itself. (I use bezierVertices to draw it). pushMatrix(); translate(this.x, this.y); scale(this.way === 0 ? this.sz : -this.sz, this.sz); rotate(this.caught ? -50 + sin(frameCount20) * 35 : sin(frameCount15) 5); noStroke(); fill(195, 212, 85); beginShape(); vertex(50, 0); bezierVertex(52, -38, -5, -50, -34, -25); bezierVertex(-46, -17, -46, -11, -100, 0); bezierVertex(-46, 17, 57, 18, 50, 0); endShape(); beginShape(); vertex(-108, 20); bezierVertex(-83, -1, -98, -11, -108, -20); bezierVertex(-102, -1, -103, 1, -108, 20); endShape(); fill(0); ellipse(32, -10, 8, 10); popMatrix(); // Collisions between the fish and the hook. if(this.way === 0){ if(dist(this.x + (this.sz * 20), this.y - (this.sz * 10), 274, 542) < this.sz * 60 && fishStatus === 'none'){ this.caught = true; } } else { if(dist(this.x - (this.sz * 20), this.y - (this.sz * 10), 274, 542) < ((this.sz * 60) + 20) / 2 && fishStatus === 'none'){ this.caught = true; } } // What to do if the fish is caught (flop helplessly) if(this.caught){ fishStatus = 'caught'; this.x += (297 - this.x) / 10; this.y += (552 + hookY + (fishStatus === 'caught' ? sin(frameCount5)20 : 0) - this.y) / 10; } else { this.x += this.way === 0 ? this.speed : -this.speed; } }; var Fishes = []; // array for the fishes - fishes is actually a word! :O /** Particles for large splash! / var Particle = function(x, y){ this.x = x; this.y = y; this.sz = random(30); // The starting size is randomly between 20 and 30. this.yvel = random(-3, -8) + this.sz / 10; // The heavier/bigger the ball, the faster it falls. this.xvel = random(-2, 2); this.trans = 255; this.color = color(random(50, 100), random(180, 210), random(150, 200)); }; Particle.prototype.draw = function() { noStroke(); (fill)(this.color, this.trans); ellipse(this.x, this.y, this.sz, this.sz); this.y += this.yvel; this.x += this.xvel; this.yvel += 0.1; this.trans -= 2; this.sz -= 0.1; }; var Particles = []; /* Graphics functions / // Morning text var morning = function(x, y, wide, rot){ pushMatrix(); translate(x, y); rotate(rot); scale(wide, 1); strokeWeight(7); noFill(); // M bezier(-245, -11, -245, 37, -247, 68, -250, 98); bezier(-203, 90, -211, -141, -247, 68, -249, 98); bezier(-163, 90, -168, -141, -199, 68, -202, 89); // O bezier(-128, -10, -57, 150, -207, 88, -127, -11); // R bezier(-97, -15, -90, 38, -96, 43, -98, 88); bezier(-63, 8, -75, -58, -89, 6, -98, 83); // N bezier(-55, 98, -41, -1, -49, 23, -47, -13); bezier(-55, 99, -47, -26, 19, -73, -5, 96); // I bezier(18, -7, 22, 31, 18, 67, 12, 91); point(14, -25); // N bezier(38, -11, 36, 31, 37, 67, 26, 98); bezier(27, 99, 47, -26, 87, -66, 77, 100); // G bezier(133, -11, 36, -11, 125, 108, 130, -8); bezier(133, -11, 136, 8, 140, 150, 52, 128); popMatrix(); }; // Fishing text var fishing = function(x, y, wide, rot){ pushMatrix(); translate(x, y); rotate(rot); scale(wide, 1); strokeWeight(7); noFill(); // F bezier(-133, -100, -220, -161, -182, 92, -200, 100); bezier(-146, -30, -176, -9, -192, -33, -221, -30); // I bezier(-135, -11, -138, 31, -140, 67, -144, 91); point(-134, -25); // S bezier(-97, 31, -42, 84, -72, 109, -122, 82); bezier(-97, 31, -153, -26, -72, -43, -66, -10); // H bezier(-55, 99, -40, -26, -49, -43, -47, -91); bezier(-55, 99, -40, -26, 19, -43, -5, 100); // I bezier(25, -11, 22, 31, 18, 67, 12, 91); point(26, -25); // N bezier(38, -11, 36, 31, 37, 67, 26, 98); bezier(27, 99, 47, -26, 87, -66, 77, 100); // G bezier(133, -11, 36, -11, 125, 108, 137, 25); bezier(133, -11, 136, 8, 161, 150, 52, 126); popMatrix(); }; /* Add info to graphics arrays. / // Array for the grass texture on cliff var grassTexture = []; for(var i = 0; i < 220; i += 10){ grassTexture.push({x: i, y: random(5, 15)}); } // Array for fog texture var fog = []; for(var i = -40; i <= 600; i += 20){ for(var j = -40; j <= 568; j += 20){ if(i > 457 \|\| j < 345){ fog.push({ x: i + noise(i0.02, j0.02)80, y: j + noise(i0.02, j0.02)70, sz: random(100), trans: noise(i-0.19, j-0.01)30 }); } } } /** Draw function / draw = function() { background(189, 242, 238); // the beautiful background noStroke(); // don't want to have a stroke! :O // Water fill(97, 191, 183); rect(0, 300, 600, 300); fill(109, 209, 199); rect(0, 300, 600, 100); for(var i = 0; i < 600; i += 39){ bezier(i, 300, i + 50, 281 + sin(i + frameCount5)10, i, 295 + sin(i + frameCount5)10, i + 43, 300); } // Add fish to fish array every 30th frame if(frameCount % 30 === 0 && start){ Fishes.push(new Fish()); } // Draw each fish, and remove from Fishes array when they swim out of the screen. for(var i = Fishes.length - 1; i >= 0; i --){ Fishes[i].draw(); if(Fishes[i].x < -100 \|\| Fishes[i].x > 700){ Fishes.splice(i, 1); } } // Ledge fill(35, 87, 76); beginShape(); vertex(600, 600); vertex(600, 200); vertex(402, 216); bezierVertex(442, 300, 403, 329, 482, 426); bezierVertex(515, 554, 509, 528, 464, 600); endShape(); fill(41, 94, 84); beginShape(); vertex(600, 600); vertex(600, 200); vertex(400, 200); bezierVertex(460, 300, 420, 329, 497, 417); bezierVertex(532, 554, 529, 528, 494, 600); endShape(); // Grass on ledge fill(47, 204, 173); rect(400, 187, 200, 20); fill(0, 0, 0, 50); beginShape(); vertex(414, 215); for(var i = 0; i < grassTexture.length - 1; i ++){ vertex(grassTexture[i].x + 399, grassTexture[i].y + 208); } vertex(600, 205); endShape(); fill(47, 189, 161); beginShape(); vertex(400, 205); for(var i = 0; i < grassTexture.length - 1; i ++){ vertex(grassTexture[i].x + 399, grassTexture[i].y + 205); } vertex(600, 205); endShape(); // Fishing rod noFill(); strokeWeight(18); stroke(185); point(365, 139); strokeWeight(8); stroke(166, 128, 63); bezier(296, 50 + poleY, 347, 74, 352, 115, 360, 168); strokeWeight(2); stroke(255, 255, 255); bezier(299, 57 + poleY, 293, 56 + poleY, 319, 80 + (poleY/2), 320, 73 + (poleY/2)); bezier(320, 73 + (poleY/2), 323, 87 + (poleY/7), 321, 90 + (poleY/2), 339, 100 + (poleY/7)); bezier(339, 100 + (poleY/7), 339, 112, 340, 125, 348, 126); bezier(348, 127, 342, 137, 350, 143, 352, 153); bezier(299, 57 + poleY, 293, 132, 319, 114, 291, 541 + hookY + (fishStatus === 'caught' ? sin(frameCount5)20 : 0)); // Worm & hook pushMatrix(); translate(17, hookY + (fishStatus === 'caught' ? sin(frameCount5)20 : 0)); stroke(219, 219, 219); strokeWeight(3); bezier(275, 538, 275, 554, 256, 530, 267, 531); stroke(255, 170, 166); strokeWeight(7); bezier(263, 538 + sin(frameCount5)5, 267, 561, 290, 513, 286, 540 + cos(frameCount5)5); stroke(219, 219, 219); strokeWeight(3); bezier(274, 538, 295, 554, 287, 530, 282, 531); popMatrix(); / Person / // Pants stroke(4, 100, 115); strokeWeight(12); bezier(371 + sin(frameCount 3) * 3, 222, 356, 184, 381, 201, 406, 195); bezier(394 + sin(-frameCount * 3) * 5, 234, 372, 205, 396, 196, 409, 194); // Arms stroke(240, 197, 147); bezier(hand.x, hand.y, 372, 164, 419, 177, 412, 132); bezier(359, 151, 372, 164, 413, 148, 416, 134); // Arms stroke(26, 163, 163); bezier(398, 161, 392, 157, 419, 177, 411, 133); bezier(393, 153, 403, 154, 413, 148, 416, 134); // Shirt strokeWeight(26); stroke(26, 163, 163); bezier(405, 128, 432, 164, 413, 185, 409, 188); strokeWeight(12); stroke(4, 100, 115); line(399, 194, 410, 194); // Shoes noStroke(); fill(255, 255, 255); ellipse(386 + sin(-frameCount * 3) * 5, 241, 25, 15); ellipse(365 + sin(frameCount * 3) * 3, 226, 25, 15); fill(209, 86, 86); ellipse(386 + sin(-frameCount * 3) * 5, 237, 25, 15); ellipse(365 + sin(frameCount * 3) * 3, 224, 25, 15); // Hands fill(240, 197, 147); ellipse(hand.x, hand.y, 18, 18); ellipse(353, 149, 18, 18); // Head / face ellipse(396, 116, 40, 40); fill(0); ellipse(385, 116, 7, 8); ellipse(396, 116, 8, 8); // Mouth if(fishStatus === 'none'){ noFill(); stroke(0, 0, 0, 100); strokeWeight(2); arc(394, 118, 20, 20, 26, 131); } else if (hookY > -200){ noStroke(); fill(0); ellipse(396, 127, 15, 10); } else { noStroke(); fill(0); arc(392, 123, 18, 15, 0, 180); fill(255); arc(392, 123, 18, 5, 0, 180); } // Layer of water on top noStroke(); fill(109, 209, 199); rect(0, 353, 430, 47); // Ripples around string if(hookY > -250){ pushMatrix(); translate(rippleX, 0); noFill(); strokeWeight(2); stroke(0, 0, 0, 10); arc(292, 353, 50, 20, -73, 250); arc(292, 353, 60, 30, -51, -8); arc(292, 353, 60, 30, 70, 132); arc(292, 353, 60, 30, 214, 259); stroke(0, 0, 0, 20); arc(292, 353, 40, 13, -63, 246); stroke(0, 0, 0, 30); arc(292, 353, 30, 6, -63, 246); popMatrix(); } // Splash if(hookY < -200 && hookY > -230){ Particles.push(new Particle(272, 349), new Particle(292, 349), new Particle(305, 349), new Particle(272, 349), new Particle(292, 349), new Particle(305, 349), new Particle(272, 349), new Particle(292, 349), new Particle(305, 349)); } for(var i = Particles.length - 1; i >= 0; i --){ Particles[i].draw(); if(Particles[i].sz < 0){ Particles.splice(i, 1); } } // Sun noStroke(); fill(247, 247, 42, 30); for(var i = 180; i > 100; i -= 10){ ellipse(100, 100, i, i); } fill(247, 247, 42); ellipse(100, 100, 100, 100); fill(255, 255, 255, 30); for(var i = 100; i > 0; i -= 10){ ellipse(100, 100, i, i); } // Fog noStroke(); for(var i = fog.length - 1; i >= 0; i --){ fill(255, 255, 255, fog[i].trans); ellipse(fog[i].x, fog[i].y, fog[i].sz, fog[i].sz); fog[i].x += fog[i].sz / 15; if(fog[i].x > 650){ fog[i].x = -50; } } /** Animation / if(fishStatus === 'caught'){ poleY += (80 - poleY) / 10; poleY = poleY + sin(frameCount5)2; catchTimer += 0.1; if(catchTimer > 15){ fishStatus = 'reel'; } } if(fishStatus === 'reel'){ poleY /= 1.3; hand.x += (362 - hand.x) / 10; hand.y += (140 - hand.y) / 10; hand.x += sin(-frameCount10); hand.y += cos(-frameCount10); if(hookY > -400){ hookY --; } rippleX /= 1.01; } /* Splash screen */ // Overlay fill(5, 38, 34, splash.trans - 150); rect(0, 0, width, height); // "Morning Fishing" text stroke(255, 255, 255, splash.trans); morning(358 - splash.wordsX, 135, 1 + splash.wordsSz, splash.wordsRot); fishing(340 + splash.wordsX, 360, 1 + splash.wordsSz, splash.wordsRot); // "Click" text pushMatrix(); translate(300, 510); scale(1 + splash.wordsSz); strokeWeight(2); bezier(-23, -15, -28, -17, -39, 15, -25, 27); // Open parenthesis bezier(-12, 19, -29, 26, -17, -9, -12, 8); // C bezier(-6, -17, -9, 1, -8, 5, -8, 20); // L bezier(0, 1, -3, 1, 0, 5, -2, 20); // I point(1, -4); // I dot bezier(14, 19, -6, 26, 13, -9, 14, 8); // C bezier(21, -17, 21, 1, 20, 5, 19, 20); // K bezier(23, 7, 26, 1, 20, 5, 30, 20); // Leg of K bezier(21, 7, 28, 1, 20, 5, 30, -4); // Leg of K bezier(33, -15, 38, -17, 49, 15, 35, 27); // Closed parenthesis popMatrix(); // Animation for words splash.wordsX /= 1.1; splash.wordsSz /= 1.1; splash.wordsRot /= 1.05; // Start animation if clicked if(start){ splash.trans /= 1.1; } // After animation is done, fade out and reset everything! if(rippleX < 0.05){ splash.trans2 /= 1.05; if(splash.trans2 < 10){ splash.trans = 255; splash.wordsX = 300; splash.wordsSz = -400; splash.wordsRot = 360; Fishes = []; start = false; fishStatus = 'none'; poleY = 0; hookY = 7; catchTimer = 0; // This helps there be a little space of time between when the fish bites, and when the person reels it up. rippleX = 10; splash.trans2 = 255; } } // Second Overlay noStroke(); fill(5, 38, 34, 255 - splash.trans2); rect(0, 0, width, height); }; var mouseClicked = function(){ start = true; };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIyolPaPCAw
Votes	236
Spin-Offs	6
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6593272378228736","title":"JS (Animation) Round 2 - KAO 2017","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	6 months ago, 1739364120752
Updated	6 months ago, 1739364127951
Source Deleted	unknown