Animation is a method in which a collection of images is combined in a specific way and processed then they appear as moving images. Building animations make on-screen objects seem to be alive.
In this article, we will learn to make a simple animation of the house in p5.js by using lines, rectangles and ellipses for making the parts of the house.
Approach:
- Make a list to store all the vertices of the house.
- Declare two variable iter and counter.
- Set the function setup() in which the size,colour and background of output window ,initiate the value of iter and counter as 1 and initialise the list of vertices.
- Set the function draw in which add stroke, Â stroke weight.
- Make a if condition to check iter within bound if yes increase the counter by 0.05 and take the ceil value of counter as iter , if no exit from the loo.
- Function to add vertices of house giving start and end point of line as addVertices().
- Now make functions to draw the parts of house:
- Make Function to draw vertical and horizontal  lines in house.
- Make Function to draw  square window
- Make Function to draw gate.
- Make Function to draw circular window.
- Make Function to draw chimney.
- After all this step now create a switch case to add all the parts of house step by step.
Below is the implementation of the above approach:
Javascript
// List to store all the verticeslet vertices = [];Â
// Variable declaredvar iter;var counter;Â
// Function to set up output windowfunction setup() {Â
    // Size of output window    createCanvas(600, 600);Â
    // Fill the color    fill(31);Â
    // Background of output window    background(31);Â
    // Put the value of variables as 1    iter = 1;    counter = 1;Â
    // Initialize the list of vertices    addVertices();}Â
// Set the draw functionfunction draw() {Â
    stroke(255);    strokeWeight(4);    step();Â
    // Condition to check within bound    if (iter < 11) {Â
        // Increase counter everytime        counter += 0.05;Â
        // Set the iter variable to the        // floor value of counter        iter = floor(counter);    }    else {Â
        // If iter increases by 11 then        // stop the loop        noLoop();    }}Â
// Function to add vertices of house giving// start and end point of linefunction addVertices() {Â Â Â Â vertices.push(new p5.Vector(100, 300));Â Â Â Â vertices.push(new p5.Vector(340, 300));Â Â Â Â vertices.push(new p5.Vector(40, 380));Â Â Â Â vertices.push(new p5.Vector(160, 380));Â Â Â Â vertices.push(new p5.Vector(400, 380));Â Â Â Â vertices.push(new p5.Vector(40, 550));Â Â Â Â vertices.push(new p5.Vector(160, 550));Â Â Â Â vertices.push(new p5.Vector(400, 550));}Â
// Function to draw lines in housefunction drawLine(a, b) {Â Â Â Â line(vertices[a].x, vertices[a].y, Â Â Â Â Â Â Â Â vertices[b].x, vertices[b].y);}Â
// Function to draw gatefunction addGate() {Â Â Â Â rectMode(CENTER);Â Â Â Â rect(100, 500, 70, 100);}Â
// Function to draw windowfunction addWindow() {    rect(280, 430, 40, 30);}Â
// Function to add circular windowfunction addOculus() {    ellipse(100, 340, 20, 20);}Â
// Function to add Chimneyfunction addChimney() {Â Â Â Â rect(320, 295, 16, 20);Â Â Â Â ellipse(320, 285, 16, 10);}Â
// Function to draw parts of // house step by stepfunction step() {Â Â Â Â switch (iter) {Â Â Â Â Â Â Â Â case 1:Â Â Â Â Â Â Â Â Â Â Â Â drawLine(5, 6);Â Â Â Â Â Â Â Â Â Â Â Â break;Â Â Â Â Â Â Â Â case 2:Â Â Â Â Â Â Â Â Â Â Â Â drawLine(6, 7);Â Â Â Â Â Â Â Â Â Â Â Â break;Â Â Â Â Â Â Â Â case 3:Â Â Â Â Â Â Â Â Â Â Â Â drawLine(2, 5);Â Â Â Â Â Â Â Â Â Â Â Â drawLine(3, 6);Â Â Â Â Â Â Â Â Â Â Â Â break;Â Â Â Â Â Â Â Â case 4:Â Â Â Â Â Â Â Â Â Â Â Â drawLine(4, 7);Â Â Â Â Â Â Â Â Â Â Â Â break;Â Â Â Â Â Â Â Â case 5:Â Â Â Â Â Â Â Â Â Â Â Â drawLine(2, 3);Â Â Â Â Â Â Â Â Â Â Â Â drawLine(3, 4);Â Â Â Â Â Â Â Â Â Â Â Â break;Â Â Â Â Â Â Â Â case 6:Â Â Â Â Â Â Â Â Â Â Â Â drawLine(0, 2);Â Â Â Â Â Â Â Â Â Â Â Â drawLine(0, 3);Â Â Â Â Â Â Â Â Â Â Â Â drawLine(1, 4);Â Â Â Â Â Â Â Â Â Â Â Â break;Â Â Â Â Â Â Â Â case 7:Â Â Â Â Â Â Â Â Â Â Â Â drawLine(0, 1);Â Â Â Â Â Â Â Â Â Â Â Â break;Â Â Â Â Â Â Â Â case 8:Â Â Â Â Â Â Â Â Â Â Â Â addGate();Â Â Â Â Â Â Â Â Â Â Â Â break;Â Â Â Â Â Â Â Â case 9:Â Â Â Â Â Â Â Â Â Â Â Â addWindow();Â Â Â Â Â Â Â Â Â Â Â Â break;Â
        case 10:            addOculus();            break;        case 11:            addChimney();            break;    }} |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Read More Info here on that Topic: geeksforgeeks.org/how-to-draw-simple-animation-using-p5-js/ […]