# The prototype

Extraterrestrial Transmission began as a creative experiment **over two years ago.** On September 1st, I minted this [**p5.js**](https://p5js.org/)-based [artwork on objkt.com](https://objkt.com/tokens/KT1Mwjw57geegP7HAdyFbND6f8z5GxzCfdXa/1), aiming to develop a **self-composing** and **inter-connected** abstract piece.&#x20;

::video[The beginning]{src="ipfs://QmTLt52Q23hNB3au4nKgr2WVhmb6ZubDuaJe7fFsoZvupJ"}

# 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.**

```js
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.

![Rendering over time of the base "Floaters" layer](ipfs://QmZdnFFrvGDAhanzccfQfL348SQ5AwyGyTyJyi7iopS4xR)

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.

```js
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 **0**s and **1**s 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.

![f.l.t.r. Background Layer, Middle Layer, Marching-Squares Layer](ipfs://QmUNKh16gBnFUDUcaZCjBBEcCG3XPMPtFHCVfTdk12VtdT)

```js
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**.

```js
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

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::0x063E3AaFe05Ffc1F87d57ED9fce9bAF15512b91c" data_spec="FX-GEN-DATA-002"}

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.


A quick behind-the-scenes look at the creation process

Creative-Coder - Digital-Artist - Game-Designer
Based in 🇨🇭 - Twitter: @TeNinEightNFTs

Making of Extraterrestrial Transmission

Written by

Editions

Share

Details

stay ahead with our newsletter