Skip to content

Space critter

An attempt to replicate the liveliness of "Musical critter" with a oldschool vector spaceship.

Use arrow keys to move around. No mobile support.

An animated spaceship made of green outlined rectangles

function setup() {
  createCanvas(400, 400);
}
let y = 200
let vy = 0
let vy2 = 0

let x = 200
let vx = 0
let vx2 = 0
let sx = -1

let tl = 0
let tr = 1

function draw() {
  background(0);
  
  stroke(0, 255, 0)
  fill(0)
  
  rectMode(CENTER)
  
  let ay = keyIsDown(DOWN_ARROW) - keyIsDown(UP_ARROW)
  let ax = keyIsDown(RIGHT_ARROW) - keyIsDown(LEFT_ARROW)
  tl += (- ax / 2 + vx / 9 + ay * -sx * 5) * 0.05
  tr += (ax / 2 + vx / 9 + ay * sx * 5) * 0.05
  let d
  {
    let [a,b] = [sin(-sx * 0.3), cos(-sx * 0.3)];
    [tl, tr] = [tl * b + tr * a, -tl * a + tr * b];
    d = mag(tl, tr)
    let nd = lerp(d, 1, 0.1)
    tl *= nd / d
    tr *= nd / d
  }
  sx += ax
  sx += (1 - abs(sx)) * Math.sign(sx) * 0.4
  vx += ax * 3
  vx *= 0.75
  vx2 += ax * 3
  vx2 *= 0.85
  x += vx
  vy += ay * 3
  vy *= 0.75
  vy2 += ay * 3
  vy2 *= 0.85
  y += vy
  let w = 1 + (abs(vy2) / 50)
  let z = 20 * 30 / (30 + abs(vx2))
  push()
  translate(x, y)
  shearY(vx * 0.01)
  rect(0, 10, z * 2, 10)
  rect(0, 0 - (d - 1) * 3 * w, 10, 50 * w)
  rect(-z, 8 * w + tl, 10, 30 * w)
  rect(z, 8 * w + tr, 10, 30 * w)
  pop()
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/DYYGtQtOI)

Experiments tagged p5 (76/85)

Experiments tagged critter (6/6) →|

Experiments tagged interactive (24/26)

Experiments on this site (76/85)