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
window.onload = function() { var canvas = document.getElementById("screen"); if (!GL.init(canvas)) { $("#nocanvas").show(); canvas.style.display = "none"; return; } GL.onload = function() { $("#log").fadeOut(2000); } GL.loadScene("manyworld", { renderLights : false, backgroundColor : [0.1,0.1,0.1], sphereRadius : 1.5 }); }; GL.controllers.galaxyControl = function(scene, gl, programs) { var mouseX = 0; var mouseY = 0; var zoomActive = false; var zoomStartTime = 0; var zoomInitTime = 1500; var zoomAcc = 0; return { keydown : function(keyCode) { switch (keyCode) { case 37: case 100: scene.setRotation(scene.getRotation() + 1 * Math.PI / 180); worldRotation += 1 * Math.PI / 180; break; case 39: case 102: scene.setRotation(scene.getRotation() - 1 * Math.PI / 180); worldRotation -= 1 * Math.PI / 180; break; case 38: case 104: if (!zoomActive) { zoomStartTime = new Date().getTime(); zoomActive = true; zoomDirection = -1; } break; case 40: case 98: if (!zoomActive) { zoomStartTime = new Date().getTime(); zoomActive = true; zoomDirection = 1; } break; case 107: case 187: var n = Math.min(100000, scene.getNumPlanets() * 2); scene.setNumPlanets(n); break; case 109: case 189: var n = Math.max(1, (scene.getNumPlanets() * 0.5)>>0); scene.setNumPlanets(n); break; } }, keyup : function(keyCode) { zoomActive = false; }, mousemove : function(x, y) { mouseX = x; mouseY = y; }, mousedown : function(button) { zoomStartTime = new Date().getTime(); zoomActive = true; zoomDirection = (button == 0) ? -1 : 1; }, mouseup : function(button) { zoomActive = false; }, mousewheel : function(delta) { scene.setRotation(scene.getRotation() + 3 * delta * Math.PI / 180); }, draw : function() { var viewPos = scene.camera.position; var target = scene.camera.target; var up = scene.camera.up; var out = target.subtract(viewPos).toUnitVector(); var side = out.cross(up); if (zoomActive) { var zoomTime = zoomInitTime - (new Date().getTime() - zoomStartTime); zoomAcc = Math.max(zoomAcc, Math.min(1, (zoomInitTime - zoomTime) / zoomInitTime)); } if (zoomAcc > 0) { var mx = mouseX / scene.width - 0.5; var my = mouseY / scene.height - 0.5; viewPos = viewPos.add($V([ -10 * mx * zoomAcc, -10 * my * zoomAcc, -5 * zoomAcc * zoomDirection ])); zoomAcc *= 0.9; if (zoomAcc < 0.01) zoomAcc = 0; } viewPos.elements[1] = Math.max(100, viewPos.elements[1]); scene.camera.position = viewPos; scene.camera.target = viewPos.add(out); } } }; GL.scenes.manyworld = function(gl, programs, settings) { var planets; var screen; var cube; var floor; var defaultTexture; var worldRotation = 2 - Math.PI * 0.5; var startTimeOffset = -4000; var numPlanets = 10000; var lineUp = $L($V([0,0,0]),$V([0,1,0])); var startTime = 0; var lastDrawTime = 0; var lastCameraPosition; var cameraTime = 0; function setUniform(functionToCall, originalArgs) { var program = originalArgs[0]; var name = originalArgs[1]; if (typeof program[name] == "undefined") { program[name] = gl.getUniformLocation(program, name); } var location = program[name]; if (location != null) { var args = [ location ]; for (var i = 2; i < originalArgs.length; i++) { args.push(originalArgs[i]); } gl[functionToCall].apply(gl, args); } else { console.log("No uniform location for " + name); } } function setUniform1i() { setUniform("uniform1i", arguments); } function setUniform1iv() { setUniform("uniform1iv", arguments); } function setUniform1f() { setUniform("uniform1f", arguments); } function setUniform1fv() { setUniform("uniform1fv", arguments); } function setUniform2i() { setUniform("uniform2i", arguments); } function setUniform2iv() { setUniform("uniform2iv", arguments); } function setUniform2f() { setUniform("uniform2f", arguments); } function setUniform2fv() { setUniform("uniform2fv", arguments); } function setUniform3i() { setUniform("uniform3i", arguments); } function setUniform3iv() { setUniform("uniform3iv", arguments); } function setUniform3f() { setUniform("uniform3f", arguments); } function setUniform3fv() { setUniform("uniform3fv", arguments); } function setUniform4i() { setUniform("uniform4i", arguments); } function setUniform4iv() { setUniform("uniform4iv", arguments); } function setUniform4f() { setUniform("uniform4f", arguments); } function setUniform4fv() { setUniform("uniform4fv", arguments); } function setUniformMatrix4fv() { setUniform("uniformMatrix4fv", arguments); } function setPlanetData(data) { var program = programs["planets"]; gl.useProgram(program); var random = []; var sphere = []; var khronos = []; var khronosColor = []; var webgl = []; var webglColor = []; var radii = []; for (var i=0;i
>0) - 2) / settings.height ); } var kernelSum = 0; for (var k=0;k
1) continue; var sx = x / dist * 100 + Math.random() * 5.0 - 2.5; var sy = y / dist * 100 + Math.random() * 5.0 - 2.5; var sz = z / dist * 100 + Math.random() * 5.0 - 2.5; x *= 100; y *= 100; z *= 100; var p = Math.random() * Math.PI * 2; var t = Math.random() * Math.PI; var r = 100; // find a random pixel in the khronos logo var ka = 0, p; var kx, ky, kr, kg, kb; while (!ka) { kx = (Math.random() * kw) >> 0; ky = (Math.random() * kh) >> 0; p = kw*ky*4 + kx*4; ka = khronosData[p + 3]; if (ka) { if (khronosData[p] > 160) { kr = 255; kg = 100; kb = 100; } else { kr = 50; kg = 70; kb = 100; } } } // and a pixel in the webgl logo var wa = 0; var wx, wy, wr, wg, wb; while (!wa) { wx = (Math.random() * ww) >> 0; wy = (Math.random() * wh) >> 0; p = ww*wy*4 + wx*4; wa = webglData[p + 3]; if (wa) { if (webglData[p] > 100) { wr = 255; wg = 100; wb = 100; } else { wr = 50; wg = 70; wb = 100; } } } data.push({ random : [x,y,z], sphere : [sx,sy,sz], khronos : [-(kx - kw * 0.5) * 0.7, -(ky - kh * 0.5) * 0.7 - 70, Math.random() * 10.0], khronosColor : [kr/255,kg/255,kb/255], webgl : [-(wx - ww * 0.5) * 0.7, -(wy - wh * 0.5) * 0.7 - 50, Math.random() * 10.0], webglColor : [wr/255,wg/255,wb/255], radius : 1.0 + Math.random() * 0.5 }); } setPlanetData(data); // floor floor = GL.shapes.makeQuad(gl, 600); var program = programs["floor"]; gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, floor.vertexObject); gl.enableVertexAttribArray(gl.getAttribLocation(program, "aVertex")); gl.vertexAttribPointer(gl.getAttribLocation(program, "aVertex"), 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, floor.texCoordObject); gl.enableVertexAttribArray(gl.getAttribLocation(program, "aTexCoord")); gl.vertexAttribPointer(gl.getAttribLocation(program, "aTexCoord"), 2, gl.FLOAT, false, 0, 0); floor.texture = GL.createTexture("metal"); gl.activeTexture(gl.TEXTURE0); defaultTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, defaultTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); setUniform1i(program, "uRenderTexture", 0); gl.bindTexture(gl.TEXTURE_2D, null); /* gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, null); gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, settings.width, settings.height, 0); gl.generateMipmap(gl.TEXTURE_2D); */ gl.activeTexture(gl.TEXTURE1); setUniform1i(program, "uTexture", 1); gl.bindTexture(gl.TEXTURE_2D, floor.texture); setBlurKernel(); // end of setup startTime = new Date().getTime() - startTimeOffset; }, draw : function(gl, programs) { // reset the viewport gl.viewport(0,0,settings.width,settings.height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); var time = (new Date().getTime() - startTime); var camDist = me.camera.position.distanceFrom($V([0,0,0])); var deltaFactor = Math.min(1, Math.max(0, (camDist - 200) / 300)); var deltaTime = (time - lastDrawTime); cameraTime += (time - lastDrawTime) * (0.2 + deltaFactor); me.camera.position = $V([ -300 * Math.sin(cameraTime / 3000) + 300 * Math.cos(cameraTime / 4000), 150, -700 * Math.sin(cameraTime / 3000) ]); me.camera.target = $V([10,150,10]); //worldRotation -= deltaTime / 2000; // render floor var floorHeight = 50; var program = programs["planets"]; gl.useProgram(program); var reflMatrix = $M([ [1, 0, 0, 0], [0, -1, 0, -2 * floorHeight], [0, 0, 1, 0], [0, 0, 0, 1] ]); var model = Matrix.Rotation(worldRotation, $V([0,1,0])).ensure4x4(); var view = Matrix.LookAt(this.camera.position, this.camera.target, this.camera.up); var proj = GL.setProjection(this.camera, program); var reflView = model.x(reflMatrix) drawPlanets(deltaTime, deltaFactor, reflView, [0,0,settings.width,settings.height]); var program = programs["floor"]; gl.useProgram(program); setUniform1f(program, "uBlurAmount", 1.0); var proj = GL.setProjection(this.camera, program); var floorMatrix = Matrix.I(4) .x(Matrix.Rotation(worldRotation, $V([0,1,0])).ensure4x4()) .x(Matrix.Rotation(Math.PI * 0.5, $V([1,0,0])).ensure4x4()) .x(Matrix.Translation($V([0,0,-floorHeight]))) ; GL.setModelView(floorMatrix, program, true); var projTex = $M([ [0.5, 0, 0, 0.5], [0, 0.5, 0, 0.5], [0, 0, 0.5, 0.5], [0, 0, 0, 1 ] ]).x(proj); setUniformMatrix4fv(program, "uProjTexMatrix", false, new WebGLFloatArray(projTex.flatten())); gl.frontFace(gl.CW); gl.bindBuffer(gl.ARRAY_BUFFER, floor.vertexObject); gl.vertexAttribPointer(gl.getAttribLocation(program, "aVertex"), 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, floor.texCoordObject); gl.vertexAttribPointer(gl.getAttribLocation(program, "aTexCoord"), 2, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, floor.indexObject); gl.activeTexture(gl.TEXTURE0); //gl.bindTexture(gl.TEXTURE_2D, null); gl.bindTexture(gl.TEXTURE_2D, defaultTexture); gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, settings.width, settings.height, 0); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, floor.texture); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) gl.drawElements(gl.TRIANGLE_STRIP, floor.numIndices, gl.UNSIGNED_SHORT, 0); var rotMatrix = Matrix.Rotation(worldRotation, $V([0,1,0])).ensure4x4(); var mv = Matrix.Translation($V([0,200,0])).x(rotMatrix); drawPlanets(deltaTime, deltaFactor, mv, [-50,-50,settings.width+100,settings.height+100]); lastDrawTime = time; }, // scene specific methods getRotation : function() { return worldRotation; }, setRotation : function(t) { worldRotation = t; } } return me; }
Worlds of WebGL
Worlds of
WebGL
Sorry, you need a canvas- and WebGL-enabled browser.
/* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* end css reset */ /* ---------------------------- */ body { font-family : arial; font-size : 13px; background-color : rgb(25,25,25); color : white; padding : 20px; } h2 { font-size : 24px; margin-bottom : 10px; } h3 { font-size : 18px; margin-bottom : 10px; } #screen { /* border : 1px solid grey;*/ } #log { font-family : "Lucida console", "Courier new"; font-size : 12px; color : grey; display : block; width : 500px; position : absolute; top : 0; /* right : 0; text-align : right; */ margin : 20px; } #log a { color : rgb(192,192,192); } #nocanvas { color : rgb(200,152,152); } .main { width : 800px; position : relative; margin : 0 auto; } #main { border : 1px dashed rgb(50,50,50); } .title { color : rgb(50,50,50); font-family : arial black; font-size : 32px; text-transform : uppercase; letter-spacing : 2pt; } #title { margin : 10px auto 5px; padding-left : 5px; } #title-vertical { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); position : absolute; width : 250px; left : -147px; top : 140px; } #footer { text-align : center; font-size : 11px; color : rgb(50,50,50); margin-top : 10px; } #footer a { color : rgb(50,50,50); text-decoration : none; margin-right : 5px; margin-left : 5px; } #footer a:hover { background-color : rgb(50,50,50); color : rgb(25,25,25); }
Pop out
Help
About
×
×