Step 1: Detect Window Position

.

console.log('Window position:', window.screenX, window.screenY);

Step 2: Observe Window Position

.

const myWindowPosition = {
  x: false,
  y: false
}
/* break */
const trackMyWindowPosition = () => {
  if (myWindowPosition.x === window.screenX 
    && myWindowPosition.y === window.screenY) return;
  /* break */
  myWindowPosition.x = window.screenX;
  myWindowPosition.y = window.screenY;
  /* break */
  // Do something meaningful with the data 🕺🏼
  console.log(myWindowPosition.x, myWindowPosition.y);
}
/* break */
trackMyWindowPosition();
const observeMyWindowPosition = setInterval(trackMyWindowPosition, 500);

Using window.opener

Baseline Widely available

// In opener/parent window
/* break */
const childWindowPosition = {
  x: false,
  y: false
}
/* break */
// Open child window
childWindow = window.open(url, 'child-window');
/* break */
// Read window position from child
if (childWindowPosition.x === childWindow.screenX 
  && childWindowPosition.y === childWindow.screenY) return;
  /* break */
childWindowPosition.x = childWindow.screenX;
childWindowPosition.y = childWindow.screenY;

// In opened/child window
/* break */
const parentWindowPosition = {
  x: false,
  y: false
}
/* break */
// Read window position from parent
if (parentWindowPosition.x === window.opener.screenX 
  && parentWindowPosition.y === window.opener.screenY) return;
  /* break */
parentWindowPosition.x = window.opener.screenX;
parentWindowPosition.y = window.opener.screenY;

Using Broadcast Channel API

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

// In (first) window
/* break */
// Open Broadcast Channel
const windowPositionChannel = new BroadcastChannel('window-position');
/* break */
/* some lines of funky code */
/* break */
// Send my window position to the channel
windowPositionChannel.postMessage(myWindowPosition);
/* break */
// Receive messages from the channel
windowPositionChannel.onmessage = (event) => {
  const otherWindowPosition = event.data;
  /* break */
  // Do something meaningful with the data 🕺🏼
  console.log(otherWindowPosition.x, otherWindowPosition.y);
}

// In (second) window
/* break */
// Open Broadcast Channel
const windowPositionChannel = new BroadcastChannel('window-position');
/* break */
/* some lines of funky code */
/* break */
// Send my window position to the channel
windowPositionChannel.postMessage(myWindowPosition);
/* break */
// Receive messages from the channel
windowPositionChannel.onmessage = (event) => {
  const otherWindowPosition = event.data;
  /* break */
  // Do something meaningful with the data 🕺🏼
  console.log(otherWindowPosition.x, otherWindowPosition.y);
}

Store shared data via LocalStorage

LocalStorage allows browser windows of the same origin to persistently store and share string-based key–value pairs. The storage event lets other open windows react to changes in real time, making it useful for simple cross-window communication.

// Write changes to local storage
const trackMyWindowPosition = () => {
  /* break */
  if (myWindowPosition.x === window.screenX 
    && myWindowPosition.y === window.screenY) return;
  /* break */
  myWindowPosition.x = window.screenX;
  myWindowPosition.y = window.screenY;
  /* break */
  // Store Window Data in Local Storage
  localStorage.setItem('windowPosition', JSON.stringify(myWindowPosition));
}

// Listen to changes in local storage
window.addEventListener('storage', (event) => {
  /* break */
  if(!event.key === 'windowPosition') return;
  const otherWindowPosition = JSON.parse(event.newValue);
  /* break */
  // Do something meaningful with the data 🕺🏼
  console.log(otherWindowPosition.x, otherWindowPosition.y);
});

Shared Worker with postMessage()

This creates a new connection to an existing or newly started SharedWorker whose code is located in the shared.js file. In contrast to workers, which start a separate thread per window or tab, a SharedWorker is only started once per Origin - all tabs share the same worker process.

// Shared Worker Code in shared.js
/* break */
const connections = [];
/* break */
onconnect = function (e) {
  const port = e.ports[0];
  connections.push(port);
  /* break */
  port.onmessage = function (event) {
    const data = event.data;
    /* break */
    // Echo to all other windows
    connections.forEach(p => {
      if (p !== port) {
        p.postMessage(data);
      }
    });
  };
  /* break */
  port.start(); // Required for older browsers
};

