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;

}

These post are not necessarily in JS but you can convert them easily. Explor prev posts: https://forum.processing.org/two/search?Search=Fader

Also for example: https://forum.processing.org/two/discussion/7019/slow-fade-frame-transition
https://forum.processing.org/two/discussion/3226/fade-image-in

Kf

@saurahb -- do you mean that you want to take an opaque video and make it partly transparent?

To fade a video frame, just like any image, use either use tint, or use PGraphics. This works with any renderer.

The easiest way is to use a tint command before your movie command. Change the alpha down by "fader" variable.

tint(255, 255-fader);
image(mov, 0, 0);

You can reset tint manually, or isolate your tint command with pushStyle / popStyle.

• https://processing.org/reference/tint_.html
• https://processing.org/reference/pushStyle_.html

@kurtsnafu -- re:

most of the ones I've seen after searching were just crossfades between two videos

As I said, it works the same with two images as with two videos -- or with two rects -- or with two anything!

The important thing is that a fader is really just this a simple map() function wrapped in a constrain() call. That's it -- one long line of code. You can use a fader to map anything -- for example, times to transparency levels. Time goes in, alpha color comes out.

void draw() {
  background(0);
  noStroke();
  // update fader
  float f = fade(millis(), 3000, 6000, 255, 0); //3->6secs = 255->0 alpha
  // draw red fade
  fill(255,0,0, f);
  rect(0, 0, 75, 75);
  // draw green cross-fade
  fill(0,255,0, 255-f);
  rect(25, 25, 75, 75);
}
float fade (float amt, float start1, float stop1, float start2, float stop2) {
  return constrain(
    map ( amt, start1, stop1, start2, stop2 ), 
    min(start2, stop2), 
    max(start2, stop2)
    );
}

In the sketch above, f is changing the fill() transparency of two rectangles. However, the fader code has nothing to do with rectangles. Instead of fill(255,f); rect() this could be tint(255,t); image() for an image, or a PGraphics surface, or a movie frame. Or it could be a shape. The fader code is the same -- shift a variable, then use the output as an argument to the change visibility while drawing some object -- any object!

Want to add keyboard control? Calculate the amt argument based on the last time a key was pressed. Want multiple faders? Call with different sets of arguments. Want something a bit more concise for those sets of arguments? Create a CrossFader class -- this is essentially still just a wrapper around a single line of constrain(map()) code:

class CrossFader {
  float amt;
  float start1, stop1, start2, stop2;
  CrossFader(float start1_, float stop1_, float start2_, float stop2_) {    
    start1 = start1_;
    stop1 = stop1_;
    start2 = start2_;
    stop2 = stop2_;
  }
  float fade() {
    return fade(amt);
  }
  float fade(float amt_) {
    amt = amt_;
    return constrain(
      map ( amt_, start1, stop1, start2, stop2 ), 
      min(start2, stop2), 
      max(start2, stop2)
      );
  }
}

Now you can initialize a fader and then just call fader(millis()) or fader() -- but it is still just a single map() wrapped in constraint().

@kurtsnafu --

Here is an example sketch demonstrating a timed cross-fade. It is for two videos, but works the same way for two images:

• https://forum.processing.org/two/discussion/21999/how-to-create-a-basic-transition-effect-between-two-videos#latest

...and here is a more recent discussion on how to program timed fading for different timing sequences:

https://forum.processing.org/two/discussion/comment/96657/#Comment_96657

See also other past discussions:

• https://forum.processing.org/two/search?Search=fade
• https://forum.processing.org/two/search?Search=fader

@diramazioni -- Yes, video mixing / fading is possible.

People have written video mixers using Processing. For example:

1. An older example of the code for of a video mixer using a GUI library
2. The recently released Praxis Live 3 runs Processing code inside a software tool designed for live video mixing

If you are looking for something much simpler, one simple approach is to use tint() to fade video images in and out based on the time / a keypress. This works the same way with normal images and video images. Here are some past discussions of fading: 1 2

Here is an example sketch:

/**
 * VideoCrossFade
 * 2016-11-16 Jeremy Douglass - Processing 3.2.3
 * based on "Loop" Processing example sketch 
 *
 * - 640x360 short video file from "Loop" Processing example sketch
 * - 640x360 short video file from http:// www.sample-videos.com/index.php#sample-mp4-video
 **/

