Assignment 3: Spaceship

Concept:

At first, I wanted to try to make a race track and multiple race cars running on the track by making boundaries for them so they will never work backward. Then I faced the difficulty of how to make the car title sideways in the bird’s eye view since it’s seen in a birds-eye view. Then I faced the difficulty of making the cars stuck within the boundaries of the race track. So I gave up on that Idea instead I wanted to make spaceships that would move elegantly in the space while the player is controlling one of them.

Code:

let first;
let arr = [];
let numofspaceships = 5;
let player;


function preload() {
  img = loadImage('215c7fdca6033092baa04b35c17466bd.gif');
}

function setup() {
  createCanvas(600, 400);
  first = new Spaceshuttle();
  
  player = new playerShuttle();
  
  for(let i = 0; i < numofspaceships;i++){
    arr[i] = new Spaceshuttle(); 
  }
  
}


function draw() {
  background(220);
  image(img, 0, 0);
  
  
  first.display();
  player.display();
  
  for(let i = 0; i < numofspaceships;i++){
    arr[i].display();
  }
  
  
  
  
  
  
  
}


class Spaceshuttle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    // this.diameter = random(10, 30);
    this.speed = 10;
    this.redd = random(255);
    this.greenn = random(255);
    this.bluee= random(255);
    this.randomx = random(100);
    this.randomy = random(100);
  }

  move() {
    this.x =  map(noise(this.randomx),0,1,0,width+150);
    this.y =  map(noise(this.randomy),0,1,0,height+150);
    this.randomx += 0.005;
    this.randomy += 0.005;
  }

  display() {
    noStroke();
    fill(0);
    strokeWeight(2);
    stroke(51);
    line(this.x+10,this.y,this.x+20,this.y+15);
    line(this.x-10,this.y,this.x-20,this.y+15);
    stroke(0);
    fill(this.redd,this.greenn,this.bluee);
    ellipse(this.x, this.y, 80, 25);
    fill(0,179,255);
    arc(this.x, this.y, 40, 40, PI, 2*PI , CHORD);
    this.move();
  }
}

class playerShuttle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    // this.diameter = random(10, 30);
    this.speed = 10;
    this.redd = random(255);
    this.greenn = random(255);
    this.bluee= random(255);
    this.speedx = 0;
    this.speedy = 0;
  }

  move() {
    let rate = 0.1;
    let maxspeed = 3;
    if(keyIsPressed){
      if(keyCode == LEFT_ARROW){
        this.speedx -= rate;
      }else if(keyCode == RIGHT_ARROW){
        this.speedx += rate;
      }
      if(keyCode == UP_ARROW){
        this.speedy -= rate;
      }else if(keyCode == DOWN_ARROW){
        this.speedy += rate;
      }
      
    }else{
      if(this.speedx != 0){
        if(this.speedx > 0){
          this.speedx -= rate * 2;
        }else{
          this.speedx += rate * 2;
        }
      }
      if(this.speedy != 0){
        if(this.speedy > 0){
          this.speedy -= rate * 2;
      }else{
          this.speedy += rate * 2;
        }
      }
    }
    
    if(this.speedx>maxspeed){
      this.speedx = maxspeed;
    }
    
    if(this.speedy>maxspeed){
      this.speedy = maxspeed;
    }
    
    this.x += this.speedx;
    this.y += this.speedy;
  }

  display() {
    noFill();
    strokeWeight(2);
    stroke(250);
    ellipse(this.x, this.y, 80, 80);
    
    noStroke();
    fill(0);
    strokeWeight(2);
    stroke(51);
    line(this.x+10,this.y,this.x+20,this.y+15);
    line(this.x-10,this.y,this.x-20,this.y+15);
    stroke(0);
    fill(this.redd,this.greenn,this.bluee);
    ellipse(this.x, this.y, 80, 25);
    fill(0,179,255);
    arc(this.x, this.y, 40, 40, PI, 2*PI , CHORD);
    
    if(this.x > width+2){
      this.x = 0;
    }else if(this.x <= 0){
      this.x = width;
    }
    
    if(this.y > height+2){
      this.y = 0;
    }else if(this.y <= 0){
      this.y = height;
    }
    
    
    this.move();
  }
}

I think one part, in particular, in the code which took some time online to understand which is figuring out Perlin noise and how can I use it to power the computer spaceships. At first, it was outputting the same value and the spaceships were kind of moving diagonally. Then I figured out that the value inside of “noise()” needs to be changed every time so that it can come up with a new different value. And to fix the diagonal thing just increment the x movement by a number different from the y movement.

Moreover, moving the player’s spaceship with the arrows was also pretty difficult. I tried to use the basic libraries but I think they were not enough so I watched a video that explains how it should be done.

Also making the classes themselves and understanding how the classes work was very interesting. As I at the beginning didn’t understand what does the term “this” mean. But sooner I learned about it and realized the potential in classes. Manipulating the array to make objects of spaceship class was a challenge as well.

The Sketch:

Reflections:

Regarding my piece, I’m not really sure of my feelings. I put a lot of effort into it, but I was unable to achieve the degree of originality I had in mind. On the plus side, I think I’ve picked up a lot of knowledge, and I still have a lot to learn. I would improve the piece by making it more intricate, complicated, and possibly animated.