Can a cursor feel like it has weight?

Most cursors point and click. Here the player is a small gravity well. There is nothing to click and nothing to choose. The only thing the player has is presence, and the sky answers to how close it comes.

The sketch starts from one image: stars so far away that their light no longer reaches anyone, each held in place by its own gravity.

The player is the one thing in that sky that can still pull. To “talk” to a star is to come close enough that it starts to move toward you.

There are no words. The conversation is the motion itself: a star leaves its small orbit and follows, then goes home when you leave.

1. 01

   Arrival

   A still, dark sky. Nothing asks for attention.

2. 02

   Contact

   A few dim stars lean toward the cursor. The player realises they are being answered.

3. 03

   Letting go

   Moving away, the stars drift home. The sky is as it was, and the player is the one who has changed.

The pull turned out to be gentle and temporary. Stars come when you are near and go back when you leave. The feeling that came out of it is closer to company than to control.

setup()

Fills the window with 800 Star objects and 120 FloatingMeteor objects.

Star

Fixed points that blink on a sine wave. Background only.

FloatingMeteor

Each one wanders in a small circle around its starting point and checks its distance to the cursor every frame.

draw()

Clears the frame, then updates and draws both layers.

windowResized()

Keeps the canvas full-window.

update() {
  let attractionRadius = 120;
  let attractionStrength = 0.09;

  // where the star would drift on its own: a small circle around home
  let wanderTargetX = this.initialX + cos(this.wanderAngle) * this.wanderMagnitude;
  let wanderTargetY = this.initialY + sin(this.wanderAngle) * this.wanderMagnitude;

  // close to the cursor? follow it. otherwise, go home.
  let d = dist(this.x, this.y, mouseX, mouseY);
  let tx = d < attractionRadius ? mouseX : wanderTargetX;
  let ty = d < attractionRadius ? mouseY : wanderTargetY;

  // ease 9% of the way there each frame
  this.x = lerp(this.x, tx, attractionStrength);
  this.y = lerp(this.y, ty, attractionStrength);
  this.wanderAngle += this.wanderSpeed;
}

Lightly condensed from the original for reading. One target switch and one lerp do all the work: the same line that pulls a star in also brings it home.

Full source on OpenProcessing ↗The embedded sketch above also has a Code tab with the complete source.

See the method behind the series →