No instances are returned by Processing.instances

I am experiencing an issue with a webpage that is running 2 processing sketches. I came across a suggestion to call Processing.instances[0].exit() in response to a question on dynamically unloading a Processing JS sketch from canvas.

However, when I attempt to call Processing.instances, it returns null and there are no errors displayed on the JavaScript console - additionally, Processing.instances.length also returns (0).

Below is the snippet of JavaScript code:

document.onkeydown = function(e) { // or document.onkeypress
e = e || window.event;
if (e.keyCode == 115 || e.keyCode == 83) { //press "s" or "S"
    alert(Processing.instances.length);
}
};

For reference, here is the URL of the website:

Thank you

javascriptprocessing

Answer №1

It seems like Processing.instances is facing an uncertain future, as discussed on the pjs forum. Here's an alternative approach:

document.onkeydown = function(e) { // or document.onkeypress
  e = e || window.event;
  if (e.keyCode == 115 || e.keyCode == 83) { //press "s" or "S"
    var canvases = document.getElementsByClassName("processingsketch");
            window.alert(canvases.length);
    if (canvases) {
      var ps = Array();
      for (j=0;j<canvases.length;j++) {
        ps[j]=Processing.getInstanceById(canvases[j].getAttribute('id'));
      }
      for (j=0;j<canvases.length;j++) {
        window.alert("ps " + ps[j]);
        window.alert(canvases[j].getAttribute('id'));
        if(ps[j]){ps[j].exit();} //per fartagaintuxedo's comment below: to avoid second error because once it exits then there is no longer an instance in that canvas
        canvases[j].width = canvases[j].width; //to obliterate the canvas instead of just freezing it
      }
    }
  }
};

If you're looking for other ways to clear the canvas, check out this resource: How to clear the canvas for redrawing

Answer №2

For those who come across this question: avoid using Processing.instances as it was not intended to be user-friendly. Instead, there is a convenient function called Processing.getInstanceById() where you can input your canvas id and retrieve the running sketch.

Retrieve your instance using .getInstanceById(), and then execute .exit() on that particular instance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effortless method to handle package.json configurations

Is there a better approach for seamlessly transitioning between using npm link and git, or another solution that caters well to both front end and back end developers? The dilemma I'm facing revolves around developing a website that utilizes multiple ...

javascriptnode.jsgitnpm

What could be causing this code to keep looping?

This is my submission for a class project. The task given was: "Create a function that will kickstart the program and name it main(). From the main() function, invoke a function named getValue(). The getValue() function will prompt the user to input a num ...

javascriptfunctionparametersarguments

In AngularJS expressions, you can compare two dates and use ng-hide based on the comparison

Is it possible to compare two Date strings using Angular JS Expressions? HTML <body ng-controller="app"> <div>{{Today}}</div> <div>{{ItemDate}}</div> <div>{{ItemDate<Today}}</div> </body> ...

javascriptangularjs

Issue with webpack failing to inject variables

I have encountered an issue while using the npm package got, which I am importing into one of my components. Strangely, when I run everything through Webpack, Safari is the only browser showing the error message: SyntaxError: Unexpected keyword 'cons ...

javascriptnode.jsnpmwebpack

What is the most optimal jQuery code to use?

