and have changed it a bit to get the following:

color[] colours = new color[3]; int c = 0;

void setup() { size(500, 500); colours[0] = color(255, 0, 0); colours[1] = color(0, 255, 0); colours[2] = color(0, 0, 255); }

void draw() { if (mousePressed == true && (mouseButton == LEFT)) {

fill(colours[c]);


ellipse(mouseX, mouseY, 50, 50);

c = (c + 1) % 3;

} }

However, when I click the left mouse button, it continuously displays circles until the mouse click is released. Instead I wish it to display one circle of one colour per click. I.E. 1st click = red circle at mouse coordinates, release mouse click 2nd click = green circle at mouse coordinates, release mouse click 3rd click = blue circle at mouse coordinates, release mouse click 4th click = returns to red circle, release mouse click And so on...

How would I go about doing this?

Thanks for any help.

But when I add the additional CP5 library and the mouse event function, in 'udp_server5', the packet messages are received out of sync. I don't get the correct packet when I click on any of the buttons. They seem to be out of sync by one or two messages. I would get the correct packet after a couple of mouse clicks. I use the console to print debug messages so I can follow the state of the program. I added some screenshots below to show what happens. The 'udp_server5' code is also show below.

I use the same python code on the RPI for either udp server code on the PC. I already worked out the udp network communications with my RPI with the previous code show below in 'udp_server4'. There, I just use a command line to send a text command over the network. My RPI is running python to decode the command, then acknowledge the command back to the server, along with a packet sequence# so I can know if I'm getting the correct packet. At the moment, I only decode 3 commands.

In the udp_server5 code, I use a button flag to keep track of which button I click on. From looking at the debug messages in the console, I see the button events occur last. I was expecting them to occur first when I click on any button. So the button flag doesn't get updated with the current value. And so the wrong command is sent over the network. When I click on the same button again, the button flag is finally updated with the correct value, so then the right command is sent over the network.

Another item I don't understand from looking at the debug messages. When I start the program I see Control Events already in my console from the 3 buttons I created without clicking on anything. so this also causes my Button Flag to begin with the wrong value.

I'm currently using Processing ver3.3.6. And I used the CP5 library examples from Processing to add the buttons to my code in 'udp server 5'. And I found the mouse event function on the reference page and in the examples. But I'm not sure if these steps are combined in the correct order.

Could I be using the wrong coding technique ?

Here's the code for 'udp_server4'

//=====================================================
//UDP Server 4
//press any key to send a command message from the Server to RPI client
//The RPI client will reply back to the Server
//Send:    Server PC  (10.0.0.3)  to RPI Client(10.0.0.10)
//Receive: RPI Client (10.0.0.10) to Server PC (10.0.0.3)
//ControlP5 Library Buttons
//-----------------------------------------------------------------------------------
// import UDP library
import hypermedia.net.*;
// import Button library
//import controlP5.*;
//
UDP udp;  //define the UDP object
//ControlP5 cp5;
//
//-----------------------------------------------------------------------------------
//
int myColor = color(255);
int c1,c2;
int c = 0;
int indent = 25;
int ButtonFlag;
float n,n1;
//
String message1 = "";
String message2 = "00000";
String status = "";
char command;
//
//--------------------------------------------------------------------------------
void setup() 
{
  //create a new datagram connection
  //From Client to Server=5555
  //From Server to Client=5556
  //
  int UDP_port_rcv = 5555;
  int UDP_port_snd = 5556;
  //
  smooth();
  size(800, 600);
  background(128);
  //
  fill(255);  // Set fill to white
  noStroke();
  rect(350, 550, 55, 25, 5);
  //
  text("UDP SERVER 4\nEnter Command for client. ", indent, 40);
  //
  println("============================");
  println("UDP SERVER 4: ");
  //noStroke();
  //
  //--------------------------------------------------------------------------------
  // load a new font. ControlFont is a wrapper for processing's PFont
  PFont pfont = createFont("Courier",20,true); // use true/false for smooth/no-smooth
  //ControlFont font = new ControlFont(pfont,20); //font size for Text Field
  //
  //-----------------------------------
  udp = new UDP( this, UDP_port_rcv );  
  //
  //printout the connection activity
  //udp.log( true );
  //
  // wait for incoming message
  udp.listen( true );           
}

//--------------------------------------------------------------------------------
//process events
//keep draw() here to continue looping
void draw()
{
  //background(128);
  //clear text area for packet message
  fill(125);  // Set fill to gray
  stroke(1);
  rect(25,475,300,90);
  //
  //clear area for packet sequence#
  fill(255);  // Set fill to white
  noStroke();
  rect(350, 550, 55, 25, 5);
  //
  //display packet message
  fill(0);  // Set fill to black
  text("CMD: " + command,indent,500);
  text("RCVD: " + message1,indent,525);
  text("STATUS: " + status,indent,550);
  //
  //display packet sequence#
  fill(0);  // Set fill to black
  text(message2, 360, 550, 55, 55);
  //
}

//--------------------------------------------------------------------------------
//On key pressed event:
//send the command to the client
void keyPressed() 
{
  String ip       = "10.0.0.10"; // the Client IP address
  int port_snd    = 5556;        // Sent Port
  String commandS;
  switch (key) 
  {
    case 'c':
      command = key;
      status = "GOOD";
      //
      commandS = str(command);
      udp.send(commandS, ip, port_snd );   // the message to send
      println(">>>Key Command Sent");
      break;
    case 'x':
      command = key;
      status = "GOOD";
      //
      commandS = str(command);
      udp.send(commandS, ip, port_snd );   // the message to send
      println(">>>Key Command Sent");
      break;
    case 'z':
      command = key;
      status = "GOOD";
      //
      commandS = str(command);
      udp.send(commandS, ip, port_snd );   // the message to send
      println(">>>Key Command Sent");
      break;
    default:
      command = key;
      message1 = "";
      status = "KEY COMMAND INCORRECT";
      println("***Incorrect Key Command***");
  }
}

//--------------------------------------------------------------------------------
//Extended handler
//In the Extended Handker,
//The two arguments representing in order, 
//the sender IP address and the sender port
public void receive( byte[] data, String ip, int port ) 
{
  // get the "real" message =
  // forget the ";\n" at the end <-- !!! only for a communication with Pd !!!
  //data = subset(data, 0, data.length-2);

  //String message = new String( data );
  message1 = new String(data);
  //Extract Packet Sequence#
  message2 = new String(message1.substring(35,message1.length()));

  //print the result
  println( "RCVD: "+ip+":"+port+" = "+""+message1);
  //print packet sequence#
  println( "RCVD: "+message2);
  //
}

//=============================================================

Here's the code for 'udp_server5'

