Nrthugu

Im workingon a P5.js sketch...

Instead of creating objects with a constructor function, and then using the new keyword.

I want to use a factory function.

It seems to work fine, and renders correclty when using for example this code:

 stroke(255,0,0)

 ellipse(speed, 10, 10, 10)

But at the moment i try to use fill(255), i get an error saying fill is not a function?

How is it possible that only this function from p5 is not being recognized but others yes?

Here is a codepen: https://codepen.io/giorgiomartini/pen/VVKMKg?editors=0011

Code:

function setup () {

  createCanvas(300,500)

  background(3)

  bola = createCircle(circleOpts)

}



const circleOpts = {

  fill: 255,

  x: 0,

  y: 0,

  maxRadius: 10,

}



const createCircle = ({fill = 255, x = 10, y = 10, maxRadius = 20}) => {

 let speed = 0

 return {

   display() {

     noStroke()

     background(2)

     stroke(255,0,0)

     // if you remove this next line it works!

     fill(255)

     ellipse(speed, 10, 30, 30)

   }

 }

} 



let bola



function draw () {

   bola.display()

}

There is a variable name conflict: fill is a local variable that is created in the function parameter list of createCircle. This local variable shadows the function name you probably defined in the global scope. And this local variable is indeed not a function (but a number).

You can resolve this with a name change: either change the name of the function fill or the name of the local variable fill. If you go for the latter option, it could look like this:

const circleOpts = {

  fillColor: 255,   // <-------- changed name

  x: 0,

  y: 0,

  maxRadius: 10,

}



const createCircle = ({fillColor = 255, x = 10, y = 10, maxRadius = 20}) => {

//                     ^^^^^^^^^

... etc.