Flying High

Animation, functions, and keyboard input

ZippyCoder

Starting Point

// Initialize variables
noStroke();
var leftX = 120;   // position of cloud moving left
var rightX = 200;  // position of cloud moving right
var sunRadius = 100;

Start from KA-JS  Parting Cloud Challenge

var cloud = function(x,y) { 
    ellipseMode(CENTER);
    fill(255, 255, 255);
    ellipse(x,y,126,97);
    ellipse(x+62, y, 70, 60);
    ellipse(x-62, y, 70, 60);
};

var sun = function (radius) {
    fill(255, 170, 0);                  // orange
    ellipse(200, 100, radius, radius);  // circle
};

Initialize variables

Define function to draw cloud at (x,y)

Define function to draw sun with (radius)

Animation with function draw() 

var draw = function() {
    background(184, 236, 255); // blue sky
    cloud(leftX,150);          // left cloud
    sun(sunRadius);         
    cloud(rightX,70);          // right cloud
};

Define special function draw, inside it:

  • Set background color to blue sky 
  • call functions to draw the sun between the two clouds

Why are the clouds not moving?

Because the positions for the clouds are unchanged inside the draw function

Move Clouds

var moveClouds = function () {  // wrap around
    leftX -= 1;
    if (leftX < 0) {
        leftX = 900;
    }
    rightX += 1;
    if (rightX > 900) {
        rightX = 0;
    }
};

var draw = function() {
    background(184, 236, 255); // blue sky
    cloud(leftX,150);          // left cloud
    sun(sunRadius);         
    cloud(rightX,70);          // right cloud

};

Define function moveClouds to animate and wrap around, changing positions leftX and rightX each time it's called

Add a call to moveClouds() inside function draw()

var draw = function() {
    background(184, 236, 255); // blue sky
    cloud(leftX,150);          // left cloud
    sun(sunRadius);         
    cloud(rightX,70);          // right cloud
    moveClouds();
};

Add Image

var personX = width/2;
var personY = height/2;
var person = getImage("space/octopus");

Add a call to the Processing library function image() in function draw to display image

// Initialize variables
noStroke();
var leftX = 120;   // position of cloud moving left
var rightX = 200;  // position of cloud moving right
var sunRadius = 100;

In the initialize variables section, 

add variables for image and X,Y positions 

var draw = function() {
    background(184, 236, 255); // blue sky
    cloud(leftX,150);          // left cloud
    sun(sunRadius); 
        
    cloud(rightX,70);          // right cloud
    moveClouds();
};
    sun(sunRadius);
    image(person, personX, personY, 140, 140);
    cloud(rightX,70);
    moveClouds();
};

Keyboard Control

var keyPressed = function() {
    var speed = 10;
    if (keyCode === UP) {
        personY -= speed;
    } else if (keyCode === DOWN) {
        personY += speed;
    } else if (keyCode === LEFT) {
        personX -= speed;
    } else if (keyCode === RIGHT) {
        personX += speed;   
    }
};
  • Define special Processing function keyPressed() to be called when a key is pressed
  • Use arrow keys to move the image

Add Text Display

var textDisplay = function () {
    // green background
    fill(45, 194, 8);       
    rect(0,350, width, 50);
    // white text
    fill(255,255,255);
    textSize(20);
    text("Move ship with arrow keys", 10, height-12);
};

Define function textDisplay for the instruction text

var draw = function() {
    background(184, 236, 255); // blue sky
    cloud(leftX,150);          // left cloud
    sun(sunRadius);         
    image(person, personX, personY, 140, 140);
    cloud(rightX,70);          // right cloud
    moveClouds();

};

Add call to textDisplay() inside function draw

    textDisplay();
};

Exercise Name: Flying High

Flying High

By Tâm Nguyen

Made with Slides.com

Flying High

  • 151

More from Tâm Nguyen