Interactive Art [Week 3] - Interactive & Animated

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

Animation Code:

PShape s;
float Xmove; 
float XLine;

void setup() {
  size(500, 500);
  
  Xmove = 100;
  XLine = 50;

  s = createShape();
  s.beginShape();
  s.fill(144, 144, 144);
  s.noStroke();
  s.vertex(15, -35);
  s.vertex(-20, 80);
  s.vertex(0, 130);
  s.vertex(0, 150);
  s.vertex(-10, 170);
  s.vertex(-10, 210);
  s.vertex(0, 230);
  s.vertex(0, 250);
  s.vertex(-20, 300);
  s.vertex(15, 415);
  s.vertex(50, 415);
  s.vertex(250, 415);
  s.vertex(250, 410);
  s.vertex(50, 410);
  s.vertex(50, 400);
  s.vertex(220, 400);
  s.vertex(220, 395);
  s.vertex(50, 395);
  s.vertex(52, 300);
  s.vertex(60, 280);
  s.vertex(50, 230);
  s.vertex(250, 220);
  s.vertex(300, 215);
  s.vertex(350, 200);
  s.vertex(370, 190);
  s.vertex(350, 180);
  s.vertex(300, 165);
  s.vertex(250, 160);
  s.vertex(50, 160);
  s.vertex(60, 110);
  s.vertex(52, 80);
  s.vertex(50, -15);
  s.vertex(220, -15);
  s.vertex(220, -20);
  s.vertex(50, -20);
  s.vertex(50, -30);
  s.vertex(250, -30);
  s.vertex(250, -35);
  s.vertex(50, -35);
  s.endShape(CLOSE);
}

void draw() {
  background(70,100,80);
  
  stroke(255,255,255);
  line(0, 60, XLine, 60);
  stroke(255,255,255);
  line(0, 85, XLine, 85);
  
  stroke(255,255,255);
  line(0, 235, XLine, 235);
  stroke(255,255,255);
  line(0, 260, XLine, 260);
  
  
  stroke(255,255,255);
  line(0, 410, XLine, 410);
  stroke(255,255,255);
  line(0, 435, XLine, 435);

  ship1();
  ship2();
  ship3();
  
    if (Xmove<=2000){
       Xmove = Xmove + 10;
       XLine = Xmove/4;
    }else{Xmove = 100;}
}

void ship1() {
  scale(.25);
  shape(s, Xmove, 100);
}
void ship2() {
  shape(s, Xmove, 800);
}
void ship3() {
  shape(s, Xmove, 1500);
}

Interactive Code:

int StarAmount = 10;

PShape s;
PShape h;
int SpaceshipY = 2000;
float LineY = 510;

 void setup(){
  size(360, 540);
  
  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);
  noFill();
  stroke(144,144,144);
  strokeWeight(5);
  circle(180,120,150);
  
  stroke(255,255,255);
  line(180, LineY, 180, 1500);
  
  ship();
  stars();
  station();
  
  if(keyPressed==true){ 
    if (SpaceshipY>500){
      SpaceshipY = SpaceshipY -5;
    }else{SpaceshipY=2000;}
    
    if (LineY>=150){
      LineY = LineY - 1.2;
    }else{LineY=510;}
  }
}

 void station(){
  
//12" Square
    rotate(0);
    
    fill(144,144,144);
    noStroke();
    rect(175, 25, 10, 100);
    
    
    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);
    
//6" Square
    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);

//1" Square 
    rotate (radians(30));
    fill(144,144,144);
    noStroke();
    rect(205, -80, 20, 30);
    
//7" Square 
    fill(144,144,144);
    noStroke();
    rect(205, 80, 20, 30);
  
//2" Square 
    rotate (radians(30));
    fill(144,144,144);
    noStroke();
    rect(185, -192, 20, 30);
    
//8" Square
    fill(144,144,144);
    noStroke();
    rect(185, -30, 20, 30);
  
//3" Square 
    rotate (radians(30));
    fill(144,144,144);
    noStroke();
    rect(110, -275, 20, 30);
    
//9" Square
    fill(144,144,144);
    noStroke();
    rect(110, -115, 20, 30);
  
//4" Square 
    rotate (radians(30));
    fill(144,144,144);
    noStroke();
    rect(5, -312, 20, 30);
    
//10" Square 
    fill(144,144,144);
    noStroke();
    rect(5, -150, 20, 30);

 //5" Square 
    rotate (radians(30));
    fill(144,144,144);
    noStroke();
    rect(-105, -290, 20, 30);  

 //11" Square 
    fill(144,144,144);
    noStroke();
    rect(-105, -130, 20, 30);  
}

 void ship(){
  pushMatrix();
    scale(.25);
    shape(s, 695, SpaceshipY);
  popMatrix();
  
}

 void stars(){
  pushMatrix();
  scale(.5);
  for (int i = 0; i < StarAmount; i++){  
    float xpos = random(0, width*2); 
    float ypos = random(0, height*2);   
    stroke(255,255,255);
    point(xpos,ypos);
  }
  shape(h, 335, 210);
  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 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

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