/**************************************************/
//GENERAL
var canvas;

//IMAGE
var img;//image
var imgW;//image width
var imgH;//image height
/**************************************************/
function setup(){
  canvas = createCanvas(710, 400);//initial canvas size
  canvas.drop(gotFile);
}
/**************************************************/
function draw(){
    background(0);
    if(img){
    image(img, 0, 0);
    imgW = img.width;
    imgH = img.height;
        if(imgW > 0 && imgH > 0){
            resizeCanvas(imgW, imgH);
        }
    }
    fill(255);
    text(imgW + ", " + imgH, 10, 10);
}
/**************************************************/
//
function gotFile(file){
  if (file.type === 'image') {
    img = createImg(file.data).hide();
  }
}
/**************************************************/
function mouseClicked(){
    if(img){
        if(imgW > 0 && imgH > 0){
            resizeCanvas(imgW, imgH);
        }
    }
}

Using draw(): Once the image has been loaded successfully (at least displaying it), I assign its width and height to the variables imgW and imgH. Followed by the canvas size change... which leads to an error, the canvas' size the same as the uploaded image (checked on Developer Tools) but doesn't display anything.

Using mouseClicked(): When disabling the canvas size change on draw(), and click on the canvas, the resize happens perfectly showing the image.

The application needs to work without clicking, it should be automatic change (canvas size) after dropping the image.

UPDATE This is what I see on the console when dropping the The error I get on the console:

Uncaught RangeError: Maximum call stack size exceeded
    at Array.map (<anonymous>)
    at p5.Color._parseInputs (p5.js:44096)
    at new p5.Color (p5.js:43147)
    at p5.color (p5.js:42827)
    at p5.Renderer2D.background (p5.js:50315)
    at p5.background (p5.js:44288)
    at draw (sketch.js:21)
    at p5.redraw (p5.js:52435)
    at p5.resizeCanvas (p5.js:51826)
    at draw (sketch.js:30)

I noticed that having a p5.js sketch running in my browser is taxing CPU load, even if the sketch in a tab that is not showing.

how would you do to have the sketch going noLoop() when not in focused and resume loop() when focused is back ?

is there a resumeFocus() event function in p5.js ?

would it be a good id to catch the last frame into an image and display it while out of focuse ?

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 want to have the mousePressed() function to do something similar to below but can't seem to find anything specific for Processing:

void mousePressed(){ if(looping) noLoop(); else loop(); }

Sorry if I've missed an article that covers this :-)

Many thanks.

I'm new to processing and I don't want to use more advanced stuff like noloop, etc. Could anyone give me any ideas on what to do?

Code follows:

float x=-2500;
float y=-2500;
int x2=70;
int y2=70;
int a=45; //for setting the circles behind the display 
int ellipseG=250; //variable for ellipse (green)
int ellipseB=350; //variable for ellipse (blue)
float speedX=2.7;
float speedY=2;


void setup() {
  size(700,500);
  background(255);
  smooth(); //Makes all geometry smoother
}


void draw () {

  fill(255,0,0); //makes vertical rectangle red
  noStroke(); // removes outline
  rect(315,-10,70,550); //coordinates for verticle rectangle
  rect(-10,215,750,70); //coordinates for horizontal rectangle


  // circles
  fill(000,255,000); //makes horizontal circle green
  ellipse(x-a,ellipseG,x2,y2);
  x=x+speedX; //adjusts speed for green circle


  fill (000,000,255); //makes vertical circle blue
  ellipse(ellipseB,y-a,x2,y2);
  y=y+speedY; //adjusts speed for blue circle
}

void mousePressed () {
  x= 0;
  y =0;  //Returns all x and y values to the 0 axis, essentially restarting the animation
}

void keyPressed() {


}

I then have the lines rotate. I want to pause the sketch for a second every 45 degree turn.

I can't come up with a condition that consistently triggers the noLoop() function without it drifting out of sync or causing the browser to crash.

