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

**URL:** <https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025>\
**Category:** Beginners\
**Created:** [July 28, 2019, 6:06pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025 "2019-07-28T18:06:56Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbrasseau](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mbrasseau/32/5872_2.png) [@mbrasseau](https://discourse.processing.org/u/mbrasseau)\
**Post date:** [July 28, 2019, 6:06pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/1 "2019-07-28T18:06:56Z")

</div>

I’m using the p5.js Web Editor.

I wrote this function that draws a star.

```auto
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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 28, 2019, 6:32pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/2 "2019-07-28T18:32:36Z")

</div>

> [@mbrasseau](#):
>
> function star(paintBrush.x, paintBrush.y) {

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

> **[Property accessors - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors)**
>
> Property accessors provide access to an object's properties by using the dot notation or the bracket notation.

Go to this link and see for yourself: [JavaScript variable name validator](https://Mothereff.in/js-variables)

For example, paste paintBrush.x there:

> **[JavaScript variable name validator](https://mothereff.in/js-variables#paintBrush.x)**
>
> Wondering if you can use a given string as a variable name in JavaScript? This tool will tell you.

---

<div class="post-metadata">

**Author:** ![mbrasseau](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mbrasseau/32/5872_2.png) [@mbrasseau](https://discourse.processing.org/u/mbrasseau)\
**Post date:** [July 28, 2019, 6:56pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/3 "2019-07-28T18:56:42Z")

</div>

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

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 28, 2019, 7:32pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/4 "2019-07-28T19:32:26Z")

</div>

> [@mbrasseau](#):
>
> Other functions in the program are using _paintBrush.x_ and _paintBrush.y_.  
> Why can I not use it for my stars?

- 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:

> **[Identifier - MDN Web Docs Glossary: Definitions of Web-related terms | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Identifier)**
>
> An identifier is a sequence of characters in the code that identifies a variable, function, or property. In most languages, identifiers are case-sensitive and not quoted.

- Now, when we invoke functions, we can pass arguments to them:

> **[Argument - MDN Web Docs Glossary: Definitions of Web-related terms | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Argument)**
>
> An argument is a value (primitive or object) passed as input to a function.

- 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.

---

<div class="post-metadata">

**Author:** ![femke.blanco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/femke.blanco/32/3431_2.png) [@femke.blanco](https://discourse.processing.org/u/femke.blanco)\
**Post date:** [July 28, 2019, 7:44pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/5 "2019-07-28T19:44:22Z")

</div>

This is what I did: [https://editor.p5js.org/femkeblanco/sketches/sQxipRO5I](https://editor.p5js.org/femkeblanco/sketches/sQxipRO5I)

---

<div class="post-metadata">

**Author:** ![mbrasseau](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mbrasseau/32/5872_2.png) [@mbrasseau](https://discourse.processing.org/u/mbrasseau)\
**Post date:** [July 28, 2019, 7:45pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/6 "2019-07-28T19:45:40Z")

</div>

Yes! @ [GoToLoop](https://discourse.processing.org/u/GoToLoop) 🙂 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.

---

<div class="post-metadata">

**Author:** ![mbrasseau](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mbrasseau/32/5872_2.png) [@mbrasseau](https://discourse.processing.org/u/mbrasseau)\
**Post date:** [July 28, 2019, 7:49pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/7 "2019-07-28T19:49:53Z")

</div>

Thank you! That is very helpful.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 28, 2019, 7:50pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/8 "2019-07-28T19:50:01Z")

</div>

> [@mbrasseau](#):
>
> And _image_ is already a function.

Be extra careful not to declare variables w/ the same identifier as existing 1s from the library p5.js: [reference | p5.js](http://p5js.org/reference)

> [@mbrasseau](#):
>
> I’ll explore your suggestion for `function star({x, y}) {` as I’ve never seen that before.

That syntax is called object destructuring assignment:

> **[Destructuring assignment - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)**
>
> The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

---

<div class="post-metadata">

**Author:** ![mbrasseau](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mbrasseau/32/5872_2.png) [@mbrasseau](https://discourse.processing.org/u/mbrasseau)\
**Post date:** [July 28, 2019, 8:49pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025/9 "2019-07-28T20:49:48Z")

</div>

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 😂 I did not use the wrong word to express what I was meaning. It does not need to be changed.