Change the shape of an object while moving using Javascript processing.js library

Question

I am doing an online Javascript course in khan academy. I am doing a project on that course.

I want my object to change shape from eclipse to a rectangle and repeat it while moving. I wrote a code. But I cannot see the eclipse. The way it is moving is correct.

Following is what I wrote.

var xPos = 20;
var yPos = 20;

draw = function() {
    //variables change position
    xPos++;
    yPos++;

    //ellipse
    background(29, 40, 115);
    fill(255, 242, 0);
    ellipse(xPos, yPos, 10, 10);

    //rectangle
    background(29, 40, 115);
    fill(151, 76, 189);
    rect(xPos, yPos, 10, 10);
}

What is wrong here? I can only see a rectagle moving. Where is my ellipse? Please help me. I am a beginner

Please be aware that Processing.js was discontinued in December 2018, almost a year ago. If you _have_ to use it because you're doing an old Kahn Academy course, then you have little choice, but for your own projects, if you want to stick with Processing, please use https://p5js.org/ instead. — Mike 'Pomax' Kamermans, Nov 10 '19 at 18:12
@Mike 'Pomax' Kamermans Yes I have to use that. Thank you for information — Nilushi Andradi, Nov 11 '19 at 17:21
also note I gave you a separate actual answer. Remember to accept/upvote solutions and useful answer. — Mike 'Pomax' Kamermans, Nov 11 '19 at 17:30

score 1 · Answer 1 · answered Nov 10 '19 at 18:13

The background() instruction clears the sketch by setting every pixel in it to the same colour. You typically only call this once, as first instruction in draw(), because as you've discovered, it's not super useful to call it after you've already started drawing things.

Change the shape of an object while moving using Javascript processing.js library

1 Answers1