1
\$\begingroup\$

I am old. My high school maths is a long way in my past and I am struggling to devise an algorithm that will produce a 2D 'flying through space' effect like the old Windows screen saver. It has—

  • stars generated close to the screen centre, which move outwards at increasing speed, and
  • on a key press, a hyperspace effect is generated with the stars turning to lines stretching to the edge of the screen.

I've figured out that I can use arctan and x,y offsets from screen centre to identify a direction, but given that the trig functions work in a 90 degree field. My old brain is struggling to pull it all together.

How can I create this effect?

\$\endgroup\$
  • \$\begingroup\$ Can you clarify what specific trigonometry problem you need to solve? Is it just getting a 0-360 angle from signed x & y offsets (ie. the atan2 function)? \$\endgroup\$ – DMGregory Oct 14 '18 at 16:13
  • \$\begingroup\$ There's this useful function called arctan2/atan2 that works in all 360 degrees. But actually, you probably don't need trigonometry here. \$\endgroup\$ – user253751 Oct 14 '18 at 22:32
1
\$\begingroup\$

Every frame—

  1. If enough time has elapsed since the last star, create a star at a slight random offset from the middle of the screen. You can get the x and y components of a random point on a circle by (as @Philipp mentions), using sin and cos on a random angle between 0 and 2π radians (= 360°).
  2. Multiply the x and y value of each star by 1+ε to taste of ε. I used a random value between 1.01 and 1.05. This makes stars move away from the middle, faster the further they are from the middle. Greater values of ε cause the star to move faster, creating the illusion that it's closer.
  3. Clear the screen. (Or don't, if you want the hyperspace effect. This makes the streaks of stars stay on screen instead of being cleared.)
  4. Draw a circle for each star at its position, with a radius scaled to its distance from the middle of the screen.
  5. Remove stars that have moved outside the window.

Here's a demo in a runnable JavaScript snippet, using HTML Canvas to render:

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let middle = { x: canvas.width / 2, y: canvas.height / 2 }

// Each star is stored as an { x, y } object representing
// its offset from the middle of the screen

function canvasStarPosition(star) {
  return { x: middle.x + star.x,
           y: middle.y + star.y }
}

function starSize(star) {
  // Size is proportional to distance from the middle
  return Math.max(Math.abs(star.x), Math.abs(star.y)) / 100
}

function drawStar(ctx, star) {
  let { x, y } = canvasStarPosition(star)
  let r = starSize(star)
  ctx.fillStyle = 'white'
  ctx.beginPath()
  ctx.arc(x, y, r, 0, 2*Math.PI)
  ctx.fill()
}

let start = 0
let stars = []
let timeSinceLastStar = Infinity
let starInterval = 10000 // milliseconds

function makeStar() {
  let angle = Math.random() * 2*Math.PI
  stars.push({
    x : Math.cos(angle),
    y : Math.sin(angle),
    // The multiplier affects how quickly the star moves.
    // Varying this makes some stars appear closer (faster
    // movement), some further (slower movement).
    multiplier : 1.01 + Math.random() * 0.04
  })
}

function step(timestamp) {
  if (!start) start = timestamp
  var progress = timestamp - start
  
  // Create a new star if it's been long enough since
  // the previous one
  timeSinceLastStar += progress
  if (timeSinceLastStar > starInterval) {
    timeSinceLastStar = 0
    makeStar()
  }
  
  // Clear the screen.
  // If you want the hyperspace effect, skip this.
  ctx.clearRect(0,0,canvas.width, canvas.height)
  
  stars.forEach((s) => {
    // Increase the star's distance from the middle
    // proportionally to its current distance
    s.x *= s.multiplier
    s.y *= s.multiplier
    drawStar(ctx, s)
  })

  // Remove stars outside the view boundary
  let i = stars.length;
  while (--i) {
    let {x, y} = canvasStarPosition(stars[i])
    if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
      stars.splice(i, 1)
    }
  }  
  window.requestAnimationFrame(step)
}
window.requestAnimationFrame(step)
<body style="background:black">
<canvas id="canvas" width="600" height="150"></canvas>
</body>

\$\endgroup\$
  • 2
    \$\begingroup\$ If ε is the same value, it would appear as if all the stars were on the same tube. You can use different values of ε to simulate stars with different distances. \$\endgroup\$ – congusbongus Oct 16 '18 at 0:26
  • \$\begingroup\$ @congusbongus Good point! I edited to add variation to that value in the demo, and explained what it does. \$\endgroup\$ – Anko Oct 16 '18 at 18:08
  • \$\begingroup\$ You can also scale the star size by ε to make the sizes consistent with the distance. \$\endgroup\$ – congusbongus Oct 16 '18 at 21:56
0
\$\begingroup\$

Supposed you have a vector described by an angle and a length, you can convert it to its x:y form like this:

x = sin(angle) * length
y = cos(angle) * length
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.