P5.js: Using math functions without the Math.functionname()

[chrisorban]

Nature of issue?

• [ ] Found a bug
• [x] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

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

Which platform were you using when you encountered this?

• [x] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: 0.9.0
• Web browser and version: Firefox and others
• Operating System: Ubuntu 16
• Steps to reproduce this:
  https://editor.p5js.org/ChrisOrban/sketches/CcG3IjFWp

Feature enhancement details:

I would like to be able to use code like var x = sin(0.25); or var x= random(-10,10); BEFORE the draw() function like I do in this code:

https://editor.p5js.org/ChrisOrban/sketches/CcG3IjFWp

Obviously the workaround is to use var x = Math.sin(0.25); and var x = Math.random(-10,10); but then you're using a different syntax for math functions before the draw function than you are using inside the draw function, which could be confusing to students (and I work with a lot of students). To make matters worse, Math.random(-10,10) has a different definition than random(-10,10) The code example I use has a hack to redefine the random function so it works the same, but it would be nice to not have to do this.

What I'm saying is, can the javascript math library be loaded earlier in the sequence so I can use those functions without the Math.functionname() syntax even before the draw function. I feel like this would be helpful for junior high and high schoolers using p5.js because it is really convenient to set the initial variables by setting globals before the draw() functions.

To be clear this is a feature request / enhancement, not a bug in any way.

New feature details:

[limzykenneth]

Unless this is something you would like to avoid, you can do

let x;
function setup(){
  x = random(-10, 10);
}

function draw(){
  print(x);
}

[chrisorban]

Yes, I am aware of using setup for this purpose. I'm just trying to keep my programs as simple as possible. I sometimes have 6th graders using codes like this one:

https://editor.p5js.org/ChrisOrban/sketches/Hy_Lw_Fzb

Part of the question here is whether this is an easy fix or if it requires huge changes to the way that the p5.js library gets loaded in to work.

[limzykenneth]

I'm not fully sure how hard or easy this would be, but I cannot think of a way to make it work. The reason it works in this way is to ensure that p5 doesn't pollute the global namespace when not being used in global mode.

The way that the library detects global mode is simply checking if setup or draw is defined on the window (ie global) object, the problem is that x = random(-10, 10) outside of setup() or draw() is run at the same time as setup() is being defined as such p5 cannot determine whether the code is global or not at that point in time, in other words, p5 initialization is run after the definition of setup() but x = random(-10, 100) is defined at the same time as setup(), so random() here will still be undefined.

[montoyamoraga]

hi @chrisorban!
i wanted to share my experience with teaching p5.js and the way i explain declaring variables and then assigning values, which i hope helps you :)

• i first teach declaration of a variable, with "let x", and i make the students imagine that we are asking the computer to please allocate some of the computer's memory, and remember where it lives, and that is what x is, and i make them think of how complicated that is, since the memory is huge.

• then after declaration, we can use "x = 0", and since it is a variable, we can at anytime change its value, and i ask them to value how cool that is, that we can recycle and make something be a number, and then be a string, and that the computer remembers where our variable lives.

• i don't even mention the short step of combining both "let x = 0", because i have seen many people crash their code because they learned that the way to assign a variable is with the full "let x =5", or also they crash the code because they don't notice the "let/var" and they use variables without ever declaring them. i rather them first grasp the fact that they are two different commands and operations, and then as a bonus i might teach them the "let x = 0" hours later in the workshop, or the next class, or sometimes never, so that they grasp the difference between declaring a variable and assigning a value to it.

with that, it would be safe to make students first declare their variables as global, and then assign an initial value on setup.

[lmccart]

Thanks @chrisorban. I agree, it would be very convenient. Unfortunately, it is quite difficult to implement. The main challenge is that we are supporting two different modes -- instance mode and global mode. The p5.js script first checks for definitions of setup() or draw(), and if it finds them, it begins running p5, calling each of them. If not, it assumes we're in instance mode, and it waits until the user invokes p5 by calling p5(sketch). This dual mode possibility support means that the browser does not automatically invoke a p5 instance on load. For this reason, it doesn't recognized p5 functions or variables outside of setup(), draw(), or other functions called after setup() has been called. Hope that makes sense!