//Aurthor: Aaron Wajah

//Date: 

//

​

var boxSz = 100;

var boxSz_i = 1000;

var numSpheres = 16;

let gal_spheres = 2000 * 5;

var a = [];

var b = [];

var c = [];

​

//array for starlike objects in galaxy

var e = [];

var f = [];

var g = [];

var t = 0.0;

​

let moon;

let vid;

let m = 0;

​

let cam = {

  x: 0,

  y: 0,

  z: 0,

  th: 0,

  phi: 0,

  lookAt: {

    x: 100,

    y: 0,

    z: 0,

  },

};

let tex1, tex2, tex3;

​

function preload() {

  tex1 = loadImage("tex1.png");

  tex2 = loadImage("tex2R.jpeg");

  tex3 = loadImage("tex3C.jpg");

  tex_jup = loadImage("jup.jpg");

  tex_star = loadImage("star3.jpg");

  tex_sun = loadImage("sun.jpg");

  smoke = loadImage("star elliipse.jpg");

  earth = loadImage("earth1.png");

  moon_tex = loadImage("moon.png");

  myFont = loadFont("TwilightFont.otf");

  song = loadSound("Interstellar-Theme.mp3");

}

​

//

class generativeArt {

  //class to generate art on canvas

  constructor() {

    this.move_art = -200;

    this.xRot = 0.1; //rotation speed about the x-axis

    this.yRot = 0.1; //rotation speed about the y-axis

    this.drawBox(); //

    this.planets();

    this.numbspheres = 16;

    this.b_size = 300;

  }

​

  drawBox(x, y, z) {

    //function to draw rotating intertwined boxes

    push(); //give the box the below properties till it meets pop

    rotateX(frameCount * this.xRot); //rotate about x-axis

    rotateY(frameCount * this.yRot); //rotate about y-axis

    stroke(0);

    fill(249, 22, 3);

    sphere(2); //draw box

    //second box

    rotateX(frameCount * this.xRot);

    rotateY(frameCount * this.yRot);

    stroke(255, 255, 255);

    fill(249, 249, 3);

    sphere(2);

    pop(); //resets the box properties to its original properties

  }

​

  planets() {

    push();

    pointLight(255, 250, 200, -200, -200, 200);

    for (let x = 0; x < 200; x += 50) {

      this.xRot = 0.01;

      this.yRot = 0.01;

      push();

      noStroke();

      translate(x + 200, 0, x - 500);

      rotateX(frameCount * this.xRot);

      rotateY(frameCount * this.yRot);

      texture(tex1);

      push();

      sphere(50);

      pop();

      pop();

    }

    pop();

  }

​

  moon() {

    push();

    this.xRot = 0.01;

    this.yRot = 0.01;

    texture(tex2);

    noStroke();

    translate(-200, 300);

    rotateX(frameCount * this.xRot);

    rotateY(frameCount * this.yRot);

    sphere(20);

    pop();

  }

​

  gal_plane() {

    push();

    texture(vid);

    translate(0, 900);

    rotateX(HALF_PI);

    noStroke();

    plane(windowWidth, 1000);

    pop();

  }

​

  art() {

    //function to create rotating boxes at different locations on the canvas

    for (let i = 10; i < 1000; i += 50) {

      for (let j = 20; j < 1000; j += 100) {

        push();

        translate(-(j - i), i, i); //translate the box to different positions determined by i and j

        this.drawBox();

        pop();

      }

    }

​

    for (let i = 10; i < 1000; i += 50) {

      for (let j = 20; j < 1000; j += 100) {

        push();

        translate(i, -j + i, i + j); //translate the box to different positions determined by i and j

        this.drawBox();

        pop();

      }

    }

    for (let a = 10; a < 100; a += 10) {

      push();

      translate((m += 0.1), -100); //translate the box to different positions determined by a but moves the boxes down the y axis

      this.drawBox();

      pop();

    }

  }

}

​

function setup() {

  vid = createVideo("spacefloor.mp4");

  vidLoad();

  vid.size(100, 100);

  let cnv = createCanvas(windowWidth, windowHeight, WEBGL);

  //angleMode(DEGREES);

  my_art = new generativeArt();

  song.play();

  song.loop();

  song.setVolume(10);

  userStartAudio();

​

  for (var i = 0; i < numSpheres; i++) {

    a[i] = random(-boxSz, boxSz);

    b[i] = random(-boxSz, boxSz);

    c[i] = random(-boxSz, boxSz);

  }

​

  for (var y = 0; y < gal_spheres; y++) {

    e[y] = random(-boxSz_i, boxSz_i);

    f[y] = random(-boxSz_i, boxSz_i);

    g[y] = random(-boxSz_i, boxSz_i);

  }

​

  mousePrev = {

    x: mouseX,

    y: mouseY,

  };

​

  textFont(myFont);

}