Any ideas?

Code here: https://codepen.io/jmean/pen/ZaLyNJ

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();
         }  
        }

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

My problem is the following one: I would like to do a bar chart representing my 100 favorite songs (according to iTunes reproductions!), where you can change the table.sort, the disposition of the song in genre, artist, n° of reproduction, etc... with some buttons to do it. I've tried to do something with cp5 button, but the main problem is that if i maintain noLoop() the graph don't change, but if I take it away the graph goes crazy. I report down here the code and the CSV table!

Help me please, free hugs and the give of my final project if you do!

CODE:

import controlP5.*;

ControlP5 cp5;

Table table;
int c;
PFont font;
boolean Bottone = false;


void setup() {
  //size(800, 600);
  fullScreen();
  background(255);
  smooth();
  table = loadTable("My Music Numbers_first 100.csv", "header");
  font = createFont("Chivo-Regular-13.vlw", 13);//aggiunta la font

    cp5= new ControlP5(this); 

  cp5.addToggle("Bottone")
     .setPosition(20,180)
     .setSize(90,15)
     ;

}


void draw() {
  //questa linea e la successiva per invertire l'asse delle y
  /*scale(1, -1);
  translate(0, -height);*/

    font = createFont("CircularStd-Bold", 40);
    textFont(font);
    textSize(32);
    fill(#B0F566);
    textAlign(CENTER);
    text("My Favourite Tracks",(width/2),100);
    textSize(18);
    fill(#83B45B);
    text("A data—visualization of the 100 songs that I love most",(width/2),150);


    for (int i = 0; i<table.getRowCount(); i++) {

    // Access each row of the table one at a time, in a loop.
    TableRow riga = table.getRow(i);
    int posizione = riga.getInt("posizione");
    String n = riga.getString("artista");
    String titolo = riga.getString("titolo");
    int score = riga.getInt("riproduzioni");
    int durata = riga.getInt("durata");
    String album = riga.getString("album");
    int anno = riga.getInt("anno");
    String genere = riga.getString("genere");
    String nazione = riga.getString("nazione");
    int x = 200+(i*10);
    int y = height/2;

    table.sort("riproduzioni");

     if (genere.equals("Alternativa/Indie") == true) {
      c = #B0F566;
    } 
    if (genere.equals("Reggae") == true) {
      c = #4AF2A1;
    } 
    if (genere.equals("Pop") == true) {
      c = #5CC9F5;
    } 
    if (genere.equals("Rock") == true) {
      c = #6638F0;
    }

    if (genere.equals("Hip Hop") == true) {
      c = #E8235E;
    }
    if (genere.equals("Rap") == true) {
      c = #FF1A1A;
    }
    if (genere.equals("Ska") == true) {
      c = #1EF7D1;
    }
    if (genere.equals("Dance Elettronica") == true) {
      c = #FFF41A;
    }
    if (genere.equals("Neofolk") == true) {
      c = #10FF00;
    } 
    if (genere.equals("Soul") == true) {
      c = #2420C4;
    }
    if (genere.equals("Punk") == true) {
      c = #CB7777;
    }

    if (Bottone == true) {
    table.sort("genere");

  } else {
    table.sort("riproduzioni");
  }

    fill(c);
    rectMode(CENTER);
    noStroke();
    rect(x, y, 10, score*4,7);
    //noLoop();

    println(titolo + " " + score);
  }
}

CSV (named "My Music Numbers_first 100.csv"):

posizione,artista,titolo,riproduzioni,durata,album,anno,genere,nazione 001,The Vaccines,All in White,112,04:34,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 002,The Vaccines,Norgaard,079,01:38,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 003,Alt-J,Dissolve Me,065,04:00,An Awesome Wave,2012,Alternativa/Indie,Inghilterra 004,Bon Iver,Skinny Love,063,03:58,For Emma| Forever Ago,2007,Alternativa/Indie,USA 005,Alt-J,Breezeblocks,058,03:47,An Awesome Wave,2012,Alternativa/Indie,Inghilterra 006,The Vaccines,Wetsuit,053,03:50,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 007,Bob Marley & The Wailers,Stir It Up,048,03:41,Catch a Fire,1973,Reggae,Inghilterra 008,The Libertines,Don't Look Back Into The Sun,048,03:21,The Libertines,2004,Alternativa/Indie,Inghilterra 009,Tame Impala,Feels Like We Only Go Backwards,047,03:13,Lonerism,2012,Alternativa/Indie,Australia 010,The Vaccines,A Lack Of Understanding,044,02:59,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 011,Babyshambles,Maybeline,041,03:16,Sequel to the Prequel,2013,Alternativa/Indie,Inghilterra 012,Gazebo Penguins,Difetto,041,02:23,Raudo,2013,Alternativa/Indie,Italia 013,Alt-J,Matilda,041,03:48,An Awesome Wave,2012,Alternativa/Indie,Inghilterra 014,King Harvest,Dancing in the Moonlight,040,02:52,Dancing in the Moonlight,1973,Pop,USA 015,Gazebo Penguins,Finito il cafe,039,03:05,Raudo,2013,Alternativa/Indie,Italia 016,Alt-J,Something Good,038,03:42,An Awesome Wave,2012,Alternativa/Indie,Inghilterra 017,Egg,Shoe,038,03:45,Shoe EP,2009,Rock,Inghilterra 018,The Vaccines,Blow It Up,037,02:36,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 019,I Cani,Corso Trieste,034,03:28,Glamour,2013,Pop,Italia 020,I Cani,Post Punk,034,04:46,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 021,The Vaccines,Under Your Thumb,034,02:20,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 022,Chiddy Bang,By Your Side,034,03:48,inedito,2012,Hip Hop,USA 023,Gazebo Penguins,Casa dei Miei,033,02:28,Raudo,2013,Alternativa/Indie,Italia 024,I Cani,Hipsteria,033,03:39,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 025,U2,California (There Is No End to Love),033,04:00,Songs of Innocence,2014,Rock,Irlanda 026,Gazebo Penguins,Domani e' gennaio,032,02:57,Raudo,2013,Alternativa/Indie,Italia 027,Babyshambles,Fireman,031,01:42,Sequel to the Prequel,2013,Alternativa/Indie,Inghilterra 028,Babyshambles,Nothing Comes to Nothing,030,03:15,Sequel to the Prequel,2013,Alternativa/Indie,Inghilterra 029,Gazebo Penguins,Correggio,030,02:00,Raudo,2013,Alternativa/Indie,Italia 030,I Cani,Le coppie,030,03:09,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 031,I Cani,Il pranzo di santo stefano,030,02:09,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 032,The Vaccines,Post Break-Up Sex,030,02:54,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 033,Babyshambles,Farmer's Daughter,028,05:05,Sequel to the Prequel,2013,Alternativa/Indie,Inghilterra 034,Gazebo Penguins,Ogni scelta e' in perdita,028,03:23,Raudo,2013,Alternativa/Indie,Italia 035,I Cani,Velleita',028,04:47,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 036,Mecna,Cerotti,028,02:52,inedito,2012,Rap,Italia 037,Mighty Oaks,Brother,028,03:16,Brother,2012,Alternativa/Indie,Germania 038,The Vaccines,Tiger Blood,028,02:08,Come Of Age,2012,Alternativa/Indie,Inghilterra 039,Mecna,31/07,027,03:16,Bagagli a mano,2011,Rap,Italia 040,Paolo Nutini,10/10,027,02:57,Sunny Side Up,2009,Ska,Inghilterra 041,The Vaccines,If You Wanna,027,02:54,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 042,U2,The Miracle (Of Joey Ramone),027,04:15,Songs of Innocence,2014,Rock,Irlanda 043,Big Sean,Too Fake,027,04:12,Finally Famous Vol. 3: Big,2010,Hip Hop,USA 044,Flume,Holdin On,027,02:35,Flume,2012,Dance Elettronica,Australia 045,Deluxe,Pony,027,03:29,Polishing Peanuts,2011,Dance Elettronica,Francia 046,Bob Marley & The Wailers,One Love,026,02:53,Exodus,1977,Reggae,Giamaica 047,Drowners,Ways to Phrase a Rejection,026,01:46,Drowners,2014,Alternativa/Indie,USA 048,The Vaccines,Wreckin' Bar (Ra Ra Ra),026,01:22,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 049,The Hives,Hate To Say I Told You So,026,03:20,Veni Vidi Vicious,2000,Alternativa/Indie,Svezia 050,Bon Iver,Holocene,025,05:36,Bon Iver| Bon Iver,2011,Alternativa/Indie,USA 051,I Cani,FBYC (Sfortuna),025,03:35,Glamour,2013,Pop,Italia 052,The Libertines,Music When The Lights Go Out,025,03:02,The Libertines,2004,Alternativa/Indie,Inghilterra 053,The Vaccines,Teenage Icon,025,03:05,Come Of Age,2012,Alternativa/Indie,Inghilterra 054,Cee Lo Green,Fuck You,025,03:54,The Lady Killer,2010,Pop,USA 055,Oscar Isaac,Hang Me| Oh Hang Me,025,03:23,Inside Llewyn Davis,2013,Neofolk,USA 056,The Tallest Man on Earth,Love is all,025,04:17,The Wild Hunt,2010,Neofolk,Svezia 057,The Vaccines,If You Wanna,025,02:54,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 058,Bob Marley & The Wailers,No Woman No Cry,024,07:12,Natty Dread,1975,Reggae,Giamaica 059,Bob Marley & The Wailers,Three Little Birds,024,03:02,Exodus,1980,Reggae,Giamaica 060,Drowners,Luv| Hold Me Down,024,02:51,Drowners,2014,Alternativa/Indie,USA 061,Gazebo Penguins,Non moriro',024,02:53,Raudo,2013,Alternativa/Indie,Italia 062,The Tallest Man on Earth ,Thousand Ways,024,02:53,The Wild Hunt,2010,Neofolk,Svezia 063,The Vaccines,No Hope,024,04:10,Come Of Age,2012,Alternativa/Indie,Inghilterra 064,The Vaccines,Wolf Pack,024,02:24,What Did You Expect From The Vaccines?,2011,Alternativa/Indie,Inghilterra 065,Justice,D.A.N.C.E. ,024,04:03,Cross,2007,Dance Elettronica,Francia 066,Arctic Monkeys,Mardy Bum,023,02:55,Whatever People Say I Am| That's What I'm Not,2006,Alternativa/Indie,Inghilterra 067,Babyshambles,New Pair,023,03:06,Sequel to the Prequel,2013,Alternativa/Indie,Australia 068,Mumford & Sons,Below My Feet,023,05:00,Babel,2012,Neofolk,Inghilterra 069,Otis Redding ,Respect,023,02:10,Otis Blue: Otis Redding Sings Soul,1965,Soul,USA 070,Grouplove,Itchin' On A Photograph,023,04:23,Never Trust a Happy Song,2011,Rock,USA 071,Ingrid Michaelson,You And I,023,02:36,Girls and Boys,2006,Alternativa/Indie,USA 072,Bob Marley & The Wailers,Get Up Stand Up,022,03:20,Burnin',1973,Reggae,Giamaica 073,Drowners,Long Hair,022,01:49,Drowners,2014,Alternativa/Indie,USA 074,I Cani,Non c'e' niente di twee,022,04:04,Glamour,2013,Pop,Italia 075,I Cani,Storia di un impiegato,022,03:53,Glamour,2013,Pop,Italia 076,I Cani,I pariolini di diciott'anni,022,03:46,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 077,Mumford & Sons,The Cave,022,03:38,Sigh No More,2009,Neofolk,Inghilterra 078,The Tallest Man on Earth,Thrown Right at Me,022,02:59,Sometimes the Blues Is Just a Passing Bird,2010,Neofolk,Svezia 079,U2,Every Breaking Wave,022,04:12,Songs of Innocence,2014,Rock,Irlanda 080,Rancid,Ruby Soho,022,02:52,...And Out Come the Wolves,1995,Punk,USA 081,Sam Smith,Stay With Me,022,02:55,In the Lonely Hour,2014,Soul,Inghilterra 082,The Killers,Mr. Brightside,022,03:47,Hot Fuss,2004,Alternativa/Indie,USA 083,Bob Marley & The Wailers,I Shot The Sheriff,021,03:54,Burnin',1973,Reggae,Giamaica 084,Chance The Rapper,Cocoa Butter Kisses ,021,05:07,Acid Rap,2013,Rap,USA 085,Coez,Lontana da me,021,03:43,Non erano fiori,2013,Pop,Italia 086,I Cani,Door Selection,021,02:40,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 087,I Cani,Perdona e dimentica,021,03:37,Il sorprendente album d'esordio de i cani,2011,Pop,Italia 088,Mumford & Sons,Sigh No More,021,03:28,Sigh No More,2009,Neofolk,Inghilterra 089,The Black Keys,Lonely Boy,021,03:13,El Camino,2011,Alternativa/Indie,USA 090,The Libertines,What Katie Did,021,03:50,The Libertines,2004,Alternativa/Indie,Inghilterra 091,The Vaccines,I Wish I Was A Girl,021,02:52,Come Of Age,2012,Alternativa/Indie,Inghilterra 092,The Vaccines,Bad Mood,021,03:14,Come Of Age,2012,Alternativa/Indie,Inghilterra 093,Bob Marley & The Wailers,Jamming,020,03:35,Exodus,1977,Reggae,Giamaica 094,Bon Iver ,Beth/Rest,020,06:26,Bon Iver|Bon Iver,2011,Alternativa/Indie,USA 095,Bon Iver,Minnesota|WI,020,03:32,Bon Iver|Bon Iver,2011,Alternativa/Indie,USA 096,Gazebo Penguins,Mio Nonno,020,01:47,Raudo,2013,Alternativa/Indie,Italia 097,I Cani,Come vera nabokov,020,04:03,Glamour,2013,Pop,Italia 098,Mumford & Sons,Roll Away Your Stone,020,04:24,Sigh No More,2009,Neofolk,Inghilterra 099,The Black Keys,Little Black Submarines,020,04:11,El Camino,2011,Alternativa/Indie,USA 100,The Cure,Just Like Heaven,020,3:30,Kiss Me Kiss Me Kiss Me,1987,Alternativa/Inside,Inghilterra

this is the code and you can see in the code that the number of lines drawn should be 300 but it draws endlessly. Can someone explain why? Thanks

    this.death = function() {
        if (!pause) {
          for (var i = 0; i < this.tail.length; i++) {
            var pos = this.tail[i];
            var d = dist(this.x, this.y, pos.x, pos.y);
            if (d < 1) {
              console.log('starting over');
              this.total = 0;
              this.tail = [];
              hit.play()
          }
        }
       }
    }

The link of my Own Project Is here : https://github.com/jolkedejonge/Code-Js

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!

PS: I m using Kinect for xbox one, the awesome Processing.3 and KinectPV2.

The reason I dont want to use draw is because it writes 60 times per second, which overflows the serial connection, and I dont want to wait on a specific event to run the code, I need to write to these servos in the void setup/when I hit the play button in processing.

I was advised to use a noLoop function which only calls draw() function once, by having a serial event function that sends the serial data to the arduino and it calls draw() at the end.

But I kinda need help on making a noLoop function in void setup?

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();
}

I want to draw a circle when the mouse is clicked at mouseX, mouseY but it doesn't seem to work. Can you explain why?

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(200);
}

