Creative Coding

Interactive & Code

Couple of works that actually run instead of just sitting there - a playable WebXR scene and a generative sketch with the source code sitting right next to it.

WebXR / A-Frame

An audio-based interactive virtual experience

A small playable scene built with A-Frame, exploring basic 3D interaction directly in the browser — no installs, no plugins, just a link that opens straight into it.

Launch Experience →

Opens in a new tab — best on desktop with sound on.

p5.js

Supernova

An evolving abstract sketch that runs on some basic code - circles, lines and triangles, all moving about, randomized and leaving trails, allowing for a constellation-like end result. Click anywhere to save the current frame as a JPG.

supernova.js p5.js 
function setup() {
  const canvas = createCanvas(600, 400);
  canvas.parent('sketch-holder');
  background(0);
  canvas.mousePressed(saveFrame);
}

let m;
let k = 0;
let speed = 3;

function draw() {
  m = random(height);

  fill(0, 10);
  noStroke();
  rect(0, 0, width, height);

  noFill();
  stroke(255, 40);

  // circles around the central point
  circle(width / 2, height / 2, random(80, 250));
  circle(width / 2, height / 2, random(40, 150));

  // rays
  line(width / 2, height / 2, random(width), random(height));
  line(width / 2, height / 2, random(width), random(height));

  // the moving scan line
  line(0, m, width, m);

  // shifting fragments
  triangle(
    random(0, width),
    random(0, height),
    random(0, width),
    random(0, height),
    random(0, width),
    random(0, height)
  );

  // the moving triangle
  triangle(
    k,
    height / 2,
    width / 2,
    50,
    width / 2,
    height - 50
  );

  k = k + speed;

  if (k > width || k < 0) {
    speed = speed * -1;
  }

  // stars
  stroke(255);
  point(random(width), random(height));
  point(random(width), random(height));
  point(random(width), random(height));
}

// screenshot function
function saveFrame() {
  saveCanvas('supernova-deivids', 'jpg');
}