P5.js-web-editor: Holding a color in a variable

[cmorgantywls]

Nature of issue?

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

Details about the bug:

• Web browser and version:

Google Chrome | 61.0.3163.100 (Official Build) (64-bit)

• Operating System: Mac OS Sierra
• Steps to reproduce this:
  I'm honestly not sure how to reproduce, but in class, we have been working on changing variables with if/else statements, and a common thing to change is color. I have been having students write variables such as:
  var colorCircle1 = color(255,0,0) and then putting it into their code as fill(colorCircle1). This has worked out great and students have been very successful, until today when a few students started experiencing a bug where the program would say that color is not defined. They didn't seem to have any typos, and the program was also calling the error on lines in which the variable was not used, called, or defined (always on line 1), regardless of what was on line 1). I'd love to get this fixed - for one student I had her clear her cache and log in again, but nothing seemed to change.

Feature enhancement details:

New feature details:

[catarak]

thanks for this! were your students trying to use the line

var colorCircle1 = color(255, 0, 0);

outside of a p5 function (such as preload, setup, or draw)? it makes sense then that color would be undefined, see https://github.com/processing/p5.js/wiki/Frequently-Asked-Questions#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup. i'm going to close this and assume that was the issue, but please reopen if it isn't!

[cmorgantywls]

They were using it in a function (setup and draw I believe)! It actually
came up once in sample code I had written that worked fine on my computer
and then caught when they tried to run it on their computers. We cleared
their cache and it still caught for a few students but fixed for others.

On Mon, Nov 13, 2017 at 3:17 PM, Cassie Tarakajian <[email protected]

wrote:

thanks for this! were your students trying to use the line

var colorCircle1 = color(255, 0, 0);

outside of a p5 function (such as preload, setup, or draw)? it makes
sense then that color would be undefined, see
https://github.com/processing/p5.js/wiki/Frequently-Asked-
Questions#why-cant-i-assign-variables-using-p5-functions-
and-variables-before-setup. i'm going to close this and assume that was
the issue, but please reopen if it isn't!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js-web-editor/issues/471#issuecomment-344044589,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATg9jCM7rZbsNX_kPC-UJ7cZRUg83xrHks5s2KPkgaJpZM4QZ3Lu
.

--
Courtney Morgan
Software Engineering & AP Computer Science

The Young Women's Leadership School of the Bronx
1865 Morris Ave.
Bronx, New York, 10453
718.732.2590

[catarak]

hmmm if you could post the code that wasn't working that would be great!

[cmorgantywls]

//variables used everywhere go here!
var colorCircle1;
var colorCircle2;
var colorCircle3;

function setup() {
createCanvas(400, 400);
//value at the start of the program
colorCircle1 = color(150);
colorCircle2 = color(175);
colorCircle3 = color(200);
}

function draw() {
background(255);

//circle 1 & a variable to find distance of radius
var d1 = dist(mouseX,mouseY,100,height/2);
fill(colorCircle1);
ellipse(100,height/2, 50,50);

//circle 2 & a variable to find distance of radius
var d2 = dist(mouseX,mouseY,200,height/2);
fill(colorCircle2);
ellipse(200,height/2,50,50);

//circle 3 & a variable to find distance of radius
var d3 = dist(mouseX,mouseY,300,height/2);
fill(colorCircle3);
ellipse(300,height/2,50,50);

//if mouse over circle, change color.
if (d1 < 50){
colorCircle1 = color(0);
}
else if(d2 < 50){
colorCircle2 = color(0);
}
else if(d3 < 50){
colorCircle3 = color(0);
}
else{
colorCircle1 = color(150);
colorCircle2 = color(175);
colorCircle3 = color(200);
}

}

//this one! It ran (and runs!) fine on my computer, but students tried to
pull up my example to run it and a few were having problems.

On Mon, Nov 13, 2017 at 3:24 PM, Cassie Tarakajian <[email protected]

wrote:

hmmm if you could post the code that wasn't working that would be great!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js-web-editor/issues/471#issuecomment-344046402,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATg9jAfAmFMZXrvTqr-JuloLzW7ca9IAks5s2KV6gaJpZM4QZ3Lu
.

--
Courtney Morgan
Software Engineering & AP Computer Science

The Young Women's Leadership School of the Bronx
1865 Morris Ave.
Bronx, New York, 10453
718.732.2590

[catarak]

i just tried a few different browsers and couldn't reproduce—if you're able to figure out more specifics for how to reproduce let me know!

[cmorgantywls]

I don't know if this will help, but this happened today to a student:

var circleColor;

function setup() {
createCanvas(400, 400);

colorMode(HSB);
circleColor = color(100,50,50);
}

function draw() {
background(225);

fill(circleColor);
ellipse(width/2,height/2,100,100);

}

