Lesson 3 Code to Animate week 8

Lesson 3 Code to Animate week 8

Instructions:  Choose your editor: You may use p5js

1- the full lesson is here : code to animate

2- In another tab, open: tnis-ict8.blogspot.com

3- Copy the code provided and paste it into the : https://editor.p5js.org/

 // Define variables for the airplane's position

let x_plane, y_plane;

// Define variables for clouds' positions

let cloud1_x, cloud1_y, cloud2_x, cloud2_y;

function setup() {

    // Create a canvas and set background color

    createCanvas(800, 400);

    background(100, 200, 250); // Light blue sky

    // Initialize airplane position at the center of the canvas

    x_plane = width / 2;

    y_plane = height / 2;

    // Initialize clouds' positions

    cloud1_x = random(width);

    cloud1_y = 0; // Start at the top

    cloud2_x = random(width);

    cloud2_y = height / 2;

}

function draw() {

    // Clear the canvas and redraw the background

    background(100, 200, 250);

    // Draw clouds

    drawCloud(cloud1_x, cloud1_y);

    drawCloud(cloud2_x, cloud2_y);

    // Update clouds' positions

    cloud1_y += 2; // Move down

    cloud2_y += 1; // Move slower than cloud1

    // Reset cloud positions when they move off the bottom of the canvas

    if (cloud1_y > height) {

        cloud1_y = 0;

        cloud1_x = random(width); // Random horizontal position

    }

    if (cloud2_y > height) {

        cloud2_y = 0;

        cloud2_x = random(width); // Random horizontal position

    }

    // Draw airplane

    drawAirplane(x_plane, y_plane);

}

function drawAirplane(x, y) {

    // Draw the airplane's main body

    fill(150); // Gray

    ellipse(x, y, 100, 30); // Main body

    fill(200); // Light gray

    ellipse(x, y - 10, 40, 20); // Cockpit

    // Draw the front wing

    fill(100); // Darker gray

    triangle(x - 50, y, x - 20, y - 15, x - 20, y + 15);

    // Draw the back wing

    rectMode(CENTER);

    rect(x + 50, y, 20, 10);

    // Add throttle effect

    fill(255, 150, 0, 150); // Orange, semi-transparent

    ellipse(x - 60, y, random(10, 30), random(20, 40));

}

function drawCloud(x, y) {

    // Draw a cloud using overlapping ellipses

    fill(255); // White

    noStroke();

    ellipse(x, y, 50, 30);

    ellipse(x + 20, y + 10, 50, 30);

    ellipse(x - 20, y + 10, 50, 30);

}