import processing.video.*;

Movie movie;
Movie movie2;
int fadeStartTime = 0;
int fadeDuration = 3000; // 3 seconds

void setup() {
  size(640, 720);
  textAlign(CENTER,CENTER);

  // Load and play each video in a loop
  movie = new Movie(this, "transit.mov");
  movie.loop();
  movie.volume(0);
  movie2 = new Movie(this, "SampleVideo_640x360_1mb.mp4");
  movie2.loop();
  movie2.volume(0);
}

void movieEvent(Movie m) {
  m.read();
}

void draw() {
  // clear screen
  background(0);

  // calculate fader level 0-255 based on time since last keypress
  float fader = map( millis()-fadeStartTime, 0, fadeDuration, 255, 0 );
  fader = constrain( fader, 0, 255 );

  if(fader < 255){
    // cross-fade movie image and display
    tint(255, 255-fader);
    image(movie, 0, 0, width, height/2);
  }

  if(fader > 0){
    // fade movie image and display
    tint(255, fader);
    image(movie2, 0, height/2, width, height);
  }

  // show it again in a mini monitor
  tint(255, 255);
  rect(-2, -2, 132, 76);
  tint(255, 255-fader);
  image(movie,  0, 0, 128, 72);
  tint(255, fader);
  image(movie2, 0, 0, 128, 72);


  text("Press space to reset cross-fade", width/2, height/2);
}

void keyPressed(){
  fadeStartTime = millis();
}

How about 1st "traditional" option but "fading" over some PGraphics instead: 8->

// forum.processing.org/two/discussion/13189/a-better-way-to-fade
// GoToLoop (2015-Oct-22)

static final int FPS = 10, FADE = 030;
PGraphics fader;

void setup() {
  size(600, 400, JAVA2D);
  frameRate(FPS);
  imageMode(CORNER);

  fader = createGraphics(width, height, JAVA2D);
  fader.smooth(4);
  fader.beginDraw();
  fader.strokeWeight(5);
  fader.stroke(-1);

  mousePressed();
}

void draw() {
  image(fader, 0, 0);

  fader.beginDraw();
  fader.pushStyle();
  fader.noStroke();
  fader.fill(0, FADE);
  fader.rect(0, 0, width, height);
  fader.popStyle();
  fader.endDraw();
}

