I'm thinking about syncing Processing's frameRate/draw function with an incoming MIDI signal because I would love to create a visualization in sync with music coming from Ableton.

With the MidiBus Library and through the IAC Driver on my Mac I got the Sync/Clock MIDI Message from Ableton into Processing but then I wasn't able to link those two things together.

This is my code so far but I'm not sure it's working properly. Any help would be greatly appreciated.

import themidibus.*; //Import the library
import javax.sound.midi.MidiMessage; //Import the MidiMessage classes http://java.sun.com/j2se/1.5.0/docs/api/javax/sound/midi/MidiMessage.html
import javax.sound.midi.SysexMessage;
import javax.sound.midi.ShortMessage;

MidiBus myBus; // The MidiBus

int i = 1;

void setup() {
  size(400, 400);
  background(0);
  frameRate(60);
  MidiBus.list();
  myBus = new MidiBus(this, 0, 1);
}

void draw() {
 if(frameCount % 60 == 0) {
   println("min");
   i = 1;
 }
}

void midiMessage(MidiMessage message) {
  print(i + " ");
  i++;
}

I need to stop a video when the PIR is "On" (Detects motion) and to play that video if the PIR is "Off".

Checking the Processing and Arduino websites, examples and references I couldn't figured out what I'm doing wrong. Please let me know if something is missing or left. Thanks in advance for any help!

This is the Arduino Code (copied from Arduino and Processing communication tutorials found on the web):

/*
   PIR sensor tester
*/

int ledPin = 13;                // choose the pin for the LED
int inputPin = 2;               // choose the input pin (for PIR sensor)
int pirState = LOW;             // we start, assuming no motion detected
int val = 0;                    // variable for reading the pin status

void setup() {
  pinMode(ledPin, OUTPUT);      // declare LED as output
  pinMode(inputPin, INPUT);     // declare sensor as input

  Serial.begin(9600);
}

void loop() {
  val = digitalRead(inputPin);  // read input value
  if (val == HIGH) {            // check if the input is HIGH
    digitalWrite(ledPin, HIGH);  // turn LED ON
    if (pirState == LOW) {
      // we have just turned on
      Serial.println("Motion detected!");
      // We only want to print on the output change, not state
      pirState = HIGH;
    }
  } else {
    digitalWrite(ledPin, LOW); // turn LED OFF
    if (pirState == HIGH) {
      // we have just turned of
      Serial.println("Motion ended!");
      // We only want to print on the output change, not state
      pirState = LOW;
    }
  }
}

And here is the Processing code:

import processing.serial.*;
import processing.video.*; 

Serial myPort;
String val;    

Movie video;

void setup() {
  size(640,480);
  video = new Movie(this,"sujeto1.mp4");
  video.loop();
  String portName = Serial.list()[0];
  myPort = new  Serial(this, portName, 9600);
  myPort.bufferUntil('\n');
}

void serialEvent (Serial myPort) {
  if (myPort.available() > 0) {
    val=myPort.readStringUntil('\n');
  }
  if (val=="Motion detected!") {
    video.stop();
  } else {
    video.loop();
  }
  println(val);

}
void draw() {
  background(0);
  image(video,0,0);

} 

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

boolean colourOne= false;
boolean colourTwo= false;
boolean colourThree= false;

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

void draw(){

  rect(100,100,50,50);
  allColours();
}

void colourRed(){
  background(255,0,0);
}

void colourGreen(){
  background(0,255,0);
}

void colourBlue(){
  background(0,0,255);
}
void allColours(){
  if(colourOne){
    colourRed();
    if(colourTwo){
      colourGreen();
      if(colourThree){
        colourBlue();

}
    }
  }
}

void mouseClicked(){
  if(!colourOne){
    colourOne=true;
  }
  else if(!colourTwo){
    colourTwo=true;
  }
  else if(!colourThree){
    colourThree=true;
  }
}

1. If I run code below, the thick line is drawn after the 2nd click

2. If I remove noLoop(); , the thick line is drawn after the 1st click

