Animation with 3 different sketches combined using Switch with keyboard input

Processing Libraries
1

Hi there,

I am combining 3 different (but similar) sketches into one sketch, and using switch to change states. Using the keyboard input of ‘1’, ‘2’, ‘3’. However, my sketch does not switch when I press the keys. Because it is easier for me to stay organized, I have included each sketch in a different tab, and only having one setup() and one draw() function in the main tab, and then calling the other tabs from there. I named each sketch / scene, draw1(), draw2(), draw3() and I am calling them from the MAIN draw() Eventually I will try and implement timed events using a timer or frameCount, or FrequencyEnergyBeatDetection so that each sketch shows itself depending on the frequency being played, but for the moment I am trying to switch states using numbers on my keyboard. I also did not know if this is the correct way or if I could somehow include each individual sketch in a PGraphics object?

I implemented a small example with much simpler code that works, using the Amnon example found here: https://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/ he uses the void mousePressed() function but I was able to implement void keyPressed() in his example and it works.
It does not work when I implement it in mine.
I am using P3D, and I don’t know if that is the problem. Only pasting relevant code in the example, but there is a sound track for the animation that I will leave in just so you know, for clarity purposes, as I don’t know that that is related. Thank you for reading this. Any help would be appreciated.

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

Minim minim;
AudioPlayer song;
BeatDetect beat;
BeatListener bl;
float kickSize, snareSize, hatSize;

int sketchToDraw; 

void setup() {
  size(600, 600, P3D);
  smooth();
  background(0); //0xeeeeff
  minim = new Minim(this);
  song = minim.loadFile("Kintsugi (09_04_20).mp3", 1024);
  song.play();
}

void draw() {
  if(song==null)
  return;
  switch (sketchToDraw) {
  case 0:  draw1(); break;
  case 1:  draw2(); break;
  case 2:  draw3(); break;
  default: background(0); break;
  }
}

void keyPressed() {
  if (key == '1')
    sketchToDraw = 0;

  if (key == '2')
    sketchToDraw = 1;

  if (key == '3')
    sketchToDraw = 2;
}

//////////////////////// other sketches / scenes in tabs below: draw1(), draw2(), draw3()
//// that I call from draw() using switch

