Viewing Program

Program Data

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

Title	True Perspective
ID	2127279072
Created	12 years ago, 1380576196609
Updated	11 years ago, 1412262376474
Code	/ TOP OF THE HOT LIST!!! Thank you so much for your interest. This Program was conceptualized and writen by James McKinney. -RIGHT click and drag OR use ARROW keys to alter your perspective. -CENTER click and drag to zoom in and out.(this is not really a zoom but more a force perspective shift) -LEFT click a ball to make it bounce. In response to Peter Mcarthur's comments concerning 'true perspective',I have restructured my perspective program to be a little more true. I simplyfied a lot of the algorithms as well. Gradiated coloring comes from DingerLee's turorial: https://www.khanacademy.org/cs/lerpcolor-gradient-rectangle/1426126360 08/26/2014 - Addded smooth multidirectional keyboard function using code generously provided by G96v114 12 1h3 W36K321 1F0903 (https://www.khanacademy.org/cs/true-perspective-2/6424397736312832) change the number of balls below / var numBall = 32; //number of balls displayed var g = 0; //set to '0' to get a good look at the 3D perspective. Set to '9.81' for some cool bouncy ball effects var del = 0.3; var damp =0.8; var friction = 0.99; smooth(); var keys = []; keyReleased=function(){ keys[keyCode]=false; }; var eye = function(){ var size = 20; var position = [300,200,100]; //var eyeColor = color(0, 196, 245); this.translate = function(a,b){ position[0] = position[0]+a; position[1] = position[1]+b; }; this.follow = function(a,b){ position[0] = a; position[1] = b; }; this.zoom = function(){ position[2]+=(mouseY-pmouseY)3; if(position[2]<=10){ position[2]=10; } if(position[2]>=1000){ position[2]=1000; } }; this.getPosition = function(){ return position; }; }; var bounds = function(z,obj){ var size = 400; var eyeView = obj.getPosition(); var distance = eyeView[2]+z; var segmentSize = eyeView[2]/distancesize; var segX = eyeView[0]/distancez; var segY = eyeView[1]/distancez; var bounds = [segX,segY,segmentSize]; return bounds; }; var positioner = function(obj,x,y,z,D){ var eyePos = obj.getPosition(); var bound = bounds(z,obj); var zRat = bound[2]/400; return [bound[0]+xzRat,bound[1]+yzRat,DzRat]; }; var display = function(obj){ var size = 400; var sColor = color(144, 161, 18); var eColor = color(28, 28, 23); this.draw = function(){ var eyeView = obj.getPosition(); var num = 5; var zDis = size/num; stroke(43, 43, 43); var segments = []; for (var i=0;i<num;i++){ var dis = size-zDisi; segments[i] = bounds(dis,obj); } fill(lerpColor(sColor,eColor,map(eyeView[2],1000,10,0,1))); rect(segments[0][0],segments[0][1],segments[0][2],segments[0][2]); noFill(); for(var i=1;i<segments.length;i++){ rect(segments[i][0],segments[i][1],segments[i][2],segments[i][2]); } }; this.getSize = function(){ return size; }; }; var ball = function(obj){ var x = random(0,400); var y = random(0,400); var z = random(0,400); var D = 50; var velX = 0; var velY = 0; var velZ = 0; var size = 400; var pos = []; var hovering = false; var red0 = -144;//-141 var green0 = -143;//-143 var blue0 = -55;//-55 var sColor = color(171, 24, 19); var eColor = color(0, 0, 0); var sShade = color(92, 13, 12); var eShade = color(0, 0, 0); this.getZ = function(){ return z; }; this.getColor = function(){ if(hovering){ this.ballColor = lerpColor(sColor,eColor,map(z,-10,420,0,0.1)); this.ballShade = lerpColor(sShade,eShade,map(z,-10,420,0,0.1)); }else{ this.ballColor = lerpColor(sColor,eColor,map(z,-10,420,0.2,1)); this.ballShade = lerpColor(sShade,eShade,map(z,-10,420,0.2,1)); } }; this.draw = function(obj){ noStroke(); var eyeView = obj.getPosition(); pos = positioner(obj,x,y,z,D); //ball fill(this.ballShade); ellipse(pos[0],pos[1],pos[2],pos[2]); fill(this.ballColor); ellipse(pos[0]-0.04pos[2],pos[1]-0.06pos[2],pos[2]/1.2,pos[2]/1.2); stroke(0, 0, 0); }; this.hover = function(){ var r = sqrt(pow((pos[0]-mouseX),2)+pow((pos[1]-mouseY),2)); if(r<=pos[2]/2){ hovering = true; return true; }else{ hovering=false; return false; } }; this.bounce = function(a,b){ velX= random(-100,100); velY= random(-100,100); velZ= random(-100,100); }; this.fly = function(obj){ var eyePos = obj.getPosition(); var ratio = 400/(950-eyePos[2]); if(x<D/2\|\|x>size-D/2){ if(x>size-D/2){ x=size-D/2; }else{ x=D/2; } velX=-damp; } if(y<D/2\|\|y>size-D/2){ if(y>size-D/2){ y=size-D/2; }else { y=D/2; } velZ =friction; velX =friction; velY =-damp; } if(z>400-D/2ratio\|\|z<D/2ratio){ if(z>400-D/2ratio){ z=400-D/2ratio; }else{ z=D/2ratio; } velZ=-damp; } velY += gdel; z+=velZratio; y+=velY; x+=velX; }; }; var look = new eye(); var room = new display(look); var draggable = false; var follow = false; var balls = []; for (var i=0;i<numBall;i++){ balls[i] = new ball(look); } var mouseMoved = function(){ for (var i=0;i<numBall;i++){ balls[i].hover(); } if(follow){ look.follow(mouseX,mouseY); } }; var mousePressed = function(){ if(mouseButton===RIGHT){ draggable = true; } }; var mouseReleased = function(){ draggable=false; for (var i=0;i<numBall;i++){ if(balls[i].hover()&& mouseButton===LEFT){ balls[i].bounce(); } } }; var mouseDragged = function(){ if(mouseButton===CENTER){ look.zoom(); } if(draggable){ look.translate((mouseX-pmouseX),(mouseY-pmouseY)); } }; keyPressed=function(){ keys[keyCode]=true; if(keyCode===16&&!follow){ follow=true; }else{ follow=false; } }; var hallway = { x: 200, y: 200, sWall: color(245, 239, 120), eWall: color(0, 0, 0), sFloor: color(92, 77, 1), eFloor: color(0, 0, 0), sCeil: color(254, 255, 212), eCeil: color(0, 0, 0), lineWidth: 2, draw: function(obj){ var eyeView = obj.getPosition(); this.x = eyeView[0]; this.y = eyeView[1]; strokeWeight(this.lineWidth); strokeCap(ROUND); for(var i=0;i<this.x;i+=this.lineWidth){ stroke(lerpColor(this.sWall,this.eWall,(map(i,0,this.x,0.1,1.0)))); var tY = map(i,0,this.x,0,this.y); var tH = map(i,0,this.x,400,0); line(i,tY,i,tY+tH); } for(var i=400;i>this.x;i-=this.lineWidth){ stroke(lerpColor(this.sWall,this.eWall,(map(i,400,this.x,0.1,1)))); var tY = map(i,400,this.x,400,this.y); var tH = map(i,400,this.x,400,0); line(i,tY,i,tY-tH); } for(var i=0;i<this.y;i+=this.lineWidth){ stroke(lerpColor(this.sCeil,this.eCeil,(map(i,0,this.y,0.1,1)))); var tY = map(i,0,this.y,0,this.x); var tH = map(i,0,this.y,400,0); line(tY,i,tY+tH,i); } for(var i=400;i>this.y;i-=this.lineWidth){ stroke(lerpColor(this.sFloor,this.eFloor,(map(i,400,this.y,0.1,1)))); var tY = map(i,400,this.y,400,this.x); var tH = map(i,400,this.y,400,0); line(tY,i,tY-tH,i); } } }; var draw = function() { if(keys[UP]){ look.translate(0,-2.5); } if(keys[DOWN]){ look.translate(0,2.5); } if(keys[LEFT]){ look.translate(-2.5,0); } if(keys[RIGHT]){ look.translate(2.5,0); } background(255, 255, 255); hallway.draw(look); room.draw(); balls.sort(function(a,b){ return b.getZ()-a.getZ(); }); for (var i=0;i<numBall;i++){ balls[i].getColor(); balls[i].fly(look); balls[i].draw(look); } };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBjg5672Bww
Votes	197
Spin-Offs	40
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"2070477295","title":"animation challenge (finished)","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	James McKinney
Author Name	CaractacusP
Author ID	kaid_318740134438396364517666
Author Profile Access	PUBLIC

Archive Data

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