Viewing Program

Program Data

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

Title	BASKETILT
ID	5162034540789760
Created	4 years ago, 1622559417404
Updated	4 years ago, 1622760573814
Code	<!DOCTYPE html> <!-- Basketilt - an entry for Primavera 3 week challenge Sub? https://www.khanacademy.org/cs/i/6652809926492160 This is in a webpage and not PJS because I use API to get leaderboard scores, and I dont know how to use API other than with jQuery. Definitely not because I really like using google fonts. Just reload if it takes too long to load. It runs on my chromebook, so it should run on your potato. Features (judges) -Advanced physics engine. -Good? graphics and aesthetics. -Nice transition -Unique concept -API to get scores -Insane frameRate (lots of optimizing) --> <html> <head> <title>BASKETILT</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Ceviche+One&family=PT+Sans&display=swap" rel="stylesheet"> <style> body, html{ margin:0; overflow:hidden; } </style> </head> <body> <!-- Import Scripts --> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script> <!-- Call the canvas --> <canvas id="mycanvas"></canvas> </body> <script type="application/javascript" > var comments = []; var at = 0; </script> <!--Set up API --> <script type="application/javascript" > var loadComments = function(){ $.getJSON("https://www.khanacademy.org/api/internal/discussions/scratchpad/5162034540789760/comments?limit=1000&callback=?", function(data){ var feedback = data['feedback']; var addComment = function(i) { var banned = ''; var Data = feedback[i]; var cont = Data.content; var kaid = Data.authorKaid; if(cont.includes('~`')&&cont.includes('`~')){ var indices = []; for(var i = 0; i < cont.length; i ++){ if(cont[i] === '~'){ indices.push(i); } } cont = cont.substring(indices[0] + 1, indices[1]); //Code stolen above from IP to fix a type error var author = Data.authorNickname; cont = JSON.parse(cont); cont[0] = parseInt(cont[0],4); cont.push(author); if(cont.includes(author)&&!banned.includes(kaid)){ comments.push(cont); } } }; function loop() { addComment(at); at++; if (at < feedback.length) { loop(); } }; loop(); }); }; loadComments(); </script> <!-- Run API --> <script type> var programCode = function(processingInstance) { with (processingInstance) { size(600, 600); var keys = []; var scene = 'load'; var click = false; var fonts = [ createFont('Ceviche One'),createFont('PT Sans Bold') ]; textAlign(CENTER,CENTER); var level, levels, loadLevel; var deg = function(theta){ return(thetaPI/180); }; var rotPoint = function(x,y,rx,ry,r){ var tempX = x-rx; var tempY = y-ry; var t = r; var X = (tempXcos(t) - tempYsin(t))+rx; var Y = (tempXsin(t) + tempYcos(t))+ry; return([X,Y]); }; var isBetween = function (c, a, b) { return (a - c) (b - c) <= 0; }; var mouseRect = function(x,y,w,h){ return(mouseX > x &&mouseX < x+w&&mouseY > y&&mouseY < y+h); }; var isInCircle = function (x, y, cx, cy, diam) { var dx = x - cx; var dy = y - cy; return dx * dx + dy * dy <= diam * diam / 4; }; var circLineCollide = function (cx,cy,diam,x1,y1,x2,y2){ var m = (y2 - y1) / (x2 - x1); if (isInCircle(x2, y2, cx, cy, diam)) { return true; } x1 -= cx; x2 -= cx; y1 -= cy; y2 -= cy; var r = diam * diam / 4; var k = y1 - m * x1; var a = (1 + m * m) / r; var b = 2 * m * k / r; var c = k * k / r - 1; var discrim = b * b - 4 * a * c; if (discrim < 0) { return false; } discrim = sqrt(discrim); a = 2; return isBetween((-b - discrim) / a, x1, x2) \|\| isBetween((-b + discrim) / a, x1, x2); }; var txt = function(txt,x,y,sz){ textSize(sz) fill(0); for(var i = 0; i < PI2;i+=0.2){ text(txt,x+cos(i)sz/20,y+sin(i)sz/20); } for(var i = -1; i < sz/6; i ++){ text(txt,x+i,y+i); } fill(255); text(txt,x,y); }; var logos = []; var logoX = -600; var logoParticle = function(x,y,img){ this.targX = x; this.targY = y; this.x = x + cos(random(0,360)) random(600,800); this.y = y + sin(random(0,360)) random(600,800); this.a = atan2(this.targY-this.y,this.targX-this.x); this.d = dist(this.x,this.y,this.targX,this.targY); this.speed = this.d/100; this.img = img; }; logoParticle.prototype.draw = function() { if(this.d < 0){ this.x = this.targX; this.y = this.targY; this.speed = 0; this.s = 8; } else{ this.d -= this.speed; this.s = this.d/10+8; } image(this.img,this.x,this.y,this.s,this.s); this.x += cos(this.a)this.speed; this.y += sin(this.a)this.speed; }; var trans = { weight:0, state:1, to:null, running:false, x:0, y:-100, speed: 5, inc:0.5, loaded:false, opacity:255, }; trans.run = function(){ if(trans.running){ if(trans.state === 1){ trans.weight += trans.speed; trans.speed += trans.inc; if(trans.weight >= 1100){ trans.speed = -trans.speed; trans.x = -600; scene = trans.to; if(trans.to === 'play'){ if(!trans.loaded){ level ++; loadLevel(); trans.loaded = true; } if(trans.y < 300){ trans.y = lerp(trans.y,310,0.1); trans.weight = 1100; trans.speed = 0; } else{ trans.weight = 1099; trans.speed = -34; } } } if(trans.weight < 0){ trans.speed = 5; trans.weight = 0; trans.state = 2; trans.opacity = 255; trans.loaded = false; trans.y = -100; } noFill(); stroke(0); strokeWeight(trans.weight); ellipse(300,300,850,850); trans.opacity = map(trans.weight,1100,0,255,0); fill(255,trans.opacity); textFont(fonts[0],70); text('Level '+(level+1),300,trans.y); } else if(trans.state === 2){ trans.x = lerp(trans.x,0,0.1); if(~~trans.x > -10\|\|trans.to === 'play'){ trans.x +=0.5; if(trans.x > -1\|\|trans.to === 'play'){ trans.x = 0; trans.running = false; trans.state = 1; } } } } }; var curLoad = 0; var imgs = { wall:{ w:600, h:600, d:function(){ background(100); stroke(0,30); strokeWeight(2); for(var i = 0; i < 600; i += 100){ line(i,0,i,600); } pushMatrix(); translate(0,50); fill(50); rect(0,500,600,100); noStroke(); beginShape(); vertex(0,500); vertex(599,504); vertex(599,435); vertex(581,435); vertex(581,451); vertex(563,450); vertex(563,393); vertex(548,393); vertex(540,410); vertex(539,429); vertex(524,429); vertex(524,418); vertex(510,418); vertex(510,389); vertex(492,389); vertex(492,405); vertex(476,418); vertex(476,434); vertex(462,434); vertex(462,422); vertex(444,424); vertex(444,434); vertex(429,410); vertex(429,386); vertex(409,386); vertex(410,416); vertex(400,416); vertex(399,435); vertex(383,435); vertex(383,403); vertex(371,393); vertex(360,393); vertex(359,415); vertex(347,416); vertex(347,431); vertex(323,431); vertex(324,428); vertex(327,428); vertex(330,423); vertex(330,418); vertex(332,418); vertex(336,409); vertex(332,407); vertex(337,403); vertex(328,399); vertex(326,404); vertex(324,404); vertex(323,402); vertex(321,398); vertex(318,393); vertex(313,388); vertex(313,386); vertex(311,383); vertex(313,382); vertex(312,378); vertex(312,377); vertex(311,372); vertex(313,371); vertex(321,371); vertex(309,369); vertex(310,369); vertex(318,364); vertex(311,366); vertex(310,366); vertex(313,360); vertex(306,365); vertex(306,365); vertex(306,356); vertex(303,365); vertex(301,364); vertex(295,360); vertex(300,366); vertex(297,366); vertex(293,366); vertex(299,369); vertex(298,375); vertex(296,377); vertex(296,377); vertex(293,369); vertex(291,369); vertex(291,359); vertex(289,357); vertex(289,347); vertex(289,347); vertex(289,342); vertex(287,342); vertex(287,339); vertex(288,337); vertex(291,336); vertex(290,333); vertex(286,329); vertex(289,329); vertex(287,322); vertex(282,322); vertex(282,330); vertex(279,330); vertex(279,337); vertex(281,337); vertex(284,356); vertex(285,369); vertex(283,378); vertex(281,381); vertex(280,382); vertex(288,394); vertex(286,399); vertex(291,408); vertex(284,418); vertex(272,418); vertex(272,400); vertex(259,400); vertex(259,371); vertex(245,371); vertex(246,408); vertex(233,408); vertex(223,390); vertex(223,372); vertex(210,372); vertex(210,396); vertex(196,396); vertex(186,409); vertex(166,408); vertex(167,385); vertex(150,385); vertex(140,399); vertex(140,425); vertex(126,425); vertex(126,400); vertex(110,401); vertex(110,374); vertex(101,358); vertex(91,376); vertex(91,405); vertex(91,405); vertex(79,405); vertex(63,385); vertex(47,385); vertex(47,419); vertex(32,420); vertex(32,399); vertex(18,383); vertex(16,356); vertex(1,356); endShape(CLOSE); popMatrix(); } }, overlaysection:{ w:50, h:50, d:function(){ strokeWeight(1); for(var i = 0; i < 50; i ++){ for(var j = 0; j < 50; j ++){ stroke(0,noise(i/4,j/4)50); point(i,j); } } } }, overlay:{ w:600, h:600, d:function(){ for(var i = 0; i < 600; i += 50){ for(var j = 0; j < 600; j += 50){ image(imgs.overlaysection,i,j); } } } }, brickbackground:{ w:600, h:600, d:function(){ noStroke(); for(var i = 0; i < 650; i += 50){ for(var j = 0; j < 650; j += 25){ pushMatrix(); translate(j%50<25?-25:0,0); fill(200,random(0,100),0); rect(i,j,50,25); popMatrix(); } } } }, bricks:{ w:600, h:600, d:function(){ image(imgs.brickbackground,0,0); stroke(200); strokeWeight(2); noFill(); for(var i = 0; i < 650; i += 50){ for(var j = 0; j < 600; j += 25){ pushMatrix(); translate(j%50<25?-25:0,0); beginShape(); for(var k = 0; k < 50; k += 10){ vertex(i+k,j+noise(k/3,j/3)10-5); } for(var k = 0; k <= 25; k += 5){ vertex(i+noise(k/3,i/3)10-5+50,j+k); } for(var k = 0; k <= 50; k += 10){ vertex(i-k+100,j+noise(k/3,j/3)10-5+25); } for(var k = 0; k <= 25; k += 5){ vertex(i+noise(k/3,i/3)10-5,j-k+25); } endShape(); popMatrix(); } } image(imgs.overlay,0,0); }, }, brickmask:{ w:600, h:600, d:function(){ background(0); noStroke(); fill(255); beginShape(); vertex(402,140); curveVertex(402,140); curveVertex(402,129); curveVertex(413,127); curveVertex(424,127); curveVertex(432,124); curveVertex(433,114); curveVertex(435,106); curveVertex(441,103); curveVertex(478,104); curveVertex(516,104); curveVertex(523,112); curveVertex(521,126); curveVertex(489,126); curveVertex(480,137); curveVertex(484,150); curveVertex(499,154); curveVertex(505,169); curveVertex(494,177); curveVertex(453,177); curveVertex(451,188); curveVertex(451,177); curveVertex(450,194); curveVertex(444,202); curveVertex(403,202); curveVertex(404,181); curveVertex(422,178); curveVertex(428,152); curveVertex(404,152); curveVertex(401,139); vertex(403,139); endShape(CLOSE); beginShape(); vertex(341,351); curveVertex(341,351); curveVertex(328,353); curveVertex(327,365); curveVertex(328,372); curveVertex(347,375); curveVertex(353,397); curveVertex(343,403); curveVertex(327,403); curveVertex(327,420); curveVertex(341,424); curveVertex(361,425); curveVertex(372,430); curveVertex(376,448); curveVertex(442,450); curveVertex(450,439); curveVertex(445,428); curveVertex(426,427); curveVertex(422,420); curveVertex(425,401); curveVertex(416,381); curveVertex(379,377); curveVertex(372,353); curveVertex(338,352); vertex(338,352); endShape(CLOSE); beginShape(); vertex(52,250); curveVertex(52,250); curveVertex(72,251); curveVertex(78,261); curveVertex(78,274); curveVertex(102,274); curveVertex(102,299); curveVertex(150,301); curveVertex(196,299); curveVertex(202,282); curveVertex(184,276); curveVertex(177,276); curveVertex(175,256); curveVertex(190,252); curveVertex(197,249); curveVertex(199,236); curveVertex(195,227); curveVertex(156,226); curveVertex(152,246); curveVertex(126,248); curveVertex(104,248); curveVertex(101,233); curveVertex(85,226); curveVertex(54,227); curveVertex(51,244); curveVertex(68,249); vertex(68,249); endShape(CLOSE); beginShape(); vertex(178,49); curveVertex(178,49); curveVertex(252,51); curveVertex(267,51); curveVertex(273,63); curveVertex(266,76); curveVertex(252,77); curveVertex(247,97); curveVertex(202,98); curveVertex(200,79); curveVertex(178,76); curveVertex(174,69); curveVertex(177,48); vertex(177,48); endShape(CLOSE); var mask = get(0,0,600,600); if(imgs.bricks){ imgs.bricks.mask(mask); } } }, brickoverlay:{ w:600, h:600, d:function(){ var overlay = function(x,y){ pushMatrix(); translate(x,y); beginShape(); vertex(402,140); curveVertex(402,140); curveVertex(402,129); curveVertex(413,127); curveVertex(424,127); curveVertex(432,124); curveVertex(433,114); curveVertex(435,106); curveVertex(441,103); curveVertex(478,104); curveVertex(516,104); curveVertex(523,112); curveVertex(521,126); curveVertex(489,126); curveVertex(480,137); curveVertex(484,150); curveVertex(499,154); curveVertex(505,169); curveVertex(494,177); curveVertex(453,177); curveVertex(451,188); curveVertex(451,177); curveVertex(450,194); curveVertex(444,202); curveVertex(403,202); curveVertex(404,181); curveVertex(422,178); curveVertex(428,152); curveVertex(404,152); curveVertex(401,139); vertex(403,139); endShape(CLOSE); beginShape(); vertex(341,351); curveVertex(341,351); curveVertex(328,353); curveVertex(327,365); curveVertex(328,372); curveVertex(347,375); curveVertex(353,397); curveVertex(343,403); curveVertex(327,403); curveVertex(327,420); curveVertex(341,424); curveVertex(361,425); curveVertex(372,430); curveVertex(376,448); curveVertex(442,450); curveVertex(450,439); curveVertex(445,428); curveVertex(426,427); curveVertex(422,420); curveVertex(425,401); curveVertex(416,381); curveVertex(379,377); curveVertex(372,353); curveVertex(338,352); vertex(338,352); endShape(CLOSE); beginShape(); vertex(52,247); curveVertex(52,247); curveVertex(72,251); curveVertex(78,261); curveVertex(78,274); curveVertex(102,274); curveVertex(102,299); curveVertex(150,301); curveVertex(196,299); curveVertex(202,282); curveVertex(184,276); curveVertex(177,276); curveVertex(175,256); curveVertex(190,252); curveVertex(197,249); curveVertex(199,236); curveVertex(195,227); curveVertex(156,226); curveVertex(152,246); curveVertex(126,248); curveVertex(104,248); curveVertex(101,233); curveVertex(85,226); curveVertex(54,227); curveVertex(51,244); curveVertex(68,249); vertex(68,249); endShape(CLOSE); beginShape(); vertex(178,49); curveVertex(178,49); curveVertex(252,51); curveVertex(267,51); curveVertex(273,63); curveVertex(266,76); curveVertex(252,77); curveVertex(247,97); curveVertex(202,98); curveVertex(200,79); curveVertex(178,76); curveVertex(174,69); curveVertex(177,48); vertex(177,48); endShape(CLOSE); popMatrix(); }; stroke(45); strokeWeight(2); noFill(); overlay(0,0); filter(BLUR,1); } }, title:{ w:600, h:600, d:function(){ background(0); fill(255) textFont(createFont('Ceviche One Italics Bold'),120); text('BASKETILT',300,200); var mask = get(0,0,600,600); background(255,0); noStroke(); var c1 = color(215,44,29); var c2 = color(255,110,0); for(var i = 0; i < 70; i ++){ fill(lerpColor(c1,c2,i/70)); rect(0,i+170,600,1) } var img = get(0,0,600,600); if(img){ img.mask(mask); } background(255,0); fill(0); for(var i = -2; i < 12; i ++){ text('BASKETILT',300+i,40+i); } fill(0); for(var i = 0; i < PI2; i += 0.2){ text('BASKETILT',300+cos(i)2,40+sin(i)2); } image(img,0,-160); }, }, how:{ w:600, h:600, d:function(){ background(0); fill(255) textFont(createFont('Ceviche One Italics Bold'),120); text('HOW',300,200); var mask = get(0,0,600,600); background(255,0); noStroke(); var c1 = color(215,44,29); var c2 = color(255,110,0); for(var i = 0; i < 70; i ++){ fill(lerpColor(c1,c2,i/70)); rect(0,i+170,600,1) } var img = get(0,0,600,600); if(img){ img.mask(mask); } background(255,0); fill(0); for(var i = -2; i < 12; i ++){ text('HOW',300+i,40+i); } fill(0); for(var i = 0; i < PI2; i += 0.2){ text('HOW',300+cos(i)2,40+sin(i)2); } image(img,0,-160); }, }, credit:{ w:600, h:600, d:function(){ background(0); fill(255) textFont(createFont('Ceviche One Italics Bold'),120); text('CREDIT',300,200); var mask = get(0,0,600,600); background(255,0); noStroke(); var c1 = color(215,44,29); var c2 = color(255,110,0); for(var i = 0; i < 70; i ++){ fill(lerpColor(c1,c2,i/70)); rect(0,i+170,600,1) } var img = get(0,0,600,600); if(img){ img.mask(mask); } background(255,0); fill(0); for(var i = -2; i < 12; i ++){ text('CREDIT',300+i,40+i); } fill(0); for(var i = 0; i < PI2; i += 0.2){ text('CREDIT',300+cos(i)2,40+sin(i)2); } image(img,0,-160); }, }, lead:{ w:600, h:600, d:function(){ background(0); fill(255) textFont(createFont('Ceviche One Italics Bold'),120); text('LEAD',300,200); var mask = get(0,0,600,600); background(255,0); noStroke(); var c1 = color(215,44,29); var c2 = color(255,110,0); for(var i = 0; i < 70; i ++){ fill(lerpColor(c1,c2,i/70)); rect(0,i+170,600,1) } var img = get(0,0,600,600); if(img){ img.mask(mask); } background(255,0); fill(0); for(var i = -2; i < 12; i ++){ text('LEAD',300+i,40+i); } fill(0); for(var i = 0; i < PI2; i += 0.2){ text('LEAD',300+cos(i)2,40+sin(i)2); } image(img,0,-160); }, }, win:{ w:600, h:600, d:function(){ background(0); fill(255) textFont(createFont('Ceviche One Italics Bold'),120); text('YOU WIN',300,200); var mask = get(0,0,600,600); background(255,0); noStroke(); var c1 = color(215,44,29); var c2 = color(255,110,0); for(var i = 0; i < 70; i ++){ fill(lerpColor(c1,c2,i/70)); rect(0,i+170,600,1) } var img = get(0,0,600,600); if(img){ img.mask(mask); } background(255,0); fill(0); for(var i = -2; i < 12; i ++){ text('YOU WIN',300+i,40+i); } fill(0); for(var i = 0; i < PI2; i += 0.2){ text('YOU WIN',300+cos(i)2,40+sin(i)2); } image(img,0,-160); }, }, backdrop:{ w:600, h:600, d:function(){ image(imgs.wall,0,0); image(imgs.bricks,0,0); image(imgs.brickoverlay,0,0); image(imgs.overlay,0,0); } }, platform:{ w:100, h:15, d:function(){ noStroke(); fill(207, 184, 144); rect(0,0,100,15); fill(222, 202, 166); for(var i = 0; i < 100; i += random(0,20)){ ellipse(i,0,random(5,10),random(5,10)); } beginShape(); vertex(0,0); vertex(0,4); vertex(50,3); vertex(100,4); vertex(100,0); endShape(); fill(191, 172, 139); rect(0,12,100,4); for(var i = 0; i < 100; i += random(0,20)){ ellipse(i,14,random(5,10),random(5,10)); } //image(imgs.overlay,0,0); } }, ball:{ w:25, h:25, d:function(){ pushMatrix(); scale(0.5); noStroke(); var c1 = color(255, 132, 0); var c2 = color(179, 90, 7); for(var i = 0; i < 110; i ++){ fill(lerpColor(c1,c2,i/110)); rect(0,i,110,1); } noFill(); stroke(45); strokeWeight(2.5); arc(50,-20,100,110,0,180); arc(50,120,100,110,180,360); line(0,50,100,50); line(50,0,50,100); var img = get(0,0,50,50); background(0); noStroke(); fill(255); ellipse(50,50,100,100); var mask = get(0,0,50,50); if(img){ img.mask(mask); } background(255,0); image(img,0,0); popMatrix(); } }, hoop:{ w:50, h:55, d:function(){ pushMatrix(); stroke(247, 239, 222); strokeWeight(2); line(1,0,10,50); line(49,0,40,50); line(5,0,40,50); line(45,0,10,50); line(30,0,7,34); line(20,0,43,34); line(4,17,25,50); line(46,17,25,50); line(46,17,36,0); line(4,17,14,0); noStroke(); fill(209, 57, 34); rect(0,0,50,8,20); fill(224, 94, 94); rect(0,0,50,3,2); for(var i = 0; i < 6; i ++){ ellipse(random(0,45),1,random(5,10),random(5,10)); } }, }, button:{ w:308, h:58, d:function(){ noStroke(); fill(215,74,29); rect(0,0,300,50); fill(235,119,82); randomSeed(10); for(var i = 0; i < 250; i +=random(10,20)){ ellipse(i,random(0,2),random(20,35),random(5,10)); } for(var i = 0; i < 50; i += random(10,20)){ ellipse(random(0,2),i,random(5,10),random(20,35)); } for(var i = 0; i < 20; i ++){ var s = random(3,5); ellipse(random(0,250),random(0,20),s,s); } fill(161,82,57); for(var i = 50; i < 300; i +=random(10,20)){ ellipse(i,random(48,50),random(20,35),random(5,10)); } for(var i = 0; i < 50; i += random(10,20)){ ellipse(random(300,298),i,random(5,10),random(20,35)); } for(var i = 0; i < 15; i ++){ var s = random(3,5); ellipse(random(50,300),random(30,50),s,s); } var img = get(0,0,300,50); background(255,0); image(img,4,4); stroke(139,41,9); noFill(); strokeWeight(4); rect(2,2,303,53,2); } }, LKmask:{ w:100, h:60, d:function(){ pushMatrix(); noStroke(); background(0); translate(-100,-100); fill(255); rect(105,100,30,10); rect(112,100,15,60); rect(105,150,55,10); quad(160,145,160,150,145,150,145,130); stroke(0); strokeWeight(1); quad(144,124,160,124,188,151,173,151); quad(154,125,164,130,188,109,173,109); stroke(255,0); rect(153,120,12,10); noStroke(); rect(165,150,30,10); rect(165,100,30,10); rect(145,100,15,25); popMatrix(); } }, LKimg:{ w:100, h:60, d:function(){ pushMatrix(); translate(-100,-100); noStroke(); for(var i = -200; i < 400; i +=0.3){ fill(0, 34+i2, 255); rect(100,i+60,400,1); } popMatrix(); var img = get(0,0,100,60); if(img){ img.mask(imgs.LKmask); } background(255,0); image(img,0,0); } }, pushParticles:{ w:1, h:1, d:function(){ background(0); image(imgs.LKimg,0,0); for(var i = 0; i < 100; i += 8){ for(var j = 0; j < 60; j += 8){ logos.push(new logoParticle(i+250,j+270,get(i,j,8,8))); } } } } }; var load = function(){ if(curLoad < Object.keys(imgs).length ){ background(255,0); var img = imgs[Object.keys(imgs)[curLoad]]; img.d(); imgs[Object.keys(imgs)[curLoad]] = get(0,0,img.w,img.h); curLoad++; if(curLoad === Object.keys(imgs).length ){ scene = 'logo'; //Change this to whatever scene you are going to. } } background(0); fill(255); textFont(fonts[0],width/10); text("Loading... "+~~(curLoad / +Object.keys(imgs).length100)+'%',width/2,height/2); }; var Player = function(){ this.pr = 0; this.r = 0; this.rotSpeed = 0; this.mSpeed = 0; this.maxRot = 25; this.basketsMade = 0; this.time = 1230; }; Player.prototype.move = function(){ if(keys[LEFT]){ this.pr += this.rotSpeed; this.rotSpeed -= 0.1; if(this.rotSpeed > 0){ this.rotSpeed =0; } } else if(keys[RIGHT]){ this.pr += this.rotSpeed; this.rotSpeed += 0.1; if(this.rotSpeed < 0){ this.rotSpeed =0; } } else{ this.rotSpeed = 0; this.pr/= 1.1; } this.rotSpeed = constrain(this.rotSpeed,-5,5); this.pr = constrain(this.pr,-this.maxRot,this.maxRot); this.r = deg(this.pr) }; var p = new Player(); var plats = []; var Plat = function(x1,y1,x2,y2){ this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.a = atan2(y2-y1,x2-x1); this.d = dist(x1,y1,x2,y2); }; Plat.prototype.draw = function() { pushMatrix(); translate(this.x1,this.y1); translate(0,8); rotate(this.a); translate(0,-8); image(imgs.platform,0,0,this.d,15); popMatrix(); }; var balls = []; var Ball = function(x,y,i){ this.x = x; this.y = y-50; this.sx = x; this.sy = 10; this.index = i; this.d = 25; this.r = 0; this.xv = random(-1,1); this.yv = 0; this.grav = 0.16; this.colliding = false; this.shotMade = false; this.speed = 0; this.moveHome = false; }; Ball.prototype.draw = function() { pushMatrix(); translate(this.x,this.y); rotate(deg(this.r)); imageMode(CENTER); image(imgs.ball,0,0,this.d,this.d); imageMode(CORNER); popMatrix(); }; Ball.prototype.move = function(){ this.r += this.xv2; if(!this.colliding&&!this.moveHome&&!trans.running){ if(this.yv < 8){ this.yv+=this.grav; } if(this.xv > 0){ this.xv -= 0.02; } if(this.xv < 0){ this.xv+= 0.02; } this.y += cos(p.r)this.yv; this.x+= sin(p.r)this.yv; if(this.speed > 0){ this.y += cos(p.r+deg(this.speed20))this.xv; this.x+= sin(p.r+deg(this.speed20))this.xv; } else{ this.y -= cos(p.r+deg(this.speed20))this.xv; this.x-= sin(p.r+deg(this.speed20))this.xv; } } this.colliding = false; }; Ball.prototype.lineColl = function(obj){ if(!trans.running &&!this.moveHome&&circLineCollide(this.x,this.y+3,this.d,obj.x1,obj.y1,obj.x2,obj.y2)){ var a = atan2(obj.y2 - obj.y1,obj.x2 - obj.x1); this.colliding = true; this.yv = abs(this.speed); this.speed = sin(a+p.r)7; this.xv = cos(a)this.speed; this.x += this.xv; this.y+= sin(a)this.speed; } }; Ball.prototype.circColl = function(obj){ var distance = dist(this.x,this.y,obj.x,obj.y); var d = this.d/2 + obj.d/2; if(!trans.running&&!this.moveHome&&!this.shotMade&&distance <= d){ var a = atan2(this.y - obj.y,this.x-obj.x); var s = d-distance; if(!this.colliding &&!obj.colliding){ this.x += cos(a)s/2; this.y += sin(a)s/2; obj.x -= cos(a)s/2; obj.y -= sin(a)s/2; } else if(this.colliding && !obj.colliding){ obj.x -= cos(a)s; obj.y -= sin(a)s; } else if(!this.colliding && obj.colliding){ this.x += cos(a)s; this.y += sin(a)s; } else{ if(this.y > obj.y){ this.x += s; } else{ obj.x += s; } } if(obj.y > this.y){ if(!obj.colliding){ obj.yv += this.yv/3; } if(!this.colliding){ this.yv = this.yv/3; } } else { if(!this.colliding){ this.yv += obj.yv/3; } if(!obj.colliding){ obj.yv = obj.yv/3; } } if(this.colliding){ this.yv = 0; } this.xv = -this.xv /3; this.xv += obj.xv/3; obj.xv = -obj.xv/3; obj.xv += this.xv/3; } }; var Hoop = function(x,y){ this.x = x; this.y = y; }; Hoop.prototype.draw = function() { image(imgs.hoop,this.x,this.y); }; Hoop.prototype.make = function(b){ var r = rotPoint(this.x+25,this.y,300,300,-p.r); if(dist(r[0],r[1]+20,b.x,b.y)<40&&!b.moveHome&&!b.shotMade){ b.shotMade = true; p.basketsMade ++; } }; var h = new Hoop(0,0); level = -1; levels = [ { platforms:[ [50,150,400,150], [500,250,200,250], [100,300,300,350], ], hoop:{ x:300, y:400, }, balls:[150], }, { platforms:[ [50,150,400,150], [500,250,200,250], [100,300,300,350], ], hoop:{ x:300, y:400, }, balls:[150,200,250], }, { platforms:[ [50,150,400,150], [500,250,200,270], [100,320,300,350], ], hoop:{ x:300, y:440, }, balls:[100,150,200,250,300,350], }, { platforms:[ [50,70,200,120], [350,150,550,150], [200,220,400,220], [500,300,350,350], [100,350,275,350], ], hoop:{ x:275, y:440, }, balls:[100,200,300], }, { platforms:[ [50,70,200,120], [350,100,550,100], [200,220,400,220], [500,300,350,350], [100,350,275,350], ], hoop:{ x:275, y:440, }, balls:[100,150,200,300,350,400,450], }, { platforms:[ [50,70,200,120], [350,100,450,100], [200,260,350,220], [500,300,350,350], [100,350,275,350], [550,200,450,250], ], hoop:{ x:275, y:440, }, balls:[100,200,300,400,500], }, { platforms:[ [50,150,300,150], [450,200,200,300], ], hoop:{ x:500, y:440, }, balls:[100], }, { platforms:[ [50,50,250,50], [150,150,350,150], [450,200,550,100], [350,300,500,300], [50,200,200,250], [250,350,100,350], [250,350,300,300], [50,450,275,450], ], hoop:{ x:275, y:500, }, balls:[100,200,400,500], }, { platforms:[ [250,250,350,250], ], hoop:{ x:275, y:500, }, balls:[350,250,300], }, { platforms:[ [250,100,100,250], [350,100,500,250], [0,350,200,350], [600,350,400,350], ], hoop:{ x:275, y:500, }, balls:[350,250,400,200], }, { platforms:[ [50,150,250,150], [550,150,350,150], [225,250,375,250], [100,300,275,400], ], hoop:{ x:275, y:400, }, balls:[100,200,400,500], }, { platforms:[ [50,100,200,150], [500,150,400,150], [400,150,375,100], [100,250,275,200], [0,350,275,350], [600,200,450,300], [450,350,350,350], ], hoop:{ x:275, y:400, }, balls:[100,500], }, { platforms:[ [50,125,300,125], [400,100,550,120], [450,200,240,200], [200,250,50,400] ], hoop:{ x:200, y:450, }, balls:[100,200,300,500], }, { platforms:[ [50,100,200,150], [500,150,400,150], [400,150,375,100], [100,250,275,200], [0,350,275,350], [600,200,450,300], [450,350,350,350], ], hoop:{ x:275, y:400, }, balls:[100,200,400,500], }, { platforms:[ [100,25,400,150], [200,250,600,250], [250,300,100,300], [250,350,450,350], [550,450,325,450], ], hoop:{ x:275, y:500, }, balls:[100,200,300], }, ]; loadLevel = function(){ var l = levels[level]; plats = []; for(var i = 0; i < l.platforms.length; i ++){ var pl = l.platforms[i]; plats.push(new Plat(pl[0],pl[1],pl[2],pl[3])); } for(var i = 0; i < l.balls.length; i ++){ balls.push(new Ball(l.balls[i],-50,i)); } h.x = l.hoop.x; h.y = l.hoop.y; }; var Button = function(x,y,w,h,to,l){ this.x = x; this.y = y; this.w = w; this.h = h; this.to = to; this.txt = this.to.toUpperCase(); this.opacity = 0; this.l = l; }; Button.prototype.display = function(){ image(imgs.button,this.x+trans.xthis.l,this.y,this.w,this.h); noStroke(); fill(0,this.opacity); rect(this.x+trans.xthis.l,this.y,this.w,this.h); textFont(fonts[1],this.h/1.5); txt(this.txt,this.x+this.w/2+trans.xthis.l,this.y+this.h/2,this.h/1.5); }; Button.prototype.onHover = function(){ if(mouseRect(this.x,this.y,this.w,this.h)){ cursor('pointer'); this.opacity = lerp(this.opacity,30,0.25); if(click&&!trans.running){ if(this.to!=='get win code'){ trans.to = this.to; trans.running = true; } else{ println('`~["'+~~(p.time/60).toString(4)+'"]~`'); } } } else if(this.opacity > 0){ this.opacity = 0.9; } }; Button.prototype.run = function(){ this.display(); this.onHover(); }; var btns = { play:new Button(120,250,360,60,'play',-1), how:new Button(120,330,360,60,'how',1), credit:new Button(120,410,360,60,'credit',-1), menu:new Button(120,490,360,60,'menu',1), lead:new Button(120,490,360,60,'lead',1), getWinCode:new Button(120,490,360,60,'get win code',-1) }; var play = function(){ image(imgs.backdrop,0,0); pushMatrix(); translate(300,300); rotate(p.r); translate(-300,-300); p.move(); for(var i = 0; i < plats.length; i ++){ plats[i].draw(); } for(var i = 0; i < balls.length; i ++){ for(var j = 0; j < plats.length; j ++){ balls[i].lineColl(plats[j]); } for(var j = 0; j < balls.length; j ++){ if(i!==j&&!balls[j].moveHome){ balls[i].circColl(balls[j]); } } balls[i].move(); balls[i].draw(); h.make(balls[i]); } for(var i = 0; i < balls.length; i ++){ if(!balls[i].shotMade&&balls[i].y > 550){ balls[i].moveHome = true; p.time += 180; } if(balls[i].shotMade && balls[i].y > 650){ balls.splice(i,1); } else if(balls[i].moveHome){ var r = rotPoint(balls[i].sx,balls[i].sy,300,300,-p.r); if(~~balls[i].x !== ~~r[0]\|\|~~balls[i].y !== ~~r[1]){ balls[i].x = lerp(balls[i].x,r[0],0.1); balls[i].y = lerp(balls[i].y,r[1],0.1); } else if(dist(balls[i].x,balls[i].y,r[0],r[1]) < 50){ balls[i].moveHome = false; balls[i].xv = 0; } } } popMatrix(); h.draw(); fill(255); textFont(fonts[0],40); var l = levels[level].balls.length; text('Baskets Made: '+p.basketsMade+'/'+l,300,550); text('Your Time: '+~~(p.time/60),300,50); if(!trans.running){ p.time ++; } image(imgs.overlay,-50,-50,700,700); if(balls.length === 0){ if(level === levels.length - 1){ trans.running = true; trans.to = 'win'; } else{ p.basketsMade = 0; trans.running = true; trans.to = 'play'; } } }; var menu = function(){ image(imgs.backdrop,0,0); btns.play.run(); btns.credit.run(); btns.how.run(); btns.lead.run(); image(imgs.overlay,-5,-4,610,608); image(imgs.title,-10,50+trans.x,600,800); }; var logo = function(){ pushMatrix(); background(0); translate(300,300); scale(2); translate(-300,-300); if(logos[0].d < 0){ logoX = lerp(logoX,0,0.1); fill(0,200,255); textFont(fonts[1],20); text('Liam K.',300-logoX,250); image(imgs.LKimg,250,270) text('Presents',300+logoX,350); } else{ for(var i = 0; i < logos.length; i ++){ logos[i].draw(); } } if(logoX > -1){ trans.running = true; trans.to = 'menu'; } popMatrix(); }; var how = function(){ image(imgs.backdrop,0,0); btns.menu.run(); image(imgs.overlay,0,0); textFont(fonts[1]); txt('Using the left and right arrows,\ntilt the screen to maneuver the\nbasketballs into the hoop before\nthe time runs out. Who can become\nthe slam dunk champion?',300-trans.x,300,30); image(imgs.how,-10,50+trans.x,600,800); }; var credit = function(){ image(imgs.backdrop,0,0); btns.menu.run(); image(imgs.overlay,0,0); textFont(fonts[1]); txt('Credit to Pamela for the PJS template\nCredit to DFC for rotate point function\nCredit to Cannon Basketball for \ngraphical reference',300-trans.x,300,30); image(imgs.credit,-10,50+trans.x,600,800); }; var lead = function(){ image(imgs.backdrop,0,0); btns.menu.run(); image(imgs.overlay,0,0); textFont(fonts[1]); textAlign(LEFT,CENTER); comments.sort(function(a, b) { return a[0] - b[0]; }); for(var i = 0; i < 5; i ++){ if(comments[i]){ txt((i+1)+') '+comments[i][1] +' : '+comments[i][0],100-trans.x,225+i*35,30); } } textAlign(CENTER,CENTER); if(comments.length === 0){ txt('Nobody yet',300-trans.x,300,30); } image(imgs.lead,-10,50+trans.x,600,800); }; var win = function(){ image(imgs.backdrop,0,0); btns.getWinCode.run(); image(imgs.overlay,0,0); textFont(fonts[1]); txt('Your time: '+~~(p.time/60),300-trans.x,225,40); txt('Looks like you completed the game.\nwith a great time! Hit the button\nbelow and copy paste it into the\ntips and thanks. Thanks for playing.',300+trans.x,350,30); image(imgs.win,-10,50+trans.x,600,800); }; draw = function() { try{ cursor('default'); switch(scene){ case 'load': load(); break; case 'play': play(); break; case 'menu': menu(); break; case 'how': how(); break; case 'credit': credit(); break; case 'lead': lead(); break; case 'win': win(); break; case 'logo': logo(); break; } trans.run(); click = false; } catch(e){ //println(e); } }; keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; mouseClicked = function(){ click = true; }; }}; var canvas = document.getElementById("mycanvas"); var processingInstance =new Processing(canvas,programCode); </script> <!-- Actual Program --> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP2Y_dqVCQw
Votes	256
Spin-Offs	12
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Liam K.
Author Name	liamk.ka
Author ID	kaid_160653079463992085090428
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1739376038267
Updated	4 months ago, 1744845476409
Source Deleted	unknown