// Client Code
// Start or connect to worker
const worker = new SharedWorker('shared.js');
worker.port.start();
/* break */
const trackMyWindowPosition = () => {
  /* ... */
  // Store Window Data in Shared Worker
  worker.port.postMessage(myWindowPosition);
}
/* break */
// Observe my window position
const observeMyWindowPosition = setInterval(trackMyWindowPosition, 500);
/* break */
// Receive messages from the worker
worker.port.onmessage = (event) => {
  /* break */
  const otherWindowPosition = event.data;
  /* break */
  // Do something meaningful with the data 🕺🏼
  console.log(otherWindowPosition.x, otherWindowPosition.y);
};

Core Structure of a Sketch

The tools uses a simple sketch structure based on two main functions: setup(), which runs once at the beginning, and draw(), which runs continuously like a loop. To get started, you can write your code in the p5.js Web Editor.

function setup() {
  createCanvas(400, 400);
}
/* break */
function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50, 50);
}

Useful Snippets: ColorMode

colorMode() in p5.js sets how colors are interpreted. Using HSB (Hue, Saturation, Brightness) is often better because it separates color, intensity, and lightness, making color control more intuitive.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(90, 100, 70, 100);
  stroke(270, 100, 70, 100);
  strokeWeight(10);
}

function draw() {
  background(0, 0, 0, 100);
  ellipse(mouseX, mouseY, 50, 50);
}

Useful Snippets: random() & randomSeed()

random() in p5.js returns a random number, useful for adding unpredictability. randomSeed() sets the starting point for random values, making results repeatable — helpful for debugging or creating consistent outcomes.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(90, 100, 70, 100);
  stroke(270, 100, 70, 100);
  strokeWeight(10);
}

function draw() {
  background(0, 0, 0, 100);

  const dotSize = random(-20, 100);
  ellipse(mouseX, mouseY, dotSize);
}

Useful Snippets: map()

map() in p5.js converts a number from one range to another. It's useful for scaling values, like turning mouse position into color or speed.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(90, 100, 70, 100);
}

function draw() {
  background(0, 0, 0, 100);
  const hue = map(mouseX, 0, 400, 0, 360);
  const dotSize = map(mouseY, 0, 400, 0, 50);
  fill(hue, 100, 100, 100);
  ellipse(mouseX, mouseY, dotSize);
}

Useful Snippets: dist()

dist() in p5.js calculates the distance between two points. It's useful for measuring how far apart objects are, often used in movement or collision detection.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(90, 100, 70, 100);
}

function draw() {
  background(0, 0, 0, 100);
  const dotSize = dist(0, 0, mouseX, mouseY);
  ellipse(width/2, height/2, dotSize);
}

Brain-Freeze: translate() & rotate()

translate() in p5.js moves the origin of the drawing space, letting you draw shapes in a new position. rotate() turns the drawing space, useful for rotating shapes around a point.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(335, 92, 87, 100);
}

function draw() {
  background(0, 0, 0, 100);
  translate(width/2, height/2);
  rotate(45);
  rect(-30, -30, 60, 60);
}

Useful Snippets: Simple Animation

This code creates a rotating rectangle in the center of the canvas. The translate() function moves the origin to the center, and rotate(angle) spins the rectangle around that point. angle increases over time, causing continuous rotation, while the semi-transparent background creates a fading trail effect.

let angle = 0;

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 100);
  fill(335, 92, 87, 100);
}

function draw() {
  background(0, 0, 0, 10);

  translate(width/2, height/2);
  rotate(angle);
  rect(0, 0, 60, 60);

  angle += 0.08;
}

Fit Canvas to Screen Size

This code adjusts the canvas based on the browser window’s position on the screen, allowing the sketch to stay aligned with the physical screen space.

let posX, posY;

function draw() {
  background(0, 0, 0, 100);

  if (drawingParams.context === 'screen') {
    // Move the origin of the canvas to the top left corner of the screen
    const originX = -window.screenX;
    const originY = -window.screenY;
    canvas.width = screen.width;
    canvas.height = screen.height;
    translate(originX, originY);
    posX = width / 2;
    posY = height / 2;

  }else{
    posX = window.innerWidth / 2;
    posY = window.innerHeight / 2;
  }

  ellipse(posX, posY, 60, 60);
}