Space Train

let f = 0;

let chosenCol;

let pallete = [];

​

// Define array of color palettes

pallete = [

  ["#323232", "#323232", "#969696", "#B4B4B4", "#C8C8C8", "#C14D32"],

  ["#000000", "#000000", "#DFF5FF", "#DFE2FF", "#0029D3", "#0029D3"],

  ["#323232", "#323232", "#8C7DB6", "#12B77B", "#4674B7", "#8C7DB6"],

  ["#323232", "#323232", "#F8F8F8", "#B69D73", "#F8F8F8", "#B69D73"],

  ["#171717", "#171717", "#FFFFFF", "#EDEDED", "#444444", "#C82A3D"],

  ["#19150C", "#19150C", "#5E94C3", "#EEEBE4", "#EEEBE4", "#F46559"],

  ["#0C0821", "#0C0821", "#095B4F", "#F4A0B0", "#E7E8E0", "#F63B32"],

  ["#19150C", "#0035C2", "#ffffff", "#0071FE", "#0071FE", "#FF4A13"],

  ["#000000", "#77552F", "#182280", "#E0D6CC", "#E0D6CC", "#77552F"],

  ["#2E2E2E", "#2E2E2E", "#767DBE", "#C6A841", "#9EBBAD", "#EB7A52"],

  ["#1D1C1C", "#1D1C1C", "#B98CF1", "#828163", "#E2E0E1", "#B98CF1"],

  ["#0F1E19", "#0F1E19", "#E0D6AA", "#E4AC44", "#356F53", "#D26241"],

  ["#070002", "#070002", "#E8E3CC", "#B0BEB9", "#5F6D5D", "#CA4E33"],

  ["#141F22", "#141F22", "#D6D2C1", "#E6E6E6", "#A2B8BB", "#DEF44F"],

  ["#090909", "#313C3C", "#F2ECE6", "#C1B197", "#8EA182", "#A5B1C5"],

];

​

function setup() {

  // randomize pallet

  var chosenPall = int(get_random(0, 15));

  console.log("selected pallete: " + chosenPall);

​

  // set background color

  background(pallete[chosenPall][0]);

  // set HTML body background color

  changeBackground(pallete[chosenPall][0]);

​

  // create canvas

  size = min(windowWidth, windowHeight);

  createCanvas(size, size, WEBGL);

​

  // random camera position

  camera(

    get_random(-1.5, -.1) * size,

    get_random(-1.5, -.1) * size,

    get_random(-1.5, -.1) * size,

    0,

    0,

    0,

    0,

    1,

    0

  );

​

  noStroke();

​

  // 3d grid of cubes

  for (let y = -200; y < 200; y += 70) {

    for (let x = -200; x < 200; x += 73) {

      for (let z = -255; z < 0; z += 2) {

        // random chance of cube

        let showCube = get_random(0, 1);

​

        // if random chance is high enough, draw cube

        if (showCube > 0.85) {

          push();

          let Y = y + (f % 70);

          translate(x, Y, (z / x) * Y);

          let r = get_random(0.1, 1.5);

          r = r * 100;

​

          // random color from pallet

          chosenCol = int(get_random(1, 6));

          fill(pallete[chosenPall][chosenCol]);

          // draw cube

          box(r, random(1, r));

​

          push();

          // random color from pallet

          stroke(pallete[chosenPall][5]);

          // draw line to next cube

          if (x + 73 < 200) {

            drawLine(x, y, z, x + get_random(0.1,1)*73, y, z);

          }

          if (y + 70 < 200) {

            drawLine(x, y, z, x, y + get_random(0.1,1)*73, z);

          }

          if (z + 2 < 0) {

            drawLine(x, y, z, x, y, z + 2);

          }

          pop();

​

          // print text in 3d space

          printText(y, x, y, z);

​

          pop();

​

​

        }

      }

​

      // draw stars in background

      for (let i = 0; i < 5; i++) {

      push();

      fill(pallete[chosenPall][int(get_random(4, 6))]);

      drawStarsBGD();

      pop();

      }

​

      // draw stars in center

      for (let i = 0; i < 5; i++) {

        push();

        stroke(pallete[chosenPall][int(get_random(4, 6))]);

        drawStars();

        pop();

      }

​

    }

  }

​

  //connectCenters();

}

​

// set background color to HTML body

function changeBackground(color) {

  document.body.style.backgroundColor = color;

}

​

// print a text in 3d

function printText(textB, x, y, z) {

  push();

  translate(x, y, z);

  rotateX(PI / -2);

  //rotateZ(PI / 2);

  //textFont(fontRegular);

  textSize(size / 100);

​

  fill(255);

​

  text(textB, 0, 0);

  pop();

}

​

function drawLine(x1, y1, z1, x2, y2, z2) {

  //stroke(255); // set stroke color to white

  line(x1, y1, z1, x2, y2, z2); // draw line between two points

  noStroke(); // disable stroke

}

​

​

// make a function to draw a small stars in 3d space with random size and flow

function drawStars() {

  push();

  translate(

    get_random(-200, 200),

    get_random(-200, 200),

    get_random(-255, 0)

  );

  let r = get_random(0.1, 1.5);

  r = r * 3;

  //fill(255);

  sphere(r);

  pop();

}

​

function drawStarsBGD() {

  for (let i = 0; i < 100; i++) {

    let x = random(-size, size);

    let y = random(-size, size);

    let z = random(-size, size);

    let p = map(z, -size, size, 1, 0);

    let sx = map(x / z, 0, 1, 0, size);

    let sy = map(y / z, 0, 1, 0, size);

    let r = map(z, -size, size, 2, 2);

    noStroke();

    //fill(get_random(0.8, 1) * 255);

    ellipse(sx, sy, r, r);

  }

}

​

function draw() {}

​

// **************************

// *       Save png         *

// **************************

​

function keyTyped() {

  if (key == "s" || key == "S") save("Title" + int(random(0, 1000)) + ".png");

}

​

// **************************

// *        Random          *

// **************************

​

function get_random(min, max) {

  return min + fxrand() * (max - min);

}

​