Viewing Program

Program Data

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

Title	Bubble Animation
ID	4526065338548224
Created	10 years ago, 1427122008244
Updated	10 years ago, 1428966662225
Code	/ Bubble Animation by The Mockingjay - You can click the bubbles to pop them. - Press i to toggle the avatars. - Press c to toggle rainbow bubbles. - Press s to toggle sound. - If you like this, check out the official game: https://www.khanacademy.org/computer-programming/bubble-pop-the-game/4767943003078656 / var drawArrow = function(x, y) { strokeWeight(1); stroke(255, 217, 0); line(x-150, y-1, x+125, y-1); stroke(201, 174, 0); line(x-150, y, x+125, y); stroke(135, 115, 0); line(x-150, y+1, x+125, y+1); fill(255, 217, 0); quad(x-150, y-1, x-110, y-1, x-130, y-30, x-170, y-30); quad(x-150, y+1, x-110, y+1, x-130, y+30, x-170, y+30); for(var i = 0; i < 5; i++) { stroke(201, 174, 0); line(x-145+i7, y-1, x-165+i7, y-30); line(x-145+i7, y+1, x-165+i7, y+30); } stroke(135, 115, 0); triangle(x+125, y-20, x+125, y+20, x+175, y); fill(201, 174, 0); triangle(x+125, y, x+125, y+20, x+175, y); }; var drawArcs = function(t, t2) { stroke(51); strokeWeight(25); noFill(); arc(400, 0, 300, 300, t, 200); strokeWeight(15); arc(145, 400, 150, 150, 170, t2); strokeWeight(1); fill(51); arc(400, 0, 225, 225, t, 200); arc(145, 400, 100, 100, 170, t2); }; var drawText = function(s, s2, y, y2) { fill(217, 0, 0); textSize(38); text("T H E".substring(0, s), 158, 198+y); text("M O C K I N G J A Y".substring(0, s2), 30, 232+y2); fill(255, 255, 255); textSize(38); text("T H E".substring(0, s), 159, 197+y); text("M O C K I N G J A Y".substring(0, s2), 31, 231+y2); }; var x = -300; var y = 200; var s = 0; var s2 = 0; var t = 200; var t2 = 170; var ty = 0; var ty2 = 0; var r = 0; var logoDone = false; var bubbleCount = 75; var avatarChance = 0.2; var hasImages = true; var hasSound = true; var images = [ getImage("avatars/leaf-green"), getImage("avatars/leaf-blue"), getImage("avatars/marcimus"), getImage("avatars/purple-pi"), getImage("avatars/spunky-sam"), getImage("creatures/Winston"), getImage("creatures/Hopper-Jumping"), getImage("creatures/OhNoes"), getImage("avatars/leafers-ultimate"), getImage("avatars/mr-pants"), getImage("avatars/old-spice-man"), getImage("avatars/piceratops-ultimate"), getImage("avatars/orange-juice-squid"), getImage("avatars/aqualine-ultimate"), getImage("avatars/duskpin-ultimate"), getImage("avatars/primosaur-ultimate"), getImage("avatars/starky-ultimate"), getImage("avatars/mr-pink"), getImage("avatars/robot_female_1"), getImage("avatars/leaf-orange"), getImage("avatars/piceratops-seed"), getImage("avatars/leaf-yellow"), getImage("creatures/Hopper-Cool"), getImage("creatures/BabyWinston"), getImage("avatars/leaf-red"), getImage("avatars/leafers-seed"), getImage("avatars/leaf-grey"), getImage("avatars/piceratops-seedling"), getImage("avatars/leafers-seedling"), getImage("avatars/aqualine-seedling"), getImage("avatars/aqualine-seed"), getImage("avatars/leafers-sapling"), getImage("avatars/leafers-tree"), getImage("avatars/piceratops-sapling"), getImage("avatars/piceratops-tree"), getImage("avatars/aqualine-tree"), getImage("avatars/aqualine-sapling"), getImage("avatars/primosaur-seed"), getImage("avatars/primosaur-seedling"), getImage("avatars/primosaur-sapling"), getImage("avatars/primosaur-tree"), getImage("avatars/duskpin-seed"), getImage("avatars/duskpin-seedling"), getImage("avatars/duskpin-sapling"), getImage("avatars/duskpin-tree"), getImage("avatars/starky-seed"), getImage("avatars/starky-seedling"), getImage("avatars/starky-sapling"), getImage("avatars/starky-tree"), getImage("avatars/robot_male_1"), getImage("creatures/Hopper-Happy") ]; var hasColors = false; var colors = [ color(255, 0, 0, random(100, 150)), color(255, 166, 0, random(100, 150)), color(255, 255, 0, random(100, 150)), color(0, 255, 0, random(100, 150)), color(0, 255, 255, random(100, 150)), color(0, 0, 255, random(100, 150)), color(166, 0, 255, random(100, 150)), color(255, 0, 255, random(100, 150)), color(187, 255, 0, random(100, 150)) ]; var popImage = 0; var currentSize = 0; var currentX = 0; var currentY = 0; var p = 0; var FallingAvatar = function(a, x, y, s) { this.x = x; this.y = y; this.avatar = a; this.size = s; this.draw = function() { image(this.avatar, this.x, this.y, this.size, this.size); }; }; var avatars = []; var Bubble = function() { this.x = random(width); this.y = random(height); this.size = random(10, 40); this.riseSpeed = random(1, 3); this.fill = random(50, 150); this.imageChance = random(); this.image = images[floor(random(images.length))]; this.color = colors[floor(random(colors.length))]; this.reset = function() { this.x = random(width); this.y = random(height, height+30); this.size = random(10, 40); this.riseSpeed = random(1, 3); this.fill = random(50, 150); this.imageChance = random(); this.image = images[floor(random(images.length))]; this.color = colors[floor(random(colors.length))]; }; this.rise = function() { if(this.y < -4) { this.reset(); } this.y -= this.riseSpeed; this.x += random(-1, 1); }; this.pop = function() { if(dist(mouseX, mouseY, this.x, this.y) <= this.size/2) { if(this.imageChance < avatarChance) { popImage = this.image; currentSize = this.size/1.2; currentX = this.x; currentY = this.y; } if(hasSound) { playSound(getSound("rpg/water-bubble")); } this.reset(); } }; this.draw = function() { if(this.imageChance < avatarChance && hasImages) { imageMode(CENTER); image(this.image, this.x, this.y, this.size/1.2, this.size/1.2); } if(hasColors) { fill(this.color); } else { fill(255, 255, 255, this.fill); } stroke(255, 255, 255); ellipse(this.x, this.y, this.size, this.size); fill(255, 255, 255); ellipse(this.x-this.size/6, this.y-this.size/6, this.size/6, this.size/6); this.rise(); }; }; var bubbles = []; if(bubbles.length < bubbleCount) { for(var i = 0; i < bubbleCount - bubbles.length; i++) { bubbles.push(new Bubble()); } } var draw = function() { if(!logoDone) { background(0, 0, 0); drawArrow(x, y); drawArcs(t, t2); drawText(s, s2, ty, ty2); s+=0.3; if(s > 6) { s2+=0.3; } if(t > 0 && s2 > 30) { t-=3; } if(t2 < 360 && t < 90) { t2+=3; } if(x < 195 && t2 > 350) { x+=10; ty-=0.6; ty2+=1.1; } if(s2 > 100) { noStroke(); fill(0, 0, 0, r); rect(0, 0, width, height); r+=2; } if(r > 255) { logoDone = true; } } else if(logoDone) { var startColor = color(0, 255, 191); var endColor = color(0, 102, 255); for(var i = 0; i <= height; i++) { stroke(lerpColor(startColor, endColor, i/height)); line(0, i, height, i); } for(var i = 0; i < bubbles.length; i++) { bubbles[i].draw(); } if(popImage !== 0 && currentSize !== 0 && p === 0 && hasImages) { avatars.push(new FallingAvatar(popImage, currentX, currentY, currentSize)); p = 1; } for(var i = 0; i < avatars.length; i++) { avatars[i].draw(); avatars[i].y++; if(avatars[i].y > 410) { avatars.splice(i, 1); } } } }; var keyPressed = function() { if(hasImages && keyCode === 73) { hasImages = false; } else if(!hasImages && keyCode === 73) { hasImages = true; } if(hasColors && keyCode === 67) { hasColors = false; } else if(!hasColors && keyCode === 67) { hasColors = true; } if(hasSound && keyCode === 83) { hasSound = false; } else if(!hasSound && keyCode === 83) { hasSound = true; } }; var mouseClicked = function() { popImage = 0; currentSize = 0; currentX = 0; currentY = 0; p = 0; for(var i = 0; i < bubbles.length; i++) { bubbles[i].pop(); } };
Folds	14,38,40,53,55,64,81,133,135,145,152,160,164,220,229,288,290,310,312,321
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgPCl642FCAw
Votes	209
Spin-Offs	23
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	The Mockingjay
Author Name	Icefall
Author ID	kaid_491231900636596191906345
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739362996445
Updated	10 months ago, 1739363005066
Source Deleted	unknown