P5.js: friendly error system not catching overwritten p5 functions when variables declared with let or const

[belezyc]

Most appropriate sub-area of p5.js?

• [ ] Color
• [x] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version: p5.js v0.10.2 January 15, 2020
• Web browser and version: Google Chrome | 79.0.3945.117 (Build officiel) (64 bits) (cohort: Stable)
• Operating System: Windows 10
• Steps to reproduce this:
  Description: I'm would like to zoomIn the canvas. With p5 web editor it is working fine
  1) index.html extract, create a section to receive the p5 canvas and at bottom of body, include p5.min.js:
  
  
  

2) In function draw() call function scale() to rescale de canvas content (which consiste of a simple ellipse before and after the scale):
function draw() {
background(220, 180, 200);
// Set ellipse in middle of screen middle of screen
ellipse(width/2, height/2, 80, 80);
scale(0.5);
// Set ellipse in middle of screen middle of screen after scale
ellipse(width/2, height/2, 80, 80);
}

Error message is:
sketch.js:30 Uncaught TypeError: scale is not a function
at draw (sketch.js:30)
at p5._main.default.redraw (p5.js:66218)
at _draw (p5.js:58914)
  | draw | @ | sketch.js:30
-- | -- | -- | --
  | _main.default.redraw | @ | p5.js:66218
  | _draw | @ | p5.js:58914
  | requestAnimationFrame (async) |   |  
  | _draw | @ | p5.js:58937
  | requestAnimationFrame (async) |   |  
  | _draw | @ | p5.js:58937
  | _start | @ | p5.js:58785
  | p5 | @ | p5.js:59125
  | _globalInit | @ | p5.js:58352
  | load (async) |   |  
  | 25.../core/main | @ | p5.js:58365
  | o | @ | p5.js:34
  | (anonymous) | @ | p5.js:38
  | 16../color/color_conversion | @ | p5.js:52635
  | o | @ | p5.js:34
  | r | @ | p5.js:51
  | (anonymous) | @ | p5.js:55
  | (anonymous) | @ | p5.js:18
  | (anonymous) | @ | p5.js:20

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[lmccart]

This seems to be working fine for me here: https://editor.p5js.org/lmccart/sketches/x5kIRTUVD
Can you try using File > Download to download the project and run locally? Please ensure you are running a local server: https://github.com/processing/p5.js/wiki/Local-server

[belezyc]

Dear Lauren,
Thank you for your fast answer!

Well... I'm a noob in javascript and after hours to understand why your example was working and not mine, I know now why it is said that everything is function in javascript. So I could find my problem.

Put your sunglasses, you may becoming blind with such noob error!

I wanted to define the scale ratio in a variable, and I defined it as ... let scale = 0.5; Obviously, calling scale(scale); was not working...

Thank you anyway for your great job.
KR,
Clément

[lmccart]

@belezyc on the contrary, newbie errors are the light that guides this project! In fact, your issue made me realize there is indeed a bug. Normally, our "friendly error system" (FES) should warn you if you try to name a variable after a p5 function. However, in testing out your situation, I realized that this only works if you declare the variable var scale = 0.5; and NOT let scale = 0.5;. See this comparison screenshot

This is a bug, so I am reopening this issue so we can make sure the FES checks for variables declared with var, let, or const to warn if they are overwriting p5 functions.

[meiamsome]

I don't think this is even possible to check - variables defined with let/const at the top level of a JS file do not create a property on the global object (See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Scoping_rules ) - this is why FES misses it currently, but it also means that there is no way for the p5js code to detect this condition as far as I am aware.

[lmccart]

aha thanks @meiamsome. you're right this may not be resolvable in this case. I am learning new things about ES6 every day!

[lmccart]

closed with https://github.com/processing/p5.js/commit/d15e8134103306cf5a7bba72fe6f51a9d5153221#diff-2fcb5958254343c96eccf55e1de42208

[akshay-99]

Hey. I had an idea which I wanted to discuss, which would involve shifting the FES towards taking a more active role. Currently, the FES can only respond when an event happens or if it is directly called from somewhere.

I was wondering, if the setup() draw() and any other functions the users declare will be attached to the window object, their code will be visible to the library using something like

functionCode = functionName + ''; 

So using parsers such as esprisma, it would be possible for the FES to parse the user's code itself and shift to a more IDE like approach.

This would add new possibilities to the FES like printing messages for this issue, address function misspellings, and countless other things the current FES cannot do. This will allow the FES to have a much closer look at the user's code.

@lmccart @limzykenneth @outofambit @stalgiag Can someone weigh in on this for me?

I am thinking of starting this as an experimental module that will complement the current FES.

[akshay-99]

I am sorry on a closer look this would not solve this issue until I can read the entire sketch file somehow :see_no_evil: . I was thinking of another case where the overriding happens within the functions setup or draw. for eg if scale() were to be overriden by a variable scale inside draw. I was thinking about local variables not global. Sorry