//=====================================================
//UDP Server 5
//click mouse to send a command message from the Server to RPI client
//Send:    Server PC  (10.0.0.3)  to RPI Client(10.0.0.10)
//Receive: RPI Client (10.0.0.10) to Server PC (10.0.0.3)
//ControlP5 Library Buttons
//-----------------------------------------------------------------------------------
// import UDP library
import hypermedia.net.*;
// import Button library
import controlP5.*;
//
UDP udp;  //define the UDP object
ControlP5 cp5;
//
//-----------------------------------------------------------------------------------
//
int myColor = color(255);
int c1,c2;
int c = 0;
int indent = 25;
int ButtonFlag;
float n,n1;
//
String message1 = "";
String message2 = "00000";
String status = "";
char command = ' ';
//
String ip       = "10.0.0.10"; // the Client IP address
int port_snd    = 5556;        // Sent Port
byte[] data;
//
//--------------------------------------------------------------------------------
void setup() 
{
  //create a new datagram connection
  //From Client to Server=5555
  //From Server to Client=5556
  //
  int UDP_port_rcv = 5555;
  int UDP_port_snd = 5556;
  //
  smooth();
  size(800, 600);
  background(128);
  //
  fill(255);  // Set fill to white
  rect(350, 550, 55, 25, 5);
  //
  text("UDP SERVER 5\nEnter Command for client. ", indent, 40);
  //
  println("============================");
  println("UDP SERVER 5: ");
  //noStroke();
  //
  //--------------------------------------------------------------------------------
  // load a new font. ControlFont is a wrapper for processing's PFont
  PFont pfont = createFont("Courier",20,true); // use true/false for smooth/no-smooth
  ControlFont font = new ControlFont(pfont,20); //font size for Text Field
  //
  cp5 = new ControlP5(this);
  cp5.enableShortcuts();
  frameRate(50);
  //
  // create a new button 
  cp5.addButton("RESET")
     .setValue(0)
     .setPosition(100,100)
     .setSize(100,39)
     .setId(2);
     ;
  // create a new button 
  cp5.addButton("OHM")
     .setValue(100)
     .setPosition(100,140)
     .setSize(100,39)
     .setId(2);
     ;
  // create a new button 
  cp5.addButton("VOLTS")
     .setPosition(100,180)
     .setSize(100,39)
     .setValue(0)
     .setId(2);
     ;
  //--------------------------------------------------------------------------------
  // change the font and content of the captionlabels 
  // for both buttons create earlier.
  cp5.getController("RESET")
     .getCaptionLabel()
     .setFont(font)
     .toUpperCase(false)
     .setSize(16)
     ;
  //   
  cp5.getController("OHM")
     .getCaptionLabel()
     .setFont(font)
     .toUpperCase(false)
     .setSize(16)
     ;
  //   
  cp5.getController("VOLTS")
     .getCaptionLabel()
     .setFont(font)
     .toUpperCase(false)
     .setSize(16)
     ;
  //-----------------------------------
  udp = new UDP( this, UDP_port_rcv );  
  //
  //printout the connection activity
  //udp.log( true );
  //
  // and wait for incoming message
  udp.listen( true );           
}

//--------------------------------------------------------------------------------
//process events
// keep draw() here to continue looping
void draw()
{
  //background(128);
  //clear text area for packet message
  fill(125);  // Set fill to gray
  stroke(1);
  rect(25,475,300,90);
  //
  //clear number area for packet sequence#
  fill(255);  // Set fill to white
  noStroke();
  rect(350, 550, 55, 25, 5);
  //
  //display packet message
  fill(0);  // Set fill to black
  text("CMD: " + command,indent,500);
  text("RCVD: " + message1,indent,525);
  text("STATUS: " + status,indent,550);
  //
  //display packet sequence#
  fill(0);  // Set fill to black
  text(message2, 360, 550, 55, 55);
  //
}

//--------------------------------------------------------------------------------
//On key pressed event:
//send the command to the client

void keyPressed() 
{
  String ip       = "10.0.0.10"; // the Client IP address
  int port_snd    = 5556;        // Sent Port
  String commandS;
  println("------------------------------------------");
  switch (key) 
  {
    case 'c':
      command = key;
      status = "GOOD";
      //
      commandS = str(command);
      udp.send(commandS, ip, port_snd );   // the message to send
      println(">>>Key Command Sent");
      break;
    case 'x':
      command = key;
      status = "GOOD";
      //
      commandS = str(command);
      udp.send(commandS, ip, port_snd );   // the message to send
      println(">>>Key Command Sent");
      break;
    case 'z':
      command = key;
      status = "GOOD";
      //
      commandS = str(command);
      udp.send(commandS, ip, port_snd );   // the message to send
      println(">>>Key Command Sent");
      break;
    default:
      command = key;
      message1 = "";
      status = "KEY COMMAND INCORRECT";
      println("***Incorrect Key Command***");
  }
}

//-----------------------------------------------------------------------

void mousePressed()
{
  println("------------------------------------------");
  switch (ButtonFlag)
  {
    case 1:
      command = 'c';
      status = "GOOD RESET COMMAND";
      println("Switch: Button Flag  from RESET: "+ButtonFlag);
      break;
    case 2:
      command = 'z';
      message1 = "";
      status = "GOOD OHM COMMAND";
      println("Switch: Button Flag  from OHM: "+ButtonFlag);
      break;
    case 3:
      command = 'x';
      message1 = "";
      status = "GOOD VOLTS COMMAND";
      println("Switch: Button Flag  from VOLTS: "+ButtonFlag);
      break;
  }  
  sendcmd();
}

//--------------------------------------------------------------------------------
//Transmit Command
public void sendcmd() 
{
  //String ip       = "10.0.0.10"; // the Client IP address
  //int port_snd    = 5556;        // Sent Port
  //
  println("------------------------------------------");
  String commandS = str(command);
      udp.send(commandS, ip, port_snd );   // the message to send
      println(">>>Command Sent");
}

//--------------------------------------------------------------------------------
// Extended handler
//In the Extended Handker,
//The two arguments representing in order, 
//the sender IP address and the sender port
public void receive( byte[] data, String ip, int port ) 
{
  //String message = new String( data );
  println("------------------------------------------");
  message1 = new String(data);
  message2 = new String(message1.substring(35,message1.length()));

  //print the result
  //println( "receive: \""+message+"\" from "+ip+" on port "+port );
  println( "RCVD: "+ip+":"+port+" = "+""+message1);
  println( "RCVD: "+message2);
  //
}
//-----------------------------------------------------------------------
public void controlEvent(ControlEvent theEvent) {
  println("------------------------------------------");
  println("ControlEvent: ",theEvent.getController().getName());
  n = 0;
}

//-----------------------------------------------------------------------
// function RESET will receive changes from 
// controller with name COLORA
public void RESET(int theValue) {
  println("------------------------------------------");
  println("Button Event from RESET: "+theValue);
  ButtonFlag = 1;
  println("Button Flag  from RESET: "+ButtonFlag);
}