3. If I remove loop(); , the thick line is not drawn, not matter how many clicks I perform

4. If I remove noLoop(); and loop();, the thick line is drawn after the 1st click

         boolean ready_for_thick_line = false; 

         void mousePressed() {
           drawLine(10);
           ready_for_thick_line = true;
           redraw();
         }

         void drawLine(int width) {
           strokeWeight(width);
           line(20, 20, 80, 20);
         }

         void draw() {
         if (ready_for_thick_line) 
         {
            loop();
         }
         else{
            drawLine(1);
            noLoop();
         }  
        }

I'm developping a personnal project around the "concept of" interactive map.

On this interactive map, I would like to gather as many as possible of information related to one specific thematic.

I mean, I will represent static information (markers, geographical forms ...) and dynamic information (pathes, animations ...). The dynamic information and animations are scheduled according to a global timer (day by day, hour by hour ...). I may have several tens of thousand information per map ...

I've started prototyping the project using leaflet and some of its addons. Leaflet uses the concept of layers to manage different level of information or interactions with the user.

One of these addons is canvasLayer.js that I use for the dynamic part of the project. I can add a canvas layer to the interactive map and draw on this canvas. Being integrated to the leaflet map, this canvas layer is automatically managed when resizing, moving, spanning and managing the user interaction. But, to me, I suffer from a lack of algorithms for drawing all kinds of dynamic objects and then I have to implement most of them by myself ...

On the other hand , p5.js offers a huge amount of animation of all kinds (steering behavior, ...) that I would like to integrate in my interactive map.

Now I'm at the point to ask my questions:

Is it feasible to integrate the p5.js library in a leaflet interactive map? if yes ... how to do that?

I could replace leaflet by mapbox, as long as I keep the concept of interactive map.

I'm open to any discussion about different approach in order to reach the same goal.

Could you help me please?

Thanks

As this is a graded problem I would like to ask not to give me a solution but just to point out what could be causing this or if it's a known bug.

I am coding a program that needs to draw some content. The drawing is managed by a function that is invoked at the mouseClicked event.

Before the screen is drawn, the entire screen is refreshed within the called function using background(255).

The thing I am running into is that from time to time text content is placed on top of old content or lines are drawn towards the point that make up the starting point from where the text is drawn.

It does not produce this problem every time the program runs nor are any variables used that could effect the logic behind what is happening. Most annoying is that I can not seem to reproduce it myself. Going through the application the exact same way twice could one time produce this issue and the other time everything goes fine.

Any suggestions into what could be causing this would be great.

I have a issue that Processing isn't reading out all(or too much) of the data it gets.

I am sending data from the arduino(in this case just the numbers 1-6) and want to read them out in processing. the Baudrate has some effect but above and below 9600 it gets worse. I had in the past a delay in the arduino code, it didn't worked out neither. the catch(nullPointerException e) is there to catch strings that are 0, happened too in the past.

if i use other tools to read out the data from the serial such as the arduino serial monitor or Tera Term then there are no missing character/bytes.

SerialEvent doesn't trigger at all(with bufferuntil(10) or ('\n').

I hope someone has some ideas where the bug is crawling around.

walter

the processing code;

