Viewing Program

Program Data

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

Title	NOW EXPLAINED: Sphere 3D
ID	5992510923997184
Created	11 years ago, 1399836056952
Updated	11 years ago, 1400028945610
Code	/* * Author: dingalapadum * Description: 3D sphere!!! Much smoothness, so round, totally circles, many bounces, very * symmetry. Wow! * * ================================================ * * = NOTE: (focus the canvas &) PRESS H FOR HELP! = * * ================================================ * * HOW THIS WORKS: * =============== * Start by stopping the bounce with spacebar. * Then press 'f' when focused so all ellipses * are aligned on the x-axis. * Finally press 'r' to stop the auto-rotration. * We will work out this fixed scenario first. * The ball is made with 2D-ellipses = 3D-disks. * When perfectly aligned, the disks degenerate to lines. * 3D-disks become 2D-lines. Can you do it? (workaround -> increase strokeWeight) * Think of the disks as being pierced by the x-axis. * The diameter of a disk depends only on its distance from 0. * Observe that rotating the sphere around z never * changes the height of each ellipse. * Each ellipse goes from a straight line to a full circle. * (change of width: while in t-mode * move mouse from left to right until you see the straights lines). * * We change only the width and position of each * ellipse on the x-axis according to sin & * cos respectively (angle is turn around the z-axis). * * ...and this is actually the whole thing, there is not more to it... * Wait.. What about all the other rotations? * * Well.. * Everything else is for free!!!!!! It's incredibru! * But it's all so symmetrical! It's a sphere! * Move the cursor so that you only see the lines * and slowly make the smallest line a circle. * Then think about this: * - rotation around z => done as described above * - rotation around x => doesn't exist. This is an invariant. * - rotation around y => we simply rotate the imageplane of the sphere! * this is actually also a bit of a trick. * It's kind of, with this we can just * generate all the necessary * 3D-views but they are not attached * 'correctly' to the gamma angle. * But since we go through all of the * views we have the 3D effect * anyway and we don't care! TATAA!!! * * ...almost everthing at least... * finish by getting the coloring right, draw some background, * bind some parameters to some keys and last but not least * LET IT BOUNCE!!! * * SPECIAL THANKS to my friends who helped me out with this one, in order of apperance: * pythagoras -> radius of disk depending on x coordinate * cos(alpha) -> disk position on x coordinate when rotating by alpha around z. * sin(alpha) -> disk/ellipse width when rotated by alpha around z. * * so how does the bouncing work? * come on... isn't this obvious by now? I don't know maybe * you one of my friend sin or cos can help you out. * * anyway... go ahead and have a look at the code.. * now that you know what's going on, it should be easy to read * * bests, * dingalapadum * * p.s.: if you actually read all this, please let me know * in the comments. Did you understand it and what * you think of it. / //SPHERE //====== //...SKIP THIS... //just variable declaration stuff //init sphere & vars var radBall=120; //size of the ball var nDisks=35; //number of ellipses to draw the ball. Basically "resolution". var xPos; var pos=[]; var diskDiam=[]; var theta=0; var gamma=0; var xPosInSpace=0.5; var solid=false; var rotation=true; var mouseAttached=true; var helpMenu=false; var bounce=true; var tut=false; var locX=200; var locY=200; var zoom=0.8; var filled=true; textSize(13); var r=92,g=76,b=0,r2=58,g2=-1,b2=1; //the color scheme for the sphere, not real RGB!!!Colors are computed acording to some randomish formulas var r_back=81,g_back=109,b_back=134,t_back=1; //the color scheme for the background var tb=0; // timer for bounce var t=0; //timer for rotation //========================= // START READING FROM HERE! //========================= //we first find the initial position of each disk. Equidistant on x-axis. for(var cDisk=0; cDisk<=nDisks; cDisk++){ xPos=cDisk2radBall/nDisks-radBall; pos[cDisk] = (xPos)%(2radBall); } //we sort the disks, so we can draw them in the correct order pos.sort(function(a, b) { return a-b; }); //we compute the diameter=2radius of each disk depending //on its distance from the origin. //Props to my friend Pythagoras for this one!!! for(var cDisk=0; cDisk<=nDisks;cDisk++){ diskDiam[cDisk]=2sqrt(radBallradBall-pos[cDisk]pos[cDisk]); } //end init sphere //the sphere drawing function var drawSphere = function(t){ var mx=0; if(mouseAttached){ theta=(mouseX+t)%180; gamma=mouseY+t; mx=mouseX; }else{ theta=t%180; gamma=t; } if(tut){ gamma=0; } //our plane where we are gonna draw the sphere. pushMatrix(); translate(-(xPosInSpace-0.5)200,0); scale(zoom); if(bounce){ translate(0,-abs(sin(4tb))150+100); } //rotation magic!!! rotate(gamma); //let's draw our ellipses! for(var cDisk=0; cDisk<nDisks; cDisk++){ var computedR, computedG, computedB; //switch sides for the coloring after 180 degrees. //make a color gradient into the sphere if( floor(((mx+t)/180)%2)===1){ computedR=cDisk/nDisks(255-r)+r2; computedG=cDisk/nDisks(255-g)+g2; computedB=cDisk/nDisks(255-b)+b2; }else{ computedR=(nDisks-cDisk)/nDisks(255-r)+r2; computedG=(nDisks-cDisk)/nDisks(255-g)+g2; computedB=(nDisks-cDisk)/nDisks(255-b)+b2; } if(solid){ strokeWeight(8); stroke(computedR, computedG, computedB); }else{ strokeWeight(2); stroke(r_back, g_back, b_back); } if(filled){ fill(computedR, computedG, computedB); }else{ //noStroke(); fill(computedR, computedG, computedB, 15.0); } //POSITION: of a point on the x-axis changes by cos(theta) for a rotation theta around z. //think of it as follows: if a point moves on a circular orbit around the z axis //and you look at it flat from the side, you will observe an oscilating motion... //the position of the point on x1 moves to cos(theta)x1. //WIDTH of the ellipse changes by sin(theta) for a rotation theta around z. //for theta=0 we get lines. for theta=90 we get disks. //Thumbs up for sin & cos!!! :) ellipse(pos[cDisk]cos(theta),0,diskDiam[cDisk]sin(theta),diskDiam[cDisk]); } rotate(-gamma); if(bounce){ translate(0,(abs(sin(4tb))150)-100); } scale(1/zoom); translate((xPosInSpace-0.5)200,0); popMatrix(); }; //END SPHERE //BACKGROUND //========== //This is just our static background... the straight lines. var drawBackground=function(res){ background(0, 0, 0); strokeWeight(1); stroke(r_back, g_back, b_back); var nLinesX=30; for(var x=0;x<=nLinesX;x++){ line(x400/nLinesX-200,0,x400/nLinesX-200,-400); } var nLinesY=27; for(var y=0; y<=nLinesY ; y++){ line(-200,y400/nLinesY-400,200,y400/nLinesY-400); } for(var cLine=0; cLine<=res; cLine++){ line(-200,200-200cos((res-cLine)90/res),200,200-200cos((res-cLine)90/res)); } for(var cLine=2; cLine<=5; cLine++){ line(0,0,200,200-200cos((res-floor(cLine/5res))90/res)); line(0,0,-200,200-200cos((res-floor(cLine/5res))90/res)); } for(var cLine=0; cLine<5; cLine++){ line(0,0,cLine100-200,200); } }; //END BACKGROUND //UI //== //move sphere when dragged var mouseDragged = function() { if(zoom>1.2){ zoom=1.2; }else if(zoom<0.01){ zoom=0.01; }else{ zoom=zoom+(mouseY-pmouseY)/400; } if(xPosInSpace>1){ xPosInSpace=1; }else if(xPosInSpace<0){ xPosInSpace=0; }else{ xPosInSpace=xPosInSpace+(pmouseX-mouseX)/400; } }; var keyPressed = function() { var kp = key.toString(); switch(kp){ case "r": rotation=!rotation; break; case "s": solid=!solid; break; case "d": mouseAttached=!mouseAttached; break; case "h": helpMenu=!helpMenu; break; case "b": r_back=random(0,255); g_back=random(0,255); b_back=random(0,255); break; case "c": r=random(0,255); g=random(0,255); b=random(0,255); r2=random(0,(r-1)); g2=random(0,(g-1)); b2=random(0,(b-1)); break; case " ": bounce=!bounce; break; case "f": tut=!tut; break; case "t": filled=!filled; break; } }; var drawUI = function(){ fill(0, 0, 0); if(helpMenu){ noStroke(); rect(-200,-200,400,120); fill(255, 255, 255); text("press h to hide help:", -195, -190); text("r to start/stop auto-rotation",-195, -175); text("s to switch to solid and back",-195,-160); text("d detach/attach mouse to rotation", -195, -145); text("b to change background/line color", -195, -130); text("c to change sphere color", -195, -115); text("f to fix drawing-plane", -195, -100); text("t transparent", -195, -85); stroke(255, 255, 255); line(35,-80,35,-200); text("Drag n' drop with mouse \n\t\t\tto move sphere!!!!!", 53, -185); text("Spacebar for BOUNCE!", 53, -144); }else{ rect(-201,-201,100,17); fill(255, 102, 102); text("press h for help", -195, -190); } }; //end UI //And here comes the well known draw function! var draw= function() { drawBackground(12); drawUI(); drawSphere(t); //center the picture, since we drew everything as if (0,0) was in the middle translate(locX,locY); if(rotation){ t=t+1; } tb=tb+1; };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMDngsXSCgw
Votes	278
Spin-Offs	36
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	dingalapadum
Author Name	dingalapadum
Author ID	kaid_955184651588223041796438
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739452171123
Updated	6 months ago, 1739452171123
Source Deleted	unknown