A website that kinda looks like space

[CarolOatway]

Project URL: It's a gaxlay gasp
Me and a friend made this for fun. It is supposed to look like space or something idk :). I was trying to make a space background for a video game I made and it looked artificial no matter what I did, so I used JavaScript on a black background to generate stuff randomly I based it off of this picture https://cdn.spacetelescope.org/archives/images/screen/opo0431b.jpg
quick question after a while all of the ‘stars’ look like a rectangle is there a way to append this in a more oval/circler patter like in the picture (I am bad at math)?

[wh0]

Can you send a screenshot of the stars looking like a rectangle?

If it’s a resource limitation, maybe you could draw to a canvas so that it doesn’t cost more memory or whatever regardless of how many you’ve drawn. The Glitch loading screen does that, I think.

[CarolOatway]

after a while, it looks like a rectangle pattern and in the picture, I was basing it off of the blue dots are in an oval pattern. I have no clue how I would go about doing this though.

[wh0]

Thanks for the illustration of the rectangle effect.

Here are a few ideas for how to get them arranged more oval-ly. If you’re looking for the terms in case you want to search around too, you’re trying to generate random samples from a distribution. I saw that you’re in high school, so you might need to look ahead in the math curriculum for some of the ideas below.

1. Generate random points in a large rectangle and skip the points that you don’t want. You can look up a formula to test if a given point is inside of an oval. Then you generate random points in a loop and stop when it generates one inside the oval that you want. Then you draw a star there. This is called rejection sampling, if you want to look up some more resources on it.

   You can even do something more sophisticated with this than “if it’s outside then skip; if it’s inside then draw a star.” In the reference photo, there are more stars toward the center and fewer out on the edge of the oval. You can achieve something like this by sometimes rejecting points even if they’re in the oval, but they’re very far from the center.

2. Generate points in a different coordinate space and transform them to x, y. For example, you can generate a random angle and distance from an origin point. These two numbers together define a point in polar coordinates. There are formulas for converting these polar coordinates to x, y Cartesian coordinates. This could make it easier to distribute points in a circle by controlling the range of that ‘distance’ variable. There are some additional transformations you can do transform the circular distribution into an oval one.

3. Apply a quantile function to a uniform distribution. I personally didn’t learn about this stuff until college. But as a high level overview, for each coordinate, you can mathematically define a measure of how many stars should appear where, then come up with a so-called quantile function f(x)=p where p fraction of the coordinate values are less than or equal to x. Running f(Math.random()) will give you a sample following the distribution.

   Then there’s the question of whether doing this with the x and y coordinates sampled independently would work well for the distribution you want. For some distributions such as a diagonal line, it wouldn’t. But for these blobby shapes it usually turns out pretty well.

   Maybe try something like

   x = Math.asin(Math.random() * 2 - 1) * 200 + 200;
   y = Math.asin(Math.random() * 2 - 1) * 400 + 400;
   

You might end up using a combination of techniques.

[christina]

I really like this app! Goes to show you can make something great without much complex code. I see a lot of too busy and/or too fast animations on the web and this is actually relaxing to watch.

It’s definitely worth remixing and building upon (maybe trying canvas) but I’d save a copy of it as is.

[CarolOatway]

https://cdn.glitch.com/page-not-found.html
Lol glitch did the copy