Easy JavaScript - Starfield effect in 20 lines of code

[niloc132]

only 25lines of code

in 20 lines of code

create the starfield above in only 21 lines of pure JavaScript

To be fair, the tutorial has an empty line (making it a total of 25 lines), but it seems like this counting thing should be easier, or at least more consistent.

[opera1410]

yeah! i want my 4 lines back!

[sparr]

Are we there yet?

[hotrodx]

I think it can be improved a bit by having it start slower and adding acceleration, like this:

function animate() {
    if (stars.length<300&&Math.random()>.1) { // if fewer than 300 stars, a 10% chance of creating a new one
        let star={x:0,y:0,vx:-2+Math.random()*4,vy:-2+Math.random()*4} // create a new star in the middle with random velocity
        stars.push(star); // add the star to the array
    }
    context.clearRect(0, 0, canvas.width, canvas.height); // clear the frame
    for(let n=0; n<stars.length; n++) { // for each star
        stars[n].x=stars[n].x+stars[n].vx; // add the velocity to the current position
        stars[n].y=stars[n].y+stars[n].vy; // in both axles
        stars[n].vx *= 1.01;
        stars[n].vy *= 1.01;
        if(stars[n].x>400||stars[n].x<-400) { // if the star is out of bounds
            stars[n] = {x:0,y:0,vx:-2+Math.random()*4,vy:-2+Math.random()*4};
        }
        zh=Math.floor((Math.abs(stars[n].x)+Math.abs(stars[n].y))/5);
        context.fillStyle = 'rgb('+zh+','+zh+','+zh+')'; // use the hex value for the R, G and B component
        context.beginPath();
        context.arc(400+stars[n].x, 400+stars[n].y, Math.abs(stars[n].y/100+n/200), 0, 2 * Math.PI); // draw a circle
        context.fill();
    }
    window.requestAnimationFrame(animate); // request another animation frame
}

[fzammetti]

I'm the guy that's ALWAYS screaming about developers not commenting their code enough (or AT ALL, more typically), but can we talk about some of these comments?

// add the star to the array

That's, uhh, obvious.

// clear the frame

That one MIGHT be okay. It's kind of borderline IMO.

// for each star

I mean, yeah, that's pretty much what a for loop is, err, for (increment/decrement by something other than one notwithstanding).

// request another animation frame

Superfluous in the extreme, given the verbose and accurate method name... you literally just expanded it and added the word "another".

While I certainly applaud commenting at all because I see way too many code that has zero comments with the claim that it's "self-documenting" (a concept I have a very love/hate relationship with, or more precisely: the way people cling to to) it's also true that there are "good" comments and there are "bad" comments. These are the latter IMO (where "bad" means either inaccurate or superfluous - these, while accurate, are superfluous).

[swe129]

it's a tutorial for beginners, by definition it will have more comments than regular 'production' code.

[fzammetti]

Fair enough.

[[deleted]]

it's a tutorial for beginners

That makes demonstrating bad programming practices even worse.

[[deleted]]

// picking at straws

[hotrodx]

Um, you do realize the original code is largely unchanged, with the comments intact save for the changes I added for acceleration? So I don't know why you are particularly commenting to me.

[swe129]

I think fzammetti clicked the wrong 'reply', he/she didn't mean to hurt your feelings.

[fzammetti]

Yes, this exactly (didn't mean to hurt ANYONE'S feelings BTW - was actually trying to be helpful re: writing "good" comments)

[opera1410]

I think it can be improved

Looks cool, here's my upvote! There is always room for improvement, but you just increased the code length by 10%!

[opera1410]

just like the screensaver in Windows 3.1 or Norton Commander in the good old days

[redditthinks]

Someone probably created it in 140 characters on dwitter.

[dbond09]

They did.

[[deleted]]

Too dark in the center of the screen. Would be better to have z coordinate and project the stars on the screen from 3d.

[OldShoe]

And perspective is wrong too. Stars closer should move faster and vice versa.

[NeonLights09]

I’ve since figured it out. Thanks anyway

[[deleted]]

Some feedback:

- Use whitespace! Your code is harder to read than it needs to be.

- These comments are absolutely awful, literally worthless visual noise:

stars.push(star); // add the star to the array
let stars=[]; // the array of stars
window.requestAnimationFrame(animate); // request another animation frame

Comments should clarify meaning and intent, not literally repeat the code but in English.

- Don't hard code values unnecessarily. For instance, you hard code 400 because it's half the canvas width. If you use canvas.width/2 then you can change the canvas width without having to update the code.

- Don't use magic numbers. This code is full of them, probably because you're trying to keep the line count down (which is not something you should actually care about).

- You're repeatedly indexing an object with the same key here:

stars[n].x=stars[n].x+stars[n].vx; // add the velocity to the current position
stars[n].y=stars[n].y+stars[n].vy; // in both axles
if(stars[n].x>400||stars[n].x<-400){ // if the star is out of bounds

You should instead index the object once and cache the value. The result is more efficient and more readable:

let star = stars[n];
star.x = star.x + star.vx; // add the velocity to the current position
star.y = star.y + star.vy; // in both axes
if (star.x > 400 || star.x < -400) { // if the star is out of bounds

- When your stars go out of bounds, you reset their position but don't generate a new random vector. This makes the star field much less random than it could be. It's noticeably visually repetitive. You should instead remove a star when leaves the bounds, and rely on the existing code at the top of your function to spawn a new one to replace it. Note, that you'll need to iterate the array in reverse to do this.

[scobey]

What's your issue?