void mousePressed() {
  fader.beginDraw();
  fader.fill((color) random(#000000));
  fader.ellipse(width>>1, height>>1, width*3/4, height*3/4);
  fader.endDraw();
}

void keyPressed() {
  if (key == ENTER | key == RETURN)  fader.save(dataPath(nf(frameCount, 4) + ".png"));
  else                               mousePressed();
}

Hi,

I'm using the midiBus-library for midi-Input (from a nano Kork controller). And I'm having problems when I try to fade more faders simultaneously. My sketch just recognizes only one fader at a time ...

My code is based on this code-snippet from the examples:

void controllerChange(int channel, int number, int value) { println(); println("Controller Change:"); println("--------"); println("Channel:"+channel); println("Number:"+number); println("Value:"+value); }

Any ideas how I could solve this issue?

Thanks and Thanks jo

I am writing a sketch that uses the ControlP5 and OSC libraries. I want to have control over something using theControlP5 GUI in Processing. I also want to have a fader on my mobile device change the y-position through OSC.

My question is how can I route the OSC signal into ControlP5 so that the GUI fader is updated as I use the mobile interface?

Otherwise I would end up changing a variable in the sketch without updating the GUI.

I hope my question is clear.

oscP5: http://www.sojamo.de/libraries/oscp5/ controlP5: http://www.sojamo.de/libraries/controlP5/

@Fader== i have installed neomades and coded successfully a very simple app for iOS which runs... Of course it's necessary to have a look at the API, but it's not very different from android

@Fader 2 other possibilities: codename one (but compiler is on line...), open source that i have added to eclipse but not yet tried neomad, which also is free & opensource, compiler not allways on line but i have opened Xcode!!! openFrameworks, why not... tell me the result!

@Fader: strange because i have exactly the same problem, as people ask me for "translating" my android apps in ios... As for that i downloaded & installed 2 days ago (eclipse) j2objc (mac osX); it seems to work, i mean that i get .h but till now i have only tried with very simple things and i cannot tell wether it is the true solution, which, i am afraid, could be just as KevinWorkman says to learn objectiveC...

I am having trouble getting my leds (output pins) to behave properly. My amateur borrowing and modification of public domain code works somewhat, but when I press the touchosc buttons to trigger the leds, they turn on, off and fade in an unusual manner. I suspect its due to serial message parsing, but I am not a programmer, so I am quite lost. I have done searches and tried a number of serial parsing tests but to no avail. Can anyone help a neophyte get these pins (leds) to do what they should do, all independently of each other? Right now hitting one button or fader to trigger a specific led often triggers another led on another pin. Attached is my code:

Arduino

int message = 0;     //  one byte of the serial message
int redLEDPin = 11;  //  the redLED is connected to this pin
int grLEDPin = 6;  //  the redLED is connected to this pin
int fadeLEDpin = 9; //  the faderLED is connected to this pin
int redLED = 0;    
int grLED = 0; 

int value = 0;

void setup(){

Serial.begin(9600);
}

void loop(){

  if(Serial.available() > 0){
  message = Serial.read();

  value = message;
  if(value >= 0 && value <= 255){
  analogWrite(fadeLEDpin,value);
  value = 0;
  }
   if (message == 'R'){  //  If a capitol R is received...
   redLED = 255;       //  Set redLED to 255 (on)
   analogWrite(redLEDPin, redLED);  //  Write an analog value between 0-255
   }
   if (message == 'r'){  //  If a lowercase r is received...
   redLED = 0; //  Set redLED to 0 (off)
   analogWrite(redLEDPin, redLED);  //  Write an analog value between 0-255
   }
   if (message == 'G'){  //  If a capitol R is received...
   grLED = 255;       //  Set redLED to 255 (on)
   analogWrite(grLEDPin, grLED);  //  Write an analog value between 0-255

   }
   if (message == 'g'){  //  If a lowercase r is received...
   grLED = 0; //  Set redLED to 0 (off)
   analogWrite(grLEDPin, grLED);  //  Write an analog value between 0-255
   }
  }
}


Processing


import oscP5.*; 
import netP5.*;                                                    
import processing.serial.*;
Serial myPort;
OscP5 oscP5;

int value1 = 0;
int value2 = 0;


NetAddress myRemoteLocation;

void setup(){

size(300,100);  
noStroke(); 
frameRate(30);  
frame.setTitle("Copyleft © 2012 Karim Baali"); 
println(Serial.list());  
myPort = new Serial(this, Serial.list()[2],9600);
oscP5 = new OscP5(this, 8000); 
myRemoteLocation = new NetAddress("10.0.1.82",9000);
}

void oscEvent(OscMessage theOscMessage){ 

String addr = theOscMessage.addrPattern();

 if(addr.indexOf("/1/rotary2") != -1) {
 value1 = int(theOscMessage.get(0).floatValue());
 value1 = 255-value1;
 // myPort.write(value1 + "a"); 
 myPort.write(value1); 
 println("rotary2: " + value1);
 }
    if(value1 <= 254){//  If rotary2 is not full HIGH (255) ....
     //construct OSC message for LED2
    OscMessage led2 = new OscMessage("/1/led2"); // <--- where /1 is the first page and /led2 is led2
    led2.add(0); // <-- assign a value to the message (in this case turn the led off)
    oscP5.send(led2,myRemoteLocation); // <-- send the message to the remote address    
   }
    if(value1 > 254){//  If rotary2 is full HIGH (255) ....
     //construct OSC message for LED2
    OscMessage led2 = new OscMessage("/1/led2"); // <--- where /1 is the first page and /led2 is led2
    led2.add(1); // <-- assign a value to the message (in this case turn the led on)
    oscP5.send(led2,myRemoteLocation); // <-- send the message to the remote address
   }
    if (addr.indexOf("/1/toggle2") != -1) {
    value2 = int(theOscMessage.get(0).floatValue());
    myPort.write(value2);
    println("toggle2: " + value1); 
    if(value2 == 0){        //  If  toggle2 is off do....
    myPort.write("r");    // Sends the character “r” to Arduino
    }
   if(value2 == 1){        // If  toggle2 is ON do...
       myPort.write("R");    // Sends the character “R” to Arduino
    }
}
    if (addr.indexOf("/1/toggle4") != -1) {
    value2 = int(theOscMessage.get(0).floatValue());
    myPort.write(value2);
    println("toggle4: " + value1); 
    if(value2 == 0){        //  If  toggle2 is off do....
    myPort.write("g");    // Sends the character “r” to Arduino
    }
    if(value2 == 1){        // If  toggle2 is ON do...
    myPort.write("G");    // Send the character “R” to Arduino
    }
}
  /* print the address pattern and the typetag of the received OscMessage */
  print("### received an osc message.");
  print(" addr: "+addr);
  print(" addrpattern: "+theOscMessage.addrPattern());
  println(" typetag: "+theOscMessage.typetag());
  println("value " +theOscMessage.get(0).floatValue());
  println("value1 " + value1 + value2);

}

void draw(){ 
    background(random(255), random(255), random(255));
}

Hi

I have a web page with three scripts, one for large, one for medium and one for small devices that people can choose. The rendering is very jittery. The same page with only one script is perfect. Does anyone know if it can be improved or if the way the html code is written is just the problem?

You can check the result here : coraliediatkine.eu/VisualProcessing1.html and here coraliediatkine.eu/VisualProcessing1.html

I'm pasting the code of the page that has the 3 scripts. Thanks!

 <!DOCTYPE html>
    <html class="no-js" lang="en">
    <head>



    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />




<link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/overrides.css" />
<link rel= "stylesheet" href= "fonts/stylesheet.css"  type="text/css">

    <script src="js/vendor/modernizr.js"></script>



        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Coralie Diatkine | Visuals </title>

        <meta name="Generator" content="Processing" />
        <!-- - - - - - - - - - - - - - - - - - - - - 
        +
        +    Wondering how this works? 
        +
        +    Go to: http://processing.org/
        +    and: http://processingjs.org/
        +
        + - - - - - - - - - - - - - - - - - - - - -->
        <style type="text/css">
    a img { 
        border: 0px solid transparent;
    }

    }
    canvas { 
        display: block; 
        outline: 0px; 
        margin: 0em; 
        padding:0em;
    }
    #content1 { 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
        width: 342px; min-width: 300px; overflow: auto;
        border-left: 0px solid  black; border-top: 0px solid black; 
        border-right: 0px solid black; border-bottom: 0px solid black;
        background-color: black;
    }
        #content2 { 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
        width: 634px; min-width: 300px; overflow: auto;
        border-left: 0px solid  black; border-top: 0px solid black; 
        border-right: 0px solid black; border-bottom: 0px solid black;
        background-color: black;
    }
        #content3 { 
        margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
        width: 950px; min-width: 300px; overflow: auto;
        border-left: 0px solid  black; border-top: 0px solid black; 
        border-right: 0px solid black; border-bottom: 0px solid black;
        background-color: black;
    }
        </style>
        <!--[if lt IE 9]>
            <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
        <![endif]-->
        <script src="SiteWeb/Processing/ChangeTest_large/web-export/processing.js" type="text/javascript"></script>
        <script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element function getProcessingSketchId () { return 'ChangeTestlarge'; }
