Grade 8 - Project term 2

 

Subject	ICT	Grade	8
Assessment Type	Project (Rubric)	Tool	P5JS editor
Teacher:		Total Marks	30
Date given	Week  5	Due Date:	Week  6
Student Name

Note: Students will do their project in the computer lab.

Objective:

Create an airplane using various shapes and variables to position objects to make them move.

Materials:

• Computers with internet access.

• p5.js Web Editor

Steps:

1. Introduction:

• Briefly introduce what your project is about.

2. Materials and Setup:

• Ensure each student has access to a computer with p5.js Web Editor open.

1. Instruction :

1. Open p5js editor    p5.js Web Editor

Change the background colour to light blue with r=100, g=200, b=250

2. Add two ellipses for the body and cockpit of the plane at the center of the canvas.

 Use appropriate colours without a border.

3. move the cockpit of the plane at an appropriate position, reduce the y position by 20 pixels to move it upwards. Use a subtraction operator.

4. Create two variables x_plane and y_plane at the start of the code for x and y locations of the airplane respectively.

Set their initial values as x_plane = width/2  and  y_plane = height/2 

in setup() function

5. Add the front wing by drawing a coloured triangle and rectangle.

Create a throttle effect using the ‘random’ command:

 • random() - This command provides a random number between the input range to the command.

Use rectMode(CENTER) to correctly place the rectangle.

6. Use the same process to add the back wing and use the same process to add the back wing

7. Create variables cloud1_x and cloud1_y for positioning and initialize their initial values in setup().

8. Create a cloud using multiple white coloured ellipses overlapping each other.

The process of incrementing, decrementing works like this.

9.  Move the cloud downwards, its y position needs to be increased. 

As the draw()  function runs repeatedly, we can increment the value in the y_cloud1 variable inside the draw() function.

10. Show the cloud coming in from the upper edge, change the initial value of y_cloud1 = 0 in setup()

When the code runs, we can watch the airplane flying through the sky!

Outstanding 30	Very Good 26	Good 24	Satisfactory 20	Needs Improvement Below 20
All requirements met and exceeded.	All requirements met.	Most requirements met.	Some requirements met.	Few requirements met.

var x_plane;

var y_plane;

var x_cloud1;

var y_cloud1;

var x_cloud2;

var y_cloud2;

function setup() {

  createCanvas(400, 400);

  

  x_plane=width/2;

  y_plane=height/2;

  

  x_cloud1=100;

  y_cloud1=0;

  

  x_cloud2=300;

  y_cloud2=0;

}

function draw() {

  background(100,200,250);

  noStroke();

  

   

  //thrttle

 fill(255,150);

 ellipse(x_plane,y_plane+60,12,random(40,80));

  

  //plane body

  fill(250,250,100);

  ellipse(x_plane,y_plane,25,130);

  

  //plane cockpit

  

  fill(90);

  ellipse(x_plane,y_plane-20,12,40);

  

  

  //cloud2

  

  fill(255);

  ellipse(x_cloud2,y_cloud2,80,40);

  ellipse(x_cloud2,y_cloud2,-10,40);

  ellipse(x_cloud2,y_cloud2,+10,40);

  

  fill(255);

  ellipse(x_cloud1,y_cloud1,120,60);

  ellipse(x_cloud1,y_cloud1,-20,60);

  ellipse(x_cloud1,y_cloud1,+20,60);

  

    //cloud1

   

  y_cloud1 = y_cloud1+1; 

  if(y_cloud1>height)

  {

   y_cloud1=0; 

    x_cloud1=random(width);

  }

  

  y_cloud2 = y_cloud2 + 0.7;

  

if(y_cloud2>height)

  {

   y_cloud2=0; 

    x_cloud2=random(width);

  }

  //plane front wing

  

  fill(250,120,100);

  rectMode(CENTER);

  triangle(x_plane-70 ,y_plane,x_plane+70,y_plane,x_plane,y_plane-30)

  rect(x_plane,y_plane+5,140,11)

  

  //plane back wing 

  triangle(x_plane-20 ,y_plane+60,x_plane+20,y_plane+60,x_plane,y_plane+30)

  

  //plane body

  

 fill(250,250,100);

  ellipse(x_plane,y_plane,25,130)

}