Question about Draw Arrays


OK, new to processing here, I could use a little help solving this.

What I am trying to do.

Use an Arduino/motion detector to detect when someone walks by. When they do walk by I want a random .PNG from a file to open at a random Y value, defined x value, increase in size until the motion has stopped being detected. When the motion is no longer detected i want it to REMAIN on the screen and start slowly scrolling to the right, keeping its adjusted size values.

I want this process to repeat so i have a bunch of side scrolling PNGS, and a new one is added with each new motion detection.

I am at the step now where:

Motion is Detected…

-Random PNG loads at defined X, Random Y Cord….

-PNG increases in size as motion continue to be detected……

Motion Not Detected….

(at this point i want it to maintain its size/position values and start moving to the right, and then the process repeats with a new motion detection

-However here Values reset, Screen clears.

So I believe I need to set up an array, and append the image(img, 10, canvasY, size, size); line information

to a new array that will hold the visuals on screen and keep adding new visuals for every time the detector senses motion.

I can’t figure out how to do it.

Maybe theres a better way to go about this whole thing?

any help appreciated.


import processing.serial.*;

import cc.arduino.*;

Arduino arduino;

float size = 20;

float minSize = 25;

float maxSize = 240;

float sizeSpeed = .2;


String[] imageNames={"puddle2.png","puddle1.png","puddle3.png"};

PImage[]images = new PImage[imageNames.length];


int numPuddles = 3;

boolean rand = true;

float r = random(0, 2);

int ir = int(r);

PImage img = images[ir];

float canvasY;


void setup() {

  size(900, 600);

  // Prints out the available serial ports.

  // You will see 4 different ports


  arduino = new Arduino(this, "/dev/tty.usbmodemfa131", 57600);

  arduino.pinMode(3, Arduino.INPUT);

// initialize image array

for (int i=0; i< imageNames.length; i++){

  String imageName = imageNames[i];

  images[i] = loadImage(imageName);



void draw() {


    if (arduino.digitalRead(3) == Arduino.HIGH){

      if(rand == true){

      r = random(0, 2);

      ir = int(r);

      img = images[ir];

      canvasY = random(20, 650);

      rand = false;


      rect(800, 500,10,10);

      image(img, 10, canvasY, size, size);


    else {

      rand = true;


   if(size < minSize) {

    sizeSpeed *= 1;


      if (arduino.digitalRead(3) == Arduino.LOW){

      size = 10;


Hi Blake,

Can you please format your code in our previous post? You can find all the informations on this thread: Guidelines—Tips on Asking Questions

To get back to your question, you can probably adopt a structure like this one:

ArrayList<Image> images; // An array to keep track of the images
boolean lastStateIsMoving; // The last state of your sensor

void setup() {
  size(640, 360);
  images = new ArrayList<Image>();
  lastStateIsMoving = false;

void draw() {
  boolean movements = readSensorValue(); // Check if your sensor read movements
  if (movements && !lastStateIsMoving) { // if there is a movement and the previous state of the sensor was no movement
    images.add(new Image(...));
  if (!movements && lastStateIsMoving) { // if there is no movement and the previous state of the sensor was movement
  for (int i = 0; i < images.size(); i++) {
    if (images.get(i).isOutOfScreen()) {
    } else {

boolean readSensorValue() {
  // TO DO

class Image {
  PImage img;
  PVector pos;
  int state;
  Image(PImage img) {
    // TO DO
    state = 1;
    pos = new PVector(width/2, random(height));
  void update() {
    if (state == 1) { // scaling state
    if (state == 2) { // moving left
  void changeState(int newState) {
    // TO DO
  void scaleUp() {
    // TO DO
  void moveRight() {
    // TO DO
  boolean isOutOfScreen() {
    // TO DO
  void display() {
    // TO DO


Thanks for the quick reply! Ill see what i can do with this structure.