``` import processing.serial.*;

Serial myPort;        // The serial port
int xPos = 1;
int i,j,h,ii;         // horizontal position of the graph 
int lastxPos=1;
int lastheight=0;
int xPos1 = 1;         // horizontal position of the graph 
int lastxPos1=1;
int lastheight1=0;

String a="0";
int n=5;
String[] indata={a,a,a,a,a,a,a};//new String[6];
String[] indata2=new String[7];
  String InString;
int[] rawdata=new int[7];
float[] data=new float[7];
PrintWriter output;
//Variables to draw a continuous line.


int lf= 10;



public static final int portIndex=1;

void setup () {
  output= createWriter("output");
  // List all the available serial ports
  println(Serial.list());
  // Check the listed serial ports in your machine
  // and use the correct index number in Serial.list()[].
  println(" Connecting to -> " + Serial.list()[portIndex]);
  myPort = new Serial(this, Serial.list()[portIndex], 9600);  //
  delay(3000);
  myPort.write(65);
  // A serialEvent() is generated when a newline character is received :
  myPort.bufferUntil('\n');
  background(7000);      // set inital background:
//  delay(100);
}

void draw(){

//print(InString);
  InString=myPort.readStringUntil('\n');
  print(InString);

  try{
     indata2=split(trim(InString)," ");
  for(int ii=0;ii<indata2.length;ii++){  _**here the error is created**_
    indata[ii]=indata2[ii];
  }}
    catch(NullPointerException e){println("error invalid array");}
  for(int j=0;j<indata.length;j++){
  rawdata[j]=int(trim(indata[j]));
  }
 //  println(rawdata);
 //  println(interval);
}

the arduino code:

void setup() {
  // put your setup code here, to run once:
Serial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:
  for(int i=0;i<7;i++){
Serial.print(i);
Serial.print("\r"" ");
  }
  Serial.print('\n');
}

and a typical output

5 61 2 3 4 5 6

0 1 2 3 4 5 6

0 0 1 2 3 4 5 6 or 0 1 2 3 4 5 6 1 2 3 4 5 6

public void keyPressed(){

if ( key == 'p' )
    noLoop();
if ( key == 'r' )
    loop();
if ( key == 's' )
    redraw();

}

And this is the code with the same key:

public void keyPressed(){

if ( key == 'p' )
    noLoop();
if ( key == 'p' )
    loop();
if ( key == 's' )
    redraw();

}

In this case when I press key it doesn't have any effect. And the last one I tried is this:

public void keyPressed(){

if ( key == 'p' )
    noLoop();
else
    loop();
if ( key == 's' )
    redraw();

}

In this case when I press 'p' it stops the sketch but is doesn't play again. Because of the 'else' it plays again when I press any key including 's' which suppose to be just for a single step. Any help is more than welcome. Thanks!

Trying to write out frames with out the skletch running in realtime, however having the same result. Cheers oin advance

I just want to use noLoop() in setup and therefore call only once the draw method but I want to update (to draw again) the sketch in some circumstances.

What's the best advice to achieve this?

I saw that in 'instance' mode it is needed a function f(sketch) that inside defines sketch.setup and sketch.draw and returns nothing.

I intend to define inside a function, let's say drawMethod and make the sketch.draw = drawMethod and finally return an object { draw: drawMethod } in order to expose the method to the outside world and be able to be called later.

I'm not sure if this is the recommended way or not.

Kind regards,

Radu Mirescu

float x = int (min(1,10));

void setup() {
  size(100, 100);
  smooth();
  println(x);
}

void draw() {
  if (x > 5) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(50, 50, 50, 50);
  }
}

void keyPressed() {
  redraw();
}

import processing.sound.*;
import processing.serial.*;
import cc.arduino.*;

int linefeed;
int count;
int sensors[];
int a,b,c;

int lf0 = 10;
int lf1 = 10;

String myString0 = null;
String myString1 = null;
Serial myPort0;
Serial myPort1;
float pressureSession0num, pressureSession1num;

void setup() {
  myPort0 = new Serial(this, Serial.list()[0], 9600);
  myPort1 = new Serial(this, Serial.list()[1], 9600);
  myPort0.clear();
  myPort1.clear();
  fullScreen();
  smooth();
}

void draw() {
  background(0);
  while (myPort0.available() > 0) {
    myString0 = myPort0.readStringUntil(lf0);
    if (myString0 != null) {
      pressureSession0num=float(myString0);  
      println("1P"+pressureSession0num);
    }
  }
  myPort0.clear();

  while (myPort1.available() > 0) {  
    myString1 = myPort1.readStringUntil(lf1);
    if (myString1 != null) {
      pressureSession1num=float(myString1);  
      println("2P"+pressureSession1num);
    }
  }
  myPort1.clear();
}
  void counter() {
    if (pressureSession0num>500) {
      a += 1;
    }
    if (pressureSession1num>500) {
      b += 1;
    }
  }

Arduino code

int analogPin0 = 0;
int analogPin1 = 1;

float temp0=0;
float temp1=0;

void setup() { 
  Serial.begin(9600);
} 

void loop() {
  temp0=analogRead(analogPin0);
  temp1=analogRead(analogPin1);

  Serial.println(temp0); // println add Linefeed to my float
  Serial.println(temp1); // println add Linefeed to my float

  delay(250);
}  

int i = 0;
float time = 0;

void setup() {
  size (300, 300);
  noLoop();

  while (time < 3000) {
    time = millis();
    if (time > i*500) {  
      drawsomething();
      //redraw();
      print(i);
      i++;
    }
  }
}

void drawsomething() {
  background(0);
  fill(255);
  rect(10, 10, 20, 20);
}

void draw() {
  background(0);
  fill(255);
  rect(10, 10, 20, 20);
}

function gotFile(file){

var img = file.data image(img,0,0) }

/* =================================================================================
Global variables =================================================================================*/

int xValue, yValue, Command; boolean Error=true;

boolean UpdateGraph=true; int lineGraph; int ErrorCounter=0; int TotalRecieved=0;

/* =================================================================================
Local variables =================================================================================*/ boolean DataRecieved1=false, DataRecieved2=false, DataRecieved3=false;

float[] DynamicArrayTime1, DynamicArrayTime2, DynamicArrayTime3; float[] Time1, Time2, Time3; float[] Voltage1, Voltage2, Voltage3; float[] current; float[] DynamicArray1, DynamicArray2, DynamicArray3;

float[] PowerArray= new float[0]; // Dynamic arrays that will use the append() float[] DynamicArrayPower = new float[0]; // function to add values float[] DynamicArrayTime= new float[0];

String portName; String[] ArrayOfPorts=new String[SerialPortNumber];

boolean DataRecieved=false, Data1Recieved=false, Data2Recieved=false; int incrament=0;

int NumOfSerialBytes=8; // The size of the buffer array int[] serialInArray = new int[NumOfSerialBytes]; // Buffer array int serialCount = 0; // A count of how many bytes received int xMSB, xLSB, yMSB, yLSB; // Bytes of data

Serial myPort; // The serial port object

/* =================================================================================
A once off serail port setup function. In this case the selection of the speed, the serial port and clearing the serial port buffer
=================================================================================*/

void SerialPortSetup() {

// text(Serial.list().length,200,200);

portName= Serial.list()[PortSelected]; // println( Serial.list()); ArrayOfPorts=Serial.list(); println(ArrayOfPorts); myPort = new Serial(this, portName, 115200); delay(50); myPort.clear(); myPort.buffer(20); }

/* ============================================================
serialEvent will be called when something is sent to the serial port being used. ============================================================ */

void serialEvent(Serial myPort) {

while (myPort.available ()>0) { /* ============================================================
Read the next byte that's waiting in the buffer. ============================================================ */

int inByte = myPort.read();

if (inByte==0)serialCount=0;

if (inByte>255) {
  println(" inByte = "+inByte);    
  exit();
}

// Add the latest byte from the serial port to array:

serialInArray[serialCount] = inByte;
serialCount++;

Error=true;
if (serialCount >= NumOfSerialBytes ) {
  serialCount = 0;

  TotalRecieved++;

  int Checksum=0;

  //    Checksum = (Command + yMSB + yLSB + xMSB + xLSB + zeroByte)%255;
  for (int x=0; x<serialInArray.length-1; x++) {
    Checksum=Checksum+serialInArray[x];
  }

  Checksum=Checksum%255;



  if (Checksum==serialInArray[serialInArray.length-1]) {
    Error = false;
    DataRecieved=true;
  }
  else {
    Error = true;
    //  println("Error:  "+ ErrorCounter +" / "+ TotalRecieved+" : "+float(ErrorCounter/TotalRecieved)*100+"%");
    DataRecieved=false;
    ErrorCounter++;
    println("Error:  "+ ErrorCounter +" / "+ TotalRecieved+" : "+float(ErrorCounter/TotalRecieved)*100+"%");
  }
}

if (!Error) {


  int zeroByte = serialInArray[6];
  // println (zeroByte & 2);

  xLSB = serialInArray[3];
  if ( (zeroByte & 1) == 1) xLSB=0;
  xMSB = serialInArray[2];      
  if ( (zeroByte & 2) == 2) xMSB=0;

  yLSB = serialInArray[5];
  if ( (zeroByte & 4) == 4) yLSB=0;

  yMSB = serialInArray[4];
  if ( (zeroByte & 8) == 8) yMSB=0;


  //   println( "0\tCommand\tyMSB\tyLSB\txMSB\txLSB\tzeroByte\tsChecksum"); 
  //  println(serialInArray[0]+"\t"+Command +"\t"+ yMSB +"\t"+ yLSB +"\t"+ xMSB +"\t"+ xLSB+"\t" +zeroByte+"\t"+ serialInArray[7]); 

  // >=====< combine bytes to form large integers >==================< //

  Command  = serialInArray[1];

  xValue   = xMSB << 8 | xLSB;                    // Get xValue from yMSB & yLSB  
  yValue   = yMSB << 8 | yLSB;                    // Get yValue from xMSB & xLSB

    // println(Command+ "  "+xValue+"  "+ yValue+" " );

  /*

How that works: if xMSB = 10001001 and xLSB = 0100 0011 xMSB << 8 = 10001001 00000000 (shift xMSB left by 8 bits)
xLSB = 01000011
xLSB | xMSB = 10001001 01000011 combine the 2 bytes using the logic or | xValue = 10001001 01000011 now xValue is a 2 byte number 0 -> 65536
*/

  /*  ==================================================================
   Command, xValue & yValue have now been recieved from the chip
   ==================================================================  */

  switch(Command) {


    /*  ==================================================================
     Recieve array1 and array2 from chip, update oscilloscope      
     ==================================================================  */

  case 1: // Data is added to dynamic arrays
    DynamicArrayTime3=append( DynamicArrayTime3, (xValue) );
    DynamicArray3=append( DynamicArray3, (yValue) );

    break;

  case 2: // An array of unknown size is about to be recieved, empty storage arrays
    DynamicArrayTime3= new float[0]; 
    DynamicArray3= new float[0]; 
    break;    

  case 3:  // Array has finnished being recieved, update arrays being drawn 
    Time3=DynamicArrayTime3;
    Voltage3=DynamicArray3;
 //   println(Voltage3.length);
    DataRecieved3=true;
    break;  

    /*  ==================================================================
     Recieve array2 and array3 from chip
     ==================================================================  */


  case 4: // Data is added to dynamic arrays
    DynamicArrayTime2=append( DynamicArrayTime2, xValue );
    DynamicArray2=append( DynamicArray2, (yValue-16000.0)/32000.0*20.0  );
    break;

  case 5: // An array of unknown size is about to be recieved, empty storage arrays
    DynamicArrayTime2= new float[0]; 
    DynamicArray2= new float[0]; 
    break;    

  case 6:  // Array has finnished being recieved, update arrays being drawn 
    Time2=DynamicArrayTime2;
    current=DynamicArray2;
    DataRecieved2=true;
    break;  

    /*  ==================================================================
     Recieve a value of calculated power consumption & add it to the 
     PowerArray.
     ==================================================================  */
  case 20:  
    PowerArray=append( PowerArray, yValue );

    break; 

  case 21:  
    DynamicArrayTime=append( DynamicArrayTime, xValue ); 
    DynamicArrayPower=append( DynamicArrayPower, yValue );



    break;
  }
}

} redraw();
// } }

I'm on Linux kubuntu. I would like receive data from an arduino nano (3 axis motion for head tracking). The arduino code works because I can read data with Pure Data (Pd). The arduino is on port [32] (/dev/ttyUSB0)

I use the common code:

// Example by Tom Igoe

import processing.serial.*;

int lf = 10;    // Linefeed in ASCII
String myString = null;
Serial myPort;  // The serial port

void setup() {
  // List all the available serial ports
  printArray(Serial.list());
  // Open the port you are using at the rate you want:
  myPort = new Serial(this, Serial.list()[32], 9600);
  myPort.clear();
  // Throw out the first reading, in case we started reading 
  // in the middle of a string from the sender.
  myString = myPort.readStringUntil(lf);  
  myString = null;
}

void draw() {
  println(myPort.available());

  while (myPort.available() > 0) {
    myString = myPort.readStringUntil(lf);
    if (myString != null) {
      println(myString);
    }
  }
}

But myPort.available is always 0. I can't read anything.

Can someone help me ?

thanks

I would like to know how to exclude values in a variable when it takes values in a random () function. For example my variable y takes values randomly between 20 and 780 or y = (random (20,780)) However I do not want the variable y takes values between 300 and 400. Basically I want a function that prohibits y to take value between 300 and 400 but the rest yes. In addition I also search a function to initialize the program at the beginning when I press my mouse with a simple click. Indeed when I click on run, the program starts on a page 1 and when I finished my program, the program shows me on page 2. So on the page 2 when I click with my mouse, it starts again like at the beginning. If it's possible of course.

Thank you.

I need a web-client viewport which will render the 'state' (i.e. position etc) of each agent within the 2D environment which is handled on the server. There are tens of thousands of agents (potentially millions) which necessitates a true concurrent programming and runtime environment (hence why I am doing it in Go) – this is way too much overhead to be done entirely in a sketch or even dynamically on the client side. Therefore the actual drawing is offloaded to the client, but all the computation (beyond JSON unmarshalling and coordinate translation to the world space of the sketch/viewport) is done on a dedicated server.

I also come from art school prior to going into computer science, and I really like Processing/P5 as it directly gives you the drawing/animation environment and nothing else (unless you want to go digging under the hood). It's much faster to iterate and get what you want on screen. I know what I want to do can be done in HTML5 canvas only, or in Javascript + CSS but it's unnecessarily laborious and P5 has all the drawing functionality I need with a very easy to use API. Learning one language (Go) for this project is more than enough for me.

What I want to draw inside a sketch (viewport) is very simple: points, with varying stroke widths and colours. That's it. I just need to draw tens of thousands of them constantly, updating as they change position. All the computation which determines where those points are before being drawn is delivered via a JSON from the server. What I need is for the P5 sketch to do a bit of translation from the JSON object into some (predeclared and global) arrays of x,y pairs and just draw points at those coordinates by iterating through the said arrays. I don't need to block draw() from being called until the GET request is filled and the JSON has been processed, it should just render the contents of the arrays in the state they currently are in. So, there are two continual processes occurring by the client.

FIRST: LOOP( requesting the JSON data, processing it) SECOND: DRAW LOOP.

Anyone have any experience with something like this? Maybe there is a better and simpler way to do it?

I would say that the obvious alternative would be to bypass the seperate request for the JSON entirely and just have a web socket open so you are directly getting the array data from a function call inside the draw loop. I.e. via http you get the iteration range, then a value for the co-ordinates of each point... hmm.... It doesn't matter that this will slow down the framerate at all by waiting for the requests. I just need the easiest way to get the co-ordinates into memory to be drawn in the sketch.

void trackerKeys(){
  if(keyPressed== true){
    switch(keyCode){      
      case LEFT:
         ellipse(50,125, 25, 25);
         break;
      case RIGHT:
         ellipse(200,125, 25, 25);
         break;
      case UP:
         ellipse(125,50, 25, 25);
         break;
      case DOWN:
           ellipse(125,200, 25, 25);
           break;
      default:
         ellipse(125,125, 25, 25);
         break;
    }
  }
  else{
     ellipse(125,125, 25, 25);
  }
}

But all that gets me is one plane of movement. Then there was this code

void trackerKeys(){
    switch(keyCode){      
      case LEFT:
         g= 50;
         break;
      case RIGHT:
         g= 200;
         break;
      case UP:
         f= 50;
         break;
      case DOWN:
         f= 200;
         break;
      default:
        f=125;
        g=125;
        break;
  }
  ellipse(g,f,25,25);
}

And all that gets me is the ellipse is stuck in the corners, so close.... I played with some if/else stuff but that wasn't to good at all. Any ideas?

I am new to JAVA and processing. Can you tell me that how can I receive three serial data from arduino uno.

I am sending three parameters from arduino as.

Serial.print(i);
Serial.print(",");
Serial.print(D1);
Serial.print("_");
Serial.print(D2);
Serial.print(".");  // termination.

But I do not know how to receive the three different data. Yet I am sucessful to receive TWO of them.

Please help me Sir/ Madam

I suppose my question is: are images really supposed to be drawn in draw()? Seems like drawing the image over and over again in this loop isn't the best use of resources - as evidenced by the slowdown on resize.

Maybe I'm missing a paradigm? I'm a newbie - so would be happy to hear how I'm supposed to be thinking about this. It just seems a little strange to put image(img, 0, 0) in the draw loop, when i know it's not going to change - unless there's a given user event. Know what I mean?

int bg = 0;
int i = 0;

void setup() {
  size(790,640);
  surface.setResizable(true);
  test();
}

void draw() {

}

void keyPressed() {
  test();
}

void test() {
  surface.setSize(790, 640+10*i);
  background(bg);
  if (bg == 0) {bg = 50;} else {bg = 0;}
  fill(bg);
  ellipse(width/2, height/2, 200, 200);
  i++;
}

This code should draw a circle in the center of the window every time a key is pressed, along with resizing the window to be 10 pixels longer. However, for some reason the circle stops drawing when I press a key, yet background still changes. This also happens with line() and rect(). The only way I can get the circle to draw is if I put it in the draw() loop, but that will eat CPU. I also tried this in Processing 2 with frame.setSize(), with no luck. Is there an explanation to why this is happening or anything I can do to fix it?

Any help is greatly appreciated!

PImage img;
int CIRCLE = 0;
int RECTANGLE = 1;
int mode = CIRCLE;

void setup(){
size(200,200);
img = createImage(200,200,RGB);
}
void draw(){
     background(150);
     if( mode == CIRCLE)
          ellipse(100,100,30,30);
     if( mode == RECTANGLE)
          rect(75,75,50,50);
}
void keyPressed(){
     if(key == ' '){
          if(mode == CIRCLE)
               mode = RECTANGLE;
          else mode = CIRCLE;
     }
}

Why is that needed? I've drawn to it with beginDraw() and endDraw() but I can't copy it unless I call them again.

PGraphics canvas;
PGraphics hidden;
PGraphics temp;

void setup(){
     canvas = createGraphics(400,400);
     hidden = createGraphics(400,400);
     temp = createGraphics(400,400);
     size(400,400);
     canvas.beginDraw();
     canvas.background(100);
     canvas.endDraw();
     hidden.beginDraw();
     hidden.fill(150,200,0);
     hidden.rect(150,150,100,100);
     hidden.endDraw();
}
void draw(){

     image(canvas,0,0);
}  
void keyPressed(){
     if(key == '1'){
    //      canvas.beginDraw();  //uncomment these lines and it works.
   //       canvas.endDraw();
          temp.beginDraw();
          temp.image(canvas,0,0);
          temp.endDraw();
          canvas.beginDraw();
          canvas.image(hidden,0,0);
          canvas.endDraw();
          hidden.beginDraw();
          hidden.image(temp,0,0);
          hidden.endDraw();
     }
}

in my current project, i have some timing problems when rendering in realtime. As many of you might have experienced, the draw loop is not always a relieable timer. In my experience, it is better to have objects that render dependent on millis() instead of relying on a stable framerate. But still, this is not very smooth in more complex cases. (Strange, it is not a performance problem. It also happens to be unsmooth when the CPU is happy with 30%)

I am thinking about to trigger the drawing action from outside the Processing sketch, lets say a plain Java-application which just contains one thread which sends an Open Sound Control Message to the sketch every xxx milliseconds. And the sketch will render one Frame when it receives one of these messages.

Something like:

public void oscEvent(OscMessage theOscMessage)
  anObjectWhichDoesRendering.draw(playHead);
  playHead += playHeadStep;
}

Question to those who know more about Java, OSC and Threading than me: Is this approach worth a try?

Thanks in advance

nossekk

I'm new to Processing so, have mercy... I keep getting a 'nullpointerexception' error but I cant figure out why.

that's my code (I tried to format it as code but, in the preview its still a mess, sorry I'll give it a shot anyway) : I get the 'Nullpointerexception' error on the fill (sensor1Data [k], 0, 0); line in the draw procedure.

import processing.serial.*;

Serial CommPort ;
int [ ] sensor1Data ;
int [ ] sensor2Data ;
int [ ] sensor3Data ;
int [ ] sensor4Data ;
int sensor_cnt = 1 ;
int last_in = 0 ;

void setup() 
  {
  size(800, 800);
  frameRate(30);
  CommPort = new Serial (this, Serial.list( ) [1], 38400);
  CommPort.bufferUntil ('\r');
  println(Serial.list());
  }

void draw()
  {
  background( 100 ) ; 
  if (last_in == 1)
    {
    println( "Update Display" ) ;
    for(int k = 0 ; k < 20 ; k++ )
      {
      fill (sensor1Data [k], 0, 0);
      rect(k*30, 330-k*15, 30, 30) ;
      fill (sensor2Data [k], 0, 0) ;
      rect(k*30, 365-k*5, 30, 30) ;
      fill (sensor3Data [k], 0, 0) ;
      rect(k*30, 400+k*5, 30, 30) ;
      fill (sensor4Data [k], 0, 0) ;
      rect(k*30, 435+k*15, 30, 30) ;
      } 
    last_in = 0 ;
    }
  }

void serialEvent ( Serial CommPort )
{
  println( "Data In!" ) ;
  String usbString = CommPort.readStringUntil ('\r');
  if (usbString != null)
  {
    usbString = trim(usbString);
    switch (sensor_cnt)
    {
    case 1:
      {
        int sensor1Data[ ] = int (split (usbString, ','));
        for (int sensorNum = 0; sensorNum < sensor1Data.length; sensorNum++)
          println( "Sensor1 " + sensorNum + ": " + sensor1Data [sensorNum] );
        sensor_cnt++ ;
      } 
      break ;
    case 2:
      {
        int sensor2Data[ ] = int (split (usbString, ','));
        for (int sensorNum = 0; sensorNum < sensor2Data.length; sensorNum++)
          println( "Sensor2 " + sensorNum + ": " + sensor2Data [sensorNum] );
        sensor_cnt++ ;
      } 
      break ;
    case 3:
      {
        int sensor3Data[ ] = int (split (usbString, ','));
        for (int sensorNum = 0; sensorNum < sensor3Data.length; sensorNum++)
          println( "Sensor3 " + sensorNum + ": " + sensor3Data [sensorNum] );
        sensor_cnt++ ;
      } 
      break ;
    case 4:
      {
        int sensor4Data[ ] = int (split (usbString, ','));
        for (int sensorNum = 0; sensorNum < sensor4Data.length; sensorNum++)
          println( "Sensor4 " + sensorNum + ": " + sensor4Data [sensorNum] );
        sensor_cnt = 1 ;
        last_in = 1 ;
      } 
      break ;
    }
  }
}

Many Thanks

Omer

`int x,y,e; void setup(){ x=5; y=0; size(500,500); }

void draw(){ background(255,255,255); y=y+1;

if (y>300){ y=300; point(x,y); }

String[] gcode=new String[6];

gcode[0]="X"; gcode[1]=str(x); gcode[2]="Y"; gcode[3]=str(y); gcode[4]="E"; gcode[5]=str(e);

String joinedgcode = join(gcode,""); println(joinedgcode);

e+=1; }

void mousePressed() { x += 1; y=0; redraw(); }`