p5.Graphics throws error if try to draw shape before specifying a fill or stroke (v1.2.0)

[JetStarBlues]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: 1.2.0
• Web browser and version: All
• Operating System: Windows
• Steps to reproduce this:
  1. Download the 1.2.0 release
  2. Run the following snippet:

var buffer;

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

	buffer = createGraphics( width, height );
	makeCircleBuffer();
}

function draw ()
{
	image( buffer, 0, 0 );  // draw pre-rendered image
}

function makeCircleBuffer ()
{
	/* Throws error if one of the following is not called first.
	*/
	//	buffer.background( 100 );
	//	buffer.fill( 255, 0, 0 );
	//	buffer.stroke( 255, 0, 0 );


	buffer.rect( 200, 200, 100, 100 );
	// buffer.ellipse( 200, 200, 300, 300 );
}

When you try to draw a shape to the buffer without first specifying either the background, fill, or stroke colours, you get a "TypeError". Expected behaviour: when the color is not specified, use the default of white fill or black stroke without throwing an error.

I am unable to reproduce the bug on the p5.js web editor. The editor is running the 1.1.9 release and renders a white filled, black stroked shape as expected.

Here is the error shown in Chrome 87.0:

p5.js:56173 Uncaught (in promise) TypeError: Cannot read property 'grid' of undefined
    at _main.default.Graphics._main.default._renderRect (p5.js:56173)
    at _main.default.Graphics._main.default.rect (p5.js:56089)
    at makeCircleBuffer (sketch_bufferTest_IssueMVC.js:26)
    at setup (sketch_bufferTest_IssueMVC.js:8)
    at _setup (p5.js:51363)
    at _runIfPreloadsAreDone (p5.js:51300)
    at p5._decrementPreload (p5.js:51310)
    at p5.<anonymous> (p5.sound.min.js:2)

Here is the error shown in Firefox 83.0:

Uncaught (in promise) TypeError: this._accessibleOutputs is undefined
    _renderRect             http://localhost:4000/p5js/1.2.0/build/p5/p5.js:56173
    rect                    http://localhost:4000/p5js/1.2.0/build/p5/p5.js:56089
    makeCircleBuffer        http://localhost:4000/bareMin/sketch_bufferTest_IssueMVC.js:26
    setup                   http://localhost:4000/bareMin/sketch_bufferTest_IssueMVC.js:8
    _setup                  http://localhost:4000/p5js/1.2.0/build/p5/p5.js:51363
    _runIfPreloadsAreDone   http://localhost:4000/p5js/1.2.0/build/p5/p5.js:51300
    _decrementPreload       http://localhost:4000/p5js/1.2.0/build/p5/p5.js:51310
    t                       http://localhost:4000/p5js/1.2.0/build/p5/addons/p5.sound.min.js:2
    promise callback*       http://localhost:4000/p5js/1.2.0/build/p5/addons/p5.sound.min.js:2
    p5                      http://localhost:4000/p5js/1.2.0/build/p5/p5.js:51568
    p5                      http://localhost:4000/p5js/1.2.0/build/p5/p5.js:51566
    _globalInit             http://localhost:4000/p5js/1.2.0/build/p5/p5.js:50603
    promise callback*[56]<  http://localhost:4000/p5js/1.2.0/build/p5/p5.js:50628
    o                       http://localhost:4000/p5js/1.2.0/build/p5/p5.js:34
    o                       http://localhost:4000/p5js/1.2.0/build/p5/p5.js:38
    [43]<                   http://localhost:4000/p5js/1.2.0/build/p5/p5.js:43475
    o                       http://localhost:4000/p5js/1.2.0/build/p5/p5.js:34
    r                       http://localhost:4000/p5js/1.2.0/build/p5/p5.js:51
    <anonymous>             http://localhost:4000/p5js/1.2.0/build/p5/p5.js:55
    <anonymous>             http://localhost:4000/p5js/1.2.0/build/p5/p5.js:18
    <anonymous>             http://localhost:4000/p5js/1.2.0/build/p5/p5.js:20