</script>

        <script src="SiteWeb/Processing/ChangeTest_medium/web-export/processing.js" type="text/javascript"></script>
        <script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element function getProcessingSketchId () { return 'ChangeTestmedium'; }
</script>
        <script src="SiteWeb/Processing/ChangeTest_small/web-export/processing.js" type="text/javascript"></script>
    <script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element function getProcessingSketchId () { return 'ChangeTestsmall'; }
</script>

    </head>
    <body>

       <nav class="top-bar" data-topbar>
    <ul class="title-area">

      <li class="name"> 
        <h1>
          <a class= "menubaraller" href="#">
            Coralie Diatkine
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon "><a class="menubaraller" href="#"><span></span></a></li>
    </ul>

     <section class="top-bar-section"> 
     <ul class="left">

        <li><a class="menubaraller" href="/Biography.html" >About</a></li>
            <li><a class="menubaraller" href="/ReadMe.html" >How To...</a></li>   
           <li><a class="menubaraller" href="/Spatial Audio.html">Spatial Audio</a></li>
 <li><a class="menubaraller" href="/Sound Design.html">Sound Design</a></li>
           <li><a class="menubaraller" href="/Music.html" >Music</a></li>
  <li><a class="menubaraller" href="/Vocal Performance and Improvisation.html">Voice</a></li>
             <li><a class="menubaraller" href="/EarlierMusicWorks.html" >Earlier Works</a></li>
       <li><a class="menubaraller"  href="/Photos.html">Visuals</a></li>

                   </ul>
   </section>
</nav>



 <div class="row">
     <div class="large-12 columns">
        <div class="panel">


         <h5 class= "new">A Processing Study</h5> 


         <h6 class="worktitle">Change &nbsp; <a id="action1" href="javascript:void(0)" > <img src="/SiteWeb/icons/ico_square.svg" height="8" width="10"></a> &nbsp; <a id="action2" href="javascript:void(0)"> <img src="/SiteWeb/icons/ico_square.svg" height="10" width="12"></a>&nbsp; <a id="action3" href="javascript:void(0)" > <img src="/SiteWeb/icons/ico_square.svg" height="12" width="18"></a></h6>


        <div id= "showOrHideDiv1" style="display: none;">
<div id="content1">


                <canvas id="ChangeTestsmall" data-processing-sources="/SiteWeb/Processing/ChangeTest_small/web-export/ChangeTest.pde" width="342" height="211" >
                    <p>Your browser does not support the canvas tag.</p>
                    <!-- Note: you can put any alternative content here. -->
                </canvas>
                <noscript>
                    <p>JavaScript is required to view the contents of this page.</p>
                </noscript>
            </div>
            </div>
        <!--    <p id="description"></p>
            <p id="sources">Source code: <a class="contacts" href="ChangeTest.pde">ChangeTest</a> </p>
            <p>
            Built with <a class="contacts" href="http://processing.org" title="Processing">Processing</a>
            and <a class= "contacts" href="http://processingjs.org" title="Processing.js">Processing.js</a>
            </p>-->


<div id= "showOrHideDiv2"  style="display: none;">
<div id="content2">

<canvas id="ChangeTestmedium" data-processing-sources="/SiteWeb/Processing/ChangeTest_medium/web-export/ChangeTest.pde" width="634" height="391" >
                    <p>Your browser does not support the canvas tag.</p>
                    <!-- Note: you can put any alternative content here. -->
                </canvas>
                <noscript>
                    <p>JavaScript is required to view the contents of this page.</p>
                </noscript>
            </div>
            </div>


    <div id= "showOrHideDiv3" style="display: none;">
        <div id="content3">
            <canvas id="ChangeTestlarge" data-processing-sources="/SiteWeb/Processing/ChangeTest_large/web-export/ChangeTest.pde" width="950" height="587">
                    <p>Your browser does not support the canvas tag.</p>
                    <!-- Note: you can put any alternative content here. -->
                </canvas>
                <noscript>
                    <p>JavaScript is required to view the contents of this page.</p>
                </noscript>
            </div>
            </div>


  </div>  </div>  </div>

        <footer class="row">
<div class="large-12 columns">
<div class="footerpanel">

<div class="row">

<div class="large-3 columns">
<div class="subpanel">
<p class="NeueLite text-justify"> Coralie Diatkine <br> Musician, Sound Artist & Designer </p>

       </div>
        </div>

<div class="large-3 columns">
<div class="subpanel">


       <p class="NeueLite text-justify"> info [@] coraliediatkine [dot] eu <br> <a href="/ContactForm.html" class= "contacts">Write to me!</a>

       </div>
        </div>

<div class="large-3 columns">
<div class="subpanel">


       <p class="NeueLite text-justify"> 72 rue des Orteaux <br> 75020 Paris France </p>

       </div>
        </div>
        <div class="large-3 columns">
<div class="subpanel">


     <p class="NeueLite text-justify"> Copyright © 2014 Coralie Diatkine <br><a href="/Legal Notices.html" class= "contacts" target="_blank">Legal Notices & Credits </a>
 </p>

       </div>
        </div>
        </div>
        </div>
        </div>


  </footer>



    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

