Generative Artwork Bifrost

Concept and Inspiration

In this assignment we had to create a generative artwork using Object-Oriented Programming elements such as arrays and objects. In this project I tried to recreate the mythological rainbow bridge Bifrost.  In Norse mythology, the Bifröst (also known as the Bifrost Bridge or the Rainbow Bridge) is a bridge that connects the realm of the gods Asgard to the mortal world Midgard. The Bifröst is depicted as a rainbow bridge that shimmers and changes colors. The concept of the Bifröst has been influential in works of fiction, inspiring elements of magic and fantasy in various forms of media. I tried to create an immersive experience of traveling using this Bifröst bridge, and tried to depict how it would look like from inside.

Draft 1

First I created a white stars on black background with an immersive movement. After testing out various angles and parameters for speed and size I integrated rainbow background change and increased the speed.

Final Version

In this assignment I paid extra attention to the structure, clarity, and organization of my program. I made use of functions as needed to organize structure of my program and tried to assign meaningful names for variables.

Code of Project

var star = []; // array to store all the stars
var numOfStars = 200; // number of stars to be displayed
var speed = 8; // speed at which stars move
var backgroundHue = 0; // hue value for the background color

// the setup function is called once when the program starts
function setup() {
  createCanvas(600, 400); 
  for (var i = 0; i < numOfStars; i++) {
    star[i] = new Star(); // creates new instances of the Star object and adds them to the star array
  }
}

// the draw function is called repeatedly until the program is stopped
function draw() {
  backgroundHue = (backgroundHue + 1) % 360; // updates the hue value for the background color
  colorMode(HSB); 
  background(backgroundHue, 100, 100); 
  for (var i = 0; i < numOfStars; i++) {
    star[i].update(); // updates the position of each star
    star[i].show(); // displays each star
  }
}

// the Star object constructor
function Star() {
  this.x = random(0, width); 
  this.y = random(0, height); 
  this.z = random(0, width); // z-coordinate for the star (used for the 3D effect)
  this.h = random(0, 360); // hue value for the star color

  // updates the position of the star
  this.update = function () {
    this.z = this.z - speed; // reduces the z-coordinate to move the star towards the viewer
    if (this.z < 1) {
      this.z = width; // if the star goes off the screen, it reappears at the back
      this.x = random(0, width); // new x-coordinate
      this.y = random(0, height); // new y-coordinate
      this.h = random(0, 360); // new hue value
    }
  };

  // displays the star
  this.show = function () {
    noStroke(); // removes the stroke around the star
    colorMode(HSB); 
    fill(this.h, 100, 100); 

    // calculates the x-coordinate and y-coordinate of the star on the screen
    var sx = map(this.x / this.z, 0, 1, 0, width);
    var sy = map(this.y / this.z, 0, 1, 0, height);

    // calculates the size of the star based on its z-coordinate
    var r = map(this.z, 0, width, 32, 0);
    ellipse(sx, sy, r, r); // draws the star as an ellipse
  };
}

Challenges and Improvements

Creating a believable rainbow effect for the stars and the background can be challenging. It requires careful use of color gradients and blending modes to produce the desired visual effect. Another improvement can be made to star movement. Implementing realistic star movement can be difficult, especially when it comes to creating a 3D illusion on a 2D canvas. It’s important to carefully consider the equations used to move the stars, as well as the way they are drawn on the canvas