From 9700c016c284c2d918a40e5f4f5b911b1d4162ee Mon Sep 17 00:00:00 2001 From: a-y-a-n-das Date: Fri, 7 Nov 2025 11:08:30 +0530 Subject: [PATCH 1/2] Add FES warning for deprecated keyCode usage and manual test (#7876) --- src/core/main.js | 142 ++++++++++-------- .../events/keyCode-warning-sketch.js | 22 +++ .../events/keyCode-warning.html | 23 +++ 3 files changed, 127 insertions(+), 60 deletions(-) create mode 100644 test/manual-test-examples/events/keyCode-warning-sketch.js create mode 100644 test/manual-test-examples/events/keyCode-warning.html diff --git a/src/core/main.js b/src/core/main.js index 0e19d75ec1..f7920dfab9 100644 --- a/src/core/main.js +++ b/src/core/main.js @@ -5,10 +5,10 @@ * @requires constants */ -import './shim'; +import "./shim"; // Core needs the PVariables object -import * as constants from './constants'; +import * as constants from "./constants"; /** * This is the p5 instance constructor. * @@ -291,7 +291,7 @@ class p5 { this._initializeInstanceVariables(); this._defaultCanvasSize = { width: 100, - height: 100 + height: 100, }; this._events = { // keep track of user-events for unregistering later @@ -311,7 +311,7 @@ class p5 { touchmove: null, touchend: null, resize: null, - blur: null + blur: null, }; this._millisStart = -1; this._recording = false; @@ -323,7 +323,7 @@ class p5 { this._gaussian_previous = false; this._events.wheel = null; - this._loadingScreenId = 'p5_loading'; + this._loadingScreenId = "p5_loading"; // Allows methods to be registered on an instance that // are instance-specific. @@ -331,9 +331,8 @@ class p5 { const methods = Object.getOwnPropertyNames(p5.prototype._registeredMethods); for (const prop of methods) { - this._registeredMethods[prop] = p5.prototype._registeredMethods[ - prop - ].slice(); + this._registeredMethods[prop] = + p5.prototype._registeredMethods[prop].slice(); } if (window.DeviceOrientationEvent) { @@ -350,7 +349,7 @@ class p5 { if (target._registeredMethods.hasOwnProperty(hookName)) { const methods = target._registeredMethods[hookName]; for (const method of methods) { - if (typeof method === 'function') { + if (typeof method === "function") { method.call(context); } } @@ -360,22 +359,22 @@ class p5 { this._start = () => { // Find node if id given if (this._userNode) { - if (typeof this._userNode === 'string') { + if (typeof this._userNode === "string") { this._userNode = document.getElementById(this._userNode); } } const context = this._isGlobal ? window : this; if (context.preload) { - this.callRegisteredHooksFor('beforePreload'); + this.callRegisteredHooksFor("beforePreload"); // Setup loading screen // Set loading screen into dom if not present // Otherwise displays and removes user provided loading screen let loadingScreen = document.getElementById(this._loadingScreenId); if (!loadingScreen) { - loadingScreen = document.createElement('div'); - loadingScreen.innerHTML = 'Loading...'; - loadingScreen.style.position = 'absolute'; + loadingScreen = document.createElement("div"); + loadingScreen.innerHTML = "Loading..."; + loadingScreen.style.position = "absolute"; loadingScreen.id = this._loadingScreenId; const node = this._userNode || document.body; node.appendChild(loadingScreen); @@ -406,14 +405,14 @@ class p5 { } }; - this._runIfPreloadsAreDone = function() { + this._runIfPreloadsAreDone = function () { const context = this._isGlobal ? window : this; if (context._preloadCount === 0) { const loadingScreen = document.getElementById(context._loadingScreenId); if (loadingScreen) { loadingScreen.parentNode.removeChild(loadingScreen); } - this.callRegisteredHooksFor('afterPreload'); + this.callRegisteredHooksFor("afterPreload"); if (!this._setupDone) { this._lastTargetFrameTime = window.performance.now(); this._lastRealFrameTime = window.performance.now(); @@ -425,15 +424,15 @@ class p5 { } }; - this._decrementPreload = function() { + this._decrementPreload = function () { const context = this._isGlobal ? window : this; - if (!context._preloadDone && typeof context.preload === 'function') { - context._setProperty('_preloadCount', context._preloadCount - 1); + if (!context._preloadDone && typeof context.preload === "function") { + context._setProperty("_preloadCount", context._preloadCount - 1); context._runIfPreloadsAreDone(); } }; - this._wrapPreload = function(obj, fnName) { + this._wrapPreload = function (obj, fnName) { return (...args) => { //increment counter this._incrementPreload(); @@ -442,27 +441,27 @@ class p5 { }; }; - this._incrementPreload = function() { + this._incrementPreload = function () { const context = this._isGlobal ? window : this; // Do nothing if we tried to increment preloads outside of `preload` if (context._preloadDone) return; - context._setProperty('_preloadCount', context._preloadCount + 1); + context._setProperty("_preloadCount", context._preloadCount + 1); }; this._setup = () => { - this.callRegisteredHooksFor('beforeSetup'); + this.callRegisteredHooksFor("beforeSetup"); // Always create a default canvas. // Later on if the user calls createCanvas, this default one // will be replaced this.createCanvas( this._defaultCanvasSize.width, this._defaultCanvasSize.height, - 'p2d' + "p2d" ); // return preload functions to their normal vals if switched by preload const context = this._isGlobal ? window : this; - if (typeof context.preload === 'function') { + if (typeof context.preload === "function") { for (const f in this._preloadMethods) { context[f] = this._preloadMethods[f][f]; if (context[f] && this) { @@ -478,16 +477,16 @@ class p5 { // Short-circuit on this, in case someone used the library in "global" // mode earlier - if (typeof context.setup === 'function') { + if (typeof context.setup === "function") { context.setup(); } // unhide any hidden canvases that were created - const canvases = document.getElementsByTagName('canvas'); + const canvases = document.getElementsByTagName("canvas"); for (const k of canvases) { - if (k.dataset.hidden === 'true') { - k.style.visibility = ''; + if (k.dataset.hidden === "true") { + k.style.visibility = ""; delete k.dataset.hidden; } } @@ -498,10 +497,10 @@ class p5 { if (this._accessibleOutputs.grid || this._accessibleOutputs.text) { this._updateAccsOutput(); } - this.callRegisteredHooksFor('afterSetup'); + this.callRegisteredHooksFor("afterSetup"); }; - this._draw = requestAnimationFrameTimestamp => { + this._draw = (requestAnimationFrameTimestamp) => { const now = requestAnimationFrameTimestamp || window.performance.now(); const time_since_last = now - this._lastTargetFrameTime; const target_time_between_frames = 1000 / this._targetFrameRate; @@ -521,24 +520,26 @@ class p5 { ) { //mandatory update values(matrixes and stack) this.deltaTime = now - this._lastRealFrameTime; - this._setProperty('deltaTime', this.deltaTime); + this._setProperty("deltaTime", this.deltaTime); this._frameRate = 1000.0 / this.deltaTime; this.redraw(); - this._lastTargetFrameTime = Math.max(this._lastTargetFrameTime - + target_time_between_frames, now); + this._lastTargetFrameTime = Math.max( + this._lastTargetFrameTime + target_time_between_frames, + now + ); this._lastRealFrameTime = now; // If the user is actually using mouse module, then update // coordinates, otherwise skip. We can test this by simply // checking if any of the mouse functions are available or not. // NOTE : This reflects only in complete build or modular build. - if (typeof this._updateMouseCoords !== 'undefined') { + if (typeof this._updateMouseCoords !== "undefined") { this._updateMouseCoords(); //reset delta values so they reset even if there is no mouse event to set them // for example if the mouse is outside the screen - this._setProperty('movedX', 0); - this._setProperty('movedY', 0); + this._setProperty("movedX", 0); + this._setProperty("movedY", 0); } } @@ -550,6 +551,27 @@ class p5 { }; this._setProperty = (prop, value) => { + // Intercept keyCode writes to show Friendly Error warning + if (prop === "keyCode") { + if (!this._keyCodeWarningShown) { + p5._friendlyError( + "keyCode === is deprecated in p5.js 2.0. Please use keyIsDown() instead.\n" + + "See https://beta.p5js.org/reference/p5/keyisdown/ for more information." + ); + this._keyCodeWarningShown = true; + } + + this.keyCode = value; + this._keyCode = value; + + if (this._isGlobal) { + window.keyCode = value; + window._keyCode = value; + } + return; + } + + // Default behavior for all other props this[prop] = value; if (this._isGlobal) { window[prop] = value; @@ -596,8 +618,8 @@ class p5 { */ this.remove = () => { // Remove start listener to prevent orphan canvas being created - if(this._startListener){ - window.removeEventListener('load', this._startListener, false); + if (this._startListener) { + window.removeEventListener("load", this._startListener, false); } const loadingScreen = document.getElementById(this._loadingScreenId); if (loadingScreen) { @@ -629,8 +651,8 @@ class p5 { // call any registered remove functions const self = this; - this._registeredMethods.remove.forEach(f => { - if (typeof f !== 'undefined') { + this._registeredMethods.remove.forEach((f) => { + if (typeof f !== "undefined") { f.call(self); } }); @@ -665,7 +687,7 @@ class p5 { p5.instance = this; // Loop through methods on the prototype and attach them to the window for (const p in p5.prototype) { - if (typeof p5.prototype[p] === 'function') { + if (typeof p5.prototype[p] === "function") { const ev = p.substring(2); if (!this._events.hasOwnProperty(ev)) { if (Math.hasOwnProperty(p) && Math[p] === p5.prototype[p]) { @@ -700,7 +722,7 @@ class p5 { this._updateWindowSize(); // call any registered init functions - this.callRegisteredHooksFor('init'); + this.callRegisteredHooksFor("init"); // Set up promise preloads this._setupPromisePreloads(); @@ -715,23 +737,23 @@ class p5 { } const focusHandler = () => { - this._setProperty('focused', true); + this._setProperty("focused", true); }; const blurHandler = () => { - this._setProperty('focused', false); + this._setProperty("focused", false); }; - window.addEventListener('focus', focusHandler); - window.addEventListener('blur', blurHandler); - this.registerMethod('remove', () => { - window.removeEventListener('focus', focusHandler); - window.removeEventListener('blur', blurHandler); + window.addEventListener("focus", focusHandler); + window.addEventListener("blur", blurHandler); + this.registerMethod("remove", () => { + window.removeEventListener("focus", focusHandler); + window.removeEventListener("blur", blurHandler); }); - if (document.readyState === 'complete') { + if (document.readyState === "complete") { this._start(); } else { this._startListener = this._start.bind(this); - window.addEventListener('load', this._startListener, false); + window.addEventListener("load", this._startListener, false); } } @@ -740,7 +762,7 @@ class p5 { text: false, grid: false, textLabel: false, - gridLabel: false + gridLabel: false, }; this._styles = []; @@ -752,7 +774,7 @@ class p5 { this._colorMaxes = { rgb: [255, 255, 255, 255], hsb: [360, 100, 100, 1], - hsl: [360, 100, 100, 1] + hsl: [360, 100, 100, 1], }; this._downKeys = {}; //Holds the key codes of currently pressed keys @@ -804,14 +826,14 @@ class p5 { // albeit one that is very unlikely to be used: // // https://developer.mozilla.org/en-US/docs/Web/API/Window/print - print: true + print: true, }; return (prop, value) => { if ( !p5.disableFriendlyErrors && - typeof IS_MINIFIED === 'undefined' && - typeof value === 'function' && + typeof IS_MINIFIED === "undefined" && + typeof value === "function" && !(prop in p5.prototype._preloadMethods) ) { try { @@ -844,14 +866,14 @@ class p5 { configurable: true, enumerable: true, value: newValue, - writable: true + writable: true, }); if (!p5.disableFriendlyErrors) { log( `You just changed the value of "${prop}", which was a p5 function. This could cause problems later if you're not careful.` ); } - } + }, }); } catch (e) { let message = `p5 had problems creating the global function "${prop}", possibly because your code is already using that name as a variable. You may want to rename your variable to something else.`; @@ -924,7 +946,7 @@ p5.prototype._preloadMethods = { loadTable: p5.prototype, loadFont: p5.prototype, loadModel: p5.prototype, - loadShader: p5.prototype + loadShader: p5.prototype, }; p5.prototype._registeredMethods = { init: [], pre: [], post: [], remove: [] }; diff --git a/test/manual-test-examples/events/keyCode-warning-sketch.js b/test/manual-test-examples/events/keyCode-warning-sketch.js new file mode 100644 index 0000000000..ff87684245 --- /dev/null +++ b/test/manual-test-examples/events/keyCode-warning-sketch.js @@ -0,0 +1,22 @@ +function setup() { + createCanvas(windowWidth, windowHeight); + background(0); + fill(255); + textSize(20); + text("Press any arrow key and check console for warning", 40, height / 2); +} + +function draw() { + if (typeof keyCode === 'undefined') return; // avoid error before first key press + + if (keyCode === LEFT_ARROW) { + background(255, 0, 0); + } else if (keyCode === RIGHT_ARROW) { + background(0, 255, 0); + } else if (keyCode === UP_ARROW) { + background(0, 0, 255); + } else if (keyCode === DOWN_ARROW) { + background(255, 255, 0); + } +} + diff --git a/test/manual-test-examples/events/keyCode-warning.html b/test/manual-test-examples/events/keyCode-warning.html new file mode 100644 index 0000000000..154c5b9aa9 --- /dev/null +++ b/test/manual-test-examples/events/keyCode-warning.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + +
+

Deprecated keyCode warning test

+
+ + + \ No newline at end of file From 2842c90aacd0688b96f4e08421ef61804bf0021f Mon Sep 17 00:00:00 2001 From: a-y-a-n-das Date: Fri, 7 Nov 2025 11:33:58 +0530 Subject: [PATCH 2/2] fixed eslint issues --- src/core/main.js | 106 +++++++++--------- .../events/keyCode-warning-sketch.js | 3 +- 2 files changed, 54 insertions(+), 55 deletions(-) diff --git a/src/core/main.js b/src/core/main.js index f7920dfab9..1e54342d81 100644 --- a/src/core/main.js +++ b/src/core/main.js @@ -5,10 +5,10 @@ * @requires constants */ -import "./shim"; +import './shim'; // Core needs the PVariables object -import * as constants from "./constants"; +import * as constants from './constants'; /** * This is the p5 instance constructor. * @@ -291,7 +291,7 @@ class p5 { this._initializeInstanceVariables(); this._defaultCanvasSize = { width: 100, - height: 100, + height: 100 }; this._events = { // keep track of user-events for unregistering later @@ -311,7 +311,7 @@ class p5 { touchmove: null, touchend: null, resize: null, - blur: null, + blur: null }; this._millisStart = -1; this._recording = false; @@ -323,7 +323,7 @@ class p5 { this._gaussian_previous = false; this._events.wheel = null; - this._loadingScreenId = "p5_loading"; + this._loadingScreenId = 'p5_loading'; // Allows methods to be registered on an instance that // are instance-specific. @@ -349,7 +349,7 @@ class p5 { if (target._registeredMethods.hasOwnProperty(hookName)) { const methods = target._registeredMethods[hookName]; for (const method of methods) { - if (typeof method === "function") { + if (typeof method === 'function') { method.call(context); } } @@ -359,22 +359,22 @@ class p5 { this._start = () => { // Find node if id given if (this._userNode) { - if (typeof this._userNode === "string") { + if (typeof this._userNode === 'string') { this._userNode = document.getElementById(this._userNode); } } const context = this._isGlobal ? window : this; if (context.preload) { - this.callRegisteredHooksFor("beforePreload"); + this.callRegisteredHooksFor('beforePreload'); // Setup loading screen // Set loading screen into dom if not present // Otherwise displays and removes user provided loading screen let loadingScreen = document.getElementById(this._loadingScreenId); if (!loadingScreen) { - loadingScreen = document.createElement("div"); - loadingScreen.innerHTML = "Loading..."; - loadingScreen.style.position = "absolute"; + loadingScreen = document.createElement('div'); + loadingScreen.innerHTML = 'Loading...'; + loadingScreen.style.position = 'absolute'; loadingScreen.id = this._loadingScreenId; const node = this._userNode || document.body; node.appendChild(loadingScreen); @@ -412,7 +412,7 @@ class p5 { if (loadingScreen) { loadingScreen.parentNode.removeChild(loadingScreen); } - this.callRegisteredHooksFor("afterPreload"); + this.callRegisteredHooksFor('afterPreload'); if (!this._setupDone) { this._lastTargetFrameTime = window.performance.now(); this._lastRealFrameTime = window.performance.now(); @@ -426,8 +426,8 @@ class p5 { this._decrementPreload = function () { const context = this._isGlobal ? window : this; - if (!context._preloadDone && typeof context.preload === "function") { - context._setProperty("_preloadCount", context._preloadCount - 1); + if (!context._preloadDone && typeof context.preload === 'function') { + context._setProperty('_preloadCount', context._preloadCount - 1); context._runIfPreloadsAreDone(); } }; @@ -445,23 +445,23 @@ class p5 { const context = this._isGlobal ? window : this; // Do nothing if we tried to increment preloads outside of `preload` if (context._preloadDone) return; - context._setProperty("_preloadCount", context._preloadCount + 1); + context._setProperty('_preloadCount', context._preloadCount + 1); }; this._setup = () => { - this.callRegisteredHooksFor("beforeSetup"); + this.callRegisteredHooksFor('beforeSetup'); // Always create a default canvas. // Later on if the user calls createCanvas, this default one // will be replaced this.createCanvas( this._defaultCanvasSize.width, this._defaultCanvasSize.height, - "p2d" + 'p2d' ); // return preload functions to their normal vals if switched by preload const context = this._isGlobal ? window : this; - if (typeof context.preload === "function") { + if (typeof context.preload === 'function') { for (const f in this._preloadMethods) { context[f] = this._preloadMethods[f][f]; if (context[f] && this) { @@ -477,16 +477,16 @@ class p5 { // Short-circuit on this, in case someone used the library in "global" // mode earlier - if (typeof context.setup === "function") { + if (typeof context.setup === 'function') { context.setup(); } // unhide any hidden canvases that were created - const canvases = document.getElementsByTagName("canvas"); + const canvases = document.getElementsByTagName('canvas'); for (const k of canvases) { - if (k.dataset.hidden === "true") { - k.style.visibility = ""; + if (k.dataset.hidden === 'true') { + k.style.visibility = ''; delete k.dataset.hidden; } } @@ -497,10 +497,10 @@ class p5 { if (this._accessibleOutputs.grid || this._accessibleOutputs.text) { this._updateAccsOutput(); } - this.callRegisteredHooksFor("afterSetup"); + this.callRegisteredHooksFor('afterSetup'); }; - this._draw = (requestAnimationFrameTimestamp) => { + this._draw = requestAnimationFrameTimestamp => { const now = requestAnimationFrameTimestamp || window.performance.now(); const time_since_last = now - this._lastTargetFrameTime; const target_time_between_frames = 1000 / this._targetFrameRate; @@ -520,7 +520,7 @@ class p5 { ) { //mandatory update values(matrixes and stack) this.deltaTime = now - this._lastRealFrameTime; - this._setProperty("deltaTime", this.deltaTime); + this._setProperty('deltaTime', this.deltaTime); this._frameRate = 1000.0 / this.deltaTime; this.redraw(); this._lastTargetFrameTime = Math.max( @@ -533,13 +533,13 @@ class p5 { // coordinates, otherwise skip. We can test this by simply // checking if any of the mouse functions are available or not. // NOTE : This reflects only in complete build or modular build. - if (typeof this._updateMouseCoords !== "undefined") { + if (typeof this._updateMouseCoords !== 'undefined') { this._updateMouseCoords(); //reset delta values so they reset even if there is no mouse event to set them // for example if the mouse is outside the screen - this._setProperty("movedX", 0); - this._setProperty("movedY", 0); + this._setProperty('movedX', 0); + this._setProperty('movedY', 0); } } @@ -552,11 +552,11 @@ class p5 { this._setProperty = (prop, value) => { // Intercept keyCode writes to show Friendly Error warning - if (prop === "keyCode") { + if (prop === 'keyCode') { if (!this._keyCodeWarningShown) { p5._friendlyError( - "keyCode === is deprecated in p5.js 2.0. Please use keyIsDown() instead.\n" + - "See https://beta.p5js.org/reference/p5/keyisdown/ for more information." + 'keyCode === is deprecated in p5.js 2.0. Please use keyIsDown() instead.\n' + + 'See https://beta.p5js.org/reference/p5/keyisdown/ for more information.' ); this._keyCodeWarningShown = true; } @@ -619,7 +619,7 @@ class p5 { this.remove = () => { // Remove start listener to prevent orphan canvas being created if (this._startListener) { - window.removeEventListener("load", this._startListener, false); + window.removeEventListener('load', this._startListener, false); } const loadingScreen = document.getElementById(this._loadingScreenId); if (loadingScreen) { @@ -651,8 +651,8 @@ class p5 { // call any registered remove functions const self = this; - this._registeredMethods.remove.forEach((f) => { - if (typeof f !== "undefined") { + this._registeredMethods.remove.forEach(f => { + if (typeof f !== 'undefined') { f.call(self); } }); @@ -687,7 +687,7 @@ class p5 { p5.instance = this; // Loop through methods on the prototype and attach them to the window for (const p in p5.prototype) { - if (typeof p5.prototype[p] === "function") { + if (typeof p5.prototype[p] === 'function') { const ev = p.substring(2); if (!this._events.hasOwnProperty(ev)) { if (Math.hasOwnProperty(p) && Math[p] === p5.prototype[p]) { @@ -722,7 +722,7 @@ class p5 { this._updateWindowSize(); // call any registered init functions - this.callRegisteredHooksFor("init"); + this.callRegisteredHooksFor('init'); // Set up promise preloads this._setupPromisePreloads(); @@ -737,23 +737,23 @@ class p5 { } const focusHandler = () => { - this._setProperty("focused", true); + this._setProperty('focused', true); }; const blurHandler = () => { - this._setProperty("focused", false); + this._setProperty('focused', false); }; - window.addEventListener("focus", focusHandler); - window.addEventListener("blur", blurHandler); - this.registerMethod("remove", () => { - window.removeEventListener("focus", focusHandler); - window.removeEventListener("blur", blurHandler); + window.addEventListener('focus', focusHandler); + window.addEventListener('blur', blurHandler); + this.registerMethod('remove', () => { + window.removeEventListener('focus', focusHandler); + window.removeEventListener('blur', blurHandler); }); - if (document.readyState === "complete") { + if (document.readyState === 'complete') { this._start(); } else { this._startListener = this._start.bind(this); - window.addEventListener("load", this._startListener, false); + window.addEventListener('load', this._startListener, false); } } @@ -762,7 +762,7 @@ class p5 { text: false, grid: false, textLabel: false, - gridLabel: false, + gridLabel: false }; this._styles = []; @@ -774,7 +774,7 @@ class p5 { this._colorMaxes = { rgb: [255, 255, 255, 255], hsb: [360, 100, 100, 1], - hsl: [360, 100, 100, 1], + hsl: [360, 100, 100, 1] }; this._downKeys = {}; //Holds the key codes of currently pressed keys @@ -826,14 +826,14 @@ class p5 { // albeit one that is very unlikely to be used: // // https://developer.mozilla.org/en-US/docs/Web/API/Window/print - print: true, + print: true }; return (prop, value) => { if ( !p5.disableFriendlyErrors && - typeof IS_MINIFIED === "undefined" && - typeof value === "function" && + typeof IS_MINIFIED === 'undefined' && + typeof value === 'function' && !(prop in p5.prototype._preloadMethods) ) { try { @@ -866,14 +866,14 @@ class p5 { configurable: true, enumerable: true, value: newValue, - writable: true, + writable: true }); if (!p5.disableFriendlyErrors) { log( `You just changed the value of "${prop}", which was a p5 function. This could cause problems later if you're not careful.` ); } - }, + } }); } catch (e) { let message = `p5 had problems creating the global function "${prop}", possibly because your code is already using that name as a variable. You may want to rename your variable to something else.`; @@ -946,7 +946,7 @@ p5.prototype._preloadMethods = { loadTable: p5.prototype, loadFont: p5.prototype, loadModel: p5.prototype, - loadShader: p5.prototype, + loadShader: p5.prototype }; p5.prototype._registeredMethods = { init: [], pre: [], post: [], remove: [] }; diff --git a/test/manual-test-examples/events/keyCode-warning-sketch.js b/test/manual-test-examples/events/keyCode-warning-sketch.js index ff87684245..4125b8e1aa 100644 --- a/test/manual-test-examples/events/keyCode-warning-sketch.js +++ b/test/manual-test-examples/events/keyCode-warning-sketch.js @@ -3,7 +3,7 @@ function setup() { background(0); fill(255); textSize(20); - text("Press any arrow key and check console for warning", 40, height / 2); + text('Press any arrow key and check console for warning', 40, height / 2); } function draw() { @@ -19,4 +19,3 @@ function draw() { background(255, 255, 0); } } -