<script>
function generateFader(elem) {
    var t = null, goal, current = 0, inProgress = 0;
    if (!elem || elem.nodeType !== 1) throw new TypeError('Expecting input of Element');
    function visible(e) {
        var s = window.getComputedStyle(e);
        return +!(s.display === 'none' || s.opacity === '0');
    }
    function fader(duration) {
        var step, aStep, fn, thisID = ++current, vis = visible(elem);
        window.clearTimeout(t);
        if (inProgress) goal = 1 - goal; // reverse direction if there is one running
        else goal = 1 - vis;             // else decide direction
        if (goal) {                      // make sure visibility settings correct if hidden
            if (!vis) elem.style.opacity = '0';
            elem.style.display = 'block';
        }
        step = goal - +window.getComputedStyle(elem).opacity;
        step = 20 * step / duration;     // calculate how much to change by every 20ms
        if (step >= 0) {                 // prevent rounding issues
            if (step < 0.0001) step = 0.0001;
        } else if (step > -0.0001) step = -0.0001;
        aStep = Math.abs(step);          // cache
        fn = function () {
            // console.log(step, goal, thisID, current); // debug here
            var o = +window.getComputedStyle(elem).opacity;
            if (thisID !== current) return;
            if (Math.abs(goal - o) < aStep) {            // finished
                elem.style.opacity = goal;
                if (!goal) elem.style.display = 'none';
                inProgress = 0;
                return;
            }
            elem.style.opacity = (o + step).toFixed(5);
            t = window.setTimeout(fn, 20);
        }
        inProgress = 1; // mark started
        fn();           // start
    }
    return fader;
}
window.addEventListener(
    'load',
    function () {
        var fader1 = generateFader(document.getElementById('showOrHideDiv1')); 
        var fader2 = generateFader(document.getElementById('showOrHideDiv2'));
        var fader3 = generateFader(document.getElementById('showOrHideDiv3'));
                document.getElementById('action1').addEventListener(
            'click',
            function () {
                fader1(1000);
            }
        );
        document.getElementById('action2').addEventListener(
            'click',
            function () {
                fader2(1000);
                 }
        );

                document.getElementById('action3').addEventListener(
            'click',
            function () {
                fader3(1000);
            }
        );


         }
        );


</script>
    </body>
</html>

Hi all,

glad to see the forums are back. Nice job, Keepers!

Got a question about the use of the oscP5 library. I use TouchOSC with a simple panel using 2 push buttons and 1 fader. The 2 push buttons are supposedly used as presets for the fader, i.e. pressing one of these would immediately set the fader at a predefined level. I'm getting a hard time finding out how to correctly work this, let alone make it effective in any kind of way...

Here's what I've got:

import oscP5.*;
import netP5.*;

float push = 0;

OscP5 oscP5;
NetAddress myRemoteLocation;

void setup() {
  oscP5 = new OscP5(this, 12000);
  myRemoteLocation = new NetAddress("169.254.xxx.xxx", 9000);
}

void draw() {
}

void oscEvent(OscMessage theOscMessage) {
  String pat = theOscMessage.addrPattern();
  if (pat == "/BASE/pushbutton1") {
    push = 1;
  }
  else if (pat == "/BASE/pushbutton2") {
    push = 0.5;
  }
  OscMessage myMessage = new OscMessage("/BASE/slider");
  myMessage.add(push);
  oscP5.send(myMessage, myRemoteLocation);
}

EDIT: somehow variable push always equals 0 at line 26. String variable pat does equal the addrPattern() string (line 18), but even then the if...then control structure never seems to check as true (lines 19 and 22).

How to work this? Any help appreciated.

I'm not entirely sure what you're after, sorry :)

Might this be it?

if(mouseOverFader1() && mousePressed == true){
      x = mouseY - 10; // if the mouse in over the fader and pressed then x = the postion y of mouse
  } 
  if(mouseOverFader2() && mousePressed == true){
      y = mouseY - 10; // if the mouse in over the fader and pressed then y = the postion y of mouse
  } 
   if(mouseOverFader3() && mousePressed == true){
      z = mouseY - 10; // if the mouse in over the fader and pressed then y = the postion y of mouse
  } 

Hi,

I'm relatively new to Processing and I'm still coming to terms with it. I'm trying to implement a range of buttons than when clicked will carry out a simple mathematical to move various shapes to different locations on a range of sliders. I have this code so far

import processing.serial.*;
Serial myPort; 
int x = 199;
int y = 199;
int z = 199;