[welcome]

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.

[limzykenneth]

From what I can find this seems to be a case of the accessible output wasn't initialized for p5.Graphics. I'm not too familiar with the system, @lm-n can you have a look?

[Julianiolo]

I dont know if this helps, but I've come across a very similar problem:
I have almost the same setup except that I use WEBGL. With that however nothing I tried (like fill() stroke() or background()) could make the sketch work. It gives the exact same Error message.
I mostly used code from p5.js shaders shader-performance, wich as far as I can see uses the same fundamental code I used. It uses p5.js v0.7.3 January 20, 2019 which is probably why it works.

p5.js version: p5.js v1.2.0 December 19, 2020

let shaderBg;

function setup(){
    createCanvas(1000,600);
    shaderBg = createGraphics(1000,600,WEBGL);
}
function draw(){
    shaderBg.background(100);
    shaderBg.fill(100);
    shaderBg.stroke(100);
    
    shaderBg.rect(0,0,width,height);

    image(shaderBg,0,0,width,height);
}

Error Log (Chrome 88.0.4324.104): p5.log

(Not posting this in a seperate issue since i think this is a duplicate, right?)

[peikai-tan]

I dont know if this helps, but I've come across a very similar problem:
I have almost the same setup except that I use WEBGL. With that however nothing I tried (like fill() stroke() or background()) could make the sketch work. It gives the exact same Error message.
I mostly used code from p5.js shaders shader-performance, wich as far as I can see uses the same fundamental code I used. It uses p5.js v0.7.3 January 20, 2019 which is probably why it works.

p5.js version: p5.js v1.2.0 December 19, 2020

let shaderBg;

function setup(){
    createCanvas(1000,600);
    shaderBg = createGraphics(1000,600,WEBGL);
}
function draw(){
    shaderBg.background(100);
    shaderBg.fill(100);
    shaderBg.stroke(100);
    
    shaderBg.rect(0,0,width,height);

    image(shaderBg,0,0,width,height);
}

Error Log (Chrome 88.0.4324.104): p5.log

(Not posting this in a seperate issue since i think this is a duplicate, right?)

Also facing a really similar problem, using 1.20 both with or without WEBGL on Brave browser on Arch Linux.

[stalgiag]

This will likely happen under many conditions with Graphics objects in version 1.20. I am not sure that _accessibleOutputs is ever initialized for graphics objects. I think that every time a property of _accessibleOutputs is checked, _accessibleOutputs should be checked first. Otherwise, we will need to be very careful about ensuring that _accessibleOutputs is always present on every rendering object. This might make sense but I am not sure whether it is intended design to be able to nest accessible output in the same way that you can nest renderers with graphics objects.

If not I think we can make sure everything works with graphics objects by just doing checks like mentioned above. For example this line in renderRect() could become:

if ( this._accessibleOutputs && this._accessibleOutputs.grid || this._accessibleOutputs.text) {

this._accessibleOutputs is assumed to exist pretty frequently in the codebase at the moment.

My sense is that this might be kind of urgent. 1.20 has been out for a while now and this is likely affecting a large portion of the sketches that use p5.Graphics. @lm-n what do you think?

[lm-n]

That sounds about right, _accessibleOutputs is not initialized for graphic objects. I can take a look on Saturday and try to come up with an alternative.

[lm-n]

Hi folx!

@JetStarBlues @catkane-doodles thx for reporting this issue and sharing the code you were running when encountering it!

@stalgiag @limzykenneth I've replicated the error in 1.2.0. #5003 already fixed this issue by initializing _accessibleOutpus in initializeInstanceVariables .

It should be fixed for the next release. The questions are: when would that be? and should we push for releasing soon to make sure no other users encounter this error?

[limzykenneth]

It should be fixed for the next release. The questions are: when would that be? and should we push for releasing soon to make sure no other users encounter this error?

We'll probably have to refer to @lmccart for this.

[JalokimFreelance]

Is there any way to repair that problem in 1.2.0 in the code? When using WEBGL mode for createGraphics setting fill/stroke/background doesn't help.