Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

  • Sound gets distorted when runned in processing

    Hello World, I have written a processing code and have implemented a sound file. When I play it on a common player, a cleat woman voice comes out. If I run my code processing is distorting her voice into a slow man version... I am runnin processing on a MacBook Pro with the latest Java version.

    import processing.serial.*;
    import processing.sound.*;
    
    
    int S1_WAITING_FOR_PEOPLE  = 1;
    int S2_PEOPLE_ENTERED      = 2;
    int S3_LIGHT_FADE_OUT      = 3;
    int S4_DARK                = 4;
    int S5_MUSIC               = 5;
    int S6_LIGHT_FADE_IN       = 6;
    // make sure this is the last!!!!
    int TERMINATE              = 7;
    
    int mode = S1_WAITING_FOR_PEOPLE;
    
    
    
    
    int no_one_when_distance_greater_then = 160; // cm
    int time_before_dim = 5000; // ms
    
    SoundFile file;
    boolean is_playing = false;
    
    Serial myPort;  
    
    int dist;
    
    boolean someone_present = false;
    int someone_present_since_time;
    
    
    int music_playing_since;
    int music_duration;
    
    int in_mode_since_ms;
    
    void setup() {
      size(640, 360);
    
      printArray(Serial.list()); // "/dev/cu.usbmodem1411" cu.usb!!!
    
      myPort = new Serial(this, Serial.list()[1], 9600);
      //myPort.readStringUntil('\n');
      myPort.bufferUntil('\n');
    
      // Load a soundfile from the data folder of the sketch and play it back in a loop
      file = new SoundFile(this, "03.mp3");
      //file.loop();
      music_duration = (int) file.duration() * 1000;
      music_duration += 2000;
    
    }      
    
    void draw() {
      background(0);
      fill(255);
      text("frameCount: "+frameCount, 50, 25);
      text("dist: "+dist, 50, 50);
      text("mode: "+mode, 50, 75);
    
    
      if (frameCount == 180) {
        turn_on();
      } else if (frameCount > 180) {
    
        if ( mode == S1_WAITING_FOR_PEOPLE) {
    
          if (someone_present == false) {
            if (dist < no_one_when_distance_greater_then) {
              someone_present = true;
              someone_present_since_time = millis();
              change_mode(mode + 1);
            }
          }
        } else if (mode == S2_PEOPLE_ENTERED) {
          text("millis: "+millis(), 50, 100);
          text("someone_present_since_time: "+someone_present_since_time, 50, 125);
          text("time_before_dim: "+time_before_dim, 50, 150);
          if (millis() - someone_present_since_time > time_before_dim) {
            change_mode(mode + 1);
          }
        } else if (mode == S3_LIGHT_FADE_OUT) {
          turn_off();
          change_mode(mode + 1);
        } else if (mode == S4_DARK) 
        {
          change_mode(mode + 1);
        } else if (mode == S5_MUSIC) 
        {
          if (is_playing == false) {
            file.play();
            is_playing = true;
            music_playing_since = millis();
          }
          if (millis() - music_playing_since > music_duration) {
            is_playing = false;
            file.stop();
            change_mode(mode + 1);
          }
        } else if (mode == S6_LIGHT_FADE_IN) 
        {
          // todo
          if (millis() - in_mode_since_ms > 1000) {
            change_mode(mode + 1);
          }
    
        } else if (mode == TERMINATE) 
        {
          change_mode(S1_WAITING_FOR_PEOPLE);
          someone_present = false; // reset
          println("turn_on();");
          turn_on();
        }
      }
    }
    
    
    void change_mode(int m) {
      mode = m;
      in_mode_since_ms = millis();
    }
    
    
    
    void serialEvent(Serial p) { 
      String s = p.readString();
      if (s != null) {
        s = s.replace("\r\n", "");
        if (s.contains("Distance Measured")) {
          String[] tokens = split(s, "=");
          dist = int(tokens[1]);
        }
      }
    } 
    
    
    void turn_on() {
      myPort.write("on");
    }
    
    void turn_off() {
      myPort.write("off");
    }
    
    void keyPressed() {
      if (key == 'a') {
        turn_on();
      }
      if (key == 's') {
        turn_off();
      }
    }
    

    Thanks for your help!

  • Why does the cursor reappear when I enter fullScreen?

    Hello,

    I was hoping someone might know why this is happening and how to stop it from happening. I have the cursor hidden, but once I click to go fullscreen the cursor reappears. Please take a look at the code, any suggestions welcome! Thank you!

    var lastKeyPressed;
    var Red;
    var Green;
    var Blue;
    var Yellow;
    
    var r;
    var R
    var g;
    var G;
    var b;
    var B;
    
    
    
    function setup() {
      noCursor();
    
      Red = color(R, G, B);
      Green = color(163, 255, 163);
      Blue = color(163, 212, 255);
      Yellow = color(249, 242, 47);
    
    
      color1 = color(204, 172, 0);
      color2 = color(249, 211, 32);
      color3 = color(243, 243, 21);
    
      color4 = color(222, 165, 110);
      color5 = color(252, 86, 5);
      color6 = color(108, 255, 0);
    
      color7 = color(217, 189, 189);
      color8 = color(165, 0, 101);
      color9 = color(255, 0, 128);
    
      color10 = color(188, 168, 192);
      color11 = color(118, 10, 228);
      color12 = color(255, 0, 0);
    
      color13 = color(149, 196, 200);
      color14 = color(51, 99, 130);
      color15 = color(125, 249, 255);
    
      color16 = color(178, 191, 158);
      color17 = color(0, 188, 168);
      color18 = color(204, 51, 255);
    
      color19 = color(67, 13, 1);
      color20 = color(218, 250, 0);
      color21 = color(75, 6, 255);
    
      color22 = color(56, 73, 255);
      color23 = color(17, 248, 255);
      color24 = color(221, 255, 6);
    
    
      // ellipseSizeX = 200;
      // ellipseSizeY = 200;
      r = 255;
      R = r;
      g = 0;
      G = g;
      b = 60;
      B = b;
    
      createCanvas(displayWidth, displayHeight);
      frameRate(15);
      background(255, 0, 0);
    
    }
    var ellipseSizeX = 200;
    var  ellipseSizeY = 200;
    function keyPressed() {
    if (keyCode == UP_ARROW) {
      ellipseSizeX += 10;
      ellipseSizeY += 10;
      noCursor();
    }
    
    if (keyCode == DOWN_ARROW) {
      ellipseSizeX -= 10;
      ellipseSizeY -= 10;
    
    }
    }
    //
    // function keyPressed() {
    //   if (keyCode == UP) {
    //     ellipseSizeX += 10;
    //     ellipseSizeY += 10;
    //   }
    //
    //   if (keyCode == DOWN) {
    //     ellipseSizeX -= 10;
    //     ellipseSizeY -= 10;
    //   }
    
    
    function draw() {
        noCursor();
      // if (showInstruction){
    //  fill(0);
    //  textAlign(CENTER, CENTER);
    //  textSize(30);
    //  textStyle(BOLD);
    //  textLeading(35);
    //  textFont("Helvetica");
    //
    //  text("Color Fader." + "\n" +
    //    "Press keyboard letters to fade to different color moods." + "\n",
    //    "Press down arrow and up arrow to change the size of the circles."+ "\n" , width * 0.5, height * 0.5);
    //
    //  }
      noCursor();
      if (r != R) {
        if (r >= R) {
          R++;
        } else if (r < R) {
          R--;
        }
      }
    
      if (g != G) {
        if (g >= G) {
          G++;
        } else if (g < G) {
          G--;
        }
      }
    
      if (b != B) {
        if (b >= B) {
          B++;
        } else if (b < B) {
          B--;
        }
      }
    
      if (r == R && g == G && b == B) {
        r = R;
        g = G;
        b = B;
      }
    
      // *********NOTE:  the code below changes the effect to have ellipses slowly fill the screen with the new color.
      // Comment out the following when using it:
      // background(R, G, B);
      for (var i = 0; i < 300; i++) {
        var randoms = random(255);
        var testW = int(random(width));
        var testY = int(random(height));
    
        fill(R, G, B);
        noStroke();
        ellipse(mouseX, mouseY, ellipseSizeX, ellipseSizeY);
    
      }
    
    
      // background(R, G, B);
      lastKeyPressed = key;
    
      if (key === 'a') {
        r = red(color1);
        g = green(color1);
        b = blue(color1);
      } else if (key === 's') {
        r = red(color2);
        g = green(color2);
        b = blue(color2);
      } else if (key === 'd') {
        r = red(color3);
        g = green(color3);
        b = blue(color3);
      } else if (key === 'f') {
        r = red(color4);
        g = green(color4);
        b = blue(color4);
      } else if (key === 'g') {
        r = red(Green);
        g = green(Green);
        b = blue(Green);
      } else if (key === 'h') {
        r = red(color5);
        g = green(color5);
        b = blue(color5);
      } else if (key === 'j') {
        r = red(color6);
        g = green(color6);
        b = blue(color6);
      } else if (key === 'k') {
        r = red(color7);
        g = green(color7);
        b = blue(color7);
      } else if (key === 'l') {
        r = red(color8);
        g = green(color8);
        b = blue(color8);
      } else if (key === 'z') {
        r = red(color9);
        g = green(color9);
        b = blue(color9);
      } else if (key === 'x') {
        r = red(color10);
        g = green(color10);
        b = blue(color10);
      } else if (key === 'c') {
        r = red(color11);
        g = green(color11);
        b = blue(color11);
      } else if (key === 'v') {
        r = red(color12);
        g = green(color12);
        b = blue(color12);
      } else if (key === 'b') {
        r = red(Blue);
        g = green(Blue);
        b = blue(Blue);
      } else if (key === 'n') {
        r = red(color13);
        g = green(color13);
        b = blue(color13);
      } else if (key === 'm') {
        r = red(color14);
        g = green(color14);
        b = blue(color14);
      } else if (key === 'q') {
        r = red(color15);
        g = green(color15);
        b = blue(color15);
      } else if (key === 'w') {
        r = red(color16);
        g = green(color16);
        b = blue(color16);
      } else if (key === 'e') {
        r = red(color17);
        g = green(color17);
        b = blue(color17);
      } else if (key === 'r') {
        r = red(color19);
        g = green(color19);
        b = blue(color19);
      } else if (key === 't') {
        r = red(color18);
        g = green(color18);
        b = blue(color18);
      } else if (key === 'y') {
        r = red(Yellow);
        g = green(Yellow);
        b = blue(Yellow);
      } else if (key === 'u') {
        r = red(color20);
        g = green(color20);
        b = blue(color20);
      } else if (key === 'i') {
        r = red(color21);
        g = green(color21);
        b = blue(color21);
      } else if (key === 'o') {
        r = red(color22);
        g = green(color22);
        b = blue(color22);
      } else if (key === 'p') {
        r = red(color23);
        g = green(color23);
        b = blue(color23);
      } else if (key === ',') {
        r = red(color24);
        g = green(color24);
        b = blue(color24);
      }
      noCursor();
    }
    // function ellipseSize(){
    
    
    function mousePressed() {
        noCursor();
      onPressed = true;
      if (mouseX > 0 && mouseX < 1200 && mouseY > 0 && mouseY < 1200) {
        var fs = fullscreen();
        fullscreen(!fs);
      noCursor();
      }
      // if (mouseReleased){
      //     showInstruction = false;}
      // if (showInstruction) {
      //   background(255);
      //   showInstruction = false;
      // }
    }
    function mouseReleased() {
        noCursor();
      onPressed = false;
    
    }
    
  • p5 animated heart study

    @ruansouza

    Beautiful design -- I enjoy the lighting on the surface.

    If you are looking for suggestions for enhancements, one thing you might consider doing is adding a behavior if the mouse is not over / interacting with the artwork.

    For example, after a certain amount of time a virtual mouse could pick up the spotlight and perform a random walk. And / or the light could fade between colors -- fading to blue when computer controlled, fading to red when the user's mouse is interacting.

  • communicate between two macs in processing

    Hello world, I would like to know if it is possible to communicate between two macs in processing. What I mean:

    Mac1 sends a signal to mac2 -> mac2 plays an audio file -> mac 2 waits for another signal sent by mac1 (loop)

    In the code I have written I would love to send a signal to the second mac (mac2) at "int S5_MUSIC = 5;". So that there will be two sounds played at the same time. I need the second mac for a second pair of boxes, to create a surround sound....

    This is my processing code:

    import processing.serial.*;
    import processing.sound.*;
    
    
    int S1_WAITING_FOR_PEOPLE  = 1;
    int S2_PEOPLE_ENTERED      = 2;
    int S3_LIGHT_FADE_OUT      = 3;
    int S4_DARK                = 4;
    int S5_MUSIC               = 5;
    int S6_LIGHT_FADE_IN       = 6;
    // make sure this is the last!!!!
    int TERMINATE              = 7;
    
    int mode = S1_WAITING_FOR_PEOPLE;
    
    
    
    
    int no_one_when_distance_greater_then = 160; // cm
    int time_before_dim = 5000; // ms
    
    SoundFile file;
    boolean is_playing = false;
    
    Serial myPort;  
    
    int dist;
    
    boolean someone_present = false;
    int someone_present_since_time;
    
    
    int music_playing_since;
    int music_duration;
    
    int in_mode_since_ms;
    
    void setup() {
      size(640, 360);
    
      printArray(Serial.list()); // "/dev/cu.usbmodem1411" cu.usb!!!
    
      myPort = new Serial(this, Serial.list()[1], 9600);
      //myPort.readStringUntil('\n');
      myPort.bufferUntil('\n');
    
      // Load a soundfile from the data folder of the sketch and play it back in a loop
      file = new SoundFile(this, "Ex.wav");
      //file.loop();
      music_duration = (int) file.duration() * 1000;
      music_duration += 2000;
    
    }      
    
    void draw() {
      background(0);
      fill(255);
      text("frameCount: "+frameCount, 50, 25);
      text("dist: "+dist, 50, 50);
      text("mode: "+mode, 50, 75);
    
    
      if (frameCount == 180) {
        turn_on();
      } else if (frameCount > 180) {
    
        if ( mode == S1_WAITING_FOR_PEOPLE) {
    
          if (someone_present == false) {
            if (dist < no_one_when_distance_greater_then) {
              someone_present = true;
              someone_present_since_time = millis();
              change_mode(mode + 1);
            }
          }
        } else if (mode == S2_PEOPLE_ENTERED) {
          text("millis: "+millis(), 50, 100);
          text("someone_present_since_time: "+someone_present_since_time, 50, 125);
          text("time_before_dim: "+time_before_dim, 50, 150);
          if (millis() - someone_present_since_time > time_before_dim) {
            change_mode(mode + 1);
          }
        } else if (mode == S3_LIGHT_FADE_OUT) {
          turn_off();
          change_mode(mode + 1);
        } else if (mode == S4_DARK) 
        {
          change_mode(mode + 1);
        } else if (mode == S5_MUSIC) 
        {
          if (is_playing == false) {
            file.play();
            is_playing = true;
            music_playing_since = millis();
          }
          if (millis() - music_playing_since > music_duration) {
            is_playing = false;
            file.stop();
            change_mode(mode + 1);
          }
        } else if (mode == S6_LIGHT_FADE_IN) 
        {
          // todo
          if (millis() - in_mode_since_ms > 1000) {
            change_mode(mode + 1);
          }
    
        } else if (mode == TERMINATE) 
        {
          change_mode(S1_WAITING_FOR_PEOPLE);
          someone_present = false; // reset
          println("turn_on();");
          turn_on();
        }
      }
    }
    
    
    void change_mode(int m) {
      mode = m;
      in_mode_since_ms = millis();
    }
    
    
    
    void serialEvent(Serial p) { 
      String s = p.readString();
      if (s != null) {
        s = s.replace("\r\n", "");
        if (s.contains("Distance Measured")) {
          String[] tokens = split(s, "=");
          dist = int(tokens[1]);
        }
      }
    } 
    
    
    void turn_on() {
      myPort.write("on");
    }
    
    void turn_off() {
      myPort.write("off");
    }
    
    void keyPressed() {
      if (key == 'a') {
        turn_on();
      }
      if (key == 's') {
        turn_off();
      }
    }
    

    Thanks for your effort. Faffie

  • ...put two pieces of code together

    Hello world, for my bachelor project I am busy with an audio installation, the interface is done in processing (surprise) and arduino. Enclosed you will find three pieces of code all working well on their own.

    The first part consists of two codes one is arduino and one is processing. Function: light on -the sensor catches a person comming into the room-> light out-> music on-> light on-> end/loop

    The Arduinocode:

    int URECHO = 3;         // PWM Output 0-25000US,Every 50US represent 1cm
    int URTRIG = 5;         // PWM trigger pin
    int sensorPin = A0;     // select the input pin for the potentiometer
    int sensorValue = 0;    // variable to store the value coming from the sensor
    
    
    unsigned int distanceMeasured = 0;
    
    
    boolean activity;
    
    int led = 13;
    
    
    void setup() {
      Serial.begin(9600);                        // Sets the baud rate to 9600
      pinMode(URTRIG, OUTPUT);                   // A low pull on pin COMP/TRIG
      digitalWrite(URTRIG, HIGH);                // Set to HIGH
      pinMode(URECHO, INPUT);                    // Sending Enable PWM mode command
      delay(500);
      Serial.println("Init the sensor");
    
      pinMode(led, OUTPUT);
    }
    
    void loop() {
      PWM_Mode();
    
    
    
      String line = Serial.readStringUntil('\r');
      Serial.println(line);
    
      if (line.equals("on")) {
        digitalWrite(led, LOW);
      }
      else if (line.equals("off")) {
        digitalWrite(led, HIGH);
      }
    
    
    
    
      //delay(100);
    
    //  if (activity) {
    //    digitalWrite(led, HIGH);
    //  }
    //  else {
    //    digitalWrite(led, LOW);
    //  }
    }
    
    
    void PWM_Mode()                              // a low pull on pin COMP/TRIG  triggering a sensor reading
    {
    
      digitalWrite(URTRIG, LOW);
      digitalWrite(URTRIG, HIGH);               // reading Pin PWM will output pulses
    
      unsigned long LowLevelTime = pulseIn(URECHO, LOW) ;
    
      if (LowLevelTime >= 45000)              // the reading is invalid.
      {
        Serial.print("Invalid");
      }
      else {
        Serial.print("Distance Measured=");
        distanceMeasured = LowLevelTime / 50;  // every 50us low level stands for 1cm
        Serial.print(distanceMeasured);
        Serial.println(); 
    
        if (distanceMeasured > 20) {
          activity = false;
        }
        else {
          activity = true;
        }
    
      }
    }
    

    The Processing code:

    import processing.serial.*;
    import processing.sound.*;
    
    
    int S1_WAITING_FOR_PEOPLE  = 1;
    int S2_PEOPLE_ENTERED      = 2;
    int S3_LIGHT_FADE_OUT      = 3;
    int S4_DARK                = 4;
    int S5_MUSIC               = 5;
    int S6_LIGHT_FADE_IN       = 6;
    // make sure this is the last!!!!
    int TERMINATE              = 7;
    
    int mode = S1_WAITING_FOR_PEOPLE;
    
    
    
    int no_one_when_distance_greater_then = 160; // cm
    int time_before_dim = 5000; // ms
    
    SoundFile file;
    boolean is_playing = false;
    
    Serial myPort;  
    
    int dist;
    
    boolean someone_present = false;
    int someone_present_since_time;
    
    
    int music_playing_since;
    int music_duration;
    
    int in_mode_since_ms;
    
    void setup() {
      size(640, 360);
    
      printArray(Serial.list()); // "/dev/cu.usbmodem1411" cu.usb!!!
    
      myPort = new Serial(this, Serial.list()[1], 9600);
      //myPort.readStringUntil('\n');
      myPort.bufferUntil('\n');
    
      // Load a soundfile from the data folder of the sketch and play it back in a loop
      file = new SoundFile(this, "Ex.wav");
      //file.loop();
      music_duration = (int) file.duration() * 1000;
      music_duration += 2000;
    
    }      
    
    void draw() {
      background(0);
      fill(255);
      text("frameCount: "+frameCount, 50, 25);
      text("dist: "+dist, 50, 50);
      text("mode: "+mode, 50, 75);
    
    
      if (frameCount == 180) {
        turn_on();
      } else if (frameCount > 180) {
    
        if ( mode == S1_WAITING_FOR_PEOPLE) {
    
          if (someone_present == false) {
            if (dist < no_one_when_distance_greater_then) {
              someone_present = true;
              someone_present_since_time = millis();
              change_mode(mode + 1);
            }
          }
        } else if (mode == S2_PEOPLE_ENTERED) {
          text("millis: "+millis(), 50, 100);
          text("someone_present_since_time: "+someone_present_since_time, 50, 125);
          text("time_before_dim: "+time_before_dim, 50, 150);
          if (millis() - someone_present_since_time > time_before_dim) {
            change_mode(mode + 1);
          }
        } else if (mode == S3_LIGHT_FADE_OUT) {
          turn_off();
          change_mode(mode + 1);
        } else if (mode == S4_DARK) 
        {
          change_mode(mode + 1);
        } else if (mode == S5_MUSIC) 
        {
          if (is_playing == false) {
            file.play();
            is_playing = true;
            music_playing_since = millis();
          }
          if (millis() - music_playing_since > music_duration) {
            is_playing = false;
            file.stop();
            change_mode(mode + 1);
          }
        } else if (mode == S6_LIGHT_FADE_IN) 
        {
          // todo
          if (millis() - in_mode_since_ms > 1000) {
            change_mode(mode + 1);
          }
    
        } else if (mode == TERMINATE) 
        {
          change_mode(S1_WAITING_FOR_PEOPLE);
          someone_present = false; // reset
          println("turn_on();");
          turn_on();
        }
      }
    }
    
    
    void change_mode(int m) {
      mode = m;
      in_mode_since_ms = millis();
    }
    
    
    
    void serialEvent(Serial p) { 
      String s = p.readString();
      if (s != null) {
        s = s.replace("\r\n", "");
        if (s.contains("Distance Measured")) {
          String[] tokens = split(s, "=");
          dist = int(tokens[1]);
        }
      }
    } 
    
    
    void turn_on() {
      myPort.write("on");
    }
    
    void turn_off() {
      myPort.write("off");
    }
    
    void keyPressed() {
      if (key == 'a') {
        turn_on();
      }
      if (key == 's') {
        turn_off();
      }
    }
    

    The second part is an arduino code for dimming an LED light:

    const int LEDPin = 9; // the pin that the LED is attached to
    const int LEDValueMax = 255; // the maximum value of the LED Brightness
    const int LEDValueMin = 0; // the minimum value of the LED Brightness
    int LEDValue = 255; // the start value of the LED Brightness
    int speedValue = 10; // the dimming speed value
    
    void setup() {
    
      pinMode(LEDPin, OUTPUT); // the PWM Output 
    
    }
    
    void loop() {
    
        do // Decrease the LED Brightness untill it reaches minimum brightness
        {
           analogWrite(LEDPin, LEDValue);
           delay(speedValue);
           LEDValue = LEDValue - 1;
    
        } while (LEDValue > LEDValueMin);
    
    }
    

    What I would love to fix is that in the first part where the light is turned off (int S3_LIGHT_FADE_OUT = 3;) it is going to dim the brightness as in the the code above. I am not sure how to get these two programs to talk to each other/ switching from int S3 to arduino dimming code.

    Thanks for your efforts! Faffie

  • Each frame stored and fading out in the draw()

    ok, some progress. i figured that the colorMode(RGB, 1) was stopping the fade hack from working and that i could just change it back to the default colorMode(RGB, 256) before doing the fade. but it didn't work at the top of draw(), but did at the end of draw()...

    so my draw() is now the following, no other changes anywhere else:

    public void draw() {   
    
      noStroke();
    
      fluidSolver.update();
      particleSystem.updateAndDraw();
    
      // fade out
      colorMode(RGB, 255);
      fill(0, 0, 0, 10);
      rect(0, 0, width, height);
    }
    

    and it kind of does what (i think) you want, as long as the mouse is moving.

  • Each frame stored and fading out in the draw()

    ok, tried adding the hack fade to draw, added a bright red ellipse at mouse position, commented out the update / draw of the particles, and it didn't want to know.

    traced that to mousePressed(), you are setting colorMode(RGB, 1); this means that setting fill(0, 0, 0, 100); is nonsense, because 100 is more than 1...

  • Each frame stored and fading out in the draw()

    I have tried twiddling with the FadeSpeed variable but no luck, the visible result is exactly the same...

    And yep, those two are red herring, probably two different things I have tried to do to achieve this but failed as well - sorry for the misleading messy work!

  • Each frame stored and fading out in the draw()

    ok, couple of questions

    there's fade built into that already:

    fluidSolver.enableRGB(true).setFadeSpeed(...)
    

    have you tried twiddling that?

    PShader blur;
    

    this is a red herring, yes? not actually used

    ArrayList<PVector> trail = new ArrayList<PVector>();
    

    this too?

  • Each frame stored and fading out in the draw()

    Your line 73 replaces the entire screen which is going to stop the fade code doing what it needs to do.

  • Each frame stored and fading out in the draw()

    Thanks so much for the answer, I pretty much get the idea and it's seems brilliant! But, sadly, when it came to implementing this to the code I found I failed...

    Here is my draw function;

    void draw() {   
    
        fluidSolver.update();
        for (int i=0; i<fluidSolver.getNumCells(); i++) {
          int d = 2;
          imgFluid.pixels[i] = color(fluidSolver.r[i] * d, fluidSolver.g[i] * d, fluidSolver.b[i] * d);
    
      }  
    
        imgFluid.updatePixels();
        image(imgFluid, 0, 0, width, height);  
        particleSystem.updateAndDraw();
    
    }
    

    From your sketch I see (if I'm correct!), these are the lines that makes the trick but I couldn't find where to insert this in my draw function - or would I have to make additional things in setup or anywhere as well?

     fill(0);
     fill(0,0,0,10);
     rect(0,0,mouseX,height);
     rect(mouseX,0,width,height);
    

    Thanks so much again really, it's almost New Year here and I'm still obsessing over this! Have a nice year by the way :-)

    Best wishes.

    PS: I can also send you the sketch file if you like, it's a bit long to paste here actually. I have implemented this fantastic yet very old sketch called MSAFluid by memo akten for Processing 3, it used to rely on old deprecated libraries like javax.media. Though, even though this would not run without the actual code (it's on another tab in my sketch) here is the main thing that makes it work.

    PImage imgK;
    
    PShader blur;
    PImage img;
    ArrayList<PVector> trail = new ArrayList<PVector>();
    
    static  float sizex;
    static  float sizey;
    
    final float FLUID_WIDTH = 32;
    final static int maxParticles = 500;
    static int w;
    static int h;
    
    float invWidth, invHeight;    // inverse of screen dimensions
    float aspectRatio, aspectRatio2;
    
    MSAFluidSolver2D fluidSolver;
    ParticleSystem particleSystem;
    
    PImage imgFluid; 
    boolean untouched=true;
    
    public void setup() {
      background(0);
      size(512, 424);
      kinect2 = new Kinect2(this);
      kinect2.initDepth();
      kinect2.initDevice();
      img = createImage(kinect2.depthWidth, kinect2.depthHeight, RGB);
      w=width;
      h=height;
      textAlign(CENTER, CENTER);
      invWidth = 1.0f/width;
      invHeight = 1.0f/height;
      aspectRatio = width * invHeight;
      aspectRatio2 = aspectRatio * aspectRatio;
    
      fluidSolver = new MSAFluidSolver2D((int)(FLUID_WIDTH), (int)(FLUID_WIDTH * height/width));
      fluidSolver.enableRGB(true).setFadeSpeed(0.003f).setDeltaT(0.5f).setVisc(0.0001f);
    
      imgFluid = createImage(fluidSolver.getWidth(), fluidSolver.getHeight(), ARGB);
    
      particleSystem = new ParticleSystem();
    }
    
    
    public void mouseMoved() {
      untouched=false;    
      float mouseNormX = mouseX * invWidth;
      float mouseNormY = mouseY * invHeight;
      float mouseVelX = (mouseX - pmouseX) * invWidth;
      float mouseVelY = (mouseY - pmouseY) * invHeight;
    
      addForce(mouseNormX, mouseNormY, mouseVelX, mouseVelY);
    }
    
    
    void draw() {   
         noStroke();
     fill(0);
     rect(0,0,mouseX,height);
     fill(0,0,0,10);
     rect(mouseX,0,width,height);
        fluidSolver.update();
        for (int i=0; i<fluidSolver.getNumCells(); i++) {
          int d = 2;
          imgFluid.pixels[i] = color(fluidSolver.r[i] * d, fluidSolver.g[i] * d, fluidSolver.b[i] * d);
    
      }  
    
        imgFluid.updatePixels();
        image(imgFluid, 0, 0, width, height);  
        particleSystem.updateAndDraw();
    
    }
    
    
    // add force and dye to fluid, and create particles
    public void addForce(float x, float y, float dx, float dy) {
      float speed = dx * dx  + dy * dy * aspectRatio2;    // balance the x and y components of speed with the screen aspect ratio
    
      if (speed > -0.1) {
        if (x<0) x = 0;
        else if (x>1) x = 0.1;
        if (y<0) y = 0;
        else if (y>1) y = 0.1;
    
        float colorMult = 0;
        float velocityMult = 10.0f;
    
    
        int index = fluidSolver.getIndexForNormalizedPosition(x, y);
    
        int drawColor;
    
        colorMode(HSB, 360, 1, 1);
        float hue = ((x + y) * 180 + frameCount) % 360;
        drawColor = color(hue, 1, 1);
        colorMode(RGB, 1);
    
        fluidSolver.rOld[index]  += red(drawColor) * colorMult;
        fluidSolver.gOld[index]  += green(drawColor) * colorMult;
        fluidSolver.bOld[index]  += blue(drawColor) * colorMult;
    
        particleSystem.addParticles(x * width, y * height, 10);
        fluidSolver.uOld[index] += dx * velocityMult;
        fluidSolver.vOld[index] += dy * velocityMult;
      }
    }
    
    
    class Particle {
      final static float MOMENTUM = 0.3f;
      final static float FLUID_FORCE = 0.3f;
    
    
      float x, y;
      float vx, vy;
      float radius;       // particle's size
      float alpha;
      float mass;
      float glow;
    
      public void init(float x, float y) {
    
    
        this.x = x;
        this.y = y;
        vx = 0.2;
        vy = 0.2;
    
        radius = 1;
    
        alpha  = random(0.3f, 1);
    
    
        mass = random(0.1f, 1);
      }
    
    
      public void update() {
        // only update if particle is visible
        if (alpha == 0) return;
    
    
        // read fluid info and add to velocity
        int fluidIndex = fluidSolver.getIndexForNormalizedPosition(x * invWidth, y * invHeight);
        vx = fluidSolver.u[fluidIndex] * width * mass * FLUID_FORCE + vx * MOMENTUM;
        vy = fluidSolver.v[fluidIndex] * height * mass * FLUID_FORCE + vy * MOMENTUM;
    
        // update position
        x += vx;
        y += vy;
    
        // bounce of edges
        if (x<0) {
          x = 0;
          vx *= -1;
        } else if (x > width) {
          x = width;
          vx *= -1;
        }
    
        if (y<0) {
          y = 0;
          vy *= -1;
        } else if (y > height) {
          y = height;
          vy *= -1;
        }
    
        // hackish way to make particles glitter when the slow down a lot
        if (vx * vx + vy * vy < 1) {
          vx = random(-1, 1);
          vy = random(-1, 1);
          alpha = 0;
          mass = -10;
        }
    
        // fade out a bit (and kill if alpha == 0);
        alpha *= 0.999f;
        if (alpha < 0.01f) alpha = 0;
      }
    
      public void drawOldSchool() {
    
        strokeWeight(alpha*1.5f);
    
        stroke(alpha, alpha, alpha, alpha);
        fill( 0xee, 0xee, 0xff, 50);
    
    
    
        //trail.add(new PVector(x + 1, y + 1));
        //for(PVector p : trail){
        line(x-vx, y-vy, x, y);
      }
    }
    
    class ParticleSystem {
    
    
    
      int curIndex;
    
      Particle[] particles;
    
      ParticleSystem() {
        particles = new Particle[maxParticles];
        for (int i=0; i<maxParticles; i++) particles[i] = new Particle();
        curIndex = 0;
      }
    
    
      public void updateAndDraw() {
    
    
    
        for (int i=0; i<maxParticles; i++) {
          if (particles[i].alpha > 0) {
            particles[i].update();
            particles[i].drawOldSchool();    // use oldschool renderng
          }
        }
      }
    
    
      public void addParticles(float x, float y, int count ) {
        for (int i=0; i<count; i++) addParticle(x + random(-15, 15), y + random(-15, 15));
      }
    
    
      public void addParticle(float x, float y) {
    
        particles[curIndex].init(x, y);
        curIndex++;
        if (curIndex >= maxParticles) curIndex = 0;
      }
    }
    
  • Each frame stored and fading out in the draw()

    The easiest way to do what you want is to rely on what was drawn in a previous frame. If you do not have a call to background() in your draw function, the sketch window is not cleared between frames - thus the results of a previously drawn frame can be reused. If you darken it slightly (say with a color(0,0,0,10) rectangle), it causes things that were previously drawn to "fade out" over time.

    Example:

    class Thing {
      float x, y, dx, dy;
      color c;
      Thing(){
        x = random(width);
        y = random(height);
        dx = random(-3,3);
        dy = random(-3,3);
        c = color( random(255), random(255), random(255) );
      }
      void draw(){
        x+=dx;
        y+=dy;
        if( x < 0 ){ x = 0; dx *=-1; }
        if( y < 0 ){ y = 0; dy *=-1; }
        if( x > width ){ x = width; dx *=-1; }
        if( y > height ){ y = height; dy *=-1; }
        fill(c);
        rect(x,y,20,20);
      }
    }
    
    Thing[] things = new Thing[100];
    
    void setup(){
      size(440,440);
      background(0);
      for( int i = 0 ; i < 100 ; i++ ){ things[i] = new Thing(); }
    }
    
    void draw(){
     noStroke();
     fill(0);
     rect(0,0,mouseX,height);
     fill(0,0,0,10);
     rect(mouseX,0,width,height);
     for( Thing t : things ) t.draw();
     stroke(255);
     line(mouseX,0, mouseX, height);
    }
    

    There are other, better ways to accomplish this same effect, but they are more involved. Basically, you would have each object store its previous positions, and use those stored positions to draw a tail behind the object.

  • How to change between sketches?

    I have no live performance experience with Praxis. Often VJ/livecoding setups are so specific that the best way to know if a tool will meet your needs is to test it yourself.

    Crossfading graphics works the way it does in crossfading music. You aren't playing all of the songs all at once -- you are only playing either 1 song or, during the fade, 2 songs. Once the fade is over you stop playing song A and only play song B.

    re: "I think it will be expensive" -- running two graphics buffers can't be more expensive than running two completely separate sketches. It can only be as expensive or less so, depending on your sketch overhead and how you optimize.

  • How to change between sketches?

    @aidinz -- if you want to do live transitions and/or live coding then you probably also want a framework that treats your Processing sketches like patches. Check out Praxis Live. From the website:

    ... imagine combining the best of Processing with the best of visual patchers like Isadora or Quartz Composer; imagine components defined like Processing sketches, so you're never constrained by what comes built-in; imagine forking components or creating new ones while your project is running ...

    Forum announcement:

    If you don't want to use a full system and just want to jury-rig a simple setup, you could:

    1. incorporate two sketches into one sketch, with each sketch drawing to a simple PGraphics buffer.
    2. Implement a cross-fade that starts the new sub-skech drawing to its PGraphics buffer, then fades between the two PGraphics and stops the old sub-sketch. Here is an example of doing this with two videos rather than two sketch functions, but it is the same process: https://forum.processing.org/two/discussion/comment/79151/#Comment_79151
  • How can I make a code in p5.js mode work in Java mode?

    I have this code which works in Processing p5.js mode but not in Java mode. Is there a way to make the code work in Java mode as well? If so, what should i change? I am a beginner in coding and would appreciate your help. Thank you.

    var rockets = []; 
    var sparkles = [];
    var moving = true;
    var gravity = 0.4;
    
    function setup() {
        // put setup code here
    
        createCanvas(windowWidth, windowHeight);
        background(0);
        strokeWeight(1);
    
        colorMode(HSB);
    
        var thisRocket = new rocket();
        rockets.push(thisRocket);
    }
    
    function draw() {
        // put drawing code here
        translate(width / 2, height);
        background('rgba(0,0,0, 0.1)');
        for (var i = rockets.length - 1; i >= 0; i--) 
        {
            if(rockets[i].type == "Exploded")
                rockets.splice(i,1);
            else
                rockets[i].draw();
        }   
    
        for (var i = sparkles.length - 1; i >= 0; i--) 
        {
            if(sparkles[i].position.y > 0 || sparkles[i].brt <= 0)
                sparkles.splice(i,1);
            else
                sparkles[i].draw();
        }   
    
        if (int(random(0, 12)) == 0)
        {
            var thisRocket = new rocket();
            rockets.push(thisRocket);
        }
    }
    
    function rocket(position, speed, type, sparkler, afterblow)
    {
    //  stroke(255);
    
        if (position == undefined)
            this.position = createVector(int(random(-width / 2, width / 2)), 0);
        else 
            this.position = position.copy();
    
        if (speed == undefined)
            this.speed = createVector(random(-1,1), -random(10,22));
        else
            this.speed = speed.copy();
    
        if (afterblow == undefined)
            this.afterblow = -1;
        else
            this.afterblow = afterblow;
    
        if (sparkler == undefined)
            this.sparkler = round(random(0,1)) == 0;
        else
            this.sparkler = sparkler;
    
        this.fuse = random(-1,1);
        this.hue = round(random(0,360));
    
        this.type = type;
        if(type == undefined)
        {
            typeIndex = int(random (0,9));
            switch (typeIndex)
            {
                case 0:
                    this.type = "simple";
                    break;
                case 1:
                    this.type = "blinker";
                    break;
                case 2:
                    this.type = "directed";
                    break;
                case 3:
                    this.type = "burster";
                    break;
                case 4:
                    this.type = "double";
                    break;
                case 5:
                    this.type = "mega";
                    break;
                case 6:
                    this.type = "sparkleBlinker";
                    break;
                case 7:
                    this.type = "writer";
                    break;
                case 8:
                    this.type = "swirler";
                    break;
            }
        }
    
        this.draw = function()
        {
            stroke(255);
            if(this.fuse < this.speed.y || this.afterblow >= 0)
                this.explode();
    
            if (this.sparkler) 
            {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(0,1);
                sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
                thisSparkle = new sparkle(createVector(this.position.x+sparkleSpd.x, this.position.y+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
                sparkles.push(thisSparkle);
            }
            stroke(this.hue+round(random(-10,+10)), random(0,20), 90);
    
            point(this.position.x,this.position.y);
    
            this.position.add(this.speed);
            this.speed.y = this.speed.y + gravity;
        }
    
        this.explode = function()
        {
            switch (this.type)
            {
                case "blinker":
                {
                    if (this.afterblow == -1)
                     this.afterblow = round(random(3,8));
    
                    if(this.afterblow-- > 0)
                    {
                        noStroke()
                        thisSize = random (40,60)
                        fill(this.hue+round(random(-10,+10)), random(0,20), 90);
                        ellipse(this.position.x + random(-30,30) ,this.position.y + random(-30,30) ,thisSize,thisSize);
                    }
                    else
                        this.type = "Exploded";
                }
                break;
            case "directed":
                {
                    var dir = random(0, TWO_PI);
                    for (var i = 0; i < 50; i++) 
                    {
                        sparkleDir = dir+random(0, PI/1.5);
                        sparkleVel = random(3,5);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)));
                        sparkles.push(thisSparkle);
                    }
                    this.type = "Exploded";
                }
                break;
            case "burster":
                {
                    for (var i = 0; i < 60; i++) 
                    {
                        sparkleDir = random(0, TWO_PI);
                        sparkleVel = random(0,3) + random(0,3);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)), "sparkler");
                        sparkles.push(thisSparkle);
                    }
                    this.type = "Exploded";
                }
                break;
            case "double":
                {
                    for (var i = 0; i < 90; i++) 
                    {
                        sparkleDir = random(0, TWO_PI);
                        sparkleVel = random(3,5);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(2,4), this.hue+round(random(-10,+10)), round(random(0,40)));
                        sparkles.push(thisSparkle);
                    }
                    for (var i = 0; i < 10; i++) 
                    {
                        sparkleDir = random(0, TWO_PI);
                        sparkleVel = random(0,.5);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(2,4), this.hue+round(random(-10,+10)), round(random(0,40)));
                        sparkles.push(thisSparkle);
                    }
                    this.type = "Exploded";
                }
                break;
            case "mega":
                {
                    for (var i = 0; i < 1000; i++) 
                    {
                        sparkleDir = random(0, TWO_PI);
                        sparkleVel = random(0,4)+random(0,4);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)));
                        sparkles.push(thisSparkle);
                    }
                    this.type = "Exploded";
                }
                break;
            case "sparkleBlinker":
                {
                    for (var i = 0; i < 100; i++) 
                    {
                        sparkleDir = random(0, TWO_PI);
                        sparkleVel = random(0,2)+random(0,3);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), round(random(0,40)),"blinker");
                        sparkles.push(thisSparkle);
                    }
                    this.type = "Exploded";
                }
                break;
            case "writer":
                {
                    for (var i = 0; i < 100; i++) 
                    {
                        sparkleDir = random(0, TWO_PI);
                        sparkleVel = random(0,2)+random(0,3);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), round(random(0,40)),"writer");
                        sparkles.push(thisSparkle);
                    }
                    this.type = "Exploded";
                }
                break;
            case "swirler":
                {
                    for (var i = 0; i < 60; i++) 
                    {
                        sparkleDir = random(0, TWO_PI);
                        sparkleVel = random(0,3) + random(0,3);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)), "swirler");
                        sparkles.push(thisSparkle);
                    }
                    this.type = "Exploded";
                }
                break;
            default:
                {
                    for (var i = 0; i < 100; i++) 
                    {
                        sparkleDir = random(0, TWO_PI);
                        sparkleVel = random(0,5);
                        sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
                        thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), 0);
                        sparkles.push(thisSparkle);
                    }
                    this.type = "Exploded";
                }
            }
        }
    }
    
    function sparkle(position, speed, fade, hue, sat, type)
    {
        this.position = position.copy();
        this.speed = speed.copy(); 
        this.fade = (fade == undefined ? 5 : fade);
        this.hue = (hue == undefined ? 360 : hue);
        this.sat = (sat == undefined ? 0 : sat);
        this.type = (type == undefined ? "default" : type);
    
        this.brt = 255;
    
        this.burntime=0;
    
        this.draw = function()
        {
            stroke(this.hue, this.sat, this.brt);
            newPositionX = this.position.x + log(this.burntime) * 8 * this.speed.x;
            newPositionY = this.position.y + log(this.burntime) * 8 * this.speed.y + this.burntime * gravity;
    
            point(newPositionX, newPositionY);
    
            if (this.type == "writer" && this.burntime > 1)
            {
                line(newPositionX, newPositionY, this.position.x + log(this.burntime-2) * 8 * this.speed.x, this.position.y + log(this.burntime-2) * 8 * this.speed.y + this.burntime * gravity);
            }
    
            if(this.type == "swirler")
            {
                sparkleDir = this.burntime/2 % TWO_PI;
                sparkleVel = random(0,1);
                sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
                thisSparkle = new sparkle(createVector(newPositionX+sparkleSpd.x, newPositionY+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
                sparkles.push(thisSparkle);
            }
    
            if(this.type == "sparkler")
            {
                sparkleDir = random(0, TWO_PI);
                sparkleVel = random(0,1);
                sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
                thisSparkle = new sparkle(createVector(newPositionX+sparkleSpd.x, newPositionY+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
                sparkles.push(thisSparkle);
            }
    
            this.brt = this.brt - fade;
    
            if(this.type == "blinker" && this.burntime > random(10,15))
            {
                if(int(random(0,15)) == 0)
                {
                    noStroke()
                    thisSize = random (20,30)
                    fill(this.hue+round(random(-10,+10)), random(0,10), 100);
                    ellipse(newPositionX, newPositionY, thisSize, thisSize);
                }
                this.brt = 0;
            }
    
            this.burntime++;
    
        }
    }
    
    function touchStarted() 
    {
        if(moving)
        {
            moving = false; 
            strokeWeight(1);
            fill(255);
            rect(width/2-30, -height+20, 10, 30);
            rect(width/2-50, -height+20, 10, 30);
            noLoop();
            }
            else
            { 
                moving = true;
            loop();
        } 
        // prevent default
        return false;
    }
    
  • Text fade in

    Just to expand a bit on kjafer's answer...I just did this same thing (I'm a very new-ish programmer)

    I used a Table with each line having the text, and the transparency value, then updated the table each time though and adjusted the transparency value (fixed increments, a fancier formula, etc). The cool thing for me is that I also included the font color in the table and shifted the color slightly as the text faded in or out. Nice effect. You could also manipulated the size and position of the text, of course, in the same way.

    --Darin

  • Text fade in

    I'm having some trouble with my text. I cant get them all to fade in at the same rate and I don't know what im doing wrong. After t[0], all the other pieces of text seem to just appear rather than fading in like I want them to. Would really appreciate some help!

    import ddf.minim.*;
    
    Minim minim;
    AudioPlayer track;
    
    
    
    PFont sourceSans, helvet;
    float textAlpha = 0;
    
    String []t = {
     "43.8 billion people in the U.S. \n suffer from mental illness",
    "Anxiety disorders affect 40 billion people, \n or 18.1%",
    "There is a scarce \n but growing market for \n products, designs, \n and tools that \n combat mental health.",
    "What can we, \n as designers do?"
    };
    
    
    void setup() {
      size (700, 600);
      noCursor();
    
    
    sourceSans = createFont ("SourceSansPro-Light", 10);
    helvet = createFont ("Helvetica-Bold", 40);
    
    
      minim = new Minim(this);
      track=minim.loadFile("heart.mp3");
      track.loop();
    
    } 
    
    
    
    void draw() {
      background(0);
      strokeWeight(3);
    
    
    
    
      //(96,143,193) blue
      //(193,23,49) red
    
      translate(0, 250);
      for (int i = 0; i< track.bufferSize()-1; i++) {             
        float x1 = map( i, 0, track.bufferSize(), 0, width );  //x1 values remapped to reach width
        float x2 = map( i+1, 0, track.bufferSize(), 0, width );
    
    
        if (track.left.get(i) == 0) {                          //stroke color
          stroke(96, 143, 193);
        } else if (track.left.get(i) >0) {
          stroke(193, 23, 49);
        } else if (track.left.get(i) < 0) {
          stroke(193, 23, 49);
        }
    
    
        line( x1, track.left.get(i), x2, track.left.get(i) *300);//draw a line from one buffer position to the next for both channels
                                                                 //series of vertical lines 
      }
    
    
      translate(0,-300);
      textFont(sourceSans);
      fill(255,textAlpha);
    
      if (millis() >=5000) {
      text(t[0], 100,100);
      textAlpha++;
    }
    
    if (millis() >=10000) {
      text(t[0], 100,200);
      textAlpha++;
    }
    
    if (millis() >= 12000) {
      text(t[2], 100,350);
      textAlpha++;
    }
    
    
    textSize(20);
    if (millis() >= 14000) {
      text(t[3], 500,500);
      textAlpha++;
    }
    
    }
    
  • How to modify fireworks code so that it reacts to sound (mic input)

    Thank you for the comment! So when I copy paste the code from the link to Processing I get an error message that says "badly formed character (expecting quote,got g)." Could you tell me how to fix this or run the code properly in Processing? I am new to coding and am very lost...thank you so much in advance!

    var rockets = []; 
    var sparkles = [];
    var moving = true;
    var gravity = 0.4;
    
    function setup() {
      // put setup code here
    
      createCanvas(windowWidth, windowHeight);
      background(0);
      strokeWeight(1);
    
      colorMode(HSB);
    
      var thisRocket = new rocket();
      rockets.push(thisRocket);
    }
    
    function draw() {
      // put drawing code here
      translate(width / 2, height);
      background('rgba(0,0,0, 0.1)');
      for (var i = rockets.length - 1; i >= 0; i--) 
      {
        if(rockets[i].type == "Exploded")
          rockets.splice(i,1);
        else
          rockets[i].draw();
      }  
    
      for (var i = sparkles.length - 1; i >= 0; i--) 
      {
        if(sparkles[i].position.y > 0 || sparkles[i].brt <= 0)
          sparkles.splice(i,1);
        else
          sparkles[i].draw();
      }  
    
      if (int(random(0, 12)) == 0)
      {
        var thisRocket = new rocket();
        rockets.push(thisRocket);
      }
    }
    
    function rocket(position, speed, type, sparkler, afterblow)
    {
    //  stroke(255);
    
      if (position == undefined)
        this.position = createVector(int(random(-width / 2, width / 2)), 0);
      else 
        this.position = position.copy();
    
      if (speed == undefined)
        this.speed = createVector(random(-1,1), -random(10,22));
      else
        this.speed = speed.copy();
    
      if (afterblow == undefined)
        this.afterblow = -1;
      else
        this.afterblow = afterblow;
    
      if (sparkler == undefined)
        this.sparkler = round(random(0,1)) == 0;
      else
        this.sparkler = sparkler;
    
      this.fuse = random(-1,1);
      this.hue = round(random(0,360));
    
      this.type = type;
      if(type == undefined)
      {
        typeIndex = int(random (0,9));
        switch (typeIndex)
        {
          case 0:
            this.type = "simple";
            break;
          case 1:
            this.type = "blinker";
            break;
          case 2:
            this.type = "directed";
            break;
          case 3:
            this.type = "burster";
            break;
          case 4:
            this.type = "double";
            break;
          case 5:
            this.type = "mega";
            break;
          case 6:
            this.type = "sparkleBlinker";
            break;
          case 7:
            this.type = "writer";
            break;
          case 8:
            this.type = "swirler";
            break;
        }
      }
    
      this.draw = function()
      {
        stroke(255);
        if(this.fuse < this.speed.y || this.afterblow >= 0)
          this.explode();
    
        if (this.sparkler) 
        {
          sparkleDir = random(0, TWO_PI);
          sparkleVel = random(0,1);
          sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
          thisSparkle = new sparkle(createVector(this.position.x+sparkleSpd.x, this.position.y+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
          sparkles.push(thisSparkle);
        }
        stroke(this.hue+round(random(-10,+10)), random(0,20), 90);
    
        point(this.position.x,this.position.y);
    
        this.position.add(this.speed);
        this.speed.y = this.speed.y + gravity;
      }
    
      this.explode = function()
      {
        switch (this.type)
        {
          case "blinker":
          {
            if (this.afterblow == -1)
             this.afterblow = round(random(3,8));
    
            if(this.afterblow-- > 0)
            {
              noStroke()
              thisSize = random (40,60)
              fill(this.hue+round(random(-10,+10)), random(0,20), 90);
              ellipse(this.position.x + random(-30,30) ,this.position.y + random(-30,30) ,thisSize,thisSize);
            }
            else
              this.type = "Exploded";
          }
          break;
        case "directed":
          {
            var dir = random(0, TWO_PI);
            for (var i = 0; i < 50; i++) 
            {
              sparkleDir = dir+random(0, PI/1.5);
              sparkleVel = random(3,5);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)));
              sparkles.push(thisSparkle);
            }
            this.type = "Exploded";
          }
          break;
        case "burster":
          {
            for (var i = 0; i < 60; i++) 
            {
              sparkleDir = random(0, TWO_PI);
              sparkleVel = random(0,3) + random(0,3);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)), "sparkler");
              sparkles.push(thisSparkle);
            }
            this.type = "Exploded";
          }
          break;
        case "double":
          {
            for (var i = 0; i < 90; i++) 
            {
              sparkleDir = random(0, TWO_PI);
              sparkleVel = random(3,5);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(2,4), this.hue+round(random(-10,+10)), round(random(0,40)));
              sparkles.push(thisSparkle);
            }
            for (var i = 0; i < 10; i++) 
            {
              sparkleDir = random(0, TWO_PI);
              sparkleVel = random(0,.5);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(2,4), this.hue+round(random(-10,+10)), round(random(0,40)));
              sparkles.push(thisSparkle);
            }
            this.type = "Exploded";
          }
          break;
        case "mega":
          {
            for (var i = 0; i < 1000; i++) 
            {
              sparkleDir = random(0, TWO_PI);
              sparkleVel = random(0,4)+random(0,4);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)));
              sparkles.push(thisSparkle);
            }
            this.type = "Exploded";
          }
          break;
        case "sparkleBlinker":
          {
            for (var i = 0; i < 100; i++) 
            {
              sparkleDir = random(0, TWO_PI);
              sparkleVel = random(0,2)+random(0,3);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), round(random(0,40)),"blinker");
              sparkles.push(thisSparkle);
            }
            this.type = "Exploded";
          }
          break;
        case "writer":
          {
            for (var i = 0; i < 100; i++) 
            {
              sparkleDir = random(0, TWO_PI);
              sparkleVel = random(0,2)+random(0,3);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), round(random(0,40)),"writer");
              sparkles.push(thisSparkle);
            }
            this.type = "Exploded";
          }
          break;
        case "swirler":
          {
            for (var i = 0; i < 60; i++) 
            {
              sparkleDir = random(0, TWO_PI);
              sparkleVel = random(0,3) + random(0,3);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(3,8), this.hue+round(random(-10,+10)), round(random(0,40)), "swirler");
              sparkles.push(thisSparkle);
            }
            this.type = "Exploded";
          }
          break;
        default:
          {
            for (var i = 0; i < 100; i++) 
            {
              sparkleDir = random(0, TWO_PI);
              sparkleVel = random(0,5);
              sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
              thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), 0);
              sparkles.push(thisSparkle);
            }
            this.type = "Exploded";
          }
        }
      }
    }
    
    function sparkle(position, speed, fade, hue, sat, type)
    {
      this.position = position.copy();
      this.speed = speed.copy(); 
      this.fade = (fade == undefined ? 5 : fade);
      this.hue = (hue == undefined ? 360 : hue);
      this.sat = (sat == undefined ? 0 : sat);
      this.type = (type == undefined ? "default" : type);
    
      this.brt = 255;
    
      this.burntime=0;
    
      this.draw = function()
      {
        stroke(this.hue, this.sat, this.brt);
        newPositionX = this.position.x + log(this.burntime) * 8 * this.speed.x;
        newPositionY = this.position.y + log(this.burntime) * 8 * this.speed.y + this.burntime * gravity;
    
        point(newPositionX, newPositionY);
    
        if (this.type == "writer" && this.burntime > 1)
        {
          line(newPositionX, newPositionY, this.position.x + log(this.burntime-2) * 8 * this.speed.x, this.position.y + log(this.burntime-2) * 8 * this.speed.y + this.burntime * gravity);
        }
    
        if(this.type == "swirler")
        {
          sparkleDir = this.burntime/2 % TWO_PI;
          sparkleVel = random(0,1);
          sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
          thisSparkle = new sparkle(createVector(newPositionX+sparkleSpd.x, newPositionY+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
          sparkles.push(thisSparkle);
        }
    
        if(this.type == "sparkler")
        {
          sparkleDir = random(0, TWO_PI);
          sparkleVel = random(0,1);
          sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
          thisSparkle = new sparkle(createVector(newPositionX+sparkleSpd.x, newPositionY+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
          sparkles.push(thisSparkle);
        }
    
        this.brt = this.brt - fade;
    
        if(this.type == "blinker" && this.burntime > random(10,15))
        {
          if(int(random(0,15)) == 0)
          {
            noStroke()
            thisSize = random (20,30)
            fill(this.hue+round(random(-10,+10)), random(0,10), 100);
            ellipse(newPositionX, newPositionY, thisSize, thisSize);
          }
          this.brt = 0;
        }
    
        this.burntime++;
    
      }
    }
    
    function touchStarted() 
    {
      if(moving)
      {
        moving = false; 
        strokeWeight(1);
        fill(255);
        rect(width/2-30, -height+20, 10, 30);
        rect(width/2-50, -height+20, 10, 30);
        noLoop();
      }
      else
      { 
        moving = true;
        loop();
      } 
      // prevent default
        return false;
    }
    
  • Can't run my sketch anymore...

    Glad it is working for you.

    You could also just pass the argument to the class constructor -- no case statements necessary, no reprogramming the entire class every time you add a single new sound.

    You are thinking of a Sound object as a Swiss army knife full of sound files.

    army-2186_640

    I'm suggesting that you use a Sound object like a tool handle. Make as many handles as you want, use one handle for one thing.

    s-l300

    So have the Sound class constructor take an argument, filestring:

    Class Sound {
        SoundFile sf;
        Sound(PApplet p, String filestring){
          sf = new SoundFile(p, filestring);
        }
    }
    

    Plug one sound file into one handle by making a new Sound from a filestring:

    coinSound = new Sound(p, "soundeffects/coin.mp3");
    

    ...and use it:

    float coinamp = 1.0; coinSound.play(coinamp); coinSound.fade();

    Now you can create a bunch of sounds -- as many as you need, but no more.

    cutting-solutions

    like this:

    beepSound = new Sound(p, "soundeffects/beep.mp3");
    bopSound = new Sound(p, "soundeffects/bop.mp3");
    boopSound = new Sound(p, "soundeffects/boop.mp3");
    

    and even create more Constructor arguments to customize them:

    beepSound = new Sound(p, "soundeffects/beep.mp3", myamp, myfade );
    

    ...instead of having a big collection of heavy duty swiss army knives that are all complicated yet all identical.

    images

  • 3D/Binaural audio mixing

    https://youtube.com/watch?v=nLJzY2LE4g0

    Click the link above for a small demo of what is described below. Please wear headphones!

    What is this?

    This is a small example scene showcasing some code I've written for positioning sound sources in 3D space around the listener (the sketch actually starts when you see the head - at the start you Audacity to illustrate how panning affects the mono signal (and that it's truly mono)). The sound sources are just mono audio files which are represented by the sphere rotating around a human's head. You can place them anywhere in the space and animate them as well (currently just by hand) to rotate around the listener. The project makes extensive use of the Minim library and extends some of the unit generators, notably adding a Convolver and FadeIn/FadeOut.

    How it works?

    The code is based on an HRIR database provided by CIPIC. Essentially, our ears work as a filter that shapes the incoming sound - this alteration of the sound can be captured via an impulse response which we call head related impulse response. We can use this HRIR data to convolve it with the original sound source and so make it sound as if it is coming from a certain position. A HRIR database per subject can contain thousands of points of data - CIPIC provides us with 1250 points per point cloud (1250 positions), and almost 50 subjects. These points are collected at the same distance from the head's "center." The demo above demonstrates the use of HRIR for Subject 003, but there are two things to note: 1. We have different ears and so filter the sound differently. Hence why there are so many subjects when collecting data. Studies have shown, though, that you can learn how to localize sounds using someone else's ears over 2-3 weeks, which is pretty cool since you keep them in memory! 2. There is a limited amount of points in the point cloud, but an unlimited amount of positions. What we are doing here is using Delaunay triangulation (with some custom tinkering) to create a kind of a spherical mesh from which we could interpolate data based on into which triangle our defined point falls into where the vertices of that triangle are 3 know HRIR measurements - in such a way, we can cover quite well all the points in 3D space around the person.

    Where is it going and why the post here?

    I am looking to expand this to firstly include all the subjects from CIPIC and then add more functionality to also include the distance and different trajectories plus rendering so the files could be easily saved. I am using Processing to both quickly prototype and learn about this subject and while it may very well happen that at some point it will leave Processing and even get rewritten in another language, I am quite interested to hear from the community if there would be interest to add this as a library to Processing, along with all the upcoming results of experiments? The project already extends the Minim audio library a fair bit and I was considering sending the new ugens to Minim as well - I will quite likely build upon them a lot more, but if properly wrapped up they could be useful to others.

    Who am I?

    I'm a second-year computer science and music student. I have quite a lot of random programming experience mostly in Unity using c# but never ventured into programming for audio. Now that it is pretty much a part of my degree, I decided to tackle making a "virtual" binaural microphone, since I have made physical ones in the past and using a combination of both forms a part of my final year project!