Interactive Art [Week 2] - Interstellar

Week 2

September 11, 2019

Interestellar


Since I was a kid, I always liked space themed movies, Doesn't matter if it was from video games or books I always got amazed for the vast unknown. I like to pay an Homage to this movie mainly because it's one of the most accurate space depictions of astrophysical phenomena and the amazing score.
_________________________________________________________________________________

Image

_________________________________________________________________________________

Code

The first part of the code was making the cosmic backgroung, avoiding loosing time, I used a randomizer to put little dots in diferent positions to resemble the cosmic void.

Then, using the vertex shape, created the main ship and the center of the docking station.

For last but not least, I repeated the code of square for the docking station components except for the inner circle, this part was a litte bit difficult because I didn't know how "rotation();"  works and that it turns the full working "grid" and not just the shape. So I had to use the push-pop Matrix to define which shapes got to be rotated. 

The orientation of the canvas is vertical to use the image for a phone wallpapper. 
-------------------------------------------------------------------------------------------------------------------------- 
int amount = 1000; //Total amount of stars
PShape s;
PShape h;

 void setup() {
  size(360, 540); //Size of the canvas
  
//DEFINING POINTS FOR SPEACESHIP FORM
  s = createShape();
  s.beginShape();
  s.fill(144, 144, 144);
  s.noStroke();
  s.vertex(0, 0);
  s.vertex(-20, 80);
  s.vertex(0, 130);
  s.vertex(50, 130);
  s.vertex(70, 80);
  s.vertex(50, 0);
  s.endShape(CLOSE);
  
  h = createShape();
  h.beginShape();
  h.fill(144);
  h.noStroke();
  h.vertex(10, 0);
  h.vertex(-5, 25);
  h.vertex(10, 50);
  h.vertex(40, 50);
  h.vertex(55, 25);
  h.vertex(40, 0);
  h.endShape(CLOSE);
}

 void draw() {
  background(19,33,44); //Color of the background

   stroke(255,255,255);
  line(180,400,180,540);
  
  //stroke(255,255,255);
  //line(0,270,460,270);

   
  
//THIS PART RANDOMIZE THE POSITION OF THE STARS TO NOT HAVE TO DRAW INDIVIDUALY  
  for (int i = 0; i < amount; i++){  
    float xpos = random(0, width); 
    float ypos = random(0, height);   
    stroke(255,255,255);
    point(xpos,ypos);
  }
  
  pushMatrix();
    scale(.5);
    shape(h, 335, 205);
  popMatrix();
  
  pushMatrix();
  scale(.25);
  shape(s, 695, 1500); //CREATING SPACESHIP
  popMatrix();
  
  noLoop();//run draw() just once
    
// THIS SQUARES ARE THE MAIN SHIP
  //translate(width/2, height/2);
  
  rotate(0);
  fill(144);
  noStroke();
  rect(175, 55, 10, 60);

   
//12" Square
  pushMatrix();
    rotate(0);
    fill(144,144,144);
    noStroke();
    rect(170, 25, 20, 30);
  
    fill(125,125,125);
    noStroke();
    rect(173, 28, 6, 17);
  
    fill(125,125,125);
    noStroke();
    rect(182, 28, 6, 17);

//1" Square 
  pushMatrix();
    rotate (radians(30));
    fill(144,144,144);
    noStroke();
    rect(205, -80, 20, 30);
  popMatrix();
  
//2" Square 
  pushMatrix();
    rotate (radians(65));
    fill(144,144,144);
    noStroke();
    rect(170, -207, 20, 30);
  popMatrix();
  
//3"Square 
  pushMatrix();
    rotate (radians(90));
    fill(144,144,144);
    noStroke();
    rect(110, -275, 20, 30);
  popMatrix();
  
//4" Square 
  pushMatrix();
    rotate (radians(120));
    fill(144,144,144);
    noStroke();
    rect(5, -312, 20, 30);
  popMatrix();

 //5" Square 
  pushMatrix();
    rotate (radians(150));
    fill(144,144,144);
    noStroke();
    rect(-105, -290, 20, 30);
  popMatrix();
  
//6" Square
  pushMatrix();
    rotate(0);
    fill(144,144,144);
    noStroke();
    rect(170, 183, 20, 30);
  
    fill(125,125,125);
    noStroke();
    rect(173, 195, 6, 17);
  
    fill(125,125,125);
    noStroke();
    rect(182, 195, 6, 17);
  popMatrix();
  
//7" Square 
  pushMatrix();
    rotate (radians(210));
    fill(144,144,144);
    noStroke();
    rect(-230, -108, 20, 30);
  popMatrix();

 //8" Square 
  pushMatrix();
    rotate (radians(240));
    fill(144,144,144);
    noStroke();
    rect(-205, -0, 20, 30);
  popMatrix();
  
//9"Square 
  pushMatrix();
    rotate (radians(90));
    fill(144,144,144);
    noStroke();
    rect(110, -115, 20, 30);
  popMatrix();
  
  
//10" Square 
  pushMatrix();
    rotate (radians(120));
    fill(144,144,144);
    noStroke();
    rect(0, -150, 20, 30);
  popMatrix();

 //11" Square 
  pushMatrix();
    rotate (radians(150));
    fill(144,144,144);
    noStroke();
    rect(-107, -127, 20, 30);
  popMatrix();
  
  
//SHIP WINDOW
  pushMatrix();
    fill(245);
    noStroke();
    rect(175, 380, 10, 5);
  popMatrix();
  
  
//INNER CIRCLE
  pushMatrix();
    noFill();
    stroke(144,144,144);
    strokeWeight(5);
    circle(180,120,150);
  popMatrix();

 }
____________________________________________________________________________________________________

Comentarios

Publicar un comentario

Entradas más populares de este blog

Interactive Art [Week 5] - Arrays

Imagen
Week 5 - Arrays For this project I wanted to create a random selector of the main characteristics of the ball, size, color, and "bounciness" that are pre-stored in the corresponding array.  I also wanted to use an array that "creates" more balls but I couldn't do it :( so it's only an infinite array that creates balls of the same characteristics but they can't move. File:  https://drive.google.com/file/d/1GI8IdBBBGiUr35MZD994n0Tv36Veu3gi/view?usp=sharing
Leer más

Interactive Art [Week 11] - Installation

Imagen
Installation First attempt for game: The problem with this approach was that the rotation for the car stayed at the center of the canvas but the car changes it's relative position to the center so the further the car is, the movements become unrealistic. The second approach to the game was to do a "lane changer" so the potentiometer controls the X position while the buttons controls the Y position. In this example the buttons functions as gas and brake pedals and the potentiometer as a steering wheel.
Leer más

Interactive Art [Week 8] - Interactive Button

Imagen
Homework Code import processing.serial.*; Serial Port; int val; int TurnNum; int Boom; PImage img1; PImage img2; PImage img3; void setup()  { size(1000, 1000); printArray(Serial.list()); Port = new Serial(this, Serial.list()[1], 9600); TurnNum = 0; Boom  = (int) random(150); img1 = loadImage("1.png"); img2 = loadImage("2.png"); img3 = loadImage("3.png"); } void draw() {   //background(0);      if ( Port.available() > 0) {      val = Port.read();          println("Button Pressed: " + val);     println("Turn Num: " + TurnNum);     println("Boom: " + Boom);          if (TurnNum > Boom){       image(img3,0,0);     }   }      if (val == 0){     fill(0);   }else{     TurnNum = TurnNum + 1;          if (TurnNum >= 0 && TurnNum <=9){       image(img1,0,0);     }          if (TurnNum >= 10 &
Leer más