Hey, so I am currently creating an interactive story with different scenes. Each scene has been created as an object. However, I am struggling with the flow of the program, I am currently using different keys to change scene but I would like to just use mousePressed to change each scene if that is possible? I have tried using this however once the mouse is pressed it performs all the scenes at one? Any help would be greatly appreciated. Thanks.
Hi,
Can you post your code or at least an example to show how your code works? Just with the information you gave us it is hard to help.
for example, pretend each ball is a different scene. i have assigned each scene to a specific key like up, down, 1,2… Is there any way i can just press the mouse and change each scene individually in order?
void setup() {
size(500, 500);
}
void draw() {
background(255);
if ( keyCode == UP) {
ball1();
}
if (keyCode == RIGHT) {
ball2();
}
if ( keyCode == DOWN) {
ball3();
}
}
void ball1() {
background(0);
fill(255, 0, 0);
ellipse(100, 200, 50, 50);
}
void ball2() {
background(100);
fill(0, 255, 0);
ellipse(width/2, height/2, 50, 50);
}
void ball3() {
background(250);
fill(0, 0, 255);
ellipse(400, 400, 50, 50);
}
Can you pease format your code by selecting it and clicking the following icon: </>.
You can edit your code by clicking the pen icon at the bottom right of your post.
Also, please read this thread for rules when posting on this forum: Guidelines—Tips on Asking Questions
Do you want to press only one time on the mouse and then it plays every scene automatically or you want to press on the mouse everytime you want to go to the next one?
I think you mean the second one so I’ll answer that one.
In order to do that you just need to have a variable to keep track on wich scen you are at.
int currentScene;
void setup() {
size(500,500);
currentScene = 0;
}
void draw() {
}
void ball1() {
...
}
void ball2() {
...
}
void ball3() {
...
}
void playScene(int nb) {
if (nb ==1) {
ball1();
}
if (nb ==2) {
ball2();
}
if (nb ==3) {
ball3();
}
}
void mouseClicked() {
currentScene++;
if (currentScene > 3) {
currentScene = 1;
}
playScene(currentScene);
}
Yeah that’s what I meant. It works great now, thanks.
Maybe you can store your objects in an array list and gives them an animate fucntion.
This way you could still keep track of the current scene and the draw function would look something like this:
void draw() {
mySceneList.get(currentScene).animate();
}
ok, but how would i create the array list? im quite new to coding so dont know much about arrays yet. Thanks
Check out the reference page of processing website: https://processing.org/reference/ArrayList.html
You first create your list:
ArrayList<YourClass> nameOfList = new ArrayList<YourClass>();
YourClass is what you want to store into the arrayList.
Then you can add an item to your list like this:
nameOfList.add(new YourClass());
Remove one with:
nameOfList.remove(i);
And access to one element like this:
nameOfList.get(i);
this is really confusing and i cant get it to work, is there any other way of doing this without arrays?
Okqy let’s break it down a bit.
First you have you ball object
class Ball {
color ballColor;
float ballSize;
int dir;
Ball(color c) {
ballColor = c;
ballSize = 10;
dir = 1;
}
void animate() {
ballSize += 10 * dir;
if (ballSize == 100) {
dir = -1;
}
if (ballSize == 10) {
dir = 1;
}
}
void display() {
background(0);
fill(ballColor);
ellipse(width / 2, height / 2, ballSize, ballSize);
}
}
Then you create your scene
ArrayList<Ball> balls= new ArrayList<Ball>();
int currentScene;
void setup() {
noStroke();
currentScene = 0;
balls.add(new Ball(color(255, 0, 0)));
balls.add(new Ball(color(0, 255, 0)));
balls.add(new Ball(color(0, 0, 255)));
}
void draw() {
balls.get(currentScene).animate();
balls.get(currentScene).display();
}
void mouseClicked() {
currentScene++;
if (currentScene > 2) {
currentScene = 0;
}
}
I’m not home so I couldn’t try the code but I’ll give it a run while home to try it out
EDIT: I got back home and corrected some typo. It should work now.
Thanks i understand it a bit better now. At this part :
balls.add(new Ball(color(255, 0, 0)));
balls.add(new Ball(color(0, 255, 0)));
balls.add(new Ball(color(0, 0, 255)));
if i just wanted an object to simply move not change colour how would i write it? or would i not need to add anything to the setup section?
Im pretty sure everything now is correct in the object section but on the main sketch i dont know what ive done, the objects are all overlapped and when the mouse is clicked it crashes?
ArrayList<Scene1> scene1= new ArrayList<Scene1>();
ArrayList<Scene2> scene2= new ArrayList<Scene2>();
int currentScene;
void setup() {
noStroke();
size(1000,800);
currentScene = 0;
scene1.add(new Scene1());
scene2.add(new Scene2());
}
void draw() {
background(0,155,200);
scene1.get(currentScene).animate();
scene1.get(currentScene).display();
scene2.get(currentScene).animate();
scene2.get(currentScene).display();
}
void mouseClicked() {
currentScene++;
if (currentScene > 2) {
currentScene = 0;
}
}
It crashes because you try to acces an element that is not in the array.
Here: scene1.get(currentScene), when currentScene = 1 you are trying to acces the second item in your array (because the first item is the item 0).
But in your case you put only one item in it: scene1.add(new Scene1());
Thus the crash.
Concerning your overlapping problem We would need to see more of your Scene1 and Scene2 code to help you.
Besides that, I think there is a bigger issue here in the way your code is structured. When you told me that you were having a class for your scene, I though you were having one for all of your scenes, that’s why I told you about the arrayList. But now, since they are all different, you don’t need an arrayList to store them since your are actually created one arrayList per scene each one of them containing only one item. arrayList are usefull only if you can store plenty of the same kind of item so you can easily loop thru all of them to perform the same kind of operations.
In the exemple I gave you, you can see that I have actually only 1 class and 3 items stored in 1 arrayList.
Now if everything is hard coded you can just have a if…else structure in your draw loop that call the right function depending on the currentScene value.
Or, you can use interfaces. They are a bit hard to understand at first, but the general concept of an interface is generalizing a few classes as one generic type.
It’s very simple to create an interface:
interface Scene {
void draw(); // note that in interfaces methods don't have bodies
void update();
// etc.
}
Then you can make several classes implementing the interface:
class Scene1 implements Scene {
@Override // optional, but recommended for better readability
void draw() {
}
@Override
void update() {
}
}
Remember that a class implementing an interface must implement all the methods of the interface.
Then you can initialize your ArrayList like so:
ArrayList<Scene> scenes = new ArrayList<Scene>;
// and add scenes
scenes.add(new Scene1());
// then you can call all the methods of your interface
scenes.get(0).draw();
scenes.get(0).update();
2 Likes
ok, how would i make each scene change with a mouse click though?
The same way as in the previous exemple.
As @Iqdev said Interfaces allow you to generalize classes as one generic type so you can now create an arrayList of that interface and add all of your scene inside.
Then you can use the get() function with the currentScene variable to then display the one you want.
1 Like
ok lol now im completely confusing myself… ive got to this but i dont think its correct?
int currentScene;
ArrayList<Scene> scenes= new ArrayList<Scene>();
scenes.add(new Scene1());
scenes.add(new Scene2());
scenes.add(new Scene3());
scenes.get(0).update();
void setup() {
noStroke();
size(1000,800);
currentScene = 0;
}
interface Scene{
void display();
void animate();
}
void draw() {
background(0,155,200);
scenes.get(currentScene).animate();
scenes.get(currentScene).display();
}
void mouseClicked() {
currentScene++;
if (currentScene > 2) {
currentScene = 0;
}
}
or am i supposed to write all the hardcoded stuff from each scene in the interface part?
Almost!
You need to add your scenes in the setup() function (or the draw() or another one but not in the middle of nowhere)
Then, having just the interface is not enough, you need your Scene1, Scene2 and Scene3 classes that all implements your Scene interface and in those 3 classes, you need to develop your display() and animate() functions.
And be careful, you are using an update() function too: scenes.get(0).update(); so your interface should declare that method too
Your code should look something like this now:
int currentScene;
ArrayList<Scene> scenes= new ArrayList<Scene>();
void setup() {
noStroke();
size(1000,800);
scenes.add(new Scene1());
scenes.add(new Scene2());
scenes.add(new Scene3());
scenes.get(0).update();
currentScene = 0;
}
void draw() {
background(0,155,200);
scenes.get(currentScene).animate();
scenes.get(currentScene).display();
}
void mouseClicked() {
currentScene++;
if (currentScene > scenes.size() - 1) { //Note that I have change the hard coded value of 2 to dynamically stay in the range of the array
currentScene = 0;
}
}
interface Scene{
// You don't develop the methods in the interface
void display();
void animate();
void update();
}
class Scene1 implements Scene{
@Override
void display(){
//Write your code here
}
@Override
void animate(){
//Write your code here
}
@Override
void update(){
//Write your code here
}
}
class Scene2 implements Scene{
@Override
void display(){
//Write your code here
}
@Override
void animate(){
//Write your code here
}
@Override
void update(){
//Write your code here
}
}
class Scene3 implements Scene{
@Override
void display(){
//Write your code here
}
@Override
void animate(){
//Write your code here
}
@Override
void update(){
//Write your code here
}
}
1 Like
Thank you! yeah everything works perfectly now
1 Like