Viewing Program

Program Data

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

Title	Animated Fish Tank - Click to add fish
ID	4958858268114944
Created	11 years ago, 1396146314723
Updated	11 years ago, 1396313035410
Code	/** * Animated Fish Tank * * User Interactions: * * 1) User can click on the tank to add a fish. The fish will * be a random size and will swim with the speed related to * the proportion between its height and width. * * 2) Moving the mouse across the fish tank will add air bubbles * which will float up to the top of the tank. / var rareEventOccurs = function () { return Math.floor(random(0, 100)) === 0; }; var semiRareEventOccurs = function () { return Math.floor(random(0, 50)) === 0; }; /* * @class Fish * * Let's create a Fish class. A fish can have different sizes and colors, * and have swim in different directions. * * It should have the following attributes: * * @param {Number} height - the height of the fish * @param {Number} width - the height of the fish * @param {Number} x - the initial x position on the screen, and this * will change as the fish swims across the screen * @param {Number} depth - the depth of the fish tank where the fish swims * @param {object} [opts] - optional details such as "tailWidth", "tailHeight", * "bodyColor", "eyeColor", "eyeSize" and "direction" * attributes * E.g. { tailWidth: 10, tailHeight: 10 } / var Fish = function (height, width, x, depth, opts) { this.height = height; this.width = width; this.x = x; this.depth = depth; // Optional tail dimensions and colors opts = opts \|\| {}; this.tailWidth = opts.tailWidth \|\| this.width / 4; this.tailHeight = opts.tailHeight \|\| this.height / 2; this.bodyColor = opts.bodyColor \|\| color(162, 0, 255); this.eyeColor = opts.eyeColor \|\| color(0, 0, 133); this.eyeSize = opts.eyeSize \|\| this.height / 5; this.direction = opts.direction \|\| 'right'; // Purely calculate values: this.speed = Math.floor(this.width / this.height); }; // The fish should be able to draw itself Fish.prototype.draw = function () { var tailX, tailWidth, eyeX; if (this.direction === 'right') { tailX = this.x - this.width / 2; tailWidth = this.tailWidth; eyeX = this.x + this.width / 4; } else { tailX = this.x + this.width / 2; tailWidth = -this.tailWidth; eyeX = this.x - this.width / 4; } noStroke(); // body fill(this.bodyColor); ellipse(this.x, this.depth, this.width, this.height); // tail triangle( tailX, this.depth, tailX - tailWidth, this.depth - this.tailHeight, tailX - tailWidth, this.depth + this.tailHeight ); // eye fill(this.eyeColor); ellipse(eyeX, this.depth, this.eyeSize, this.eyeSize); return this; }; // Tell the fish to move Fish.prototype.move = function () { if (this.direction === 'right') { // The fish is moving to the right this.x += this.speed; if (this.x > width + this.width) { this.x = -this.width; } } else { // The fish is moving to the left this.x -= this.speed; if (this.x < -this.width) { this.x = width + this.width; } } // Occasionally, the fish should decide to turn around if (rareEventOccurs()) { if (this.direction === 'right') { this.direction = 'left'; } else { this.direction = 'right'; } } return this; }; /* * @class FishTank * * Let's creaet a FishTank class that can be used to draw the tank * and to add features such as seaweed and coral. / var FishTank = function () { this.bgColor = color(89, 216, 255); this.seaweedImg = getImage("cute/TreeTall"); this.seaweedPos = [ {x: 20, h: 175}, {x: 75, h: 150}, {x: 100, h: 300}, {x: 200, h: 200}, {x: 240, h: 150}, {x: 320, h: 225} ]; }; // The fish tank should be able to draw itself. FishTank.prototype.draw = function () { var i, weed, rock = getImage("cute/Rock"), row, column; background(this.bgColor); for (row = 0; row < 4; row += 1) { for (column = 0; column < 22; column += 1) { image( rock, -10 (row + 1) + column * 20, 355 + row * 8, 25 + row * 2, 18 + row * 2); } } for (i = 0; i < this.seaweedPos.length; i += 1) { weed = this.seaweedPos[i]; image(this.seaweedImg, weed.x, height - weed.h, 20, weed.h); } }; /** * @class AirBubble * * It floats up. / var AirBubble = function (x, y) { this.x = x; this.y = y \|\| height - 1; this.size = 6; }; // An AirBubble should be able to draw itself AirBubble.prototype.draw = function () { noStroke(); for (var i = this.size; i > 0; i -= 1) { fill(255, 255, 255, Math.floor(128 i / this.size)); ellipse(this.x, this.y, this.size, this.size); } return this; }; // Tell the bubble to move AirBubble.prototype.move = function () { this.y -= 2; if (semiRareEventOccurs()) { this.size += 1; } return this; }; // Create a new fish tank var tank = new FishTank(); // Let's start with 4 fish in the tank and the user // can add fish by clicking on the tank later. var fishies = []; fishies.push(new Fish(74, 118, 180, 100)); fishies.push(new Fish(30, 75, 260, 30, { bodyColor: color(162, 130, 255), eyeColor : color(33, 33, 33) })); fishies.push(new Fish(30, 90, 80, 40, { bodyColor: color(200, 0, 50), eyeColor : color(33, 33, 33) })); fishies.push(new Fish(30, 50, 300, 80, { bodyColor: color(162, 210, 25), eyeColor : color(133, 133, 133) })); // Let's add a new fish when the user clicks on the fish tank. var mouseClicked = function () { var h = random(10, 25), // random height w = random(20, 50), // random width r = random(0, 255), // random body red color value g = random(0, 255), // random body green color value b = random(0, 255); // random body blue color value // Now add a new fish based on the mouse click point and // the random color values generated above. fishies.push(new Fish(h, w, mouseX, mouseY, { bodyColor: color(r, g, b), eyeColor : color(255 - r, 255 - g, 255 - b) })); }; var airBubbles = []; // Let's animate the fish and have them swim across the tank var draw = function() { tank.draw(); for (var i = 0; i < fishies.length; i += 1) { fishies[i].draw().move(); } if (rareEventOccurs()) { airBubbles.push(new AirBubble(random(5, 395))); } for (i = 0; i < airBubbles.length; i += 1) { airBubbles[i].draw().move(); } for (i = 0; i < airBubbles.length; i += 1) { if (airBubbles[i].y < -airBubbles[i].size) { airBubbles.splice(i, 1); } } }; var mouseMoved = function () { if (random(0, 10) > 9) { airBubbles.push(new AirBubble(mouseX, mouseY)); } };
Folds
Fork	true
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMDM4sHnCAw
Votes	194
Spin-Offs	11
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"6136673667645440","title":"Project: Fish Tank","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Nathan E. Fairchild
Author Name	nathan.e.fairchild
Author ID	kaid_405408382747020441105816
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739372090911
Updated	10 months ago, 1739372090911
Source Deleted	unknown