//-----------------------------------------------------------------------
// function OHM will receive changes from 
// controller with name COLORB
public void OHM(int theValue) {
  println("------------------------------------------");
  println("Button Event from OHM: "+theValue);
  ButtonFlag = 2;
  println("Button Flag  from OHM: "+ButtonFlag);
}

//-----------------------------------------------------------------------
// function VOLTS will receive changes from 
// controller with name COLORC
public void VOLTS(int theValue) {
  println("------------------------------------------");
  println("Button Event from VOLTS: "+theValue);
  ButtonFlag = 3;
  println("Button Flag  from VOLTS: "+ButtonFlag);
}

//====================================================

Here's a screenshot from the console in when starting 'udp_server5'

Here's a screenshot from the console when I click on the RESET button in 'udp_server5'

Here's a screenshot from the gui screen when I click on the RESET button in 'udp_server5'

I have to write a processing program which responds to a left mouseclick only. It's quite simple actually, the background hast to be red, if I click with my mouse the background has to turn green and when I click again it has to turn blue. And then again red etc. I am stuck at the point where I have to make a difference between the mouse clicks, like first mouse click second mouse click. I saw some examples on the internet but those weren't just with the left mousebutton only.

And should I use an void mousePressed() or not at all ?

I hope someone can give me some good directions.

I think i'm stuffing up in the "clicked cell" function and when I call it in the mousePressed function

Thanks

Here is my code:

function Cell(x, y, r) {

    this.x = x;
    this.y = y;
    this.r = r;
    this.speedx = random(-1, 1);
    this.speedy = random(-1, 1);

    this.show = function() {
        stroke(255);
        fill(26, 229, 209, 50)
        ellipse(this.x, this.y, this.r * 2);
    }

    this.clickedcell = function(x, y) {
        var d = dist(this.x, this.y, x, y);
        if (d < this.r) {
            return true;
        } else {
            return false;
        }
    }

    this.clickedcanvas = function(x, y) {
        var d = dist(this.x, this.y, x, y);
        if (d > this.r) {
            return true;
        } else {
            return false;
        }
    }

    this.split = function() {
        var cell = new Cell(random(width), random(height), this.r * 0.5);
        return cell;
    }

    this.move = function() {
        this.x = this.x + this.speedx;
        this.y = this.y + this.speedy;
    }

    this.bounce = function() {
        if (this.x > width || this.x < 0) {
            this.speedx = -this.speedx;
        }
        if (this.y > height || this.y < 0) {
            this.speedy = -this.speedy;
        }
    }


    this.eats = function(other) {
        var d = dist(this.x, this.y, other.x, other.y);
        if (d < this.r + other.r) {
            this.r += other.r * 0.6;
            return true;
        } else {
            return false;
        }
    }

}

var cells = [];

function setup() {
    createCanvas(600, 600);
    for (var i = 0; i < 50; i++) {
        cells[i] = new Cell(random(width), random(height), 10);
    }
}


function mousePressed() {
    for (var i = 0; i < cells.length; i++) {
        if (cells[i].clickedcell(mouseX, mouseY)) {
            cells.push(cells[i].split());
            cells.push(cells[i].split());
            cells.splice(i, 1);
        }
    }
}

function mousePressed() {
    for (var i = 0; i < cells.length; i++) {
        if (cells[i].clickedcanvas(mouseX, mouseY)) {
            cells.push(new Cell(mouseX, mouseY, 10));
        }
    }
}


function draw() {
    background(255);
    for (var i = cells.length - 1; i >= 0; i--) {
        cells[i].show();
        cells[i].move();
        cells[i].bounce();

        for (var j = cells.length - 1; j >= 0; j--) {
            if (j != i && cells[i] && cells[i].eats(cells[j])) {
                cells.splice(j, 1);
            }
        }
    }
}

When mouse is pressed in the top half of the window then, a circle appears. Pressing the mouse in the bottom half of the window has no effect. Any previous shape disappears when the new shape appears The shape moves down the window, two pixels at a time, until it completely disappears off the bottom of the window

I tried this code but, it doesnt work when the circle crosses the other half. :/

int x = -1000, y;
int diam = 50;

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

void mousePressed(){
  if (y <= height/2) {
    x = mouseX;
    y = mouseY;
  }
  //else {
  //}
}
void draw() {
  background(0);
  ellipse(x, y, diam, diam);
  y++;
}

index.html

    <html>
    <head>

      <meta charset="UTF-8">
      <script language="javascript" type="text/javascript" src="libraries/p5.js"></script> 
      <script language="javascript" src="libraries/p5.dom.js"></script>
      <script language="javascript" src="libraries/p5.sound.js"></script>
      <script language="javascript" src="images.js"></script>
      <script language="javascript" src="images_2.js"></script>
    </head> 
      <!-- this line removes any default padding and style. you might only need one of these values set. -->
      <style> 
      </style>

    </head>

    <body>

    </body>
    </html>

============================================================================ images.js

    var bubbles = [];
    var flowers = [];

    function preload(){

        for(var i = 0; i< 6; i++){
            flowers[i] = loadImage("fet_pictures/" + i + ".jpg");
        }

    }

    function windowResized(){
        resizeCanvas(windowWidth, windowHeight);
    }

    function setup(){
        createCanvas(windowWidth, windowHeight);
    }

    function mousePressed(){
        var r = floor(random(0, flowers.length));
        var b = new Bubble(mouseX, mouseY, flowers[r]);
        bubbles.push(b);
    }

    function draw(){
        background(0);
        for(var i = bubbles.length -1; i >= 0; i--){
            bubbles[i].update();
            bubbles[i].display();
        }
    }

============================================================================ images_2.js

        function Bubble(x, y, img){
        this.x = x;
        this.y = y;
        this.img = img;
        this.lifespan = 255;

        this.display = function(){
            imageMode(CENTER);
            image(this.img, this.x, this.y);
            this.img.resize(100, 0);
            //ellipse(this.x, this.y, 48, 48);
        }

        this.update = function() {
            this.x = this.x + random(-1, 1);
            this.y = this.y + random(-1, 1);
           }
        }

PShape fish1, body1, tail1, eye1, fish2, body2, tail2, eye2, fish3, body3, tail3, eye3, fish4, body4, tail4, eye4;
int xPos1 = 800;
int xPos2 = 800;
int xPos3 = 800;
int xPos4 = 800;

float per1 = sin(radians(10 * frameCount)); 
float per2 = sin(radians(20 * frameCount)); 
float per3 = sin(radians(30 * frameCount)); 
float per4 = sin(radians(frameCount));
float r = random(0, 600);
float yPos1 = random(0, 400);
float yPos2 = random(0, 400);
float yPos3 = random(0, 400);
float yPos4 = random(0, 400);

boolean qPressed = false;
boolean wPressed = false;
boolean ePressed = false;
boolean rPressed = false;

