Building a 3D Starfield effect on the canvas in Javascript We’ll be building this hyperspace star effect I had a few requests to show how to build on the Math.sin() and Math.cos() examples from the previous article, to do something similar in 3D. But before we can get there, let’s get the basics covered in faking 3D. Creating fake 3D on the canvas is pretty easy once you know how it works. We’ll start small and build on the tricks we learn. The basic trick is to scale our objects to simulate the z-axis view, we use a field of view angle, which is simple the width of the angle of view. The wider the angle, the more 3D distortion you get. And the formula is: scale = FOV/(z+FOV); So let’s make a simple starfield to start… Using our normal particle system code, we also need to give each particle a z-value, a z-speed, a scale value and a 3D x-value and a 3D y-value. We don’t need a x-speed or a y-speed as we’ll just be moving our particles forward. function addParticle(){var particle = {x: random(-100,100),y: random(-100,100), }particles.push(particle);} z: 10,x3d: 0,y3d: 0,scale: 1,speed_z: 4 We’ll then calculate our 3D positions, based on our formula. Note we subtract our z-position to move the balls forward and use our scale to calculate our new 3D x and y-positions: function moveParticles(){ for (var i = 0; i < particles.length; i++) {var p = particles[i]; p.z -= p.speed_z;p.scale = fov/(p.z+FOV);p.x3d = p.x * p.scale;p.y3d = p.y * p.scale; } } And you should be getting something like this: So one thing you’ll notice is the particles eventually start moving backwards. Easy enough to fix, just check if they’ve reached past their negative FOV, remove them. And the only other thing is to add a semi transparent background to get a trail effect. The full code, to get the effect on the article header, will look like this: var ctx = createCanvas("canvas1");var particles = [];var FOV = 250; function addParticle(){var particle = {x: random(-100,100),y: random(-100,100),z: 10,x3d: 0,y3d: 0,speed_z: 2,scale: 1,colour: rgb(0),}particles.push(particle);} function draw(){ctx.background(0, 0.2);addParticle();moveParticles();drawParticles();} function moveParticles(){for (var i = 0; i < particles.length; i++) {var p = particles[i];p.z -= p.speed_z;p.scale = FOV/(p.z+FOV);p.x3d = p.x * p.scale;p.y3d = p.y * p.scale; if (p.z < -FOV) {  
  particles.splice(i,1);  
} }} function drawParticles(){ctx.save();ctx.translate(w/2, h/2);for (var i = 0; i < particles.length; i++) {var p = particles[i];ctx.fillStyle = rgb(255);ctx.fillEllipse(p.x3d, p.y3d, p.scale, p.scale);}ctx.restore();} And that’s it. We’re done. Happy . coding As usual the full code is available on my , this article is part 9 (be sure to do a pull every now and then, because I’m updating things often): github https://github.com/GeorgeGally/creative_coding Follow me on Instagram here: https://www.instagram.com/radarboy3000/ Follow me on Twitter here: https://twitter.com/radarboy_japan And like my Facebook Page here: https://www.facebook.com/radarboy3000

Facebook

Instagram

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Faking 3D in creative coding

Too Long; Didn't Read

Companies Mentioned

George Gally

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Faking 3D in creative coding

Too Long; Didn't Read

Companies Mentioned

George Gally

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES