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 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;   ...
Leer más

Interactive Art [Week 4] - Math Flower

Imagen
Week 4 - Nature patterns  For this project I took inspiration from the mathematical distribution of certain flowers and look up to a formula that changes the petals pattern according to a variable, in the first example the variable changes according to the value given from the slider and in the second example the value is a random number between the value of the slider as the minimum and 15 as maximum File:  https://drive.google.com/file/d/12Kg3kC0S6QafEL4nRxh6j-fDJATS661D/view?usp=sharing
Leer más

Interactive Art [Week 3] - Interactive & Animated

Imagen
Week 3 - Animation & Interactiveness  For this week assignments I changed one or two things: For the animation scene, I was inspired by Starwars spaceships (as I said last week, I love space) and for the appearance  of movement, I make the ships  leave a trail behind themselves For the interactive assignment, I made the spaceship from the first movie respond to a keypress and changed a  little bit the background composition  making it look like it is moving. .zip File: https://drive.google.com/file/d/1dzw0pEUZ7o09x_h9vCtL2ZUSRR33AwI-/view?usp=sharing
Leer más