void setup() {
  size(800, 700);
  background(80, 208, 232);
  smooth();
  noStroke();

  //Creating the fish as a group of shapes parented together
  //fish 1
  fish1 = createShape(GROUP);
  tail1 = createShape (TRIANGLE, 22, 0, 60, -15 + per2, 60, 15 + per2); 
  tail1.setFill(color(252, 193, 97));
  body1 = createShape (ELLIPSE, 0, 0, 70, 50);
  body1.setFill(color(252, 193, 97));
  eye1 = createShape (ELLIPSE, -15, -5, 10, 10);
  eye1.setFill(color(0));

  fish1.addChild(tail1);
  fish1.addChild(body1);
  fish1.addChild(eye1);

  //fish 2    
  fish2 = createShape(GROUP);
  tail2 = createShape (TRIANGLE, 50, 0, 65, -30 + per2, 65, 30 + per2);
  tail2.setFill(color(160, 159, 158));
  body2 = createShape (ELLIPSE, 0, 0, 100, 35);
  body2.setFill(color(160, 159, 158));
  eye2 = createShape(ELLIPSE, -30, -5, 10, 10);
  eye2.setFill(color(0));

  fish2.addChild(tail2);
  fish2.addChild(body2);
  fish2.addChild(eye2);

  //fish 3
  fish3 = createShape(GROUP);
  tail3 = createShape (TRIANGLE, 20, 0, 50, -20 + per3, 50, 20 + per3);
  tail3.setFill(color(227, 156, 214));
  body3 = createShape (ELLIPSE, 0, 0, 60, 80);
  body3.setFill(color(227, 156, 214));
  eye3 = createShape (ELLIPSE, -20, -5, 10, 10);
  eye3.setFill(color(0));

  fish3.addChild(tail3);
  fish3.addChild(body3);
  fish3.addChild(eye3);

  //fish 4
  fish4 = createShape(GROUP);
  tail4 = createShape (TRIANGLE, 15, 0, 25, -10 + per3, 25,10 + per3);
  tail4.setFill(color(195, 247, 234));
  body4 = createShape (ELLIPSE, 0, 0, 40, 20);
  body4.setFill(color(195, 247, 234));
  eye4 = createShape (ELLIPSE, -10, 0, 5, 5);
  eye4.setFill(color(0));

  fish4.addChild(tail4);
  fish4.addChild(body4);
  fish4.addChild(eye4);

}

