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
var // the var statement can be removed after minification, and the commas below changed to semicolons // Document doc = document, canvas = doc.getElementById('c'), ctx = canvas.getContext('2d'), width = canvas.width = innerWidth, // assign width to canvas, and store a reference height = canvas.height = innerHeight, // assign height to canvas, and store a reference // Maths M = Math, pi2 = 7, // over-approximation of 2*PI, used for drawing circles (quicker, and less bytes than using 2*Math.PI) phi = .618, PHI = 1 / phi, phiTenth = phi / 10, PHIten = PHI * 10, phiWidth = width * phi, // width on the Golden Ratio line phiHeight = height * phi, // height on the Golden Ratio line RGBMAX = 255, // for colour assignments ceil = M.ceil, random = M.random, // Settings frequency = 60, // -> PHI * 10 frames per second unitsPerFrame = PHIten, // circles per frame driftFactor = .02, // how much randomness to introduce (approximation of PHI / 100) driftFactorWidth = width * driftFactor, driftFactorHeight = height * driftFactor, canvasDiagonal = hypotenuse(width, height), // length of the diagonal across the canvas // Modifiers tone = randomInt(3), // set a colour tone for this run // Container for units units = [], // Declarations - these can all be removed after minification intensity, factor, radius, rgbStroke, firstCoords, i, x, y, r, g, b, rgbStr1, rgbStr2, driftX, driftY, lineToCoords, comparisonColor, xy, burst, lineStartOrigin; // ** // Ah, I remember trig function hypotenuse(a, b) { return M.sqrt((a * a) + (b * b)); } /* randomInt: This function returns a number from 0 to `len`. It's handy for seeding randomness within a range. randomInt() will return either 0 or 1 - e.g: var something = randomInt() ? oneThing : otherThing; randomInt(3) will return either 0, 1 or 2 - e.g: var something = [onThing, otherThing, anotherThing][randomInt(3)]; randomInt(100) will return a number between 0 and 99 - e.g: var something = randomInt(100); // choosing a number at random var something = randomInt(100) ? commonThing : rareThing; // introducing occasional or rare properties */ function randomInt(len){ return ceil((len || 2) * random()) - 1; } // Get a random drift amount - positive or negative - up to a maximum function drift(maxDrift){ return ceil(random() * (maxDrift * 2 + 1) - maxDrift / 2 - 1); } // Draw lines between the coordinates in the supplied array function lines(units){ ctx.beginPath(); lineStartOrigin = randomInt(PHIten); ctx.moveTo( lineStartOrigin ? phiWidth + driftX : randomInt(width), lineStartOrigin ? phiHeight + driftY : randomInt(height) ); for (i = units.length; xy = units[--i];){ ctx.lineTo(xy[0], xy[1]); } // NOTE: we don't bother to close the path, to save bytes. It'll be closed automatically when the next path is begun. } // The main loop. This chooses colours, alpha transparency, positions and draws circles and lines (some coloured, some black) function frame(){ // Get the value for a red, green or blue colour component function color(which){ return which != tone || burst ? // if the mouse isn't pressed, and this isn't the main colour tone, the go random randomInt(RGBMAX) : // otherwise, calculate the exponential intensity (2.72 is an approximation of Math.exp(1)) ceil((M.exp(intensity) / 2.72) * RGBMAX); } // Set units array to zero length, and save bytes by assigning `i` at the same time units.length = i = 0; // Get some drift driftX = drift(driftFactorWidth); driftY = drift(driftFactorHeight); // Main calculation loop for (; i < unitsPerFrame; i++){ x = randomInt(width / PHI) * PHI; y = randomInt(height / PHI) * PHI; // Intensity (used for weighting colours, circle radius and alpha transparency) intensity = 1 - hypotenuse(x - phiWidth, y - phiHeight) / canvasDiagonal; // proximity to the Golden Ration coords factor = random() * intensity * (intensity / PHI); radius = driftFactorWidth * (randomInt(PHIten) ? factor * PHI : (1 - factor * phi)); // add variety to radius - show large circles at the periphery only 1:PHI times // Colours r = color(0); g = color(1); b = color(2); rgbStr1 = 'rgba(' + r + ',' + g + ',' + b + ','; // Circle path ctx.beginPath(); ctx.arc(x, y, radius, 0, pi2, 0); // Styles ctx.strokeStyle = rgbStroke = (randomInt(PHI) ? 'rgba(' + r * phiTenth + ',' + g * phiTenth + ',' + b * phiTenth + ',' : rgbStr1) + factor +')'; ctx.fillStyle = rgbStr1 + (burst ? intensity * phi : factor * intensity) +')'; // Draw ctx.stroke(); ctx.fill(); units[i] = [x, y, intensity, rgbStroke]; } // Coloured lines - to shoot out from the PHI origin or somewhere else lines([units[0]]); ctx.stroke(); // Black lines - to etch away lines(units); ctx.strokeStyle = 'rgba(0,0,0,' + (0.38 * units[0][2]) + ')'; // 0.38 is approximation of phi * phi ctx.stroke(); } // Set body style - this is a bit of an extravagence, but it's good to expand the canvas to the full width and height, and we've got bytes left, so why not? doc.body.style.cssText='background:#000;overflow:hidden;margin:0'; // Burst of colour when the mouse is pressed burst = 0; // In the minified version, there will be no `var burst`, so we set a value for it here canvas.onmouseup = canvas.onmousedown = function(){ burst = !burst; }; // Start the animation // -> For the minified version, the line below should be uncommented. For development, comment it out. setInterval(frame, frequency); // -> For the minified version, the whole block below should be commented out. For development, leave it uncommented, to allow a space bar key press stop the animation and spare the CPU. /* var intervalRef; (doc.onkeydown = function(event){ if (!event || event.which == 32){ intervalRef = intervalRef ? clearInterval(intervalRef) : // clearInterval and set intervalRef to undefined setInterval(frame, frequency); // setInterval and create reference to it } })(); */ // ** fin /* MINIFICATION PROCESS: * code minimally, and code for minification (there are many techniques here) * put through advance Closure Compiler: http://closure-compiler.appspot.com/home * remove trailing semicolon * remove line breaks * remove leading `0` from floating point numbers * remove var (+ change commas to semicolons) * change setinterval function to string * change function declarations to function assignments (making sure that they are declared before they are called) * put through jsCrush: http://www.iteral.com/jscrush/ */
JS1k, 1k demo submission
Pop out
Help
About
×
×