TypeError when sketch hosted on a webserver but not when on my computer?

p5.js Coding Questions
1

So my p5js script script runs fine on the web editor and also when I run it in Atom but when I upload it to my web host and access the page from there, I get:

TypeError: cnv is undefined

or

TypeError: cannot read property 'position' of undefined

It’s in my windowResized function

function windowResized() {
  xCnvPos = (windowWidth - width) / 2;
  yCnvPos = (windowHeight - height) / 2;
  cnv.position(xCnvPos, yCnvPos);               //here is when it happens
  if (button1 != undefined) {
    button1.position(xCnvPos + xbutton1Pos, yCnvPos + ybuttonPos);
    button2.position(xCnvPos + xbutton2Pos, yCnvPos + ybuttonPos);
  }
}

Why am I error free when running from my hard drive?

1 Like
2

You may try out replacing your variable cnv w/ _renderer. :bulb:

1 Like
4

I think that did it.

BTW I changed the syntax(?) of your “Element relative to canvas” so that it’s easier to read for a new programmer. I might have lost some functionality though.

Have I?
https://editor.p5js.org/Bassam/sketches/tbZeQmX16

1 Like
5

So that error is back.

Uncaught ReferenceError: _renderer is not defined
    at positionCanvasAndElements (sketch.js:454)
    at windowResized (sketch.js:465)
    at p5._main.default._onresize (p5.js:56983)

Does anyone get this?

6

There’s no function called positionCanvasAndElements() nor line #454 at your “sketch.js”.

7

There sure is I assure you. I just renamed the function so it was more descriptive.

function positionCanvasAndElements() {
	xCnvPos = (windowWidth - width) / 2;
	yCnvPos = (windowHeight - height) / 2;
	_renderer.position(xCnvPos, yCnvPos);
	if (button1 != undefined) {
		button1.position(xCnvPos + xbutton1Pos, yCnvPos + ybuttonPos);
		button2.position(xCnvPos + xbutton2Pos, yCnvPos + ybuttonPos);
	}
	if (button3 != undefined) {
		button3.position(xCnvPos + xbutton1Pos * 2 - 20, yCnvPos + ybuttonPos + 38);
	}
}
8

positionCanvasAndElements() is called in windowResized(). I call windowResized() after I create my canvas, just as you do in your element relative to canvas sketch GoToLoop.

function windowResized() {
	positionCanvasAndElements();
}

Here are the other errors/warnings I get but these ones are always there and they’re not red, they’re yellow:

Use of the orientation sensor is deprecated. p5.js:59061:25
Use of the motion sensor is deprecated. p5.js:59061:25
Use of mozImageSmoothingEnabled is deprecated. Please use the unprefixed imageSmoothingEnabled property instead. p5.js:62505:26

I thought this was programming but now I realize this is sorcery.

9

On your posted link: :link:

I can only see 36 lines at “sketch.js”! :see_no_evil:
So (sketch.js:454) isn’t even possible! :crazy_face:

10

My friend, I appreciate you looking into this firstly.

Second. This project has grown a lot in the past couple of days.

I’m hosting it on my webhost. I wonder if the problem lies there somehow? It runs error free on my computer but when I upload, blam!

If this sketch wasn’t related to a potential experimental study at my university, I would post all the code right now. But I’ve posted the pertinent parts already:

let cnv;
function setup() {
	pixelDensity(1);
	setVariables();
	cnv = createCanvas(cW + borderSpacer * 2, cH + borderSpacer * 2);
	//cnv.mouseClicked(checkClick);
	windowResized();

	readyCanvas();
	doTask();

	//showRequiredClicks = createP("Clicks required for full reveal: ~" + calClicksReq());
	showClicks = createP("Total clicks: " + clickCounter.toString());
}
function positionCanvasAndElements() {
	xCnvPos = (windowWidth - width) / 2;
	yCnvPos = (windowHeight - height) / 2;
	_renderer.position(xCnvPos, yCnvPos);
	if (button1 != undefined) {
		button1.position(xCnvPos + xbutton1Pos, yCnvPos + ybuttonPos);
		button2.position(xCnvPos + xbutton2Pos, yCnvPos + ybuttonPos);
	}
	if (button3 != undefined) {
		button3.position(xCnvPos + xbutton1Pos * 2 - 20, yCnvPos + ybuttonPos + 38);
	}
}

function windowResized() {
	positionCanvasAndElements();
}

I’m sure you think this is related to my n00bness, which no doubt it is, the problem still occurs erratically, unpredictably so much so that I can’t seem to move past it. I keep having to think about it.

It could be a genuine but, I’d love to report it if only I knew how and where.

11

Ok so the latest version is /*! p5.js v1.0.0 February 29, 2020 */

The version I have is

Could this be an issue? I’ll test out with this newer version and report back.