A simple shape tool

KunalAgnihotri

Hello,

I’m trying to make a simple shape tool for a program. It works by adding a vertex to a shape when the mouse is clicked.

//array to hold points
var mousepoints = [];



function setup() {
    createCanvas(400,400);
    background(200);
}

function draw() {
 print(mousepoints);   
    fill(20,200,66);
    beginShape();
    for(var i=0; i <mousepoints.length; i = i + 2){
    vertex(mousepoints[i], mousepoints[i+1]);
    }


    endShape();
}

function mouseClicked(){

    append(mousepoints, mouseX);
    append(mousepoints, mouseY);    

}


function keyTyped(){

    //start a new shape

    if(key ==='a'){
    mousepoints.splice(0, mousepoints.length);
    }  
}

The issue i’m facing is that when I make my shape with extrusions such as in the image, there is a fill outside the shape thats appearing(I have marked it in the red circles). Any way to resolve this?

TfGuy44

Add between lines 11 and 12:

background(200);

GoToLoop

http://JsBeautifier.org/

KunalAgnihotri

Thank you, doing this however erases the entire canvas when i want to start a new shape. I think I will have to draw the shape on a separate buffer and then merge it every time i want to start a new shape.

TfGuy44

Yes, the entire canvas gets erased. That's good!

You should not depend on what was previously drawn in one frame to draw the next frame.

Make sure you have enough variables to remember all the things you want to draw, and redraw them all every frame.