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!