void setup(){
  size(520,520); // this is the canvas size
  frameRate(10); // how many times the screen redraws 

  //myPort = new Serial (this, "COM8", 9600); // selecting the usb port
  // setting up the font
  PFont font;
  font = loadFont("Arial-Black-12.vlw");
  textFont(font);
}

void mouseClicked(){
  if ((mouseX>=20)&&(mouseX<=50)&&(mouseY>=51)&&(mouseY<=199));
    mouseY = mouseY - 10;
}


void draw(){

  background(255); // setting the background of the canvas to white
  fill(0); // filling the rects with black
  rect(20, 52, 30, 197); // fixed background to the red fader
  rect(100, 52, 30, 197); // fixed background to the green faders
  rect(180, 52, 30, 197); // fixed background to blue fader
  if(mouseOverFader1() && mousePressed == true){
      x = mouseY; // if the mouse in over the fader and pressed then x = the postion y of mouse
  } 
  if(mouseOverFader2() && mousePressed == true){
      y = mouseY; // if the mouse in over the fader and pressed then y = the postion y of mouse
  } 
   if(mouseOverFader3() && mousePressed == true){
      z = mouseY; // if the mouse in over the fader and pressed then y = the postion y of mouse
  } 



  //dymanic text that prints the x and y vaules 
  text(x, 20, 10); 
  text(y, 100, 10);
  text(z, 180, 10);
  fill(255, 0, 0); // makes the fader button red
  rect(21, x, 28,50); // fader red button
  fill(0, 100, 0); // makes the fader button green
  rect(101, y, 28, 50); // fader green button
  fill(30, 144, 255); // makes the fader button blue
  rect(181, z, 28, 50); // fader blue button
  fill(y); // dymanic rect that fills with the colour of y (shades of balck and gray)
  rect(100, 20, 30, 31);
  fill(x); // dymanic rect that fills with the colour of x (shades of balck and gray)
  rect(20, 20, 30, 31); // Grey rect above red fader
  fill(z); // dynamic rect that fills with the colour of z
  rect(180, 20, 30, 31); // Grey rect above blue fader
  fill(255,0,0); // Fill Red
  rect(260, 40, 160, 31); // Fade red button
  fill(255,255,255); // White Text
  text("Fade Red", 310, 40, 160, 31); // Fade Red Text over buttin
  fill(0,100,0); // Fill Green
  rect(260, 80, 160, 31); // Fade green button
  fill(255,255,255); // White Text
  text("Fade Green", 310, 80, 160, 31); // Fade green Text over buttin
  fill(30,144,255); // Fill Blue
  rect(260, 120, 160, 31); // Fade blue button
  fill(255,255,255); // White Text
  text("Fade Blue", 310, 120, 160, 31); // Fade blue Text over buttin
  fill(255,255,255); // Fill White
  rect(260, 160, 160, 31); // Fade all button
  fill(0,0,0); // White Text
  text("Fade All", 310, 160, 160, 31); // Fade All Text over buttin
  //myPort.write(-x); //writes to arundio with the x,y to set the leds off
  //myPort.write(-y);
}

  //returns a boolean value if over the fader
boolean mouseOverFader1(){
  return((mouseX>=20)&&(mouseX<=50)&&(mouseY>=51)&&(mouseY<=199));
}
  //returns a boolean value if over the fader
boolean mouseOverFader2(){
  return((mouseX>=100)&&(mouseX<=130)&&(mouseY>=51)&&(mouseY<=199));
}

boolean mouseOverFader3(){
  return((mouseX>=180)&&(mouseX<=210)&&(mouseY>=51)&&(mouseY<=199));
}

[]()

As you can see it's far from perfect, what this code achieves is if I click the mouse within any of the 3 faders then mouseY is equal to mouseY - 10. This is the calculation I need to carry out however I can't get it specific to each individual button as as soon as I want to write a function of mouseClickedRed() for example Processing doesn't like that and I can't figure a work around or how to at least get the first mouseClicked function specific to at least one rectangle

i.e.



    void mouseClicked(){
      if ((mouseX>=260)&&(mouseX<=420)&&(mouseY>=40)&&(mouseY<=71)); // if mouseClicked over Fade Red button
        mouseY = mouseY - 10; // mouse Y = mouseY-10
    }