function mousePressed() {
    ellipse(mouseX, mouseY, 180);
}

I have been trying to google and search the forums for an answer. I did find a KahnAcademy answer which is pretty much the same code but they're using processing.js.

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 setup() {
  createCanvas(800, 600);
}

function draw() {
  for(var i = 0; i < 5; i++) {
   ellipse(random(800), random(600), 25, 25);
  }

}

As far as I can tell from other peoples code and references to the for loop syntax, this should only run 5 times, yet it is infinite. Changing the second argument in the for loop only seems to either speed up or slow down the amount of ellipses drawn per frame, which also confuses me.

Any help is appreciated, thanks.

OMG I am so close to making a wonderful thing! BUUT::::

For some random reason (and I cannot see why) the textWidth() is always the wrong number on start up. It should be the width of "book", but it is different number and I cannot find where this different number comes from. When you click "more" for each subsequent request it is the right width. WHY oh WHY oh WHY? (any help or magic much appreciated)

the code is below and the images can be downloaded from here: https://www.dropbox.com/sh/vqi2mr7ri7j4p62/AADWxWIh2-ZegTFc0zSd0j2Ra?dl=0

Becca :)

//inspired automated sketches of by james paterson http://presstube.com/blog/category/james-paterson/ i wanted to experiment with 
//used some of my drawings +images and see what occurred
//becca rose 2016
// this kind of evolved into a random book cover generator


