Viewing Program

Program Data

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

Title	bubbles
ID	5569184297648128
Created	11 years ago, 1389909385947
Updated	11 years ago, 1389996845576
Code	/** Based on Peter Collingridge's "3D box perspective. https://www.khanacademy.org/cs/3d-box-perspective/1554555033 bubbles (this program) https://www.khanacademy.org/cs/bubbles/5569184297648128 * Right mouse click = invert warp * Left mouse click = bubbles moving closer/apart */ translate(200,200); mouseX=0; mouseY=0; var h=0, b=0, u=0, n=0, v=0, elli=true, sQrt=0, obj, nodes, warping, persp=400, p=-1, nn=1, s=10, e=33, t=s(e+1); mouseOut = function(){frameRate(1); elli=true;}; mouseOver = function(){frameRate(0); elli=false;}; mouseClicked = function(){ if(mouseX>0&&mouseX<400&&mouseY>30&&mouseY<400&&mouseButton===37){p=(-1);} if(mouseX>0&&mouseX<400&&mouseY>30&&mouseY<400&&mouseButton===39){nn=(-1);} if(mouseX>0 && mouseX<50 && mouseY>0 && mouseY<30){sQrt^=1;} if(mouseX>50 && mouseX<100 && mouseY>0 && mouseY<30){s+=2; t=s(e+1);} //gridSize if(mouseX>100 && mouseX<150 && mouseY>0 && mouseY<30){ if(s >=3){s-=2; t=s(e+1);} } if(mouseX>150 && mouseX<200 && mouseY>0 && mouseY<30){e+=2; t=s(e+1);} // nodes if(mouseX>200 && mouseX<250 && mouseY>0 && mouseY<30){ if(e >=3){e-=2; t=s(e+1);} } if(mouseX>250 && mouseX<300 && mouseY>0 && mouseY<30){h+=2; b+=200; v++;} // warp if(mouseX>300 && mouseX<350 && mouseY>0 && mouseY<30){h-=2; b-=200; v--;} if(mouseX>350 && mouseX<400 && mouseY>0 && mouseY<30){ // reset h=0; b=0; sQrt=0; p=-1; nn=1; s=10; e=33; t=s(e+1); u=0; n=0; v=0; mouseX=0; mouseY=0; } }; var nodesA = function(){//-------------------------------------Pushing nodes for (var z = s; z < t; z+=s){ for (var x = s; x < t; x+=s){ nodes.push([-t/2+x, -10, -t/2+z]); } } }; var rotateX3D = function(theta){ //----------------------------Peter's rotations var x, y, z, ct = cos(theta), st = sin(theta); for (var i = 0; i < nodes.length; i++) { x = nodes[i][0]; y = nodes[i][1]; z = nodes[i][2]; nodes[i] = [x, cty - stz, sty + ctz]; } }; var rotateY3D = function(theta){ var x, y, z, ct = cos(theta), st = sin(theta); for (var i = 0; i < nodes.length; i++) { x = nodes[i][0]; y = nodes[i][1]; z = nodes[i][2]; nodes[i] = [ctx + stz, y, -stx + ctz]; } }; var warp = function(g){ //-------------------------------------Warping & mouse rotation var oX = obj[0][0], oY = obj[0][1], oZ = obj[0][2]; var oX2 = obj[1][0], oY2 = obj[1][1], oZ2 = obj[1][2]; for (var i = 0; i < nodes.length; i++) { var mX,mY,mZ,mX2,mY2,mZ2, q=2, x=nodes[i][0], y=nodes[i][1], z=nodes[i][2]; if(sQrt===1){ mX = ((oX-x)/(gsqrt(pow(oX-x,q)+pow(oY-y,q)+pow(oZ-z,q)))); mY = ((oY-y)/(gsqrt(pow(oX-x,q)+pow(oY-y,q)+pow(oZ-z,q)))); mZ = ((oZ-z)/(gsqrt(pow(oX-x,q)+pow(oY-y,q)+pow(oZ-z,q)))); mX2 = ((oX2-x)/(gsqrt(pow(oX2-x,q)+pow(oY2-y,q)+pow(oZ2-z,q)))); mY2 = ((oY2-y)/(gsqrt(pow(oX2-x,q)+pow(oY2-y,q)+pow(oZ2-z,q)))); mZ2 = ((oZ2-z)/(gsqrt(pow(oX2-x,q)+pow(oY2-y,q)+pow(oZ2-z,q)))); } else { mX = ((oX-x)/(g(pow(oX-x,q)+pow(oY-y,q)+pow(oZ-z,q)))); mY = ((oY-y)/(g(pow(oX-x,q)+pow(oY-y,q)+pow(oZ-z,q)))); mZ = ((oZ-z)/(g(pow(oX-x,q)+pow(oY-y,q)+pow(oZ-z,q)))); mX2 = ((oX2-x)/(g(pow(oX2-x,q)+pow(oY2-y,q)+pow(oZ2-z,q)))); mY2 = ((oY2-y)/(g(pow(oX2-x,q)+pow(oY2-y,q)+pow(oZ2-z,q)))); mZ2 = ((oZ2-z)/(g(pow(oX2-x,q)+pow(oY2-y,q)+pow(oZ2-z,q)))); } nodes[i] = [x-pmX-pmX2, y-pmY-pmY2, z-pmZ-pmZ2]; } if(mouseY > 30 && mouseY < 400){ rotateX3D(40-mouseY2); rotateY3D(-mouseX2); } else { rotateX3D(40); } }; var grid2D = function(){ //------------------------------------Grid var p1, p2, node1, node2; fill(255, 255, 255, 40); strokeWeight(2); stroke(255, 255, 255, 80); for(var z =e; z <= ee-e2; z+=e){ beginShape(); for (var i = z; i < e+z; i++) { //-----------------x p1 = persp / (nodes[i][2] + persp); p2 = persp / (nodes[i][2] + persp); curveVertex(nodes[i][0] p1, nodes[i][1] * p2); } endShape(); } for(var x = 1; x <= e-2; x++){ beginShape(); for (var i = x; i < ee; i+=e) { //----------------z p1 = persp / (nodes[i][2] + persp); p2 = persp / (nodes[i][2] + persp); curveVertex(nodes[i][0] p1, nodes[i][1] * p2); } endShape(); } }; var buttons = function(){ for (var i = -150; i < 200; i+=100){ stroke(255, 255, 255, 100); strokeWeight(1); line(0+i, -200, 0+i, -170); } fill(255, 255, 255, 130); if(sQrt === 1){text("D", -178, -180); warping=1/(40+h);} else {text("D²", -178, -180); warping=1/(1500+b);} text("+ gridSize -\n " + s, -137, -185); text("+ nodes -\n " + (e-2)(e-2), -37, -185); text("+ warp -\n " + v, 67, -185); text("reset", 161, -180); if(elli){noFill(); ellipse(70, 200, 20, 20);} }; var m=4; draw = function() { //-----------------------------------------Draw background(35, 9, 82); obj = [[-cos(um)(100-n),-30,sin(um)(100-n)], [cos(um)(100-n),-30,-sin(um)(100-n)]]; u++; n+=1/2nn; buttons(); nodes=[]; nodesA(); warp(warping); grid2D(); };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgICezKTyCQw
Votes	186
Spin-Offs	14
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"1554555033","title":"3D box perspective","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Alois
Author Name	alois
Author ID	kaid_695779626784662207478766
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739393667742
Updated	10 months ago, 1739393673026
Source Deleted	unknown