Viewing Program

Program Data

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

Title	The Deep Blue Sea - Animated
ID	6125091136421888
Created	4 years ago, 1609768494232
Updated	2 years ago, 1698260106502
Code	/* Collab between Legend (old name) and Gray Wolf December 2020 I hope you liked it! I did the graphics, and Gray Wolf did the animation. NOTE: I will not be able to reply to you until Friday (Internet issues). Link to Gray Wolf's Profie: https://www.khanacademy.org/profile/grantjenkins/ Link to my profile: https://www.khanacademy.org/profile/Determined.Mind.1/ / //Submarine object var Sub = function() { this.x = 85; //horizontal position this.y = 120; //vertical position this.vy = 0; //used to handle the up/down movement this.propSpeed = 25; //speed of the propeller this.propvy = 0; //used to handle the up/down movement this.img = undefined; //will hold an image of the submarine //moves the sub this.update = function() { //up/down movement of the submarine this.vy = sin(frameCount) 40; //up/down movement of the propeller blades this.propvy = sin(frameCount * this.propSpeed) * 60; }; //draws the submarine and retuns an image of it this.getImage = function() { //use a transparent background so it just has the submarine background(0, 0, 0, 0); //draws the submarine noStroke(); fill(255, 251, 0);//bottom fin rect(149, 306, 126, 30, 10); triangle(229, 319, 304, 319, 272, 335); fill(255, 251, 0);//front of sub (yellow) ellipse(341, 245, 168, 150); fill(245, 118, 0);//engine stuff rect(69, 174, 69, 50, 5); triangle(71, 221, 125, 221, 125, 280);//orange triangle for engine fill(255, 251, 0);//yellow rect on engine rect(125, 171, 30, 130, 10); fill(245, 118, 0);//drk. orange body rect(141, 170, 200, 150, 15); fill(133, 133, 133);//gray waterseal on front rect(329, 165, 13, 160, 10); fill(204, 252, 255);//front window (cyan) arc(350, 250, 150, 150, 270, 359); fill(168, 168, 168);//periscope color rect(227, 92, 8, 44, 10);//pipes idk rect(227, 92, 20, 8, 10); fill(168, 168, 168);//light gray door rect(171, 123, 47, 10, 10); fill(87, 87, 87);//actual hatch (drk. gray) rect(161, 130, 85, 10, 10); fill(255, 251, 0);//yellow hatch rect(154, 135, 100, 26, 10); fill(245, 118, 0);//drk. orange sub hatch rect(139, 150, 150, 26, 10); triangle(281, 150, 317, 171, 272, 210); fill(133, 133, 133);//drk. gray side window ellipse(259, 226, 70, 70); fill(204, 252, 255);//actual side window ellipse(259, 226, 50, 50); fill(87, 87, 87);//bolts on sub ellipse(241, 250, 8, 8); ellipse(277, 250, 8, 8); ellipse(258, 256, 8, 8); ellipse(230, 231, 8, 8); ellipse(288, 231, 8, 8); ellipse(237, 207, 8, 8); ellipse(283, 207, 8, 8); ellipse(258, 197, 8, 8); //bolts on waterseal ellipse(336, 175, 8, 8); ellipse(335, 197, 8, 8); ellipse(336, 217, 8, 8); ellipse(336, 237, 8, 8); ellipse(336, 257, 8, 8); ellipse(336, 277, 8, 8); ellipse(336, 297, 8, 8); ellipse(336, 318, 8, 8); pushMatrix(); rotate(20);//window shinies lol fill(252, 255, 255, 230); rect(305, 106, 5, 30, 20); rect(316, 113, 5, 30, 20); rect(329, 106, 5, 30, 20); rect(418, 49, 5, 50, 20); rect(429, 53, 5, 40, 20); rect(442, 54, 5, 30, 20); popMatrix(); /** * Yay! I finally have the main sub parts in. Now it's time for details! * / fill(186, 83, 23);//engine vents rect(78, 183, 40, 6, 10); rect(78, 194, 40, 6, 10); rect(78, 207, 40, 6, 10); rect(100, 223, 20, 30, 10);//side engine hatch for repairs fill(87, 87, 87);//engine lining drk. gray rect(69, 218, 56, 4, 10); pushMatrix(); //side service panel stroke(217, 101, 0); strokeWeight(5); fill(245, 118, 0); rect(150, 179, 70, 100, 20); popMatrix(); fill(217, 101, 0);//circles on service panel ellipse(200, 200, 10, 10); ellipse(169, 200, 10, 10); rect(164, 256, 40, 6, 10);//rects on service panel rect(164, 245, 40, 6, 10); noStroke();//recalls noStroke again fill(217, 192, 0);//light on front of sub rect(361, 264, 20, 20, 5); fill(204, 252, 255); ellipse(381, 274, 20, 20); stroke(217, 101, 0);//light on side of sub strokeWeight(5); rect(273, 290, 30, 15, 10); rect(252, 158, 30, 15, 10);//side viewing panels rect(203, 158, 30, 15, 10); rect(160, 158, 30, 15, 10); pushMatrix(); noStroke(); rotate(20); //side fin for control of sub fill(217, 101, 0); rect(245, 215, 40, 70, 10); fill(189, 87, 4);//tailplane rect(245, 223, 10, 50, 10); popMatrix(); //smooths out side fin fill(217, 101, 0); triangle(162, 288, 199, 289, 179, 335); //return an image of the submarine using get() return get(15, 78, 411, 287); }; //call the getImage function to draw the sub and get the image this.img = this.getImage(); //draw the sub using the image for the main sub and //seperate bits for the moving parts this.draw = function() { pushMatrix(); //translate to the current x/y position incuding the vy movement translate(this.x, this.y + this.vy); //draw the submarine using the image (better for performance) image(this.img, 0, 0); //periscope pushMatrix(); //translate to the middle of the periscope translate(230, 17); //rotate up/down at the same speed as the sub rotate(this.vy 0.25); rectMode(CENTER); noStroke(); //display periscope (rotating) with light fill(204, 252, 255);//actual lens rect(4, 0, 8, 21, 10); fill(87, 87, 87);//lens infrastructure rect(0, 0, 8, 29, 10); rectMode(CORNER); //draw the light coming out of the periscope fill(255, 20); quad(0, -10, 0, 10, 350, 90, 350, -90); popMatrix(); //rear propeller pushMatrix(); //translate to the center of the propeller translate(-15, -75); //propeller blades behind pushStyle(); strokeCap(SQUARE); strokeWeight(7); stroke(87, 87, 87); //handles the movement of the propeller blade line(48, 197 - this.propvy * 0.3, 48, 197 - this.propvy); popStyle(); //propeller pushMatrix(); stroke(94, 94, 94); strokeWeight(5); fill(168, 168, 168); arc(60, 196, 80, 30, 90, 270); popMatrix(); //axel for propeller noStroke(); fill(168, 168, 168); rect(59, 189, 10, 10); //propeller blades in front pushStyle(); strokeCap(SQUARE); strokeWeight(7); stroke(87, 87, 87); //handles the movement of the propeller blade line(48, 197 + this.propvy * 0.3, 48, 197 + this.propvy); popStyle(); popMatrix(); popMatrix(); }; //bundles the draw and update methods so you can just call go this.go = function() { this.draw(); this.update(); }; }; //Fish object var Fish = function() { //call the reset method when creating a new Fish //the reset method is also used when a fish goes off the screen this.reset(); }; //new method used to stop memory leaks Fish.new = function() { var obj = Object.create(Fish.prototype); Fish.apply(obj, arguments); return obj; }; //reset method resets the fishes properties Fish.prototype.reset = function() { //dir will be either 1 (move right) or -1 (move left) this.dir = random() < 0.5 ? 1 : -1; //set the x position based on the direction of the fish this.x = this.dir === 1 ? -100 : width + 100; //y will be a random number between 0 and 600 this.y = random(height); //size of the fish will be between 20 and 50 this.size = ~~random(20, 50); //horizontal speed based on direction this.vx = this.dir === 1 ? random(1, 2) : random(-4, -2); //vertical speed between -1 (up) and 1 (down) this.vy = random(-1, 1); //random color between a certain color range this.color = color(random(50, 240), random(50, 240), random(50, 240)); //tail color is always slightly darker than the body color //uses red(color), green(color), blue(color) to get the red/green/blue of the current color this.tailColor = color(red(this.color) - 20, green(this.color) - 20, blue(this.color) - 20); }; //draws the fish Fish.prototype.draw = function() { pushMatrix(); //translate to the center of the fish translate(this.x, this.y); //flip the fishes x scale in the fishes direction //scale(1, 1) will not change the scale //scale(-1, 1) will flip the fish horizontally scale(this.dir, 1); //fishes body noStroke(); fill(this.color); rect(0, 0, this.size, this.size * 0.8, this.size * 0.5); //pink fish 2 eye fill(0,0,0); ellipse(this.size * 0.8, this.size * 0.35, this.size * 0.25, this.size * 0.25); //back fins for pink fish stroke(this.tailColor); fill(this.color); arc(-this.size * 0.1, this.size * 0.4, this.size * 0.5, this.size * 0.5, -90, 90); popMatrix(); }; //Shark object var Shark = function() { //call the reset method when creating a new Shark //the reset method is also used when a shark goes off the screen this.reset(); }; //new method used to stop memory leaks Shark.new = function() { var obj = Object.create(Shark.prototype); Shark.apply(obj, arguments); return obj; }; //reset method resets the sharks properties Shark.prototype.reset = function() { //dir will be either 1 (move right) or -1 (move left) this.dir = random() < 0.5 ? 1 : -1; //set the x position based on the direction of the fish this.x = this.dir === 1 ? -450 : width + 450; //y will be a random number between 0 and 600 this.y = random(height); //size of the fish will be between 140 and 180 this.size = ~~random(140, 180); //horizontal speed based on direction this.vx = this.dir === 1 ? random(1, 2) : random(-3, -1); //vertical speed between -0.5 (up) and 0.5 (down) this.vy = random(-0.5, 0.5); //random color between a certain color range this.color = color(random(50, 80)); //tail color is always slightly darker than the body color //uses red(color), green(color), blue(color) to get the red/green/blue of the current color this.tailColor = color(red(this.color) + 20, green(this.color) + 20, blue(this.color) + 20); }; //draws the shark Shark.prototype.draw = function() { pushMatrix(); //translate to the center of the shark translate(this.x, this.y); //flip the sharks x scale in the sharks direction //scale(1, 1) will not change the scale //scale(-1, 1) will flip the shark horizontally scale(this.dir, 1); //shark fin noStroke(); fill(this.color); triangle(this.size * 0.3, 0, this.size * 0.7, 0, this.size * 0.5, -this.size * 0.3); fill(this.tailColor); triangle(this.size * 0.45, 0, this.size * 0.75, 0, this.size * 0.5, this.size * 0.25); //sharks body noStroke(); fill(this.color); bezier(0, 0, this.size * 0.3, -this.size * 0.1, this.size * 0.7, -this.size * 0.2, this.size, 0); fill(this.tailColor); bezier(0, 0, this.size * 0.3, this.size * 0.1, this.size * 0.7, this.size * 0.2, this.size, 0); //sharks eye fill(0,0,0); ellipse(this.size * 0.8, 0, this.size * 0.05, this.size * 0.05); //back fins for shark fill(this.color); arc(-this.size * 0.05, 0, this.size * 0.2, this.size * 0.3, -90, 90); popMatrix(); }; //Ground objecct var Ground = function(x, c) { //x position of the ground this.x = x; this.color = c; //draw the ground and return an image of it this.getImage = function() { background(0, 0, 0, 0); noStroke(); fill(this.color); beginShape(); vertex(0, 600); vertex(0, 530); bezierVertex(35, 526, 61, 506, 81, 510); bezierVertex(111, 519, 128, 531, 143, 542); bezierVertex(166, 555, 190, 558, 216, 560); bezierVertex(239, 557, 255, 551, 272, 545); bezierVertex(303, 537, 316, 540, 338, 550); bezierVertex(352, 560, 362, 566, 381, 572); bezierVertex(405, 574, 423, 570, 438, 564); bezierVertex(453, 556, 474, 545, 487, 539); bezierVertex(512, 525, 536, 521, 555, 525); bezierVertex(565, 526, 586, 530, 600, 530); vertex(600, 600); endShape(CLOSE); return get(0, 508, width, 92); }; //call the getImage function and get the image this.img = this.getImage(); }; //Scene object var Scene = function() { //arrays to hold all the different objects this.fishesFront = []; this.fishesBack = []; this.grounds = []; this.groundsBack = []; this.seaweeds = []; this.particles = []; this.circles = []; this.seaweeds = []; this.bubbles = []; this.sharks = []; //sub object this.sub = new Sub(); //determines the current bubble position this.bubblesX = 0; //used to provide a consistant speed this.groundSpeed = 2; //draw the gradient background ange get image this.getBackground = function() { background(0, 0); noStroke(); for(var i = 0; i <= 600; i++) { fill(lerpColor(color(9, 152, 184), color(27, 91, 115), i/600)); rect(0, i, width, i); } return get(0, 0, width, 600); }; //load initial stuff this.init = function() { //get the background gradent image this.backImg = this.getBackground(); //add the front fishes for(var i = 0; i < 3; i++) { this.fishesFront.push(Fish.new()); } //add the back fishes for(var i = 0; i < 3; i++) { this.fishesBack.push(Fish.new()); } //add a shark this.sharks.push(Shark.new()); //add the two grounds //get two so they can repeat this.grounds.push(new Ground(0, color(168, 148, 111))); this.grounds.push(new Ground(width, color(168, 148, 111))); //add the two grounds for the back hills //get two so they can repeat this.groundsBack.push(new Ground(0, color(128, 112, 84, 150))); this.groundsBack.push(new Ground(width, color(128, 112, 84, 150))); }; this.init(); //run the ground images this.runGround = function() { for(var i = 0; i < this.grounds.length; i++) { //get the current ground var ground = this.grounds[i]; //display the image of the current ground image(ground.img, ground.x, 508); //move the ground ground.x-= this.groundSpeed; //if the ground goes off the screen //reset it so it repeats if(ground.x <= -600) { ground.x = 600; } } }; //run the ground (back) images this.runGroundBack = function() { for(var i = 0; i < this.groundsBack.length; i++) { //get the current ground var ground = this.groundsBack[i]; //display the image of the current ground image(ground.img, ground.x, 485); //move the ground ground.x-= this.groundSpeed * 0.75; //if the ground goes off the screen //reset it so it repeats if(ground.x <= -600) { ground.x = 600; } } }; //run the sharks this.runSharks = function() { for(var i = 0; i < this.sharks.length; i++) { //get the current shark var shark = this.sharks[i]; //draw the shark shark.draw(); //move horizontally/vertically shark.x+= shark.vx; shark.y+= shark.vy; //if shark direction is right and off the screen then reset it if(shark.dir === 1 && shark.x > width + 450) { shark.reset(); } //if shark direciton is left and off the screen then reset it else if(shark.dir === -1 && shark.x + shark.size < -450) { shark.reset(); } } }; //run the front fishes this.runfishesFront = function() { for(var i = 0; i < this.fishesFront.length; i++) { //get the current fish var fish = this.fishesFront[i]; //draw the fish fish.draw(); //move horizontally/vertically fish.x+= fish.vx; fish.y+= fish.vy; //if fish direction is right and off the screen then reset it if(fish.dir === 1 && fish.x > width) { fish.reset(); } //if fish direciton is left and off the screen then reset it else if(fish.dir === -1 && fish.x + fish.size < 0) { fish.reset(); } } }; //run the back fishes this.runfishesBack = function() { for(var i = 0; i < this.fishesBack.length; i++) { //get the current fish var fish = this.fishesBack[i]; //draw the fish fish.draw(); //move horizontally/vertically fish.x+= fish.vx; fish.y+= fish.vy; //if fish direction is right and off the screen then reset it if(fish.dir === 1 && fish.x > width) { fish.reset(); } //if fish direciton is left and off the screen then reset it else if(fish.dir === -1 && fish.x + fish.size < 0) { fish.reset(); } } }; //run the transparent circles this.runCircles = function() { //if the frameCount is a multiple of 120 then add a new circle if(frameCount % 120 === 0) { //add new circle with below properties this.circles.push({ x: 700, y: random(height), opacity: random(5, 10), color: color(random(200, 240)), vx: random(-2, -1), dead: false, size: random(40, 80) }); } //draw/move circles noStroke(); for(var i = this.circles.length - 1; i >= 0; i--) { //get the current circle var circle = this.circles[i]; //fill and draw the circle fill(circle.color, circle.opacity); ellipse(circle.x, circle.y, circle.size, circle.size); //move the circle horizontally circle.x+= circle.vx; //if the circles is off the screen then set it to dead (for removal) if(circle.x + circle.size < 0) { circle.dead = true; } } //remove circles that are dead while (this.circles.length > 0 && this.circles[0].dead) { this.circles.shift(); } }; //run the seaweeds (plants) this.runSeaweeds = function() { //if random is less than 0.02 add a new seaweed if(random() < 0.02) { //get the y position var y = ~~random(450, 500); //add a new seaweed with below properties this.seaweeds.push({ x: 700, y: y, cx1: 700, cy1: y + (height - y) * random(0.2, 0.4), cx2: 700, cy2: y + (height - y) * random(0.6, 0.8), color: color(random(55, 90), random(120, 170), random(40, 90)), vx: this.groundSpeed, dead: false, size: random(40, 80), cx1Speed: random(1, 3), cx2Speed: random(1, 3), cx1Offset: random(10, 20), cx2Offset: random(10, 20) }); } //draw/move seaweeds noStroke(); for(var i = this.seaweeds.length - 1; i >= 0; i--) { //get the current seaweed var seaweed = this.seaweeds[i]; //set the color fill(seaweed.color); //get sin for the bezier control points var cx1sin = sin(frameCount * seaweed.cx1Speed); var cx2sin = sin(frameCount * seaweed.cx2Speed); //draw the seaween with offsets and sin values to make them look wavey beginShape(); vertex(seaweed.x + cx2sin * 5, seaweed.y + cx2sin * 5); bezierVertex( seaweed.cx1 + seaweed.cx1Offset + cx1sin * 5, seaweed.cy1, seaweed.cx2 + seaweed.cx2Offset + cx2sin * 5, seaweed.cy2, seaweed.x, height); bezierVertex( seaweed.cx2 - seaweed.cx1Offset - cx1sin * 10, seaweed.cy2, seaweed.cx1 - seaweed.cx2Offset - cx2sin * 10, seaweed.cy1, seaweed.x + cx2sin * 5, seaweed.y + cx2sin * 5); endShape(); //update the x points seaweed.x-= seaweed.vx; seaweed.cx1-= seaweed.vx; seaweed.cx2-= seaweed.vx; //if seaweed is off the screen set it to dead (for removal) if(seaweed.x + seaweed.size < 0) { seaweed.dead = true; } } //remove seaweeds that are dead while (this.seaweeds.length > 0 && this.seaweeds[0].dead) { this.seaweeds.shift(); } }; //run the particles (bubbles from the propeller) this.runParticles = function() { //add new particles (leak free) this.particles.push({ x: 115, y: random(180, 300) + this.sub.vy, opacity: 200, color: color(random(200, 240)), vx: random(-4, -2), vy: random(-2, 2), dead: false, size: random(4, 7) }); //draw/move particles noStroke(); for(var i = this.particles.length - 1; i >= 0; i--) { //get current particle var p = this.particles[i]; //fill and draw the particle fill(p.color, p.opacity); ellipse(p.x, p.y + p.vy, p.size, p.size); //move horizontally p.x+= p.vx; //decrease the opacity so the particles fade out p.opacity-= 5; //if the opacity is less than 0 then set it to dead (for removal) if(p.opacity < 0) { p.dead = true; } } //remove particles that are dead while (this.particles.length > 0 && this.particles[0].dead) { this.particles.shift(); } }; //run the bubbles this.runBubbles = function() { //add new bubble if random is less than 0.05 if(random() < 0.05) { //add new bubble with below properties this.bubbles.push({ x: this.bubblesX, y: height, opacity: 200, color: color(random(200, 240)), vx: this.groundSpeed + random(-0.1, 0.1), vy: random(-2, -1), dead: false, size: random(10, 30) }); } //draw/move bubbles strokeWeight(1); for(var i = this.bubbles.length - 1; i >= 0; i--) { //get current bubble var bubble = this.bubbles[i]; //set fill/stroke and draw the bubble fill(bubble.color, bubble.opacity - 100); stroke(bubble.color, bubble.opacity); ellipse(bubble.x, bubble.y + bubble.vy, bubble.size, bubble.size); //move the bubble bubble.x-= bubble.vx; bubble.y+= bubble.vy; //decrease the opacity bubble.opacity-= 1; //if opacity is less than 0 or bubble goes off the screen //then set it to dead (for removal) if(bubble.opacity < 0 \|\| bubble.y + bubble.size < 0) { bubble.dead = true; } } ///move the current bubble X to match the current ground speed this.bubblesX-= this.groundSpeed; //if the bubbleX position is less than 50 //then reset it to a new random position if(this.bubblesX < 50) { this.bubblesX = random(width * 1.2, width * 2); } //remove bubbles that are dead while (this.bubbles.length > 0 && this.bubbles[0].dead) { this.bubbles.shift(); } }; //call all the functions above to draw/animate everything this.go = function() { //display the back (gradient) image image(this.backImg, 0, 0); //run the ground in the back this.runGroundBack(); //run the sharks this.runSharks(); //run the back fishes this.runfishesBack(); //run the sub this.sub.go(); //run the seaweeds this.runSeaweeds(); //run the bubbles this.runBubbles(); //run the ground this.runGround(); //run the front fishes this.runfishesFront(); //run the circles this.runCircles(); //run the particles (from propeller) this.runParticles(); //change scene from light > dark > light > etc. fill(0, map(sin(frameCount * 0.5), -1, 1, 0, 100)); rect(0, 0, width, height); }; }; //get a new Scene object to control the graphic/animation var scene = new Scene(); draw = function() { background(0, 39, 156); //run the scene scene.go(); };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJ3LztfwCgw
Votes	253
Spin-Offs	2
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	x.asper
Author Name	Determined.Mind.1
Author ID	kaid_122638877005916403768462
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739453799174
Updated	8 months ago, 1744845500134
Source Deleted	unknown