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 radiusCircle = 100;
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
  
  float radiusSpiralLine = 0.5;
  strokeWeight(4);            // Smaller weight, thinner and smoother

 

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

                              // Smaller increments

    radiusSpiralLine += 0.025;
    x = cos(angle) * radiusSpiralLine;
    y = sin(angle) * radiusSpiralLine;

 

    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]

 

Please reload

Featured Posts

Building the Set-up

April 30, 2018

1/7
Please reload

Recent Posts

April 30, 2018

April 14, 2018

March 27, 2018

Please reload

Russell Dela Bueno Balad | russellbalad@gmail.com | Hong Kong

  • Instagram - White Circle
  • SoundCloud - White Circle
  • Vimeo - White Circle
  • LinkedIn - White Circle