CODEWITHSUNDEEP
javascriptloopsprocessingp5.js
sophiamarinara
sophiamarinara

Reputation: 25

p5js 'line is not a function'

I am trying to use p5js to take a group of points and loop through them in order to draw lines. My problem is that for some reason, I keep getting the error message that 'line is not a function.' Why?

function setup() {
    createCanvas(400, 400);
    background(255)

}

function draw() {
    strokeWeight(50);
    drawLetter(letterA);
}

const letterA = {
    lines: [
        { x1: 10, y1: 20, x2: 40, y2: 50 },
        { x1: 90, y1: 60, x2: 60, y2: 100 },
        { x1: 200, y1: 20, x2: 30, y2: 45 }
    ]
}

function drawLetter(letter) {

    for (let i = 0; i < letter.lines.length; i++) {
        const line = letter.lines[i];
        const { x1, y1, x2, y2 } = line;

        line(x1, y1, x2, y2);

    }
}

Upvotes: 1

Views: 1134

Answers (1)

Rabbid76
Rabbid76

Reputation: 210968

line is not a function, because you've named a local variable "line". Th local variable covers the function "line". Rename the variable (e.g. coordinates):

function drawLetter(letter) {

    for (let i = 0; i < letter.lines.length; i++) {
        const coordinates = letter.lines[i];
        const { x1, y1, x2, y2 } = coordinates;

        line(x1, y1, x2, y2);

    }
}

Or skip the local variable completely:

function drawLetter(letter) {

    for (let i = 0; i < letter.lines.length; i++) {
        const { x1, y1, x2, y2 } = letter.lines[i];

        line(x1, y1, x2, y2);

    }
}

Upvotes: 1

Related Questions