var img = [];

var imgW;
var aspect;
var imgH;
var randISBN1;
var randISBN2;
var imageSnapButton
var book;
var bookStart;
var textW = 0;

function preload() {
  // load images
  for (var i = 0; i < 35; i++) {
    img[i] = loadImage(i + ".png");
    println(i);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  noLoop();
  imageMode(CENTER);
  noStroke();


  // create button
  imageSnapButton = createButton('- M O R E -');
  imageSnapButton.position(40, 20);
  imageSnapButton.mousePressed(imageSnap);

}

function draw() {
  imageSnap();
}

/////////////////////////
//find the JSON data page
function newBook() {
  randISBN1 = ~~random(256);
  randISBN2 = ~~random(256);
  loadJSON('http://" + "openlibrary.org/api/get?key=/b/OL1' + randISBN1 + randISBN2 + 'M', gotData);
  println("textW =  " + textW);
}

///////////////////////
//make the image titles
function gotData(data) {
  book = data.result.title;
  textW = textWidth(book);
  println("book = " + book);
  println("textW =  " + textW);

    fill(20, 255, 70, 125)
    rect(38, 80 - 32, textW + 2, 39);
    fill(0);
    textSize(35);
    text(book, 40, 80);
}

////////////////////////////////
//function to make those imaages
function imageSnap() {
  background(255);
  //image randoms
  var rand1 = ~~random(35);
  var rand2 = ~~random(35);
  var rand3 = ~~random(35);

  //display images
  image(img[rand3], (width / 2) - 200, (height / 2) - 200, imgW, imgH);
  image(img[rand2], width / 2, (height / 2) - 100, imgW, imgH);
  image(img[rand1], (width / 2) + 200, (height / 2) + 30, imgW, imgH);
  newBook();
}

I have encountered situations in which I want to toggle looping rather than set it -- a simple example is: press space to pause/un-pause. I couldn't find anything in the language reference on looping status -- e.g. nothing referenced from loop() or noLoop().

• isLooping(): in the Processing javadocs I found the PApplet.isLooping() method -- however, I'm not sure if this is undocumented / do-not-use.
• if(looping): in a bug report I found mention of a "looping" flag. Checking it works -- I can even set it directly, and it appears to have the same effect as loop() / noLoop() -- but I couldn't locate it in the github source, and it seems very undocumented...?

I went ahead and created a sketch that demonstrates four methods of toggling the draw loop by pressing 1 / 2 / 3 / 4. All four methods work.

boolean myLooping = true;

int bgBlue = 0;
void draw(){
    background( 0, 0, bgBlue );
    bgBlue = (bgBlue+3)%255;
}

void keyPressed(){
    switch(key){
        case '1':
            if(myLooping){ noLoop(); }
            else { loop(); }
            myLooping = !myLooping;
            break;
        //// check the `isLooping()` method
        case '2':
            if(isLooping()){ noLoop(); }
            else { loop(); }
            break;
        //// check `looping` and set with loop()/noLoop()
        case '3':
            if(looping){ noLoop(); }
            else { loop(); }      
            break;
        //// flip `looping` directly
        case '4':
            looping = !looping;
            break;
    }
}

Just writing looping = !looping; is the most concise, but it is also the most undocumented. Given how complex the looping model is in Processing, any advice on advantages / drawbacks to using any of these methods (or others not mentioned here) to detect the looping status or to toggle it?

các anh em có khi nào thấy nhàm chán vì đánh LOL mấy năm rồi nhìn tên gọi cũ xì của bản thân mình chưa? Hay là do bạn với 1 tên gọi quá nhố nhăng nên về sau càng lên level các bạn mong muốn đổi một tên gọi thế nào cho ý nghĩa hơn! Để chuẩn bị sẵn sàng cho mùa giải mới năm 2018, tụi mình sẽ tuyển tập cho bạn những kí tự đặc trưng LMHT. Trong khoảng thời gian cách đây không lâu, e-sport nước ta chuyển biến khá nhiều và liên tục có được các vị trí quan trọng đặc biệt là bên trong trò LMHT. Để đổi tên nick bên trong LMHT trước hết mọi người phải sắm thẻ đổi tên gọi, trị giá thẻ đổi tên ngày nay khoảng 300rp, tức là tầm 80k tiền mặt. Đặc biệt các người chơi mới của LOL, khi vào trận cùng mọi người và đối thủ bạn sẽ hết sức ấn tượng với những tên gọi độc đáo được tạo với những kí tự, những icon, bình luận chưa từng thấy. Sẽ có rất nhiều những kí tự có thể các bạn không biết, hy vọng chia sẻ này sẽ giúp cho mọi người có thêm thông tin về LMHT. Cái tên làm nên tính cách! Vậy làm thế nào để làm được như họ? Cứ yên tâm có chúng mình với các kí tự đặc trưng LMHT sẽ giúp cho mọi người tự tin khoe tính cách. Xem thêm các kí tự đặc biệt trong au mobile tại: https://medium.com/ki-tu-dac-biet/ki-tu-dac-biet-trong-au-mobile-66e9c48f5ddd

Những kí tự đặc biệt LMHT có vẻ đơn thuần nhưng đó chính là công sức của một hàng ngũ chế tạo game, tâm huyết của các người làm game dành tặng cho chúng ta. Ngày nay càng nhiều những cái tên mới bên trong làng eSports xuất hiện kể cả những tên gọi game offline giống như Call of Duty WWII, Super Mario Odyssey … và game đang hot Getting Over it cũng chẳng thể nào quật ngã được ông trùm LMHT. Hiện tại LMHT không đơn thuần là một trò chơi điện tử bình thường mà đích thực ông lớn này đã thành 1 bộ môn thể thảo được đam mê hàng đầu ở trên thế giới.

Vài năm mới đây đấu trường Việt Nam đang tấp nập hơn nhiều khi mà nước ta với đội tuyển Young Generation được tham gia giải đấu LMHT lớn nhất thế giới. Bạn thấy ko hãy thực hiện những gì mà bản thân yêu thích thành một game thủ lý tưởng lúc bạn mang tài năng thực thụ.Với một tên gọi có những kí tự đặc trưng chất đến phát ngất giống như thế cùng với 1 metagame đúng đắn bản thân mình tin rằng các anh em sẽ chiến đấu một cách mạnh mẽ và kiên cường hơn bao giờ hết. Nào hãy sử dụng liền những kí tự đặc trưng LMHT nhé! Tìm hiêut thêm "các kí tự đặc biệt" tại: https://medium.com/ki-tu-dac-biet

//hexagonal fractal
import controlP5.*;
ControlP5 cp5;

int radius = 400;
int num  = 4;

void setup() {
  size(800, 800);
  background(32);
  cp5 = new ControlP5(this);

  smooth();
  noFill();
  noLoop();
  frameRate(2);

  cp5.addSlider("num")
    .setRange(0, 6)
    .setPosition(100, 100)
    .setSize(10, 100)
    .setNumberOfTickMarks(5)
    ;

  cp5.addSlider("radius")
    .setRange(150,450)
    .setPosition(0, 100)
    .setSize(10, 100)
    .setNumberOfTickMarks(5)
    ;
}

void draw() {
  translate(width/2, height/2);
  drawHexagon(radius, num);
}

void drawHexagon(float radius, int num ) {
  stroke(255);
  float x, y = 0;
  beginShape();
  for (int i = 0; i < 6; i++) {
    x = cos(radians(60*i))*radius;
    y = sin(radians(60*i))*radius;
    vertex(x, y);
  }
  endShape(CLOSE);
  //////////////////////////////////////////////////////////////

  if (num-- > 1) {

    pushMatrix();
    translate(radius/2, 0);
    drawHexagon(radius/2, num);
    popMatrix();

    pushMatrix();
    translate(-radius/4, -radius*cos(radians(30))/2);
    drawHexagon(radius/2, num);
    popMatrix();

    pushMatrix();
    translate(-radius/4, radius*cos(radians(30))/2);
    drawHexagon(radius/2, num);
    popMatrix();
  }
}

I'm currently using this code to flicker through a folder of imagery in my data folder.

//declare and initialise variables
static final int BACKS = 4;
final PImage[] bgs = new PImage[BACKS];


void setup () {
  size (1920, 1080);
  frameRate (6); //Rate of flickering
    smooth (4);

  //load my imagery
      for (int i = 0; i < BACKS; bgs[i] = loadImage("bg" + i++ + ".jpg")); 

    }

void draw () { 

      image(bgs[int(random(0, BACKS))], 0, 0, width, height);//Set a random Image - the size of the sketch
        if ((keyPressed == true) && (keyCode == UP)) { //THIS IS WHAT STOPS THE LOOP
        noLoop ();

    }
  }

When i press the UP key the looping stops, but is there a way i can press the UP key again for it to begin looping again?

Any help would be great!

Thanks - KOKO.

Why are (in the following code) multiple shapes in the fill color (150) even though the fill command is the last command in the DRAW zone. I thought only subsequent shapes would be filled in that color - but it is also filling in earlier shapes in the same (150) grey.

void setup() {
    size(640,420);
    background(240);
    smooth();
}

void draw() {

  //body of zork
  rectMode(CENTER);
  rect(320,210,80,120);

  //head of zork
  ellipse(320,118,65,65);

  //eyes of zork
  //fill(50);
  ellipse(307,115,10,20);
  ellipse(333,115,10,20);
  fill(150);
}

def wait_until( x ):
    while not x():
        pass

I’ve tried it with something like wait_until( lambda: keyPressed ) or wait_until( lambda: mouseX > 250 ) but neither of those works — the functions I input never seem to return True. Can you help me figure out why?

I don’t think it’s a problem with wait_until — I’ve found that it doesn’t work even if I just say something like this:

def setup():
    size( 200, 200 )
    while not keyPressed:
        pass
    background( 255 )

I found a work around that gives me values close enough to what mouseX and mouseY should be using winMouseX and winMouseY but those seem to be off a few pixels and will change depending on the window frame. Anybody know how to get the actual mouseX and mouseY values?