The prototype

Extraterrestrial Transmission began as a creative experiment over two years ago. On September 1st, I minted this p5.js-based artwork on objkt.com, aiming to develop a self-composing and inter-connected abstract piece.

The prototype

The initial idea was to create "Floaters"—autonomous objects that interact within the artwork, dynamically finding their place in the composition. This object-oriented approach meant that each Floater would respond to the positions of others in the space, creating an ever-evolving visual dialogue.

class Floater {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = p5.Vector.random2D();
    this.friction = 0.9;
  }

  update() {
    this.velocity.mult(this.friction); // Apply friction
    this.position.add(this.velocity);  // Move based on velocity
    this.checkBoundary();              // Confine within canvas
  }

  checkBoundary() {
    if (this.position.x < 0 || this.position.x > width) this.velocity.x *= -1;
    if (this.position.y < 0 || this.position.y > height) this.velocity.y *= -1;
  }
}

This snippet shows the core behavior of a Floater. The velocity is scaled down to simulate friction, and boundary collisions are handled by reversing direction.

Starting from Scratch

In the two years that followed, I gained new skills and changed development environments and programming languages several times. When revisiting the project, I decided to rebuild it from the ground up, this time leveraging TypeScript and a robust Webpack setup for rapid prototyping and efficient, IntelliSense-like-enabled coding.

On revisiting, the artwork felt too artificial. The grid was static, and all the Floaters were uniform in size, lacking variety and vibrancy. The solution was subtle but impactful: instead of fully clearing the canvas on every frame, I chose to overlay it with a semi-transparent rectangle matching the background color. This technique introduced a simple motion blur effect, leaving a faint trail that captured the movement and interactions of the Floaters, bringing the artwork to life.

function draw() {
  fill(255, 20);  // Semi-transparent background for motion blur
  rect(0, 0, width, height);
  for (let floater of floaters) {
    floater.update();
    floater.display();  // Draw each Floater
  }
}

This piece of code illustrates the approach to creating motion blur by using a semi-transparent fill. Each frame, the canvas is slightly overlaid instead of being completely cleared.

Speculative Art: Rethinking Communication

This visual effect led me to think more deeply about the meaning of these connections. Our civilization encodes information in binary—sequences of 0s and 1s that form the foundation of digital communication. But why should all intelligent life follow this convention?

Imagine a civilization that bypasses binary entirely. They might use geometric forms to convey data, relying on shapes, paths, and patterns that can be interpreted optically. Instead of encoding "Hello" as 01101000 01100101 01101100 01101100 01101111, they might use a combination of visual cues—perhaps a spiral shape intersected by lines that change in thickness and direction.

This speculative approach to communication opens up a huge realm of possibilities: messages encoded in the shifting patterns of clouds, the alignment of stars, or even the behavior of subatomic particles. By exploring these alternative paradigms, Extraterrestrial Transmission becomes more than an abstract artwork—it’s a conceptual space where different forms of intelligence could meet and exchange meaning.

Three Layers of Encoding

From this conceptual exploration, the piece evolved into a multi-layered composition, incorporating various algorithmic techniques. The background layer is a dynamic rendering of multi-layered Perlin noise, modulated over time.

function generateBackground() {
  let shapesPerRot = 40;
  let shapeSize = Math.min(width,height )/ shapesPerRow;
  for (let x = 0; x < width; x += 5) {
    for (let y = 0; y < height; y += 5) {
      let noiseVal = noise(x / width, y + frameCount * 0.01 / height + frameCount * 0.01);
      stroke(255,noiseVal * 100);
      ellipse(x, y, shapeSize, shapeSize);
    }
  }
}

The code above generates the background layer using a single Perlin noise, where each circle's alpha-fill is modulated over time, creating a dynamic, moving texture.

The horizontal shapes on the right side emerge from a combination of classic marching squares and a Graham scan algorithm, enhanced by a dynamically generated color palette.

function marchingSquares() {
  let isoPoints = [];
  for (let x = 0; x < width; x += 10) {
    for (let y = 0; y < height; y += 10) {
      let state = calculateState(x, y);
      isoPoints.push(state);
    }
  }
  // Use Graham scan to create convex hull
  let hull = grahamScan(isoPoints);
  fill(color(255, 204, 0, 0.5));
  beginShape();
  for (let p of hull) {
    vertex(p.x, p.y);
  }
  endShape(CLOSE);
}

This code demonstrates a simplified version of the marching squares algorithm combined with a convex hull approach to create low-res fluid, organic shapes.

Final Thoughts

By combining these algorithmic layers and speculative ideas, Extraterrestrial Transmission becomes an exploration of how abstract forms can carry information and how alternative communication systems might evolve. It’s a journey into uncharted territory, where visual art meets the speculative potential of alien languages, pushing the boundaries of what it means to communicate across the cosmos.