void draw1() {
   
  float speed = 0.003f;//0.03f;
  float radius1 = 50 + 30 * sin( frameCount * speed);
  float radius2 = 50 +30 * cos(frameCount * speed);
  if (mousePressed) {
    background(255);
    //filter(ERODE);
    filter(INVERT);
    strokeWeight(100 * sin(frameCount * speed));
    stroke(#81FFE0, 255); //255
    fill(0, 0);
    rotateX(radians(radius1));
  } else {
    strokeWeight(sin(frameCount * speed));
    stroke(#81FFE0, random(100, 200));
    fill(255, radius1, radius2, 3);
  }
  pushMatrix();
  //frameRate(30);
  //background(0);
  lights();
  translate(width/2, height/2, 200);
  rotateZ(radians(radius2));
  rotateX(PI * sin(radians(radius1*500)));
  rotateY(radians(radius2 * speed));
  //println(sp);

  sphere(constrain(radius2*3, 20, 1000)); //1000
  //ellipse(mouseX, mouseY, radius1 * 15, radius2 * 15);
  popMatrix();
  pushMatrix();
  lights();
  translate(width/2, height/2, 200);
  rotateY(radius1 * 500);
  rotateZ(radius2 * 1000);
  sphere(800);
  popMatrix(); 
}

void draw2() {
 float speed = 0.003f;//0.03f;
  float radius1 = 50 + 30 * sin( frameCount * speed);
  float radius2 = 50 +30 * cos(frameCount * speed);
  if (mousePressed) {
    background(255);
    filter(ERODE);
    //filter(INVERT);
    strokeWeight(10 * sin(frameCount * speed));
    stroke(#81FFE0, 150); //255
    fill(0, 255);
    rotateX(radians(radius1));
  } else {
    strokeWeight(sin(frameCount * speed));
    stroke(#81FFE0, random(100, 200));
    fill(255, radius1, radius2, 3);
  }
  pushMatrix();
 // frameRate(30);
  //background(0);
  lights();
  translate(width/2, height/2, 200);
  rotateZ(radians(radius2));
  rotateX(PI * sin(radians(radius1*500)));
  rotateY(radians(radius2 * speed));
  //println(sp);

  sphere(constrain(radius2*3, 20, 1000)); //1000
  pushStyle();
  filter(POSTERIZE,230); // FILTER!!!
  popStyle();
  //ellipse(mouseX, mouseY, radius1 * 15, radius2 * 15);
  popMatrix();
  pushMatrix();
  lights();
  translate(width/2, height/2, 200);
  rotateY(radius1 * 500);
  rotateZ(radius2 * 1000);
  sphere(800);
  popMatrix();
 }
void draw3() {
 
  float speed = 0.003f;//0.03f;
  float radius1 = 50 + 30 * sin( frameCount * speed);
  float radius2 = 50 +30 * cos(frameCount * speed);
  if (mousePressed) {
    background(255);
    filter(ERODE);
    //filter(INVERT);
    strokeWeight(100 * sin(frameCount * speed));
    stroke(#81FFE0, 255); //255
    fill(0, 0);
    rotateX(radians(radius1));
  } else {
    strokeWeight(sin(frameCount * speed));
    stroke(#81FFE0, random(100, 200));
    fill(255, radius1, radius2, 3);
  }
  pushMatrix();
  //frameRate(30);
  //background(0);
  lights();
  translate(width/2, height/2, 200);
  rotateZ(radians(radius2));
  rotateX(PI * sin(radians(radius1*500)));
  rotateY(radians(radius2 * speed));
  //println(sp);
  
  sphere(constrain(radius2*3, 20, 1000)); //1000
  //ellipse(mouseX, mouseY, radius1 * 15, radius2 * 15);
  popMatrix();
  pushMatrix();
  lights();
  translate(width/2, height/2, 200);
  rotateY(radius1 * 500);
  rotateZ(radius2 * 1000);
  sphere(800);
  popMatrix();
}
1 Like
2

Hello,

I started an exploration of this with some basic code (your code stripped down ) NOT including the sound libraries.

Click Here for Code 
int sketchToDraw; 

void setup() 
  {
  size(300, 300, P3D);
  textAlign(CENTER);
  textSize(48);
  }

void draw() 
  {
  background(0);
  
  switch (sketchToDraw) 
    {
  case 0:  
    draw1(); break;
  case 1:  
    draw2(); break;
  case 2:  
    draw3(); break;
  default: 
    background(0); break;
  }
}

void keyPressed() 
  {
  if (key == '1')
    sketchToDraw = 0;

  if (key == '2')
    sketchToDraw = 1;

  if (key == '3')
    sketchToDraw = 2;
  }

void draw1() 
  {
  text("Draw 1", width/2, height/2);
  println("draw 1");
  }

void draw2() 
  {
  text("Draw 2", width/2, height/2); 
  println("draw 2");
  }

void draw3() 
  {    
  text("Draw 3", width/2, height/2);    
  println("draw 3");
  }

This worked as is and with your 3 draw functions which I did not include here.
I removed all the sound code for testing.

Printing to console is a great tool in code development:

Be sure to comment these when not using! They can slow things down.

There are many ways to do this.
An example here of this:
https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378
Start simple and build on that.

:)

1 Like
3

Thank you very much for your reply, I have a much more simple code that I mentioned in the post that I adapted, it is this one, and it works, very similar to yours, but when I implemented in mine, the relevant parts they are the same (switch, case numbers, etc..) but for some reason it does not work in mine, here is the example code very similar to yours that I did before I implemented the switch states with keyboard input:

int sketchToDraw;

void setup() {
  size(500, 500);
  noStroke();
  smooth();
}

void draw() {

  switch(sketchToDraw) {
  case 0: drawScreenOne(); break;
  case 1: drawScreenTwo(); break;
  case 2: drawScreenThree();  break;
  default: background(0); break;
  }
}

void keyPressed() {
  if (key=='1')
    sketchToDraw = 0;

  if (key == '2')
    sketchToDraw = 1;

  if (key == '3')
    sketchToDraw = 2;

  if (key == '4')
    println("left");
}

/// the functions found in tabs that I call from the main `draw()`
void drawScreenOne() {
  background(255, 0, 0);
  fill(255);
  ellipse(100, 100, 400, 400);
}

void drawScreenTwo() {
  background(0, 255, 0);
  fill(0);
  rect(250, 40, 250, 400);
}
void drawScreenThree() {
  background(0, 0, 255);
  fill(255, 255, 0);
  triangle(150, 100, 150, 400, 450, 250);
}
1 Like
4

That works here…

Maybe your “Num Lock” key if you are using number keypad… that has occasionally got me!

My code was just your original code with sound stuff (cut and paste) stripped away and formatted to my liking.

Perhaps try commenting stuff out of your larger code project to see where things start to fail.

:)

1 Like
5

Yes, the simple code, your stripped down , or my small example work, keyboard input and it changes and calls the other draw() functions, but not in my main program with the P3D and the other graphics instructions, I feel, even if I still cannot find the problem that it is related to the loading of the other functions? maybe I am reaching a memory max or something because I am working in 3D? Also I think it may be that one of them goes on indefinitely and the problem is waiting for it to end, but I thought that the break; was there for that reason…

1 Like
6

Hello,

I was just tinkering with your code… it works the mind!

You will have to scrutinize the changes.

There may be something useful I added…

Code here! 
//import ddf.minim.*;
//import ddf.minim.analysis.*;
//import ddf.minim.effects.*;
//import ddf.minim.signals.*;
//import ddf.minim.spi.*;
//import ddf.minim.ugens.*;

//Minim minim;
//AudioPlayer song;
//BeatDetect beat;
//BeatListener bl;
//float kickSize, snareSize, hatSize;


float speed = 0.003f;
float radius1;
float radius2;

color b = color(0);

int sketchToDraw; 

void setup() {
  size(600, 600, P3D);
  smooth();
  background(0); //0xeeeeff
  //minim = new Minim(this);
  //song = minim.loadFile("Kintsugi (09_04_20).mp3", 1024);
  //song.play();
}

void draw() {
  
  background(b);
  
  //if(song==null)
  //return;
  switch (sketchToDraw) {
  case 0:  draw1(); break;
  case 1:  draw2(); break;
  case 2:  draw3(); break;
  default: 
    b = color(0, 255, 0);
    draw0();
    break;
  }
}

void keyPressed() {
  if (key == '1')
    sketchToDraw = 0;

  else if (key == '2')
    sketchToDraw = 1;

  else if (key == '3')
    sketchToDraw = 2;
  else 
  sketchToDraw = '!';
  
}

//////////////////////// other sketches / scenes in tabs below: draw1(), draw2(), draw3()
//// that I call from draw() using switch

void draw0()
  {
  println("Hit a key 1 or 2 or 3 ...");
  }

void draw1() {
   
  b = color(255, 0, 255);
  
  println("1");
  speed = 0.003f;//0.03f;
  radius1 = 50 + 30 * sin( frameCount * speed);
  radius2 = 50 +30 * cos(frameCount * speed);
  if (mousePressed) {
    background(255);
    //filter(ERODE);
    filter(INVERT);
    strokeWeight(100 * sin(frameCount * speed));
    stroke(#81FFE0, 255); //255
    fill(0, 0);
    rotateX(radians(radius1));
  } else {
    strokeWeight(sin(frameCount * speed));
    stroke(#81FFE0, random(100, 200));
    fill(255, radius1, radius2, 3);
  }
  pushMatrix();
  //frameRate(30);
  //background(0);
  lights();
  translate(width/2, height/2, 200);
  rotateZ(radians(radius2));
  rotateX(PI * sin(radians(radius1*500)));
  rotateY(radians(radius2 * speed));
  //println(sp);

  sphere(constrain(radius2*3, 20, 1000)); //1000
  //ellipse(mouseX, mouseY, radius1 * 15, radius2 * 15);
  popMatrix();
  pushMatrix();
  lights();
  translate(width/2, height/2, 200);
  rotateY(radius1 * 500);
  rotateZ(radius2 * 1000);
  sphere(800);
  popMatrix(); 
}

void draw2() {
  println("2");
  b = color(255, 255, 0);
  speed = 0.003f;//0.03f;
  radius1 = 50 + 30 * sin( frameCount * speed);
  radius2 = 50 +30 * cos(frameCount * speed);
  if (mousePressed) {
    background(255);
    filter(ERODE);
    //filter(INVERT);
    strokeWeight(10 * sin(frameCount * speed));
    stroke(#81FFE0, 150); //255
    fill(0, 255);
    rotateX(radians(radius1));
  } else {
    strokeWeight(sin(frameCount * speed));
    stroke(#81FFE0, random(100, 200));
    fill(255, radius1, radius2, 3);
  }
  pushMatrix();
 // frameRate(30);
  //background(0);
  lights();
  translate(width/2, height/2, 200);
  rotateZ(radians(radius2));
  rotateX(PI * sin(radians(radius1*500)));
  rotateY(radians(radius2 * speed));
  //println(sp);

  sphere(constrain(radius2*3, 20, 1000)); //1000
  pushStyle();
  filter(POSTERIZE,230); // FILTER!!!
  popStyle();
  //ellipse(mouseX, mouseY, radius1 * 15, radius2 * 15);
  popMatrix();
  pushMatrix();
  lights();
  translate(width/2, height/2, 200);
  rotateY(radius1 * 500);
  rotateZ(radius2 * 1000);
  sphere(800);
  popMatrix();
 }
void draw3() {
 
  println("3");
  b = color(255, 0, 0);
  speed = 0.003f;//0.03f;
  radius1 = 50 + 30 * sin( frameCount * speed);
  radius2 = 50 +30 * cos(frameCount * speed);
  if (mousePressed) {
    background(255);
    filter(ERODE);
    //filter(INVERT);
    strokeWeight(100 * sin(frameCount * speed));
    stroke(#81FFE0, 255); //255
    fill(0, 0);
    rotateX(radians(radius1));
  } else {
    strokeWeight(sin(frameCount * speed));
    stroke(#81FFE0, random(100, 200));
    fill(255, radius1, radius2, 3);
  }
  pushMatrix();
  //frameRate(30);
  //background(0);
  lights();
  translate(width/2, height/2, 200);
  rotateZ(radians(radius2));
  rotateX(PI * sin(radians(radius1*500)));
  rotateY(radians(radius2 * speed));
  //println(sp);
  
  sphere(constrain(radius2*3, 20, 1000)); //1000
  //ellipse(mouseX, mouseY, radius1 * 15, radius2 * 15);
  popMatrix();
  pushMatrix();
  lights();
  translate(width/2, height/2, 200);
  rotateY(radius1 * 500);
  rotateZ(radius2 * 1000);
  sphere(800);
  popMatrix();
}

Be sure to watch the console for the outputs from println() statements.

:)

1 Like
7

Thank you so much :slight_smile: :relaxed: let me have a look to try and understand…

8

OMG, the various else if in void keyPressed()!!!
How is that possible that in my simple example above (Animation with 3 different sketches combined using Switch with keyboard input - #3 by Gus_Fermin, it worked without the else if and only with multiple if 's, yet here on the big program it did not work? stuff like that still gets me. Wow thank you very much, will keep studying the conditional statements and also thank you for your help and for pointing me to the other timed examples above.

1 Like
9

Just tried it, the colors you added change, but the entire contents of each draw1(), draw2(), draw3() stays the same, the sketches do not change still…will keep trying

10

Hello,

All I did was “tinker” with your code…

I added different colors to each draw and println() statements to console to see what was really going on. They all looked the same but now look different!

Some of the changes may just be part of my exploration and have no effect.

I like words and always looking them up:

tinker:
attempt to repair or improve something in a casual or desultory way, often to no useful effect.

desultory
marked by lack of definite plan, regularity, or purpose

I used “tinker” correctly in this context.

Glad I could add to your exploration!

:)

1 Like
11

Thank you very much for your help, I really appreciate it :slight_smile:
The tabs really help me not to get lost in confusion… and working on the flow of a program, here the 3 sketches have individual variations, but they are exactly the same size, so I guess here it would make sense to do a class, but then I feel I would get lost in the little variations of the formulas, rotateX, rotateY, rotateZ, etc… but I am starting to see eventually of refactoring it but don’t feel able to do it yet…

1 Like
12

I use the tabs all the time!
I have some cool animations (and complex code) that I sequence through and each tab compartmentalizes the code for that scene.

I use classes\objects as needed and find them more useful as I get more comfortable programming with them. I still do it quickly and “old school” but can create classes\objects if I put my mind to it and finding it gets easier. I always start with a bit of sloppy procedural code and refactor as I go along.

Keep at it!

We learn from our own experiences and the experiences of others.

I like to come in here and work through some of the challenges that the community offers… I learn so much along the way. Sometimes I even help others!

I have also learned that there are many ways to do a task!
My initial attempts are always my own and I glean through the forum for insight.

:)

Reference: