Flying High

Animation, functions, image loading and keyboard input

Based on KA-JS Parting Cloud Challenge

ZippyCoder

Setup Project Folder & Library

  • Copy the folder app-template/ into a new folder named flying-high

ZippyCoder

Edit index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Flying High</title>
    <script src="../lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body style="padding: 10px; margin: 10px">
    <h1>Flying High</h1>
    <div id="myContainer"></div>
  </body>
</html>

Put  project name Flying High

in <title> and <h1> HTML tags

Edit sketch.js

Define Global Variables

// -------- Global Variables -------------------------------------------
var leftX = 120;      // cloud moving left
var rightX = 200;     // cloud moving right
var sunRadius;
var img, imgX, imgY;  // image and its X,Y position

function setup() {
    // uncomment this line to make the canvas the full size of the window
    var myCanvas = createCanvas(windowWidth-40, windowHeight-100);
    myCanvas.parent('myContainer');

    noStroke();
    imageMode(CENTER);
    imgX = width/2;     // stage X center
    imgY = height/2;    // stage Y center
    // Sun size relative to stage size
    sunRadius = min(height,width)/5;
}
  • imgX and imgY are assigned inside function setup() because the stage width & height are special Processing variables

sketch.js

p5.js Reference: Environment variables

Preload Image

// -------- Global Variables -------------------------------------------
var leftX = 120;      // cloud moving left
var rightX = 200;     // cloud moving right
var sunRadius;
var img, imgX, imgY;  // image and its X,Y position

function setup() { ... }

function preload () {
    img = loadImage('spaceship.png');
}
  • Right mouse click on the space ship image and "Save image as..."  spaceship.png
  • Move image file to project folder
  • Call loadImage()  inside special function preload()

p5.js Reference: loadImage()

Draw Background

function drawBackground() {
    background(184, 236, 255);  // skyblue
    // Draw field size (width, height/4)
    fill(45, 194, 8);    // green
    rect(0, height*3/4, width, height / 4); 
    // Play instruction
    fill(255,255,0);    // yellow text
    textSize(20);
    text("Move ship with arrow keys", 10, height-12);
}

function draw() {
    drawBackground();
}
  • Define drawBackground() to draw the blue sky, green field, and the play instructions
  • Call drawBackground() in the special function draw()
  • Test run index.html

Draw Sun, Clouds, and Ship

function drawSun(x,y,radius) {
    fill(255, 170,   0);        // orange sun
    ellipse(width/4, height/4, radius, radius);
}

function drawCloud(x,y) {
    fill(255,255,255);       // white
    ellipseMode(CENTER);
    ellipse(x,y,126,97);
    ellipse(x+62, y, 70, 60);
    ellipse(x-62, y, 70, 60);
}

function draw() {
    drawBackground();
    drawCloud(leftX,150);       // left cloud
    drawSun(width/4, height/4, sunRadius);
    image(img, imgX, imgY, 100, 60);   // spaceship
    drawCloud(rightX,80);              // right cloud
}
  • Define drawSun() and drawCloud() 
  • Add the following inside the existing special function draw():
    • Call drawCloud() with leftX and with rightX positions
    • Call drawSun() in between calls to drawCloud()
    • Call image() to display space ship
  • Test run index.html

Move Clouds

function moveClouds() {  // wrap around
    leftX -= 1;
    var margin = 100; // cloud must be completely off stage
    if (leftX < -margin) {       // off the stage on left
        leftX = width+margin;    // start over on the right
    }
    rightX += 1;
    if (rightX > width+margin) { // off the stage on right
        rightX = -margin;        // start over on the left
    }
}

function draw() {
    drawBackground();
    drawCloud(leftX,150);       // left cloud
    drawSun(width/4, height/4, sunRadius);
    image(img, imgX, imgY, 100, 60);   // spaceship
    drawCloud(rightX,80);              // right cloud
    
    moveClouds();
}
  • Define moveClouds() to animate wrap around
  • Call moveClouds() in draw()

Multiple Key Inputs Capture

// -------------- Functions -----------------------------------
// Functions to capture multiple key presses at the same time.
// usage:
//    if (keys[keycode]) {
//        ...
//    }
var keys = [];                  // array of keys pressed

function keyPressed() {
    keys[keyCode] = true;       // set to true when key is pressed
}

function keyReleased() {
    keys[keyCode] = false;      // set to false when key is released
}
  • Define an array keys[], indexed by the special variable keyCode
  • When a key is pressed, special function keyPressed() is called, and keys[keyCode] is set to true
  • When a key is released, special function keyReleased() is called, and keys[keyCode] is set to false
  • Multiple keys may be pressed at the same time, and keys[] for each of the key codes is true

Move Ship by Key Inputs

function moveShip() {
    var speed = 5;
    if (keys[UP_ARROW]) {
        imgY -= speed;
    }
    if (keys[DOWN_ARROW]) {
        imgY += speed;
    }
    if (keys[LEFT_ARROW]) {
        imgX -= speed;
    }
    if (keys[RIGHT_ARROW]) {
        imgX += speed;
    }
}
  • Define function moveShip(), which checks for each of the control keys allowed, and call it inside function draw()
  • UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW are predefined keycodes for the arrow keys
  • Multiple keys can be pressed at the same time to move the ship diagonally (for example, UP_ARROW and RIGHT_ARROW)
function draw() {

    drawBackground();
    drawCloud(leftX,150);       // left cloud
    drawSun(width/4, height/4, sunRadius);
    image(img, imgX, imgY, 100, 60);   // spaceship
    drawCloud(rightX,80);              // right cloud

    moveClouds();

    moveShip();
}

Both functions are in sketch.js

Exercise Name: Flying High P5.js