It gave the same error about color not being defined. I noticed that she
had an error previously to this happening (hadn't defined circleColor), but
even after fixing that and saving/refreshing, it was still complaining
about color not being defined.

On Mon, Nov 13, 2017 at 4:02 PM, Cassie Tarakajian <[email protected]

wrote:

i just tried a few different browsers and couldn't reproduce—if you're
able to figure out more specifics for how to reproduce let me know!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js-web-editor/issues/471#issuecomment-344056676,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATg9jB2nMD15VQ9gj1L_5-_disdjzNDXks5s2K5LgaJpZM4QZ3Lu
.

--
Courtney Morgan
Software Engineering & AP Computer Science

The Young Women's Leadership School of the Bronx
1865 Morris Ave.
Bronx, New York, 10453
718.732.2590

[joemckay5]

I'm having this bug issue too. It will let me set the color variable, and line 5 will print "200", but when I go to use the variable it barks at me, saying "Script error. (: line 0)"
var c;
function setup() {
createCanvas(400, 400);
c = color(200, 200, 200);
print(red(c));
}

function draw() {
fill(c);
rect(200, 200, 10, 10);
}

This ONLY happens in Chrome. Firefox and Safari both handle the color fine. I am using chrome Version 68.0.3440.106 on Mac OS 10.13.2.

[catarak]

@joemckay5 do you have any of the accessibility options/text output turned on?

[MathuraMG]

@catarak - looks like this could be due to the accessibility options. We have this fixed in our latest version. But we are yet to update the version being used in the editor.

@lm-n

[joemckay5]

@catarak - nope. Sorry, I forgot to mention that. I turned them on and off because I saw the other thread but the results were the same either way.

[catarak]

hmmm, okay. running this on chrome (same one, Version 68.0.3440.106) works for me.

[cmorgantywls]

If it helps, when this was happening to me, I would have students on the
exact same version of Chrome/Macs (they are all the same disk image from
the DOE, so they had to be the same) and it would work for one student and
not for the other. In my experience, it seemed tied to user name/accounts
somehow, as the same students would have the problem no matter what
computer they were using (and the students who didn't have the problem
never did, even when using computers that had had an issue in the past).

On Tue, Aug 28, 2018 at 2:26 PM Cassie Tarakajian [e-mail]
wrote:

hmmm, okay. running this on chrome (same one, Version 68.0.3440.106) works
for me.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js-web-editor/issues/471#issuecomment-416691817,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATg9jLEfzkfglJRitL1UKfuIIPNoYr_Eks5uVYtUgaJpZM4QZ3Lu
.

--
Courtney Morgan
Software Engineering & AP Computer Science

The Young Women's Leadership School of the Bronx
1865 Morris Ave.
Bronx, New York, 10453
718.732.2590

[catarak]

interesting. that's good to know! maybe it has something to do with how the sketch itself is configured, or a version of p5.js that's running, or something like that.

[cmorgantywls]

I could also run their programs through my account (I never had this
problem) if they copy/pasted everything to me without error.

On Tue, Aug 28, 2018 at 2:38 PM Cassie Tarakajian [e-mail]
wrote:

interesting. that's good to know! maybe it has something to do with how
the sketch itself is configured, or a version of p5.js that's running, or
something like that.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js-web-editor/issues/471#issuecomment-416695570,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATg9jBwRAeEJ-fHUsPgyLPRA7beLF5NKks5uVY4WgaJpZM4QZ3Lu
.

--
Courtney Morgan
Software Engineering & AP Computer Science

The Young Women's Leadership School of the Bronx
1865 Morris Ave.
Bronx, New York, 10453
718.732.2590

[dansakamoto]

I think I'm having the same issue. With the following sample code:

var c;

function setup() {
createCanvas(800,800);
c = color(0,0,0);
}

function draw() {
fill(c);
ellipse(400,400,100,100);
}

I get "Script error. (: line 0)" in Chrome (tried Version 58.0.3029.96 (64-bit) and Version 69.0.3497.92 (Official Build) (64-bit)), but it works in Firefox (62.0 (64-bit)).

I'm wondering if something is buggy with the fill() function? I tried replacing fill(c) with stroke(c) and it works on both browsers.

[catarak]

@dansakamoto do you have the accessibility features turned on? click on the cog icon -> accessibility -> accessible text-based canvas, are any of those checked? that's the only way i can reproduce this.

[dansakamoto]

Dagnabbit. My bad. I didn't think I'd turned any of the accessibility features on, but it was Table-text. Thanks!

[catarak]

@dansakamoto you actually found an undocumented bug that i reported over at processing/p5.accessibility#129, so yay!

[dansakamoto]

@catarak Yes! lemonsToLemonade();

[lm-n]

thanks @dansakamoto and @catarak! We fixed this in https://github.com/processing/p5.accessibility/pull/116 and it should work in the next release of the library.