void draw() {

  //draw a looping fish swimming horizontally across the screen in random y coordinate each time it reaches the end.
  background(80, 208, 232);

  //fish 1 loop
  shape(fish1, xPos1, yPos1);
  xPos1 = xPos1-3;

  if (xPos1<-200) {
    xPos1 = 800;
    yPos1 = random(0, 400); 
  } 

  //fish 2 loop
  shape(fish2, xPos2, yPos2);
  xPos2 = xPos2-4;

  if (xPos2<-200) {
    xPos2 = 800;
    yPos2 = random(0, 400);
  }

  //fish 3 loop
  shape(fish3, xPos3, yPos3);
  xPos3 = xPos3-2;

  if (xPos3<-200) {
    xPos3 = 800;
    yPos2 = random(0, 400);
  }

  //fish 4 loop
  shape(fish4, xPos4, yPos4);
  xPos4 = xPos4 - 5;

  if (xPos4<-200) {
    xPos4 = 800;
    yPos4 = random(0, 400);
  }

  //Boxes that have the bait in them
  noFill();
  // Q
  if(qPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(250, 620, 75, 75);

  // W
  if(wPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(330, 620, 75, 75);

  // E
  if(ePressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(410, 620, 75, 75);

  // R
  if(rPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
   strokeWeight(1);
  }
  rect(490, 620, 75, 75);

  }

void keyPressed() {

  //When 'q' or 'Q' key is pressed, the first box will turn red. When another key is pressed it will go back to black.
  if (key == 'q' || key == 'Q') {
    qPressed = true;
    wPressed = false;
    ePressed = false;
    rPressed = false;
  } 

  //When 'w' or 'W' key is pressed, the second box will turn red. When another key is pressed it will go back to black.
  else if (key == 'w' || key == 'W') {
    qPressed = false;
    wPressed = true;
    ePressed = false;
    rPressed = false;
  }

  //When 'e' or 'E' key is pressed, the third box will turn red. When another key is pressed it will go back to black.
  else if (key == 'e' || key == 'E') {
    qPressed = false;
    wPressed = false;
    ePressed = true;
    rPressed = false;
  } 

  //When 'r' or 'R' key is pressed, the fourth box will turn red. When another key is pressed it will go back to black.
  else if (key == 'r' || key == 'R') {
    qPressed = false;
    wPressed = false;
    ePressed = false;
    rPressed = true;
  }  
}

void mousePressed(){
  //When q is pressed (first box selected) and mouse is pressed on fish 1, that fish goes back to the beginning
 if (qPressed == true && dist(xPos1, yPos1, mouseX, mouseY) < 40){
  shape(fish1, xPos1, yPos1);
  xPos1 = 1000;
 }
 else if (qPressed == false && dist(xPos1, yPos1, mouseX, mouseY) < 40){
 shape(fish1, xPos1, yPos1);

 }

if (wPressed == true && dist(xPos2, yPos2, mouseX, mouseY) < 30){
  shape(fish2, xPos2, yPos2);
  xPos2 = 1200;
 }
 else if (wPressed == false && dist(xPos2, yPos2, mouseX, mouseY) < 30){
 shape(fish2, xPos2, yPos2);
 }

 if (ePressed == true && dist(xPos3, yPos3, mouseX, mouseY) < 40){
  shape(fish3, xPos3, yPos3);
  xPos3 = 1000;
 }
 else if (ePressed == false && dist(xPos3, yPos3, mouseX, mouseY) < 40){
 shape(fish3, xPos3, yPos3);
 }

if (rPressed == true && dist(xPos4, yPos4, mouseX, mouseY) < 20){
  shape(fish4, xPos4, yPos4);
  xPos4 = 1300;
 }
 else if (qPressed == false && dist(xPos4, yPos4, mouseX, mouseY) < 20){
 shape(fish4, xPos4, yPos4);
 }

}

What I'm stuck on is how to make mousePressed() only work on a particular moving fish (as well as when a certain key is pressed). At the moment I've only gotten it to work when I press anywhere on the screen. I've tried adding mouseX == xPos1 etc to the if statement In the void mousePressed() section. But it doesn't seem to work, and I'm really not sure where to go from there. Any help would be greatly appreciated.

PShape fish1, body1, tail1, eye1, fish2, body2, tail2, eye2, fish3, body3, tail3, eye3, fish4, body4, tail4, eye4;
int xPos1 = 800;
int xPos2 = 800;
int xPos3 = 800;
int xPos4 = 800;
float per1 = sin(radians(10 * frameCount)); 
float per2 = sin(radians(20 * frameCount)); 
float per3 = sin(radians(30 * frameCount)); 
float per4 = sin(radians(frameCount));
float r = random(0, 600);
float yPos1 = random(0, 400);
float yPos2 = random(0, 400);
float yPos3 = random(0, 400);
float yPos4 = random(0, 400);

boolean qPressed = false;
boolean wPressed = false;
boolean ePressed = false;
boolean rPressed = false;

void setup() {
  size(800, 700);
  background(80, 208, 232);
  smooth();
  noStroke();

  //Creating the fish as a group of shapes parented together
  //fish 1
  fish1 = createShape(GROUP);
  tail1 = createShape (TRIANGLE, 120, 70, 165, 50 + per2, 165, 100 + per2); 
  tail1.setFill(color(252, 193, 97));
  body1 = createShape (ELLIPSE, 100, 70, 70, 50);
  body1.setFill(color(252, 193, 97));
  eye1 = createShape (ELLIPSE, 80, 60, 10, 10);
  eye1.setFill(color(0));

  fish1.addChild(body1);
  fish1.addChild(tail1);
  fish1.addChild(eye1);

  //fish 2    
  fish2 = createShape(GROUP);
  tail2 = createShape (TRIANGLE, 150, 70, 165, 40 + per2, 165, 100 + per2);
  tail2.setFill(color(160, 159, 158));
  body2 = createShape (ELLIPSE, 100, 70, 100, 35);
  body2.setFill(color(160, 159, 158));
  eye2 = createShape(ELLIPSE, 70, 65, 10, 10);
  eye2.setFill(color(0));

  fish2.addChild(body2);
  fish2.addChild(tail2);
  fish2.addChild(eye2);

  //fish 3
  fish3 = createShape(GROUP);
  tail3 = createShape (TRIANGLE, 120, 70, 150, 55 + per3, 150, 85 + per3);
  tail3.setFill(color(227, 156, 214));
  body3 = createShape (ELLIPSE, 100, 70, 60, 80);
  body3.setFill(color(227, 156, 214));
  eye3 = createShape (ELLIPSE, 80, 65, 10, 10);
  eye3.setFill(color(0));

  fish3.addChild(body3);
  fish3.addChild(tail3);
  fish3.addChild(eye3);

  //fish 4
  fish4 = createShape(GROUP);
  tail4 = createShape (TRIANGLE, 115, 70, 130, 75+ per3, 130, 65 + per3);
  tail4.setFill(color(195, 247, 234));
  body4 = createShape (ELLIPSE, 100, 70, 40, 20);
  body4.setFill(color(195, 247, 234));
  eye4 = createShape (ELLIPSE, 87, 70, 5, 5);
  eye4.setFill(color(0));

  fish4.addChild(body4);
  fish4.addChild(tail4);
  fish4.addChild(eye4);
}

void draw() {

  //draw a looping fish swimming horizontally across the screen in random y coordinate each time it reaches the end.
  background(80, 208, 232);

  //fish 1 loop
  shape(fish1, xPos1, yPos1);
  xPos1 = xPos1-3;

  if (xPos1<-200) {
    xPos1 = 800;
    yPos1 = random(0, 400);
  } 

  //fish 2 loop
  shape(fish2, xPos2, yPos2);
  xPos2 = xPos2-4;

  if (xPos2<-200) {
    xPos2 = 800;
    yPos2 = random(0, 400);
  }

  //fish 3 loop
  shape(fish3, xPos3, yPos3);
  xPos3 = xPos3-2;

  if (xPos3<-200) {
    xPos3 = 800;
    yPos2 = random(0, 400);
  }

  //fish 4 loop
  shape(fish4, xPos4, yPos4);
  xPos4 = xPos4 - 5;

  if (xPos4<-200) {
    xPos4 = 800;
    yPos4 = random(0, 400);
  }

  //Boxes that have the bait in them
  noFill();
  // Q
  if(qPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(250, 620, 75, 75);

  // W
  if(wPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(330, 620, 75, 75);

  // E
  if(ePressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(410, 620, 75, 75);

  // R
  if(rPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
   strokeWeight(1);
  }
  rect(490, 620, 75, 75);

}

void keyPressed() {

  //When 'q' or 'Q' key is pressed, the first box will turn red. When another key is pressed it will go back to black.
  if (key == 'q' || key == 'Q') {
    qPressed = true;
    wPressed = false;
    ePressed = false;
    rPressed = false;
  } 

  //When 'w' or 'W' key is pressed, the second box will turn red. When another key is pressed it will go back to black.
  else if (key == 'w' || key == 'W') {
    qPressed = false;
    wPressed = true;
    ePressed = false;
    rPressed = false;
  }

  //When 'e' or 'E' key is pressed, the third box will turn red. When another key is pressed it will go back to black.
  else if (key == 'e' || key == 'E') {
    qPressed = false;
    wPressed = false;
    ePressed = true;
    rPressed = false;
  } 

  //When 'r' or 'R' key is pressed, the fourth box will turn red. When another key is pressed it will go back to black.
  else if (key == 'r' || key == 'R') {
    qPressed = false;
    wPressed = false;
    ePressed = false;
    rPressed = true;
  }  
}

void mousePressed(){
  //When q is pressed (first box selected) and mouse is pressed on fish 1, that fish goes back to the beginning
  //This is the part I'm stuck on  
 if (qPressed == true){
  shape(fish1, xPos1, yPos1);
  xPos1 = 1000;
 }
 else if (qPressed == false){
 shape(fish1, xPos1, yPos1);
 }

}

So at the moment I've got it so for the first fish, it only moves when you pressed 'q' or 'Q' , then click anywhere.

<h1>What is your name?</h1>

<input type="text" class="tf">

<button type="button" class="btn">Click Me!</button> 

in js file I have:

var input, button, greeting;

function setup() {
  noCanvas();

  input = select('tf');
  
  button = select('btn');
  button.mousePressed(greet);
}

function greet() {
  greeting.html('hello ' + input.value() + '!');
}

button = createButton(img5); button.position(100, 100); //test position, not final button.mousePressed(gotoGame);

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.

I'm trying to save the time in a variable to use it for a figure to disappear 10 seconds after it appears or disappear randomly. and for every figure that appears on screen.

At the moment It saves the time many times.

"""
Mouse Press.

Move the mouse to position the shape.
Press the mouse button to invert the color.
"""
#tick=millis()


def update_tick():
    #text(12)
    #textAlign(CENTER)
    pd= millis()/1000
    return pd

def setup():
    global times
    size(640, 360)
    noSmooth()
    fill(126)
    background(102)
    times=[]


def draw():
    #times=[]
    the_time=update_tick()
    if mousePressed:

        stroke(255)
        line(mouseX - 66, mouseY, mouseX + 66, mouseY)
        line(mouseX, mouseY - 66, mouseX, mouseY + 66)
        times.append(the_time) 
        print times
    else:
        stroke(0)

Thank you!!

function mousePressed(){


   for  (var j = bang.length-1; j >= 0; j--) {


       var distance = dist(mouseX, mouseY, bang[j].x, bang[j].y); 

       if  (distance > bang[j].diameter){
          bang.push(new Bigbang(mouseX, mouseY,sounds[Math.round(random(sounds.length-1))]));
         } 
       else if (distance < bang[j].diameter) {
          bang.splice(bang[j], 1);
         }

         console.log("new bubble"+bang);   
    }
}

big cheers to anyone willing to help me solve this...I guess there is a slightly long-winded logical way around the problem but all of my attempts have failed so far.

    // import Minim
     import ddf.minim.*;

     Minim minim;
     AudioSample d1;
     AudioSample d2;
     AudioSample d3;
     AudioSample d4;

     AudioOutput out;

     // track when a drum has been struck
     boolean drum1struck;
     boolean drum2struck;
     boolean drum3struck;
     boolean drum4struck;


     void setup() {
       // initialize the screen
       size(400, 400);
       smooth();

       // initialize sound
       minim = new Minim(this);
     out = minim.getLineOut();

       d1 = minim.loadSample("bongo1.wav");
       d2 = minim.loadSample("bongo7.wav");
       d3 = minim.loadSample("tom1.wav");
       d4 = minim.loadSample("tom2.wav");

       // set boolean variables to initialize the graphics
       drum1struck = false;
       drum2struck = false;
       drum3struck = false;
       drum4struck = false;

     }

     void draw() {
        background(255);

       // draw the drums: if a drum has just been struck
       // then fill its ellipse with color as visual feedback for the user

       // drum 1
       if (drum1struck == true) {
         fill(255,0,0);
         drum1struck = false;
       } 
       else 
       {
         fill(255);
       }
       ellipse(50, 55, 100, 100);

       // drum 2
       if (drum2struck == true) {
         fill(255,0,0);
         drum2struck = false;
       } else {
         fill(255);
       }
       ellipse(160, 55, 100, 100);

       //drum 3
       if (drum3struck == true) {
         fill(255,0,0);
         drum3struck = false;
       } 
       else {
         fill(255);
       }
       ellipse(50, 165, 100, 100);

       //drum 4
       if (drum4struck == true) {
         fill(255,0,0);
         drum4struck = false;
       } else {
         fill(255);
       }
       ellipse(160, 165, 100, 100);


     }
     void keyPressed() {
       if (key == 'a' || key == 'A') {   //note you may have to retype the
         drum1struck = true;             //single quote marks after copying
         d1.trigger();
       }
       else if (key == 'b' || key == 'B') {
         drum2struck = true;
         d2.trigger();
       }
       else if (key == 'c' || key == 'C') {
         drum3struck = true;
         d3.trigger();
       }
       else if (key == 'd' || key == 'D') {
         drum4struck = true;
         d4.trigger();
       }
     }

     void mousePressed() {
       if (mouseX<105)
       {
            d1.trigger();
            //set Boolean for drum1 to true
            drum1struck = true;
       }
       else if (mouseX>105)
            {d2.trigger();
            //set Boolean for drum1 to true
           drum2struck = true;
       }
      else if (mouseY<-200)
       {
            d3.trigger();
            //set Boolean for drum1 to true
            drum3struck = true;
       }
       else  {
            d4.trigger();
            //set Boolean for drum1 to true
            drum4struck = true;
     }
     }

I'm having trouble with the mousePressed command. I cannot seem to be able to make the falling circles disappear when clicked on. Does anyone have any suggestions to help get me on the right track?

Here is what I have:

Tear t1; PImage mouseCursor; int numDrops = 80; Tear[] drops = new Tear[numDrops]; // This creates the array of tears - how many will be able to fall. void setup() { size(1000,800); background(0); smooth(); noStroke(); // This loops the array of tears. for (int i = 0; i < drops.length; i++) { drops[i] = new Tear(); // This creates the tears as objects. t1 = new Tear(); } mouseCursor = loadImage("bucket.png"); // This loads the image of the bucket as the cursor. } void draw(){ fill(0,80); rect(0,0,1000,800); // This loops the array of tears. for (int i = 0; i < drops.length; i++) { drops[i].fall(); } if(mouseX < 1000) { // This command makes the cursor the bucket image at all times. cursor(mouseCursor, 0, 0); } else { cursor(HAND); } } class Tear { // This allows the tears to be able to fall randomly at random positions on the screen. float t = random(1000); float y = random(-height); void fall() { y = y + 10; fill(0,139,211,255); // The tears themselves. :'( ellipse(t, y, 10, 10); if(y>height){ t = random(1000); y = random(-200); } } void mousePressed(){ ;if (mouseX >= t && mouseX <= t + width && mouseY >= y && mouseY <= y+ height){ fill(0); } else { fill(0,139,211,255);}} }

Thanks!

Box[] boxes=new Box[5];
 void setup(){
   size(200,200);
   rectMode(CENTER);
   for(int i=0;i<boxes.length;i++){
     boxes[i]= new Box( random(100),random(100), random(5,15)
     );
   }
 }
  void draw(){
    background(192);
    for(int i=0;i<boxes.length;i++){
      boxes[i].draw();
    }
    for(int j=0;j<boxes.length;j++){
      for(int k=0; k< boxes.length; k++){
        if(j !=k){
          boxes[j].attract(boxes[k]);
        }
      }
    }
  }

  void mousePressed(){
    for(int i=0;i<boxes.length;i++){
      boxes[i].mousePressed();
    }
  }

int size;
color [] ccc;
float rotAngle = 0;
color colour;
color rand;
int x = 0;
int y = 0;


void setup()   
{
  size(1200, 900);
  background(0);
  frameRate (50);
  smooth();
  noStroke();

  size = 20;
  ccc = new color[size*size];
  colour = color(random(255), random(255), random(255));
  rand = color(random(-50, 50), random(-50, 50), random(-50, 50));

  for (int i = 0; i < size*size; i++)
  {
    rand = rand+int(random(-50,50));
    ccc[i] = colour+rand;
  }
} 


void draw()
{

  if (mousePressed)
  {
    brush01();
  }
}


void brush01()
{
  int i;
  float brush_X = 0;
  float brush_Y = 0;

  for (i =1; i<size*size; i++)
  {
    if (mouseX != pmouseX || mouseY != pmouseY)
    {
      rotAngle = atan2(mouseY - pmouseY, mouseX - pmouseX);
    }

    pushMatrix();
    rectMode(CENTER);
    translate(mouseX, mouseY);
    rotate(rotAngle);
    translate(0-size/2, 0-size/2);
    fill(ccc[i]);
    rect(brush_X, brush_Y, 1, 1);
    popMatrix();

    brush_X ++;
    if (brush_X > size)
    {
      brush_X = 0;
      brush_Y ++;
    }
  }
}


void mouseReleased()
{
  colour = color(random(255), random(255), random(255));
  rand = color(random(-50, 50), random(-50, 50), random(-50, 50));

  for (int i = 0; i < size*size; i++)
  {
    rand = rand+int(random(-50,50));
    ccc[i] = colour+rand;
  }
}

What I cannot get to work is to make the rectangles change color to red when you click on one of them, and when you clock on another of the 8 rectangle the rectangle you clock on changes color to red and the the rectangle you previously clicked on goes white again

Here is my code so far:

int pressedButton;
float spaceWidth;
float boxSize;

void setup() {
  size(900, 300);
  boxSize = width/10;
  spaceWidth = width/(5*9);
  background(0);
  pressedButton = 0;
}

void draw() {
  noStroke();
  for (int i = 0; i < 8; i++) {
    fill(255);
    rect(spaceWidth+i*(boxSize+spaceWidth), 70, boxSize, boxSize);
    fill(0);
    text(i+1, spaceWidth+i*(boxSize+spaceWidth), 81);
    fill(255);
  }
}

void mousePressed() {
  for (int i=0; i<8; i++) {
    if (mouseX > spaceWidth+i*(boxSize+spaceWidth) && mouseX < spaceWidth+i*(boxSize+spaceWidth)+width) {
      fill (255, 0, 0);
    }
    if (mouseY > height && mouseY < height) {
      fill (255, 0, 0);
    }
  }
}

var Shape;
var value = 0;
var value2 = 0;
var x;
var y;


function setup() {
    colorMode(HSB, width, height, 100);
createCanvas(500, 500);
Shape = new ball();


}

function mousePressed(){
 //If mouse is pressed outside sliding bar, add a shape. 
  if (mouseY > (height/2 + 40)  || ( mouseY < ( height/2 - 20))){
  for(var i = 0; i < 1; i++){
    balls.add(new Shape(mouseX, mouseY));  

    if (balls > 8) {
    balls.remove(0);
println(balls());
  }
}}
}

function draw() {
  background(51);

for (var i = Shape -1; i >= 0; i--) {
   // ball[i].move();
    ball[i].display();


    if(balls[i].isOffScreen()){
      balls.remove[i];

    }
}
}

function ball() {
  //An array for all the shapes
  this.balls = []; //initialize the array
this.x = x;
this.y = y;
this.display = function() {
 // stroke (255);
    fill(200, 252, 70);
    ellipse(this.x, this.y, 50, 50);
  }
}

I have a p5js canvas which is mostly transparent but overlays to the entire screen, so you can still see some of the HTML webpage underneath. The Problem is that the canvas kind of 'intercepts' any clicks because it lays over the top, so you can no-longer click on any links etc on the underlying webpage.

How can I pass through the clicks to the underlying page? I have googled and found that solutions do exist for people working in javascript ( such as this one ) but I don't really know anything about web coding outside of my p5js 'safety net' and the explanations go over my head a bit. Is there a native p5js method for this or can anyone explain how I step outside the p5 DOM environment to hook this up?

Edit: Forgot to mention it would be ideal to be able control if/when the click is passed through, ie. depending on mouse position or if a variable returns true/false etc.

Thank you

Marcus

My program does a few things that already worked. It has three different modes to move a servo and those are in the main screen of my program. And I've got another screen when I press the button and some of the values of the potentiometer are shown. However, those values don't keep showing unless I press the button again.

This is the relevant arduino code:

void loop ()
{

  if (Serial.available()) {
    val = Serial.read();
  }
 //val is send from processing to the arduino to change modes 
  switch (val) {
    //-------------------------- Close Modes----------------------//
    case 0:
        digitalWrite(ledPot, LOW);
        digitalWrite(ledCPM, LOW);
        digitalWrite(ledFSR, LOW);
      break;
    //--------------------------CPM Mode----------------------//
    case 1:
        cpmMovement();
        digitalWrite(ledCPM, HIGH);
        digitalWrite(ledPot, LOW);
        digitalWrite(ledFSR, LOW);
      break;
    //--------------------------POT Mode----------------------//
    case 2:
        digitalWrite(ledPot, HIGH);
        digitalWrite(ledCPM, LOW);
        digitalWrite(ledFSR, LOW);
        potMovement();
      break;
    //--------------------------FSR Mode----------------------//
    case 3:
        digitalWrite(ledPot, LOW);
        digitalWrite(ledCPM, LOW);
        digitalWrite(ledFSR, HIGH);
        fsrMovement();
      break;
    //---------------------Calibration Mode-----------------------//
    case 4:
        digitalWrite(ledPot, HIGH);
        digitalWrite(ledCPM, HIGH);
        digitalWrite(ledFSR, HIGH);
      break;
    //----------------Sending Values--------------------//  This is the relevant block
    case 5:
        digitalWrite(ledPot, LOW);
        digitalWrite(ledCPM, LOW);
        digitalWrite(ledFSR, HIGH);
        stateCAL == true;
        while(stateCAL == true){
        sendMaxValue();
        }
     break; 

  }
}

void sendMaxValue(){ //Function which sends the values to the console
  unsigned long startTime = millis();
  long calibrationTime = 3000;

  while(millis() - startTime <= calibrationTime) {
    maxforce = analogRead(Pot)/4;
    if (maxforce > maxReading) maxReading = maxforce;
    Serial.print(maxReading);         
    Serial.print('\t');         
    Serial.print(maxforce);
    Serial.print('\t');         
    Serial.print(startTime);
    Serial.print('\t');         
    Serial.println(millis() - startTime);

  }

  if (millis() - startTime > calibrationTime){
    stateCAL = false;
    Serial.println("Falso");
    Serial.print("After 5 seconds, the maximum reading was: ");
    Serial.println(maxReading);
    maxReading = 0;
  } 

}

And this is the relevant processing code:

void mousePressed() {
  println("Coordinates: "  + mouseX + "," + mouseY);
  if (pressedCPMButton && currentColorCPM==butColor) { //Changing color CPM to pressed button color
    currentColorCPM = butpreColor;
    currentColorPOT = butColor;
    currentColorFSR = butColor;
    currentColorCAL = butColor;
    myPort.write(1);   //Send 1 to port
    println(1);
  } else if (pressedCPMButton && currentColorCPM==butpreColor) {
    currentColorCPM = butColor;
    currentColorPOT = butColor;
    currentColorFSR = butColor;
    currentColorCAL = butColor;
    myPort.write(0);   //Send 1 to port
    println(0);
  }
  if (pressedPOTButton && currentColorPOT==butColor) {
    currentColorCPM = butColor;
    currentColorPOT = butpreColor;
    currentColorFSR = butColor;
    currentColorCAL = butColor;
    myPort.write(2);   //Send 1 to port
    println(2);                                    //Send 2 to port
  } else if (pressedPOTButton && currentColorPOT==butpreColor) {
    currentColorCPM = butColor;
    currentColorPOT = butColor;
    currentColorFSR = butColor;
    currentColorCAL = butColor;
    myPort.write(0);   //Send 1 to port
    println(0);
  }
  if (pressedFSRButton && currentColorFSR==butColor) {
    currentColorCPM = butColor;
    currentColorPOT = butColor;
    currentColorFSR = butpreColor;
    currentColorCAL = butColor;
    myPort.write(3);   //Send 1 to port
    println(3);                                  //Send 3 to port
  } else if (pressedFSRButton && currentColorFSR==butpreColor) {
    currentColorCPM = butColor;
    currentColorPOT = butColor;
    currentColorFSR = butColor;
    currentColorCAL = butColor;
    myPort.write(0);   //Send 1 to port
    println(0);
  }
  if (pressedCALButton && currentColorCAL==butColor) {
    currentScreen = 1;
    currentColorCPM = butColor;
    currentColorPOT = butColor;
    currentColorFSR = butColor;
    currentColorCAL = butpreColor;
    myPort.write(4);   //Send 1 to port
    println(4);                                  //Send 4 to port
  } else if (pressedBACKButton) {
    currentScreen = 0;
    currentColorCPM = butColor;
    currentColorPOT = butColor;
    currentColorFSR = butColor;
    currentColorCAL = butColor;
    myPort.write(0);   //Send 1 to port
    println(0);
  }

  if (pressedSTARTCALButton) {     //This is the bit that isn't working well.
    if(myPort.available() > 0){
    }
    myPort.write(5);     //Send 5 to port
    println(5);
    valforce = myPort.readString();
    println(valforce);
  }
}

how will i set this up?

int rectX = 300;

int rectY = 200; //Position of square button

int rectSize = 200; //Size of button

int mouseClicked; //Number count

color inactiveColor;

color activeColor;

void setup() {

size( 600, 400 );

inactiveColor = color( 0 );

activeColor= color( 62, 211, 95 );

println( mouseClicked );

}

void draw() {

background( 150 );

rectMode( CENTER );

fill( inactiveColor );

rect( rectX, rectY, rectSize, rectSize );

}

Do I seem like I am on the right path? If not can someone steer me in the right path and give me a couple pointers on how to make this variable work and implement it into a conditional statement? I am also puzzled when it comes to how I will determine whether the mouse is clicking inside the button. I know I will have to use a conditional statement but I am just confused. Thanks to anyone who can help!

Any pointers would be appreciated!

`//VARIABLES PImage[] photo = new PImage[9]; PImage[] photo2 = new PImage[9];

//SETUP void setup () { size(600,600);

photo[0] = loadImage("Photo1.png"); photo[1] = loadImage("Photo2.png"); photo[2] = loadImage("Photo3.png"); photo[3] = loadImage("Photo4.png"); photo[4] = loadImage("Photo5.png"); photo[5] = loadImage("Photo6.png"); photo[6] = loadImage("Photo7.png"); photo[7] = loadImage("Photo8.png"); photo[8] = loadImage("Photo9.png"); photo[9] = loadImage("Photo10.png"); }

//DRAW void draw() { if(mousePressed) { photo.blend(photo2,0,0,600,600,0,0,600,600,ADD); image(photo,0,0); } }`

I've been trying to figure out how to connect a specific keyPressed function with an Array loop: when you press the d key, connect previous mouse pressed pulses with current mouse pressed, and* increase the stroke each time. I figured a key Presssed boolean might get me there, but I don't seem to understand the order or placement of the two functions. Do I keep everything in draw or should the line increase only be in keyPressed, which would eliminate the need for a boolean?

Any help would make my day!

//start the pulse pulseTotal at 0
int pulseTotal =0;

Pulse[] pulseArray = new Pulse[1000];

//connected lines is initialized to false
boolean lineConnect = false;


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

void draw() {
  //refresh
  background(255);
  //if i is equal to 0, make i less than the pulseTotal number of pulses and increase it by 1 each time
  for (int i =0; i < pulseTotal; i++) {
    if (i>0 && lineConnect == true) {
      //if i is greater than 0 and connected lines is true, connect line from current (i) pulse to previous pulse x and y
      //..and increase strokeWeight with each i increase
      strokeWeight(i);
      stroke(0);
      line(pulseArray[i-1].xPosition, pulseArray[i-1].yPosition, pulseArray[i].xPosition, pulseArray [i].yPosition);
    }
    pulseArray[i].display();
  }
}


// --------------------------
//Mouse Pressed interaction 
// --------------------------
void mousePressed() {

  pulseArray[pulseTotal] = new Pulse(mouseX, mouseY, 25, 200);
  //we increment the pulseTotal pulseArray by 1
  pulseTotal = pulseTotal +1;
}



// --------------------------
//Keyboard interaction 
// --------------------------
void keyPressed() {

  //if key is equal to 32 (32 as a symbol that represents the space bar// 
  //...set background to white (reset the background)
  if (key == 32) { // 32 is the ASCII decimal value representing the space bar
    pulseTotal=0;
  }

  //if D is pressed, make line connect (displays lines and increases stroke each time) true
  if (key == 68) {
    lineConnect = true;
  }
}
//--------------------------
// Pulse Class
//--------------------------
// draws a pulsing dot on the screen
class Pulse {
  /* properties */
  // scale of the pulse
  int pulseScale = 25;         
  // x-coordinate of the pulse  
  float xPosition;              
  // y-coordinate of the pulse  
  float yPosition;            
  // width of the pulse  
  float pulseWidth;         
  // height of the pulse  
  float pulseHeight;            
  // size of the pulse  
  float pulseSize;      
  // fill color of pulse  
  color fillColor;                

  /* methods */
  // constructor 
  Pulse(float newPulseX, float newPulseY, int newPulseScale, color newColor) {
    xPosition = newPulseX;
    yPosition = newPulseY;
    pulseScale = newPulseScale;
    fillColor = newColor;
    pulseSize = 20;
  }

  // draws the pulse and updates its size
  void display() {

    // set the width of the pulse using the sine function 
    pulseWidth = sin(pulseSize)*pulseScale;
    // set the height of the pulse using the sine function 
    pulseHeight = sin(pulseSize)*pulseScale;

    // draw the ellipse at the center
    ellipseMode(CENTER);
    //no stroke on the ellipse
    noStroke();
    //fill the pulse by the fill color variable
    fill(fillColor);
    //draw the ellipse
    ellipse(xPosition, yPosition, pulseWidth, pulseHeight);

    //increment size
    pulseSize = pulseSize + 0.1;
  }
}