How to draw simple animation using p5.js ? - GeeksforGeeks

04 Oct, 2021
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 thake 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:
saurabh1990aror
gabaa406
sweetyty
JavaScript-p5.js
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?