# Figuring Out the Visuals: The Wormhole

March 16, 2018

When I think about the "extra-dimensional", I picture breaking through dimensional barriers, passing through portals, or some kind of swirling wormhole floating in midair.

I even found this really awesome looking portal effect by VFX Artist Orion Terry. I highly doubt I can code anything that looks remotely as cool as this though:

// Note to Self: Maybe I can start every first touch as a portal opening from the middle.

Okay, baby steps...

First I needed to code a simple spiral, no biggie. I followed a tutorial I found on Lynda.com (Thank goodness for CityU) and added a few alterations to the code...

// Based on tutorial from... Lynda.com - Processing: interactive Data Visualisation - Creating spirals

(https://www.lynda.com/Processing-tutorials/Creating-spirals/97578/113188-4.html)

float x, y;
float rotation = 0;

void setup() {
size(300, 600);
smooth();
}

void draw() {
translate(width/2, height/2);
rotation -= 0.35;
// Rotate to "fake" the spiral animation
rotate(rotation);
background(0);

// Draw spiral line. Create a variable for the previous version of the x and y vals to connect new and old.

float px = -999;
// Prev. val of x
float py = -999;
// Prev. val of y

strokeWeight(4);            // Smaller weight, thinner and smoother

for (float angle = 0; angle < 200; angle += 0.025) {

// Smaller increments

if (px > -999) {          // Ignore first loop because no prev. val.
float alphangle = map(angle, 0, 200, 70, 0);

// Creates dark effect on the rim of spiral

stroke(100, 199, 255, alphangle);
line(-x, -y, -px, -py);
}

px = x;
py = y;
}
}

...which returned this:

Not as impressive as Terry's animation, but it's a start. I'll explore other visualisation methods.

Update: While editing this post, I realised my phone lock screen's animation looked cool. Maybe I could use this.

[Insert video of my phone screen's unlocking animation]

###### Featured Posts

Building the Set-up

April 30, 2018

1/7