Old School 3D convex hull rendering using cross product in screenspace for backface culling removal and subsequent shading.
version 0.1 basic hedron rotating
version 0.2 true reason ... 3d shield effect
version 0.3 touch of shiny blue neon to the icosahedron
version 0.4 modified lighting changed perspective. increased shield alpha
A Pen by Andi Smithers on CodePen.
| <body> | |
| <canvas id='icosahedron 3d'></canvas> | |
| </body> |
| // constant options | |
| const focalDepth = 80; | |
| const focalPoint = 256; | |
| // variables | |
| var centreX; | |
| var centreY; | |
| var mouseX; | |
| var mouseY; | |
| var spawnX; | |
| var spawnY; | |
| var frameCount=0; | |
| var shieldUp; | |
| var splutterCount=0; | |
| var splutterNoise=60; | |
| // test multiple groups | |
| var icosahedronVerts = []; | |
| var icosahedronTris = []; | |
| function buildVerts() | |
| { | |
| icosahedronVerts = | |
| [ | |
| {x: 0.000, y: 0.000, z: 1.000}, | |
| {x: 0.894, y: 0.000, z: 0.447}, | |
| {x: 0.276, y: 0.851, z: 0.447}, | |
| {x:-0.724, y: 0.526, z: 0.447}, | |
| {x:-0.724, y:-0.526, z: 0.447}, | |
| {x: 0.276, y:-0.851, z: 0.447}, | |
| {x: 0.724, y: 0.526, z:-0.447}, | |
| {x:-0.276, y: 0.851, z:-0.447}, | |
| {x:-0.894, y: 0.000, z:-0.447}, | |
| {x:-0.276, y:-0.851, z:-0.447}, | |
| {x: 0.724, y:-0.526, z:-0.447}, | |
| {x: 0.000, y: 0.000, z:-1.000} | |
| ]; | |
| icosahedronTris = | |
| [ | |
| 0,1,2, | |
| 0,2,3, | |
| 0,3,4, | |
| 0,4,5, | |
| 0,5,1, | |
| 11,7,6, | |
| 11,8,7, | |
| 11,9,8, | |
| 11,10,9, | |
| 11,6,10, | |
| 2,1,6, | |
| 2,7,3, | |
| 3,8,4, | |
| 4,9,5, | |
| 5,10,1, | |
| 6,7,2, | |
| 7,8,3, | |
| 8,9,4, | |
| 9,10,5, | |
| 10,6,1 | |
| ]; | |
| } | |
| // initialization | |
| function init() | |
| { | |
| // setup canvas and context | |
| canvas = document.getElementById('icosahedron 3d'); | |
| context = canvas.getContext('2d'); | |
| // set canvas to be window dimensions | |
| resize(); | |
| // create event listeners | |
| canvas.addEventListener('mousemove', mouseMove); | |
| canvas.addEventListener('click', mouseClick); | |
| window.addEventListener('resize', resize); | |
| // initialze variables | |
| buildVerts(); | |
| } | |
| // input functions | |
| function mouseMove(event) | |
| { | |
| var rect = canvas.getBoundingClientRect(); | |
| mouseX = event.clientX - rect.left, | |
| mouseY = event.clientY - rect.top | |
| } | |
| function mouseClick() | |
| { | |
| shieldUp^=1; | |
| splutterCount = 30; | |
| splutterNoise = 60; | |
| } | |
| function resize() | |
| { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| // compute centre of screen | |
| centreX = canvas.width/2; | |
| centreY = canvas.height/2; | |
| } | |
| // rendering functions | |
| var phi = Math.PI*0.5; | |
| var theta = 0; | |
| function renderIcosahedron() | |
| { | |
| var scale = 512/canvas.height; | |
| phi+=0.009; | |
| theta+=0.01; | |
| var transforms = []; | |
| var cphi = Math.cos(phi); | |
| var sphi = Math.sin(phi); | |
| var ctheta = Math.cos(theta); | |
| var stheta = Math.sin(theta); | |
| // transform into 3d coords | |
| for (var i=0; i<icosahedronVerts.length; i++) | |
| { | |
| var vert = icosahedronVerts[i]; | |
| var tz = vert.z * ctheta + vert.y * stheta; | |
| var ty = vert.y * ctheta - vert.z * stheta; | |
| // rotate phi | |
| var tx = vert.x * cphi - ty * sphi; | |
| ty = ty * cphi + vert.x * sphi; | |
| // pixel depth using a long focal distance to ensure all set is in focus | |
| var depth = focalPoint*5 / ((tz + 5*scale) +1); | |
| var x1 = tx*depth+centreX; | |
| var y1 = ty*depth+centreY; | |
| transforms.push( {x:x1, y:y1, z:tz} ); | |
| } | |
| for (var i=0; i<icosahedronTris.length;i+=3) | |
| { | |
| var a = icosahedronTris[i]; | |
| var b = icosahedronTris[i+1]; | |
| var c = icosahedronTris[i+2]; | |
| // back face cull | |
| var dx1 = transforms[b].x - transforms[a].x; | |
| var dy1 = transforms[b].y - transforms[a].y; | |
| var dx2 = transforms[b].x - transforms[c].x; | |
| var dy2 = transforms[b].y - transforms[c].y; | |
| var cross = (dx1*dy2 - dy1*dx2); | |
| if (cross < 0) continue; | |
| // use cross product normal to reflect light | |
| var shade = Math.floor(Math.sqrt(cross)*scale)+10; | |
| // fill the triangle | |
| context.beginPath(); | |
| context.moveTo(transforms[a].x, transforms[a].y); | |
| context.lineTo(transforms[b].x, transforms[b].y); | |
| context.lineTo(transforms[c].x, transforms[c].y); | |
| context.closePath(); | |
| context.fillStyle = 'rgba('+shade+','+shade+','+shade+',1)'; | |
| context.fill(); | |
| // edge it in red for fun | |
| context.lineWidth = 4; | |
| context.strokeStyle = 'rgba('+(shade>>2)+','+(shade>>2)+','+shade+', 1)'; | |
| context.stroke(); | |
| } | |
| } | |
| var spin =0; | |
| function renderShield() | |
| { | |
| var phi = Math.PI*0.5; | |
| var theta = spin; | |
| var transforms = []; | |
| var cphi = Math.cos(phi); | |
| var sphi = Math.sin(phi); | |
| var ctheta = Math.cos(theta); | |
| var stheta = Math.sin(theta); | |
| // transform into 3d coords | |
| for (var i=0; i<icosahedronVerts.length; i++) | |
| { | |
| var vert = icosahedronVerts[i]; | |
| var tz = vert.z * ctheta + vert.y * stheta; | |
| var ty = vert.y * ctheta - vert.z * stheta; | |
| // rotate phi | |
| var tx = vert.x * cphi - ty * sphi; | |
| ty = ty * cphi + vert.x * sphi; | |
| // pixel depth using a long focal distance to ensure all set is in focus | |
| var depth = 1200 / ((tz + 0.2*256/canvas.height) +1); | |
| var x1 = tx*depth+centreX; | |
| var y1 = ty*depth+centreY; | |
| transforms.push( {x:x1, y:y1, z:tz} ); | |
| } | |
| for (var i=0; i<icosahedronTris.length;i+=3) | |
| { | |
| var a = icosahedronTris[i]; | |
| var b = icosahedronTris[i+1]; | |
| var c = icosahedronTris[i+2]; | |
| // back face cull | |
| var dx1 = transforms[b].x - transforms[a].x; | |
| var dy1 = transforms[b].y - transforms[a].y; | |
| var dx2 = transforms[b].x - transforms[c].x; | |
| var dy2 = transforms[b].y - transforms[c].y; | |
| var cross = (dx1*dy2 - dy1*dx2); | |
| if (cross > 0) continue; | |
| // use cross product normal to reflect light | |
| var shade = Math.floor(Math.sqrt(-cross)); | |
| // fill the triangle | |
| context.beginPath(); | |
| context.moveTo(transforms[a].x, transforms[a].y); | |
| context.lineTo(transforms[b].x, transforms[b].y); | |
| context.lineTo(transforms[c].x, transforms[c].y); | |
| context.closePath(); | |
| context.fillStyle = 'rgba('+0+','+shade+','+0+',0.25)'; | |
| context.fill(); | |
| // edge it in red for fun | |
| context.lineWidth = 1; | |
| context.strokeStyle = 'rgba('+0+','+shade+','+0+', 0.1)'; | |
| context.stroke(); | |
| } | |
| } | |
| function render() | |
| { | |
| context.fillStyle = 'black'; | |
| context.clearRect(0, 0, canvas.width, canvas.height); | |
| context.globalCompositeOperation='lighter'; | |
| renderIcosahedron(); | |
| splutterNoise++; | |
| spin+=0.01; | |
| if (splutterCount) splutterCount--; | |
| var splutter = splutterNoise&splutterCount; | |
| if ( shieldUp & !splutter) renderShield(); | |
| context.globalCompositeOperation='source-over'; | |
| context.globalAlpha = 1.0; | |
| context.font = '20pt Calibri'; | |
| context.fillStyle = 'rgb(255,255,255)'; | |
| context.textAlign = "center"; | |
| context.fillText('Icosahedron', canvas.width/2, 20); | |
| context.font = '14pt Calibri'; | |
| context.fillText('(mouse button to Shield Up)', canvas.width/2, 40); | |
| } | |
| // movement functions | |
| function update() | |
| { | |
| } | |
| // per frame tick functions | |
| function animate() | |
| { | |
| frameCount++; | |
| // movement update | |
| update(); | |
| // render update | |
| render(); | |
| // trigger next frame | |
| requestAnimationFrame(animate); | |
| } | |
| // entry point | |
| init(); | |
| animate(); |
| body{ | |
| background:#000000 | |
| } |