Web Editor says there's an error. I think it fibs!

p5.js Beginners
1

I’m using the p5.js Web Editor.

I wrote this function that draws a star.

function star(paintBrush.x, paintBrush.y) {
  stroke(69, 33, 5);
  fill(255, 255, 0);
  ellipse(paintBrush.x, paintBrush.y, 15, 15);
  line(paintBrush.x-5, paintBrush.y + 6, paintBrush.x, paintBrush.y - 7); //#1
  line(paintBrush.x, paintBrush.y - 7, paintBrush.x + 5, paintBrush.y + 6); //#2
  line(paintBrush.x + 5, paintBrush.y + 6, paintBrush.x - 8, paintBrush.y - 1); //#3
  line(paintBrush.x-8, paintBrush.y - 1, paintBrush.x + 7, paintBrush.y - 1);  //#4
  line(paintBrush.x + 7, paintBrush.y - 1, paintBrush.x - 5, paintBrush.y + 6);
}

It says “Uncaught SyntaxError: Unexpected token . (sketch: line 16)”. That would be

function star(paintBrush.x, paintBrush.y) {

I don’t see any error, and my program will not run. I’m not sure what to do.
Any assistance/advice would be greatly appreciated.

1 Like
2

Dot . isn’t a valid character for variable names (identifier), b/c it’s the property accessor operator:

Go to this link and see for yourself: JavaScript variable name validator

For example, paste paintBrush.x there:

2 Likes
3

This is the entire program. It is an exercise from Khan Academy. It is a tutorial on objects.

var paintBrush = {
    x: 300,
    y: 100,
    img: getImage("space/collisioncircle")
};

var paintCanvas = function() {
    imageMode(CENTER);
    image(paintBrush.img, paintBrush.x, paintBrush.y);
};

mouseMoved = function() {
   paintBrush.x = mouseX;
   paintBrush.y = mouseY;
   paintCanvas();
};

I’m trying to substitute the image with stars I made from a function (this is how I’ve been saving the exercises to my machine up until now).

Other functions in the program are using paintBrush.x and paintBrush.y. Why can I not use it for my stars?

This is my original function before trying to apply it to this exercise:

function star(x, y) {
  stroke(69, 33, 5);
  fill(255, 255, 0);
  ellipse(x, y, 15, 15);
  line(x-5, y + 6, x, y - 7); //#1
  line(x, y - 7, x + 5, y + 6); //#2
  line(x + 5, y + 6, x - 8, y - 1); //#3
  line(x-8, y - 1, x + 7, y - 1);  //#4
  line(x + 7, y - 1, x - 5, y + 6);
}

As you can see, I simply attempted to adapt it to the program.

I tried to read the MDN Web Docs, but I am a beginner, and it assumes knowledge I do not already have. I understand all of their examples. But I do not see a difference in pattern between what they are doing, and what I’m trying to do… and the explanations match none of the tutorials I’ve taken already, and make no sense to me.

In trying to understand this, following where the paintbrush.x would go throughout the code, I can kind of see how using it the way I am might be a bit circular.

Or should I declare a separate x and y, outside of the paintbrush? For the star function?

I even tried just a simple ellipse assigned to img. That did not work either. The program wants the ellipse in setup().

Why would their predefined image work, and my substitute not work?

I’m about to upload an image of a tiny star and see if I can get that to work.

4
  • Your original star() function has valid identifiers for its parameters: function star(x, y) {
  • You’re mixing up defining a function w/ invoking a function I believe.
  • When defining a function, we declare its parameters w/ valid identifiers:
  • Now, when we invoke functions, we can pass arguments to them:
  • And then, those passed arguments are assigned to the parameters of the invoked function.
  • Inside your function star(), you wanna access properties x & y from a passed object, right?
  • So, you need to declare a parameter to receive the object.
  • For that, we need to name it using a valid identifier.
  • Let’s call it xy for now: function star(xy) {
  • Now, when star() is invoked, the 1st argument passed is gonna be assigned to its parameter xy:
  • And it’s accessed inside star() like this: ellipse(xy.x, xy.y, 15);
  • Also, given your function star() is only interested in accessing properties x & y from a passed object, you can use this syntax instead: function star({ x, y }) {
  • W/ the alternative syntax above, you access them like this: ellipse(x, y, 15);
  • Hope it’s clear now. Ask further if you didn’t understand my attempt explanation fully.
2 Likes
5

This is what I did: https://editor.p5js.org/femkeblanco/sketches/sQxipRO5I

4 Likes
6

Yes! @ GoToLoop :slight_smile: thank you. I was doing exactly that (confusing the parameter for the argument).

Ive switched over to uploading a star as a substitute for their image, and I’m running into a similar issue. They used img and image in ways that I cannot as I’m transferring this over.
Preload puts the variables in different places. And image is already a function.

But I’m figuring it out, and learning. That’s why I’m doing these.

I’ll explore your suggestion for function star({x, y}) { as I’ve never seen that before.

Thank you so much for your help.

1 Like
7

Thank you! That is very helpful.

1 Like
8

Be extra careful not to declare variables w/ the same identifier as existing 1s from the library p5.js: reference | p5.js

That syntax is called object destructuring assignment:

2 Likes
9

Oh, and to all of you who keep trying to edit my title… the word “fib” means to tell an untruth.

I did not think I had an error, I felt that the editor was fibbing on me :joy: I did not use the wrong word to express what I was meaning. It does not need to be changed.

1 Like