»
EnglishFrenchVietnamese

Print - JavaScript 3D Starfield with HTML5 Canvas - JavaScriptBank.com

Full version: jsB@nk » 3D » JavaScript 3D Starfield with HTML5 Canvas
URL: http://www.javascriptbank.com/javascript-3d-starfield-html5-canvas.html

JavaScript 3D Starfield with HTML5 Canvas © JavaScriptBank.comThis 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: http://www.javascriptbank.com/javascript-3d-starfield-html5-canvas.html



JavaScript
<!--[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>


HTML
<canvas id="theCanvas" width="800" height="600" style="border: 1px solid blue;"/></canvas>