Just wondering, which of the following code snippets is more efficient (or if neither, what would be the best way to approach this)? Background - I am working on creating a small image carousel and the code in question pertains to the controls (previous, ...

javascriptjqueryperformance

Updating the state of a Next.JS router component with React.JS: A step-by-step guide

I've implemented a toggleswitch in my app that changes its state based on the dynamic URL parameters. For instance, if the URL includes a parameter named followType set to following (e.g. https://www.example.com/home?followType=following), I want the ...

javascriptreactjsreact-hooksnext.jsnext-router

Issue with Angular and Karma: HTTP GET request not running

Currently, I am working on an AngularJS project that utilizes Karma to execute some unit tests directly in the browser. To conduct these tests, I have opted for mocha as the test framework. The challenge I am facing lies in running specification tests tha ...

javascriptangularjskarma-runnerangular-mockkarma-mocha

Using AJAX within the $.when function to extract the first character from the returned string

Currently, I am utilizing an AJAX call by using $.when to wait for the completion of that specific ajax request and then continue with processing the subsequent ajax request inside. The code block below demonstrates where the $.when method is being invoke ...

javascriptphpjqueryajax.when

Tips for incorporating a page route with an HTML extension in Next.js

I'm facing a challenge in converting a non-Next.js page to Next.js while maintaining my SEO ranking. To preserve the route structure with HTML extensions and enhance visual appeal, I have outlined the folder structure below: Unfortunately, when acces ...

javascriptreactjsnext.jsserver-side-rendering

Is it possible to combine multiple filter examples together?

Could you please provide some examples or references related to the next task: var planets = [{ residents: [{ name: 'Mars' }, { name: 'Jupiter' }, ...

javascriptangularjs

When sending a POST request, the req.body.someElement parameter is not defined

Encountering an issue with a post request, as req.body is returning undefined values. Despite researching on Google and Stack Overflow, the provided solutions have not resolved the problem. Although logging the name shows a value, trying to access req.body ...

javascriptnode.jsexpressbody-parser

"Looking for a way to eliminate the background of an image on NextJS? Learn

https://i.stack.imgur.com/zAsrJ.png When this image is incorporated into a Nextjs rendering, it unexpectedly includes additional content. <div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3"> <div cla ...

javascriptcssreactjsnext.jstailwind-css

Adding content into a designated position in a document

My challenge is to find the index of user-provided data in order to insert new data at that specific point. I am familiar with array insertion methods, but extracting the index provided by the user is where I'm stuck. My current approach involves filt ...

javascriptreactjs

Simulate internationalization for vue using jest

Currently, I am working on setting up jest unit tests for a Vue project within a complex custom monorepo. I am facing an issue with i18n, which I use for translation management in my application. The problem arises with the following code snippet for init ...

javascripttypescriptvue.jsjestjsvue-i18n

Troubleshooting AngularJS $q Promise Not Being Returned

I have encountered an issue while trying to call a service method in AngularJS. The service method is being called successfully, but it is not returning any value to the controller function that invoked it. If anyone can offer assistance, I would greatly ...

javascriptangularjs

Modify the chosen dates in the date range picker tool designed for Twitter Bootstrap

I recently started using the date range picker for Twitter Bootstrap, a creation by Dan Grossman, which you can find here. Upon initialization, I realized that setting pre-defined values like startDate and endDate was possible. However, my question is: Is ...

javascriptjquerytwitter-bootstrapdaterangepicker

Node.js npm-migration enables the creation of multiple tables in a single migration process

I am new to npm-migration for nodejs and I am exploring ways to streamline the process of creating multiple tables using a single migration, rather than having separate migrations for each table creation. I have experimented with the following code: "up": ...

javascriptmysqlnode.jsmigration

Tips for evaluating an array of objects in JavaScript

Welcome to the world of coding! Here's a scenario with an array: [ { "question1": "Apple", "question2": 5, "question3": "Item 1" }, { "question1": ...

javascriptarraysjsonchart.jssurveyjs

What is the best way to deactivate a button when a certain input field is left blank?

I'm having trouble figuring out how to deactivate a button when specific input fields are empty, while others can remain optional for the process. In my course, we were taught to disable the button until all inputs are valid, so I'm a bit confus ...

javascripthtmlreactjsbuttondisable

How can we extract word array in Python that works like CryptoJS.enc.Hex.parse(hash)?

Is there a method in Python to convert a hash into a word array similar to how it's done in JavaScript? In JavaScript using CryptoJS, you can achieve this by using: CryptoJS.enc.Hex.parse(hash), which will provide the word array. I've searched ...

javascriptpythonnode.jshmaccryptojs