​

function draw() {

  background(0);

​

  push();

  noFill();

  stroke(255);

  strokeWeight(0.1);

  sphere(1000);

  pop();

​

  // Look around controls

  cam.th += (mouseX - mousePrev.x) / 100;

  cam.phi += (mouseY - mousePrev.y) / 100;

​

  // Movement controlss

  if (keyIsDown(87)) {

    cam.x -= 2 * cos(cam.th);

    cam.z += 2 * sin(cam.th);

  }

  if (keyIsDown(83)) {

    cam.x += 2 * cos(cam.th);

    cam.z -= 2 * sin(cam.th);

  }

  if (keyIsDown(68)) {

    cam.x -= 2 * cos(cam.th + PI / 2);

    cam.z += 2 * sin(cam.th + PI / 2);

  }

  if (keyIsDown(65)) {

    cam.x += 2 * cos(cam.th + PI / 2);

    cam.z -= 2 * sin(cam.th + PI / 2);

  }

​

  // Update previous mouse position

  mousePrev.x = mouseX;

  mousePrev.y = mouseY;

​

  // Define the look at vector

  let x = [100, 0, 0];

  let R = math.multiply(Rz(cam.phi), Ry(cam.th));

  x = math.multiply(x, R);

​

  // Update the look-at point

  cam.lookAt = {

    x: cam.x + x._data[0],

    y: cam.y + x._data[1],

    z: cam.z + x._data[2],

  };

​

  // Call the built in p5 function 'camera' to position and orient the camera

  camera(

    cam.x,

    cam.y,

    cam.z, // position

    cam.lookAt.x,

    cam.lookAt.y,

    cam.lookAt.z, // look-at

    0,

    -1,

    0

  ); // up vector

​

  push();

  rotateY(frameCount * 0.01);

  push();

  rotateX(HALF_PI * 2);

  translate(-100, 0, -100);

  text("Use A,S,D,W with Mouse to navigate", 0, 0);

  pop();

  pop();

​

  // Draw a sphere at the look at point

  push();

  translate(cam.lookAt.x, cam.lookAt.y, cam.lookAt.z);

  fill(255);

  noStroke();

  push();

  rotateY(frameCount * 0.01);

  //pointLight(255,255,250,0,30,20)

  texture(earth);

  sphere(10);

  push();

  texture(moon_tex);

  rotateX(frameCount * 0.01);

  //rotateY(frameCount * 0.01);

  translate(20, 0, 0);

  sphere(2);

  pop();

  pop();

  pop();

​

  push();

  push();

  noStroke();

  rotateX(QUARTER_PI);

  rotateX(frameCount * 0.001);

  rotateY(frameCount * 0.001);

  rotateZ(frameCount * 0.001);

  texture(smoke);

  torus(1000);

  pop();

  noStroke();

  rotateY(frameCount * 0.01);

  texture(tex_sun);

  sphere(30);

  pop();

​

  push(); //for moons around jupiter

  for (var i = 0; i < numSpheres; i++) {

    push();

​

    translate(-200, -150);

    push();

    push();

    rotateY(frameCount * 0.01);

    texture(tex_jup);

    noStroke();

    sphere(20);

    pop();

    translate(a[i], b[i], c[i]);

    push();

    texture(tex_star);

    rotateY(frameCount * 0.05);

    noStroke();

    sphere(boxSz / 50);

    pop();

    pop();

    pop();

  }

  pop();

​

  for (var y = 0; y < gal_spheres; y++) {

    push();

    noStroke();

    translate(e[y], f[y], g[y]);

    rotateX(frameCount * 0.01);

    rotateY(frameCount * 0.01);

    rotateZ(frameCount * 0.01);

    noStroke();

    texture(tex_star);

    sphere(1);

​

    pop();

  }

​

  // for (let i = 0; i < 1000; i++) {

  //   let theta = random(180);

  //   let phi = random(360);

  //   let pos = createVector(

  //     3500 * sin(theta),

  //     3500 * sin(theta),

  //     3500 * sin(theta)

  //   );

  // }

​

  my_art.drawBox();

  //my_art.art();

  my_art.planets();

  my_art.moon();

  my_art.gal_plane();

}

​

function vidLoad() {

  vid.loop();

  vid.volume(0);

}

​

function Rz(th) {

  return math.matrix([

    [cos(th), sin(th), 0],

    [-sin(th), cos(th), 0],

    [0, 0, 1],

  ]);

}

​

​

​

// Rotation matrix for rotation about y-axis

function Ry(th) {

  return math.matrix([

    [cos(th), 0, -sin(th)],

    [0, 1, 0],

    [sin(th), 0, cos(th)],

  ]);

}

​

​

//inspiration

​

//from the project created using boxes in 3D.

​

​