Changing image using setInterval() with class in p5.js

Question

Changing image using setInterval() with class in p5.js

I'm currently tackling a project involving p5.js.

My objective is to rotate images every X seconds, similar to how it was achieved in this example here.

Nevertheless, I encountered an issue when attempting the same with a class object. The setInterval() method seems to malfunction in this scenario.

Could this be related to scope in some way?

javascript class setinterval p5.js

Answer 1

Answer №1

Let's delve into a more straightforward example:

class Example {
  constructor(exampleMessage) {
    this.exampleMessage = exampleMessage;
  }
  display() {
    print(this.exampleMessage);
  }
}

What do you think will happen with the following code?

var message = 'hi';
var example = new Example(message);
message = 'bye';
example.display();

Based on how your code is set up, it may seem like 'bye' would be printed, but in reality, 'hi' will be displayed.

This discrepancy occurs because you are passing the value of the variable to the Example constructor. This creates two variables referencing the same value 'hi'. When you update the first variable, the second one doesn't automatically reflect that change.

To address this issue, you could utilize a single global variable like so:

class Example {
  display() {
    print(message);
  }
}

var message = 'experimenting';
var example = new Example();
example.display();

Alternatively, you could implement a function such as setMessage() within the class to modify the value internally:

class Example {
  constructor(exampleMessage) {
    this.exampleMessage = exampleMessage;
  }
  display() {
    print(this.exampleMessage);
  }
  setMessage(exampleMessage) {
    this.exampleMessage = exampleMessage;
  }
}

Answer 2

Let's delve into a more straightforward example:

class Example {
  constructor(exampleMessage) {
    this.exampleMessage = exampleMessage;
  }
  display() {
    print(this.exampleMessage);
  }
}

What do you think will happen with the following code?

var message = 'hi';
var example = new Example(message);
message = 'bye';
example.display();

Based on how your code is set up, it may seem like 'bye' would be printed, but in reality, 'hi' will be displayed.

This discrepancy occurs because you are passing the value of the variable to the Example constructor. This creates two variables referencing the same value 'hi'. When you update the first variable, the second one doesn't automatically reflect that change.

To address this issue, you could utilize a single global variable like so:

class Example {
  display() {
    print(message);
  }
}

var message = 'experimenting';
var example = new Example();
example.display();

Alternatively, you could implement a function such as setMessage() within the class to modify the value internally:

class Example {
  constructor(exampleMessage) {
    this.exampleMessage = exampleMessage;
  }
  display() {
    print(this.exampleMessage);
  }
  setMessage(exampleMessage) {
    this.exampleMessage = exampleMessage;
  }
}

Changing image using setInterval() with class in p5.js

Answer №1

Similar questions

Creating an HTML file using PUG in a local environment (using npm and gulp)

Successively linking promises together within a for-each iteration

Utilize Node.js to encrypt data from an extensive file

Please make sure to only choose one checkbox at a time

Navigation buttons that move the user either up or down the page

Updating user attributes as an administrator using the Cognito SDK

In TypeScript, maximize the capabilities of JavaScript modules by utilizing the import extension

Is it possible to enqueue a handshake after already having enqueued one in Socket IO?

Triggering an AngularJS function upon window close event

Using Jquery to iterate through a dynamic list of elements

Refresh information once another user enters data

Tips on sending a string as an argument in an onclick function

Searching for values using keys in Angular

Exploring the process of iterating through arrays within an object in vue.js using the v-for directive

Attempting to execute an onclick event by clicking on a link is not functioning properly

From time to time, I may post files of substantial size

Mastering Number Formatting in VueJS

tutorial on adding a user-inputted value to an array in AngularJS

JavaScript event/Rails app encounters surprising outcome

JavaScript visibility disappearing intermittently