View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
/* * ____ _ _ ____ _ * | __ ) __ _| | | _ \ _ __ ___ _ __ _ __ (_)_ __ __ _ ___ * | _ \ / _` | | | | | | '__/ _ \| '_ \| '_ \| | '_ \ / _` / __| * | |_) | (_| | | | |_| | | | (_) | |_) | |_) | | | | | (_| \__ \ * |____/ \__,_|_|_|____/|_| \___/| .__/| .__/|_|_| |_|\__, |___/ * |_| |_| |___/ * by Josh Nimoy, originally written in 2003, * and ported to Processing.js in 2009 * more info and ports at http://balldroppings.com */ //global variables var mouseIsDown = false; var lines = []; var balls = []; var draggable = -1; var dragside = 0; var ballEmitterX=100; var ballEmitterY=100; var ticks = 0; var ballDropRate = 100; var gravity = 0.3; //------------------------------------------------------------- //class function V3(newx,newy,newz){ this.x=newx; this.y=newy; this.z=newz; this.dot = function(vec){ return ((this.x*vec.x)+(this.y*vec.y)+(this.z*vec.z)); } this.copyFrom = function(that){ this.x=that.x; this.y=that.y; this.z=that.z; } this.copyFrom = function(xx,yy,zz){ this.x=xx; this.y=yy; this.z=zz; } this.getRightNormal = function(){ return new V3(this.y , -this.x , 0); } this.getLeftNormal = function(){ return new V3(-this.y , this.x , 0); } this.normalize = function(){ var norm = this.getLength(); this.x /= norm; this.y /= norm; this.z /= norm; } this.getLength = function(){ return Math.sqrt( this.x*this.x + this.y*this.y + this.z*this.z ); } this.scaleVec = function(scalar){ this.x*=scalar; this.y*=scalar; this.z*=scalar; } this.minVecNew = function(vec){ return new V3(this.x - vec.x, this.y - vec.y , this.z - vec.z); } this.selfMul = function(a){ this.x*=a; this.y*=a; this.z*=a; } this.selfPlus = function(v){ this.x+=v.x; this.y+=v.y; this.z+=v.z; } this.lerpSelfTo = function(that,scale){ this.x+=(that.x-this.x) * scale; this.y+=(that.y-this.y) * scale; this.z+=(that.z-this.z) * scale; } }//end class //------------------------------------------------------------- //class function EditLine(){ this.x1 = 0; this.y1 = 0; this.x2 = 0; this.y2 = 0; this.diffSign = function(v1,v2){ if( (v1 >= 0 && v2 < 0 ) || (v2 >= 0 && v1 < 0 ) )return true; else return false; } this.checkAngle = function( point_x, point_y, line_x, line_y, lineVec){ var vec = new V3(line_x - point_x, line_y - point_y, 0); var vecline = new V3(0,0,0); vecline.copyFrom(lineVec.x,lineVec.y,lineVec.z); vecline = vecline.getRightNormal(); vec.normalize(); vecline.normalize(); return vec.dot(vecline); } this.checkBallCollide = function(ball){ var lineLocalVec = new V3(this.x2-this.x1, this.y2-this.y1, 0); //get the angle between the ball and one end of the wall var angleCurrent1 = this.checkAngle(ball.x , ball.y , this.x1,this.y1, lineLocalVec); var angleCurrent2 = this.checkAngle(ball.x , ball.y , this.x2,this.y2, lineLocalVec); //lets get the angle between the ball and one end of the wall var angleFuture1 = this.checkAngle(ball.x+ball.forceX, ball.y+ball.forceY ,this.x1,this.y1, lineLocalVec); var angleFuture2 = this.checkAngle(ball.x+ball.forceX, ball.y+ball.forceY ,this.x2,this.y2, lineLocalVec); if(this.diffSign(angleCurrent1,angleFuture1) && this.diffSign(angleCurrent2,angleFuture2)){ var d1x = ball.x - this.x1; var d1y = ball.y - this.y1; var d2x = ball.x - this.x2; var d2y = ball.y - this.y2; var wallLength = lineLocalVec.getLength(); if( (Math.sqrt(d1x*d1x + d1y*d1y) < wallLength) && (Math.sqrt(d2x*d2x + d2y*d2y) < wallLength)){ return true; } else return false; } else return false; } }//end class //------------------------------------------------------------- //class function Ball(){ this.x = 0; this.y = 0; this.forceX = 0; this.forceY = 0; this.rad = 3; this.destRad = 3; this.step = function(){ this.x += this.forceX; this.y += this.forceY; this.forceY+=gravity; this.rad += (this.destRad - this.rad) * 0.1; } this.bounce = function( x1, y1, x2, y2){ //Thank you to Theo Watson for helping me out here. //V var v = new V3(this.forceX,this.forceY,0); //N var n = new V3(x2-x1,y2-y1,0); n = n.getLeftNormal(); n.normalize(); //2 * V [dot] N var dotVec = v.dot(n) * 2; // ( 2 * V [dot] N ) N n.scaleVec(dotVec); //V - ( 2 * V [dot] N ) N //change direction var mvn = v.minVecNew(n); this.forceX = mvn.x; this.forceY = mvn.y; //enlarge the ball this.rad = Math.sqrt(this.forceX*this.forceX + this.forceY*this.forceY); //play a sound var fm = getFlashMovie("sound"); var vel = this.rad; if(vel>39)vel=39;//don't blow the array if(vel<0)vel=0; //fm.playSound(Math.round(vel));//call flash function } }//end class //------------------------------------------------------------- window.onload = function (){ //make a Processing.js instance var p = Processing("canvasElement"); p.setup = function(){ this.size(window.innerWidth,window.innerHeight-100); }; p.mousePressed = function (){ mouseIsDown = true; //checking for dragging old line var foundOne = false; for(var i=0;i
0){ if(balls[0].y > window.innerHeight){ balls.shift(); } } //DRAW this.background(0); //draw lines this.stroke(255); for(var i=0;i
BallDroppings
BallDroppings instructions
: Turn your sound up. Draw lines on the black screen to bounce the balls. Enjoy the music.
ball drop rate
gravity
jtnimoy
.r { font-family: Arial, Helvetica, sans-serif; font-size: 10px; } .img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } .b { overflow:hidden; margin:0; background:#FFFFFF; text-align: center; } .t { margin-left: auto; margin-right: auto; }
Pop out
Help
About
×
×