Full version: jsB@nk » 3D » JavaScript 3D Starfield with HTML5 Canvas
URL: https://www.javascriptbank.com/javascript-3d-starfield-html5-canvas.html
This JavaScript code use HTML5 canvas to simulate a spaceship run into the universe. This is cross-browser JavaScript code example, you may use this JavaScript example to create more funny JavaScript effects if you may think.Some other 3D JavaScript effects that you should not miss: - Simple 3D Graphics Animation in JavaScript - 3D Roller Coaster Space Flight in JavaScript - Incredible and Amazing 3D JavaScript Canvas Enginges - JavaScript 3D Starfield using Images
Full version: jsB@nk » 3D » JavaScript 3D Starfield with HTML5 Canvas
URL: https://www.javascriptbank.com/javascript-3d-starfield-html5-canvas.html
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn-history/r48/trunk/silverlight/excanvas.js"></script><![endif]--><script type="text/javascript" from="JavaScriptBank.com">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/ // Copyright Christopher Thomas 2007 // All rights reserved.var canvas;var ctx;var points;var NUMPOINTS = 500;var LINE = false;var FOO = 0;var xshift = 0;var yshift = 0;var xtarg = 0;var ytarg = 0;var timer;function go() { canvas = document.getElementById("theCanvas"); ctx = canvas.getContext("2d"); points = []; for (var i=0; i<NUMPOINTS; i++) { FOO = i; var z = i*.2+1; var x = Math.random() * 2400 - 1200; var y = Math.random() * 2400 - 1200;/* x = 800*Math.cos(i/20 * Math.PI * 2); y = 800*Math.sin(i/20 * Math.PI * 2);*/ points[i] = {x: x, y: y, z: z, c: color()}; } timer = setInterval(update, 16);}function paint() { ctx.save(); ctx.fillStyle = "rgb(0, 0, 0)"; ctx.fillRect(0, 0, 800, 600); ctx.translate(400, 300); var start = NUMPOINTS-1; var alpha = Math.pow(1-points[start].z/(NUMPOINTS*.2+1), 2); alpha = Math.max(alpha, .01); var color = points[start].c.replace(/ALPHA/, alpha); if (LINE) { ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(points[start].x / points[start].z, points[start].y / points[start].z); } for (var i=start; i>=0; i--) { var scaledX = (xshift + points[i].x) / points[i].z; var scaledY = (yshift + points[i].y) / points[i].z; if (LINE) { ctx.lineTo(scaledX, scaledY); ctx.stroke(); } //ctx.strokeRect(scaledX - 2, scaledY - 2, 4, 4); ctx.beginPath(); ctx.arc(scaledX, scaledY, 25/points[i].z, 0, Math.PI*2, false); ctx.fill(); var alpha = Math.pow(1-points[i].z/(NUMPOINTS*.2+1), 2); alpha = Math.max(alpha, .01);alpha = 1; color = points[i].c.replace(/ALPHA/, alpha); ctx.strokeStyle = color; ctx.fillStyle = color; if (LINE) { ctx.beginPath(); ctx.moveTo(scaledX, scaledY); } } ctx.stroke(); ctx.restore();}function update() { if (Math.abs(xshift - xtarg) < 20) xtarg = Math.random()*1000-500; if (Math.abs(yshift - ytarg) < 20) ytarg = Math.random()*1000-500; var dx = (xtarg - xshift); var dy = (ytarg - yshift); var len = Math.sqrt(dx*dx+dy*dy); dx /= len; dy /= len; xshift += dx*10; yshift += dy*10; for (var i=0; i<NUMPOINTS; i++) { points[i].z-= .25; if (points[i].z <= .3){ points.shift(); i--; FOO++; var x = 800*Math.cos(FOO/20 * Math.PI * 2); var y = 800*Math.sin(FOO/20 * Math.PI * 2); var x = Math.random() * 2400 - 1200; var y = Math.random() * 2400 - 1200; var z = NUMPOINTS*.2+1; points.push({x: x, y: y, z: z, c: color()}); } } paint();}function color() { var r = (Math.sin(FOO/25)+1)/2; var g = (Math.sin(FOO/25 + Math.PI / 3)+1)/2; var b = (Math.sin(FOO/25 + Math.PI * 2/ 3)+1)/2; r = r * r; g = g * g; b = b * b; var l = Math.sqrt(r*r+g*g+b*b); r /= l; g /= l; b /= l; r *= 200; g *= 200; b *= 200; r = parseInt(r); g = parseInt(g); b = parseInt(b); return "rgba("+r+","+g+","+b+",ALPHA)";}window.onload = go;</script><canvas id="theCanvas" width="800" height="600" style="border: 1px solid blue;"/></canvas>