After an intense and sweaty google session i found some code that comes somewhat close to what i want to achieve. But the code confuses me because it uses an API for the colors and random locations and direction. I want to just have straight dripping down the y-axis, somehow I feel more lost now than before.

This is the code i found:

var WIDTH = 500,
  HEIGHT = 500,
  BACKGROUND = 240,
  COLOR_PALETTE = ['#69d2e7', '#a7dbd8', '#e0e4cc', '#f38630', '#fa6900'],
  MAX = 100,
  STROKES = 100;

var time = 1,
  particles = [],
  deltaX = 400,
  deltaY = 700,
  strokeArray = [],
  palette = [];

class Particle {
  constructor(x = WIDTH / 2, y = HEIGHT / 2, radius = 10, rotation) {
    this.x = x,
            this.y = y,
            this.r = radius,
            this.rotation = 0;
  }

  render(color, delta) {
    fill(color);
    tint(255, 127);
    noStroke();
    ellipse(this.x, this.y, this.r, this.r);
  }

  rotate() {}
}

class Stroke {
  constructor(x, y, color) {
    this.particles = [],
            this.x = x,
            this.y = y,
            this.dx = x,
            this.dy = y,
            this.color = color;
  }

  render() {
    this.particles.map((particle, index) => {
      particle.render(this.color, this.dx);
    });

    this.dx += 0.006;
    this.dy += 0.006;
  }

  addParticle(deltaX, deltaY) {

    var fx = map(noise(this.dx * noise(cos(400) / 40) * noise(sin(1000) / 40)), 0, 1, 0, WIDTH);
    var fy = map(noise(this.dy), 0, 1, 0, HEIGHT);

    var dist = Math.sqrt((fx - this.x) * (fx - this.x) + (fy - this.y) * (fy - this.y));

    var maxSize = (x) => {
      if (x > 15) {
        return 15;
      }
      return x;
    };

    if (this.particles.length < 2) {
      this.particles.push(new Particle(fx, fy, 5, fx / fy * Math.PI * 2));
    } else {
      this.particles.push(new Particle(fx, fy, maxSize(map(dist, 4, 0, 0, 10)), fx / fy * Math.PI * 2));
    }

    this.x = fx;
    this.y = fy;
  }
}


function preload() {
  var input = [];

  for (var i = 0; i < STROKES; i++) {
    input.push('N');
  }


  var url = 'http://colormind.io/api/';
  var data = {
    model: 'default',
    input: input
  };

  var http = new XMLHttpRequest();

  http.onreadystatechange = () => {
    if (http.readyState == 4 && http.status == 200) {
      palette = JSON.parse(http.responseText).result;

      for (var i = 0; i < STROKES; i++) {
        strokeArray.push(new Stroke(
                    Math.random() * 800,
                    Math.random() * 800,
                    palette[Math.floor(Math.random() * 5)]
                ));
      }
    }
  };

  http.open('POST', url, true);
  http.send(JSON.stringify(data));
}

function setup() {
  //var canvas = createCanvas(WIDTH, HEIGHT);
  //canvas.parent('sketch');
  createCanvas(500, 500);
  background(BACKGROUND);
}

function draw() {
  if (time > MAX) {
    noLoop();
  }

  background(BACKGROUND);

  if (true) {
    particles.push(new Particle(Math.random() * 800, Math.random() * 800));
  }

  for (var i = 0; i < strokeArray.length; i++) {
    strokeArray[i].addParticle(deltaX, deltaY);
    strokeArray[i].render();
  }

  time++;
}

@AndreasH -- do follow up in this thread if you find a good starting point and want to share a code snippet and ask further questions about dripping. Good luck!

I believe there are a number of related examples in the forum in the first page or two of search results here:

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

Hello world.

I have created a super simple painting program in p5 which is working fine so far.

Now I am attempting to simulate dripping paint like a real world spray can would work. Would be somewhat eternally grateful if anyone could point me in the right direction, so far I am lost. Thanks! Mwah!

Even if I tried not for water colours but a paint drip effect

Hi I'm looking for a tutor to help me learn the skills needed to produce a processing visualisation of watercolour paint dripping down the screen. Paid of course..

It will be random in scale, speed and color (random colors initially)

A user is able to increase the flow rate of the drips I.e. number of drips on the screen

The scale / width of each drop stream is random but the user can modify the overall scale factor by using a plus or minus or key code..

I'm thinking a visual effect similar to this

https://image.shutterstock.com/z/stock-photo-abstract-watercolor-rainbow-gradient-stain-watercolor-drips-isolated-on-white-background-elements-314093582.jpg

It is totally fine to use a liquid library or other existing.libraries to help achieve the effect..

I'm new to visualisation / artistic programming coming from a microsofty businessy programming background but I'd love to get more involved in the artistic side and would love some lessons..

``I'm attempting to put two codes together, 1 being fish in a pond, and the other being ripples on the surface of the water. But when I add them together the ripples grow in size and speed up and I cant figure out why.

First Code: Ripples

// Left mouse button for heavy drip
// Right mouse button for light drip



ArrayList circles = new ArrayList();
void setup() { 
  size(500,500); 
  smooth(); 
}

// What makes the circles grow
void draw() { 
  background(64, 164, 223); 
  for (int i=0; i<circles.size(); i++) { 
    ExpandingCircle ec = (ExpandingCircle) circles.get(i); 
   ec.update(); 
    ec.display(); 
    if (ec.transparency <= 0) { circles.remove(i); } // removes circles after time
  } 
}

class ExpandingCircle { 
  int x,y; 
  float radius; 
  color c; 
  boolean transparencyOn; 
  int transparency; 

 ExpandingCircle(int x, int y, boolean transparencyOn) { 
    this.x = x; 
    this.y = y; 
    this.transparencyOn = transparencyOn; 
    c = color(random(255),random(255),random(255)); 
    transparency = 255; 
  } 

  void update() { 
    radius++; 
    if (transparencyOn && radius >= 50 && transparency > 0) { transparency--; } 
  } 

  void display() { 
    stroke(24, 104, 183); 
    noFill(); 
   ellipse(x,y,radius,radius); 
  } 
}
//By adding (mouseButton == Left) it makes it so its limited to just the left click.
//Without that its left or right click
void mousePressed() { 
  if (mouseButton == LEFT) { circles.add(new ExpandingCircle(mouseX,mouseY,false)); 

} else { circles.add(new ExpandingCircle(mouseX,mouseY,true)); } 

} 

2nd code: Ripples with fish

// Left mouse button for heavy drip
// Right mouse button for light drip



Fish [] fish = new Fish[20];
int b;
float e;
ArrayList circles = new ArrayList();
void setup() {
  size(800, 600);
  smooth();
  for (int i = 0; i < fish.length; i++) {
    fish[i] = new Fish(int(random(1, 3)), random(width), random(height), random(300), random(2, 4), int(random(100, 255)), int(random(50, 150)), int(random(50, 120)));
  }
}

void draw() {
  randomSeed(1);

  background(64, 164, 223);
  for (int i = 0; i < fish.length; i++) {

    fish[i].direction();
    fish[i].display();
   for (int r = 0; r < circles.size(); r++) { 
      ExpandingCircle ec = (ExpandingCircle) circles.get(r); 
      ec.update(); 
      ec.display(); 
      if (ec.transparency <= 0) { 
        circles.remove(r);
      } // removes circles after time
    }
  }
}
class ExpandingCircle {
  int x, y; 
  float radius; 
  color c; 
  boolean transparencyOn; 
  int transparency; 

  ExpandingCircle(int x, int y, boolean transparencyOn) { 
    this.x = x; 
    this.y = y; 
    this.transparencyOn = transparencyOn; 
    c = color(random(255), random(255), random(255)); 
    transparency = 255;
  } 
void update() { 
    radius++; 
    if (transparencyOn && radius >= 50 && transparency > 0) { transparency--; } 
  } 

  void display() { 
    stroke(24, 104, 183); 
    noFill(); 
   ellipse(x,y,radius,radius); 
  } 
}
//By adding (mouseButton == Left) it makes it so its limited to just the left click.
//Without that its left or right click
void mousePressed() { 
  if (mouseButton == LEFT) { circles.add(new ExpandingCircle(mouseX,mouseY,false)); 

} else { circles.add(new ExpandingCircle(mouseX,mouseY,true)); }

} 

  class Fish {


    float Cx, Cy; //center
    float s; // size
    float l; //size of the locus
    float tx, ty; //location of fish
    int g; //direction of travel
    float a;
    float angle;
    float Xoff;
    float Yoff;
    int red;
    int green;
    int blue;
    float speed;

    Fish(float Size, float Xofftemp, float Yofftemp, float Length, float Speed, int Red, int Green, int Blue) {

      s = Size;
      l = Length;
      Xoff = Xofftemp;
      Yoff = Yofftemp;
      g = 1;
      Cx = 0;
      Cy = 0;


      red = Red;
      green = Green;
      blue = Blue;
      speed = Speed;
    }

    void direction() {
      a = random(-1, 1);

      if (a < 0) {
        g = -1;
      } else if (a > 0) {
        g = 1;
      }
    }

    void display() {
      noStroke();
      fill(red, green, blue);

      angle = radians(frameCount/speed);
      //Cx = random(0, 50);
      //Cy = random(0, 50);





      pushMatrix ();
      translate(tx, ty);
      tx = Xoff + l * cos(g*angle);
      ty = Yoff + l * sin(g*angle);
      rotate(g*(angle + PI/2));

      beginShape();
      vertex(Cx+18*s, Cy);
      //bezierVertex(163.0, 381.0, 414.0, 94.0, 412.0, 147.0);
      bezierVertex(Cx+17*s, Cy+5*s, Cx+10*s, Cy+9*s, Cx, Cy+5*s);//head
      bezierVertex(Cx+10*s, Cy-9*s, Cx+17*s, Cy-5*s, Cx+18*s, Cy);
      endShape();

      popMatrix();
    }
  }

@JohnGalt --

Here are some starting points.

1. The sketch you found is written in p5.js, for web publishing. If you download the Processing app, you are probably writing in the default Processing, which is Java See @GoToLoop below -- I wasn't paying attention to the openprocessing source and got turned around remembering it was web-published.
2. Change the size of the screen with size() -- as other comments noted. Drop the framerate if needed.
3. The reference includes information on PDF export -- see the renderer listed under size(), for example, or just use save() or saveFrame() or saveImage() and use a normal image format for Photoshop import

4. Try changing what the mouse does. mouseClicked() calls move() -- to make the drips more energetic, try making move generate larger numbers by multiplying by a coefficient.

   v[mouseX][mouseY] = randomGaussian() * TAU * 40;
   

These will have pixelated cores that settle over time, but may create a similar visual effect faster.

Or just make a bunch of clicks and leave it running, like baking a cake.

Or speed thing up a lot by removing the draw logic, and only saving once every x array iterations.

I have a rectangle that's supposed to stay between mouseX + 53 and mouseX + 73 depending on whether the mouse is pressed or released, but it drags along the x-axis whenever I move it. I've tried isolating the rectangle to find the problem but I couldn't find any solutions to it. The problem rectangle is the one dealing with the handleX variable.

boolean click;
// big blood circle
float circleW = 0;
float circleH = 0;
// blood from top of screen
float circleStart = 0;
// mouse shit
float handleX = mouseX+73;
float plungerW;
float bloodH = 0;
float bloodW = 33;
// bg shit
float bgcolor = 112;

void setup(){
 size(720,480);
 smooth();
 frameRate(30);
}

void draw(){

 background(bgcolor);

 // big blood circle
 fill(255,0,0,100);
 ellipse(pmouseX,pmouseY,circleW,circleH);

  //blood dots in background
  fill(random(255),0,0,random(255));
  ellipse(random(width),random(height),random(30),random(30));
  ellipse(random(width),random(height),random(30),random(30));
  ellipse(random(width),random(height),random(30),random(30));
  ellipse(random(width),random(height),random(30),random(30));
  ellipse(random(width),random(height),random(30),random(30));

  //drips from top of screen
  fill(170,0,0,100);
  arc(0,circleStart,20,bloodH,0,PI);
  arc(20,circleStart,20,bloodH,0,PI);
  arc(220,circleStart,20,bloodH,0,PI);
  arc(35,circleStart,20,bloodH,0,PI);
  arc(44,circleStart,20,bloodH,0,PI);
  arc(63,circleStart,20,bloodH,0,PI);
  arc(69,circleStart,20,bloodH,0,PI);
  arc(77,circleStart,20,bloodH,0,PI);
  arc(99,circleStart,20,bloodH,0,PI);
  arc(127,circleStart,20,bloodH,0,PI);
  arc(88,circleStart,20,bloodH,0,PI);
  arc(153,circleStart,20,bloodH,0,PI);
  arc(140,circleStart,20,bloodH,0,PI);
  arc(112,circleStart,20,bloodH,0,PI);
  arc(173,circleStart,20,bloodH,0,PI);
  arc(187,circleStart,20,bloodH,0,PI);
  arc(207,circleStart,20,bloodH,0,PI);
  arc(230,circleStart,20,bloodH,0,PI);
  arc(247,circleStart,20,bloodH,0,PI);
  arc(276,circleStart,20,bloodH,0,PI);
  arc(256,circleStart,20,bloodH,0,PI);
  arc(268,circleStart,20,bloodH,0,PI);
  arc(293,circleStart,20,bloodH,0,PI);
  arc(311,circleStart,20,bloodH,0,PI);
  arc(323,circleStart,20,bloodH,0,PI);
  arc(342,circleStart,20,bloodH,0,PI);
  arc(358,circleStart,20,bloodH,0,PI);
  arc(373,circleStart,20,bloodH,0,PI);
  arc(385,circleStart,20,bloodH,0,PI);
  arc(431,circleStart,20,bloodH,0,PI);
  arc(399,circleStart,20,bloodH,0,PI);
  arc(411,circleStart,20,bloodH,0,PI);
  arc(422,circleStart,20,bloodH,0,PI);
  arc(446,circleStart,20,bloodH,0,PI);
  arc(462,circleStart,20,bloodH,0,PI);
  arc(481,circleStart,20,bloodH,0,PI);
  arc(492,circleStart,20,bloodH,0,PI);
  arc(507,circleStart,20,bloodH,0,PI);
  arc(526,circleStart,20,bloodH,0,PI);
  arc(385,circleStart,20,bloodH,0,PI);
  arc(538,circleStart,20,bloodH,0,PI);
  arc(549,circleStart,20,bloodH,0,PI);
  arc(558,circleStart,20,bloodH,0,PI);
  arc(573,circleStart,20,bloodH,0,PI);
  arc(591,circleStart,20,bloodH,0,PI);
  arc(604,circleStart,20,bloodH,0,PI);
  arc(618,circleStart,20,bloodH,0,PI);
  arc(638,circleStart,20,bloodH,0,PI);
  arc(653,circleStart,20,bloodH,0,PI);
  arc(669,circleStart,20,bloodH,0,PI);
  arc(688,circleStart,20,bloodH,0,PI);
  arc(704,circleStart,20,bloodH,0,PI);
  arc(719,circleStart,20,bloodH,0,PI);
  arc(680,circleStart,20,bloodH,0,PI);
  arc(626,circleStart,20,bloodH,0,PI);
  arc(583,circleStart,20,bloodH,0,PI);
  arc(515,circleStart,20,bloodH,0,PI);
  arc(472,circleStart,20,bloodH,0,PI);
  arc(238,circleStart,20,bloodH,0,PI);
  arc(162,circleStart,20,bloodH,0,PI);
  arc(192,circleStart,20,bloodH,0,PI);
  arc(51,circleStart,20,bloodH,0,PI);
  arc(15,circleStart,20,bloodH,0,PI);
  arc(638,circleStart,20,bloodH,0,PI);


 //arrow keys
   if (keyPressed){
    if (keyCode == UP){
  save("bloody_mess.jpg");
  }else if(keyCode == DOWN){
   //make circles start at top and work down the screen
  bloodH = bloodH + 2;
  }else if(keyCode == RIGHT){
  bgcolor = bgcolor + 3;
  if (bgcolor >= 255){
    bgcolor = 255;
  }
  }else if(keyCode == LEFT){
  bgcolor = bgcolor - 3;
  if (bgcolor <= 0){
    bgcolor = 0;
  }
  }

}

  //mouse

 noCursor();
 noStroke();
 fill(0);
 rect(mouseX,mouseY-1,20,2);
 stroke(0);
 fill(200);
 rect(mouseX+20,mouseY+-8,33,16);
 fill(0);
 rect(mouseX+53,mouseY-1,plungerW,2);
 rect(handleX,mouseY-8,5,16);
 stroke(0);
 line(mouseX+28,mouseY-8,mouseX+28,mouseY-0);
 line(mouseX+36,mouseY-8,mouseX+36,mouseY-0);
 line(mouseX+44,mouseY-8,mouseX+44,mouseY-0);
 noStroke();
 fill(180,0,0,180);
 rect(mouseX+20,mouseY+-8,bloodW,16);
 if (click == true){
   circleW = circleW + 2;
   circleH = circleH + 2;
   handleX = handleX - 1;
   plungerW = plungerW - 1;
   bloodW = bloodW - 1.7;
   if (bloodW <= 0){
     bloodW = 0;
   }
   if (plungerW <= 0){
     plungerW = 0;
   }
   if (handleX <= mouseX + 53){
     handleX = mouseX + 53;
   }
   }else if (click == false){

     handleX = handleX + 2;
     if (handleX >= mouseX + 73){
       handleX = mouseX + 73;
     }
     plungerW = plungerW + 2;
     if (plungerW >= 20){
       plungerW = 20;
     }
     bloodW = bloodW + 3.4;
     if (bloodW >= 33){
       bloodW = 33;
     }
   }

} //end void draw

void mousePressed(){
 click = true; 
}

void mouseReleased(){
  click = false;
}

Here is the code containing only the problem rectangle.

boolean click;
float handleX = mouseX+73;

void setup(){
  size(720,480);
  smooth();
  frameRate(30);
}

void draw(){

  background(255);

  noStroke();
  fill(0);
  rect(handleX,mouseY-8,5,16);
  if (click == true){
    handleX = handleX - 1;
    if (handleX <= mouseX + 53){
      handleX = mouseX + 53;
    }
  }else if (click == false){
    handleX = handleX + 2;
    if (handleX >= mouseX + 73){
      handleX = mouseX + 73;
    }
  }
}

void mousePressed(){
  click = true;
}

void mouseReleased(){
  click = false;
}

Hi, thx for your answer. Highlight is done :)

I use hsb for the transparant. This is not causing the problem. I tried rgb and the same problem :(.

The bug is: when it starts 'dripping' and i focus the mouse on a other color, the drips continue in the 'new' selected color. I'd like it to drip all the way in the initial color the drip started.

Hi, i have a bug in my program i cannot fix by myself. Maybe you can help me. I've made the following in processing: I load a picture, with the mouse you select the color and vanish it with drips. see: https://www.instagram.com/p/_uwQmQG-7g/?taken-by=depater79

Now the bug is: The drips change color when they go down because of the selected color of the mouse. I'm using already a greyscale image :(, I would like to use color images.

Here is the code:

PImage bird;
float x;
float y;
float [] ellipseX = new float [17500];
float [] ellipseY = new float [15700];
int counter = 15;
//float seed = .7; //weet niet wat dit doet
float easing = .45; //tracking van de muis
int rad = 6;  //hoe hoger het getal hoe groter vager

void setup() {
  bird = loadImage("bird.png");
  noCursor();
  fullScreen();  
  //size(500,500);
  noStroke();  
  background(51);
  image(bird, 0, 0);
  colorMode(HSB,0,0,255);
  //blendMode(SCREEN);

}

void draw() { 
  color c = get(mouseX, mouseY);
  println(c);
  counter = (counter + 10) % 99;
  for (int i=1; i <= counter; i++)
  {
    if (mousePressed) { 

      //Muis smooth laten bewegen
      float targetX = mouseX;
      float dx = targetX - x;
      x += dx * easing;

      float targetY = mouseY;
      float dy = targetY - y;
      y += dy * easing;
      //Kleuren van de buff
      //color c = get(mouseX, mouseY);

      fill(c, 20);
      ellipse(x, y, 120, 120);

      //ellipse (x, y, 80, 80);
      ellipseX[counter] = x;
      ellipseY[counter] = y;
    }
    //seed += .9; //maakt de druipers realistischer -> rondjes veranderen
    //float n = noise(1);

fill(c, 40);
    ellipse(ellipseX[i], ellipseY[i], rad, rad);
    ellipseY[i]++;

  }
}

Thanks for taking a look

here

// based on http: // www.atariarchives.org/adventure/chapter2.php
// and on http: // forum.processing.org/topic/help-with-dialog-setup#25080000001811353   
// It's from PhiLho. 

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

// states control the program
final int startScreen = 0; // possible states 
final int play = 1;
final int playerIsDead = 2;
final int playerWon = 3;

int state = startScreen; // current state 


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

String globalSectionNumber;

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

// done correct 7 38 40 21 29 6 28 3 4 5  1  37 38 41 10 17 25

DialogLine[] dialogLines =
{
  new DialogLine("1", "You are in a dank, dark dungeon. The only light comes into the room from a small hole in the west wall. To leave the dungeon, go on.", "OK#25" ), 
  new DialogLine("2", "You are in the L-shaped upper hallway of the castle. A moth flutters across the room near the ceiling. To the north is a door and there is a stairwell in the hall as well. If you wish to peek through the door to the north, go to 33. If you wish to look down the stairwell, go to 39. You must flip a coin; if it lands tails, go to 13. To go through the door, go to 30. To go down the stairs, go to 21.", "peek through the door to the north#33", "If you wish to look down the stairwell#39", "You must flip a coin; if it lands tails chose this line#13", "To go through the door#30", "To go down the stairs#21" ), 
  new DialogLine("3", "Looking down the stairwell, you can see a gloomy, unpleasant looking room, the guardroom of the ancient dungeon.", "OK#21" ), 
  new DialogLine("4", "Inside the sack you find jewels worth $500, so add them to your wealth.", "OK#9" ), 
  new DialogLine("5", "The ghost of the guard has awoken! Your strength is halved due to the fright you suffered.", "OK#1" ), 
  new DialogLine("6", "You are in the Great Hall of the castle. There are two doors in the L-shaped room. You notice the wood panels around the room are warped and faded. As you look around, a mouse scampers across the floor. You whirl around at a sudden noise. Flip a coin. If it is heads, go to 43. If it is tails, you see to your relief there is nothing there. If you want to look out of the windows to get your bearings, you can do so. You can also exit by the north doors. Or move to the east.", "look out of the windows#28", "exit by the north or west doors#29", "move to the east#21"), 
  new DialogLine("7", "You are at the entrance of a forbidding-looking stone castle. You are facing east. The huge wooden entrance door stands lightly open. To enter the castle, press 1.", "Enter the castle#40" ), 
  new DialogLine("8", "A werewolf awakes in this room. He attacks you. Flip a coin. If it is heads, the werewolf has beaten you, so go to 37. If it is tails, you have killed it. Add one to your monster tally, then go to 35.", "9" ), 
  new DialogLine("9", "You are in the storeroom, amidst spices, vegetables, and vast sacks of flour and other provisions. The air is thick with spice and curry fumes. If you want to look under some of the sacks, go to 31. If you want to look inside the top sack, go to 4. To leave by the south door, go to 42. Go to 35 if you wish to leave by the north door.", "10" ), 
  new DialogLine("10", "Looking up the stairwell you can just make out an elaborately decorated hallway.", "OK#21" ), 
  new DialogLine("11", "There are rats in this dungeon. They steal gold pieces worth $10 from you.", "OK#1" ), 
  new DialogLine("12", "You are descending very, very slowly. Your strength is sapped by a magic spell left in the elevator. Divide your strength by two, then proceed straight to 42.", "13" ), 
  new DialogLine("13", "A malevolent Maldemer attacks you. You can smell the sulfur on his breath. Your strength diminishes by 10. Flip two coins. If they both come up heads, you have killed the Maldemer, so add one to your monster tally. After the battle, go to 42.", "14" ), 
  new DialogLine("14", "You've done it! That was the exit from the castle. Double your strength.", "OK#27" ), 
  new DialogLine("15", "You are in the castle's ancient, hydraulic elevator. If you wish to descend slowly, go to 12. To get down as quickly as possible, go to 24.", "16" ), 
  new DialogLine("16", "Horrors. There is a devastating Ice-Dragon here. It leaps toward you. Blood drips from his claws. Flip a coin. Heads you win, adding one to your monster tally. Your strength drops by 10 if you win; by 20 if you lose. After the fight, go on.", "OK#30" ), 
  new DialogLine("17", "This is the monarch's private meeting room. The echo of ancient plotting and wrangling hangs heavy in the musty air. Flip a coin. If it lands up heads, you find an emerald worth $100, then go to the exit through the south door. If it is tails, you are attacked by a ghastly Gruesomeness which was hiding behind the drapes. Flip the coin again. If it lands tails again, you win, adding one to your monster tally. If it lands heads the Gruesomeness wins. While you are lying exhausted on the floor, he steals $100 from your wealth.", "OK#21" ), 
  new DialogLine("18", "This tiny room on the upper level is the dressing chamber. There is a window to the north. If you wish to see out the window, go to 22. There is a door which 1eaves the room to the south. To use this door, go to 32.", "19" ), 
  new DialogLine("19", "The noise is frightening. What on earth (or beyond it) is inside that room? Go to 23.", "20" ), 
  new DialogLine("20", "Aha... wealth! You find great treasure here worth $900 in gems and gold. Add it to your wealth, then go to 30.", "21" ), 
  new DialogLine("21", "You are in the inner hallway, which contains a door to the north one to the west, and a circular stairwell. The room is small and unfriendly. \n\n   Now you can: ", "Look down the stairwell#3", "To look up the stairs#10", "To leave by the north door#17", "if you wish to leave by the west door#6", "go up the stairs#2", "go down them#25" ), 
  new DialogLine("22", "Looking out the window you see, below you, the secret herb garden. Looking hard to the left, you recognize the land you crossed to get to the castle entrance. Now go to 18.", "23" ), 
  new DialogLine("23", "You are in the room which was used as the castle treasury years ago. A spider scampers down the wall. There are no windows, just exits to the north and to the east. If you wish to listen at the north door, go to 19. If you want to leave by the north door, go to 32. Go to 36 to leave by the east door.", "24" ), 
  new DialogLine("24", "You feel exhilarated, as a positive spell is triggered by your swift downward flight. Your strength is doubled. Now go to 42.", "25" ), 
  new DialogLine("25", "You are in the prison guardroom, in the basement of the castle. The stairwell ends in this room. There is one other exit, a small hole in the east wall. The air is damp and unpleasant . . . a chill wind rushes into the room from gaps in the stone at the top of the walls. Go east or go up the stairs.", "go east#1", "go up the stairs#21" ), 
  new DialogLine("26", "Looking out the south window you see the ornamental lake. There is a view across open fields through the east window. You look longingly at the outdoors, then go to 42.", "27" ), 
  new DialogLine("27", "Your score is five times your strength, plus two times your wealth, plus thirty times your monster tally. You have come to the end of the adventure. Now proceed with the rest of this book.", "28" ), 
  new DialogLine("28", "By straining your eyes through the mist which has swirled up while you've been exploring, you can see below you, looking southwards, an ornamental lake. By craning your neck round to the right through the west window you can just see the entrance door to the castle. When you've finished looking, go on.", "Finished#6" ), 
  new DialogLine("29", "You are in the castle's Audience Chamber. The faded tapestries on the wall only hint at the splendor which this room once had. There is a window to the west. By craning your neck through it to the right you can see the castle entrance. Flip two coins. If they both land heads, you find diamonds worth $169. If they are both tails, you must fight the fanatical Fleshgorger which suddenly stumbles into the room. To fight the Fleshgorger, flip both coins again. One head and one tail, you defeat it, adding one to your monster tally and doubling your strength. If the two coins are heads or tails, you lose, and your strength is halved. \n\nYou can leave by the north or you can leave by the south or the east doors.", "leave by the north#40", "leave by the south or the east doors#6" ), 
  new DialogLine("30", "You find yourself in the master bedroom on the upper level of the castle. Looking down from the window to the west you can see the entrance to the castle, while the secret herb garden is visible below the north window. There are doors to the east and to the south. You must flip a coin. If it lands heads, go to 20. Go to 16 if it comes up tails. To leave by the south door, go to 2. Go to 82 if you wish to leave by the east door.", "31" ), 
  new DialogLine("31", "A ferocious werewolf leaps at you, his eyes glinting violently. Flip two coins, quickly. If they are the same, you defeat the werewolf. Although your strength is diminished by ten, you manage to escape, and go to 9. If the coins are different, the werewolf starts tearing you apart, cutting your strength to half of what it was before. You drag yourself away, and go to 9.", "32" ), 
  new DialogLine("32", "Oooh . . . you are in the chambermaid's bedroom. Faint perfume hangs in the air. There is an exit to the west and a door to the south. However, your attention is caught by the steady thumping coming from behind the bed. Fearfully, you look behind it, and a devastating Ice-dragon leaps at you! You smell the sulfur on his breath. Flip two coins. Unless they are two heads, you lose, and 15 is struck from your strength tally. If you win, add 100 to your strength. To leave by the north, go to 18. Go to 30 if you wish to leave by the west door. The south door leads to 23.", "33" ), 
  new DialogLine("33", "Peering into the room you see it was once the master bedroom. It appears quiet. As you turn back you notice a small bottle on the ground. Quickly, you uncork it and swallow the contents. Flip two coins. Unless they are both tails, the bottle contained a wonderful elixir which has tripled your strength. If the coins were both tails the bottle contained only water. Now go to 2.", "34" ), 
  new DialogLine("34", "Now you're under attack from a nasty, ghastly Gruesomeness. Flip two coins. Two tails, you win, and add 50 to your strength. Two heads, your strength is halved as the G.G. defeats you. Now go to 2.", "35" ), 
  new DialogLine("35", "This is the castle's kitchen. Through windows in the north wall you can see the secret herb garden. It has been many years since meals were prepared here for the monarch and the court. A rat scurries across the floor. Flip a coin. If it lands heads, you stumble, making a noise, and must go to 8 to see the effect that noise has had. To leave by the south door, go to 9.", "36" ), 
  new DialogLine("36", "You are in a small room which is outside the castle itself. You can see the lake through the southern windows. Flip a coin. If it is heads, go to 41. To leave by the north door, go to 15. Go to 23 if you wish to leave by the west door.", "37" ), 
  new DialogLine("37", "You are dead!!! ", "OK#27" ), 
  new DialogLine("38", "Go to 14", "Go on#14" ), 
  new DialogLine("39", "Looking down the stairwell you can see a small room below, and on the floor below that, you can just make out the gloomy guardroom. A ghost of a former guardsman suddenly appears on the stairwell. He demands $100. If you have it, pay him, then go to 2. If you do not have enough, the guard attacks you in anger. Flip a coin. Heads, go to 37. Tails, halve your strength, then go to 2.", 
  "If you have it, pay him#2", "If you do not have enough, the guard attacks you in anger. Flip a coin. Heads#37", "Tails, halve your strength#2" ), 
  new DialogLine("40", "You are in the hallway entrance to the castle. It is dark and gloomy, and the air of decay and desolation is very depressing. \nYou suddenly feel very frightened. To run away from the castle, press 1. To proceed through the south door, press 2.", "run away#7", "proceed through the south door#29" ), 
  new DialogLine("41", "A spider bites you on the leg. Your strength is diminished by 20.", "OK#36" ), 
  new DialogLine("42", "You are in the rear vestibule. There are windows to the south. To look out them, go to 26. Flip a coin. If it lands heads, go to 13. To leave by the north door, go to 9. Go to 38 to leave by the east door.", "43" ), 
  new DialogLine("43", "The horrendous Hodgepodge attacks you!!! He fights wildly, madly. Flip two coins. Unless they are both tails, you have beaten it and double your strength. If they are both tails, the H.H. beats you, and your strength is halved. Now go to 6.", "44" )
  };
  // The dialog lines indexed by their id, for easy lookup
  HashMap<String, DialogLine> dialogTree = new HashMap<String, DialogLine>();
// The line currently displayed
DialogLine currentLine;
// The dialog so far
ArrayList<String> dialog = new ArrayList<String>();
// 
void setup ()
{
  size(800, 800);
  smooth();
  for (DialogLine dl : dialogLines)
  {
    dialogTree.put(dl.id, dl);
  }

  // start point is 7 - see http://www.atariarchives.org/adventure/chapter2.php
  currentLine = dialogTree.get("7");
  globalSectionNumber = "7";
  dialog.add(currentLine.line);

  state=startScreen;
}

void draw () {
  background(255);
  // now states: 
  switch(state) {
  case startScreen:
    showStartScreen();
    break; 
  case play:
    play();
    break;
  default:
    //error
    println ("unknown state line 64");
    exit();
    break;
  } // switch
} // func 

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

void showStartScreen() {

  fill(#004499);

  textSize(32);
  text ("The Great Adventure", 70, 70);

  textSize(20);
  int y_value = 130;

  text ("Welcome to our text adventure. You start the game with $50 in gold, and a strength rating of 50. ", 20, y_value, width-40, 100);

  y_value+=90;
  text ("STRENGTH      WEALTH      MONSTER TALLY", 20, y_value);
  y_value+=20;
  text ("   50                   50                   0       ", 20, y_value);
  y_value+=50;
  text ("All you have to do now, as you progress through the castle, aided only by your quick decisions, is survive. \n"
    +"You'll find that you can take part in this adventure several times, as the outcome will be different each time. Keep a "
    +"record of your final score, and see if you can better it each time you go exploring.", 20, y_value, width-40, 200);
  y_value+=220;
  text ("Press any key. ", 120, y_value);
}

void play() {  

  // that's the main part. It's from PhiLho. 

  fill(#004499);
  textSize(20);
  text(currentLine.line, 10, 30, width-30, 360);
  // textWidth
  // Display the choice of answers
  fill(#0077EE);
  textSize(15);
  int y = 390;
  int toChoose = 1;
  for (String ch : currentLine.choices)
  {
    // DialogLine choice = dialogTree.get(ch);
    String [] myArray = split(ch, "#");  
    text(toChoose++ + ": " + myArray[0], 20, y);
    y += 22;
  }

  // for testing: 
  text (globalSectionNumber, width-30, height-30);

  /* 
   // Display the history of the curent game
   // (this could be an extra state of the program)
   fill(#0055AA);
   textSize(12);
   y = 200;
   for (String line : dialog)
   {
   // println (line);
   text (line, 20,y );
   y += 20;
   }
   println ("----------------------");
   */
}

// inputs ---------------------------------------------------------

void keyPressed()
{
  // now states: 
  switch(state) {
  case startScreen:
    // start the game 
    state=play;
    break; 
  case play:
    // 
    int choiceNb = currentLine.choices.length;
    int choice = key - '1';
    if (choice < 0 || choice >= choiceNb)
      return; // Ignore

    String choiceMade = currentLine.choices[choice];
    String [] myArray = split(choiceMade, "#");  

    String choiceId = myArray[1]; // qqq

    globalSectionNumber = choiceId;

    DialogLine chosenAnswer = dialogTree.get(choiceId);
    if (chosenAnswer != null)
    {
      currentLine = dialogTree.get(choiceId);
      dialog.add(currentLine.line);
    }

    break;
  default:
    //error
    println ("unknown state line 148");
    exit();
    break;
  } // switch
}

/*
void mousePressed() {
 // now states: 
 switch(state) {
 case startScreen:
 state=play;
 break; 
 case play:
 // do nothing
 break;
 default:
 //error
 println ("unknown state line 148");
 exit();
 break;
 } // switch
 } 
 */

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

/**
 * A dialog line: an id, the line itself, and a list of choices,
 * ie. of possible answers to this line.
 */
class DialogLine
{
  String id;
  String line;
  String[] choices;

  DialogLine(String i, String l, String... c)
  {
    id = i;
    line = l;
    choices = c;
  }

  String toString()
  {
    return id + " - " + line + " (" + choices.length + ")";
  }
} // class 
//

Im wondering how something like this is achieved? Any ideas would be much appreciated. Thanks!

Balsamico

.Description

Balsamico is a collaborative stage for designers operating in between digital intelligences and craftsmanship aesthetics, it is a fabrication workshop leading to the manufacture of a 1 to 1 wooden pavilion. The workshop will be held from August the 17th till August 23th this summer of 2014.

. DESIGN

Actions of dripping, collecting and tasting will drive the definition of a ground for Aceto Balsamico Tradizionale di Modena. A cad/cam approach will generate volumetric structures from the implementation of a wooden joinery system. Participants will operate within an open design field where a cross-breeding methodology will avoid unilateral layout in the selection of successful solutions. Parametric detailing, automatic unrolling, smart labeling and efficient nesting are some of the skills the participant will learn in the context of mass-customization. Rhino in combination with the visual scripting plug-in Grasshopper and the coding software Processing will be used as a basic platform to develop the proposals and prepare the documents for CNC processes.

. FABRICATE

A consolidated expertise of Italian manufacture will sustain the fabrication of all the components, bounded to the constraints imposed by two-dimensional milling machine’s capacities. A set of different types of wood with special properties will strongly influence the treatment techniques. Operations as smoothing, sanding, cutting or calibrating will every time adjust to all the selected materials.

. BUILD

The final structure will be installed in a context of solid historical background provoking a dialogue between complex compositions and ordered environments. Moreover visits to Ferrari museums, Post modern Cemeteries, Romanic Cathedrals, Baroque buildings and soft hill tops will accompany the whole experience during the summer week.

Tutors and instructors

The teaching method will be given by young experts in digital design and further implemented by professional Italian artisans.

http://www.makeahybrid.org/ (Grasshooper/Processing ,and design tutors) http://www.iablu.it/ (Fabrication and design tutors) Further information

More information can be found on:

http://www.dustmirage.com/2014-summer-cnc-fabrication-workshop/

For any kind of inquiry please contact : info@dustmirage.com

/* OpenProcessing Tweak of @http://www.openprocessing.org/sketch/137007@ / / !do not delete the line above, required for linking your tweak if you upload again */

I am new to processing .Rencently I was troubled by the project. original address The online exhibition works well.but when I download in my PC,using processing 1.5.1 windows8.1 64bit,it reads"the function playSound(int)does not exsit??" The highlighted codes is playSound(chimeNum);Thank you !!!!!!!!!!!!!!!!!!

interface JavaScript {
  void playSound(int num);
}

void bindJavascript(JavaScript js) {
  javascript = js;
}

JavaScript javascript;

ArrayList droplets;
Droplet drip;

boolean[] mouseOvers = {
  false, false, false, false, false, false, false, false, false, false, false, false,
};

int[] pitches = {
  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
};

int pitchCount = 0;

void setup() {
  size(1000, 500);
  droplets = new ArrayList();
}

void draw() {
  background(0);
  for (int i = 0; i < droplets.size(); i++) {
    Droplet d = (Droplet) droplets.get(i);
    //println("This droplet object is at index number: " + i);
    d.collision();
    d.display();
    d.grow();
    mouseOvers[i] = d.mouseOver(mouseX, mouseY);
  }
}

void mousePressed() {
  if (pitchCount > pitches.length - 1) {
    pitchCount = 0;
  }
  for (int i = 0; i < mouseOvers.length; i++) {
    if (mouseOvers[i] == true) {
      break;
    }
    if (i == mouseOvers.length - 1) {
      droplets.add(new Droplet(mouseX, mouseY, 15, 600, .5, 0, 255, 0, pitches[pitchCount]));
      if (droplets.size() > 12) {
        droplets.remove(0);
      }
    }
  }
  pitchCount++;
}

class Droplet {
  float xPos, yPos;
  float startSize, endSize, speed;
  float red, green, blue;
  boolean collision = false;
  boolean over = false;
  int chimeNum;
  boolean playOnce = true;



  Droplet(float _xPos, float _yPos, float _startSize, float _endSize, float _speed, float _red, float _green, float _blue, int _chimeNum) {
    xPos = _xPos; //x position on the screen
    yPos = _yPos; //y position on the screen
    startSize = _startSize; //initial size of the circle
    endSize = _endSize; //final size of the circle (as fade out)
    speed = _speed; //speed (vector) of the expansion/growth
    red = _red; //RED color value
    green = _green; //BLUE color value
    blue = _blue; //GREEN color value
    chimeNum = _chimeNum;
  }

  void display() {
    noFill();
    strokeWeight(2);
    //    stroke(red, green, blue, 255 - (255 * startSize/endSize));
    if (speed < 0) {
      stroke(green, red, blue, 255);
    }
    else {
      stroke(red, green, blue, 255);
    }
    ellipse(xPos, yPos, startSize, startSize);
  }

  void grow() {
    startSize = startSize + speed;
    if (startSize < 15) {
      speed = speed * -1;
      playOnce = true;
    }
  }

  public float getXpos() {
    return xPos;
  }

  public float getYpos() {
    return yPos;
  }

  public float getStartSize() {
    return startSize;
  }

  void reverser() {
    speed = speed * -1;
  }

  public float getSpeed() {
    return speed;
  }

  public boolean mouseOver(int x, int y) {
    float distance = dist(x, y, getXpos(), getYpos());
    if (distance < (this.getStartSize())/2) {
      over = true;
    }
    else {
      over = false;
    }
    return over;
  }


  void sonify() {
    if (playOnce == true) {
      playSound(chimeNum);
      println(chimeNum);
    }
    playOnce = false;
  }

  void collision() {
    for (int i = 0; i < droplets.size(); i++) {
      Droplet d = (Droplet) droplets.get(i);
      if (droplets.get(i) != this) {
        float distance = dist(this.getXpos(), this.getYpos(), d.getXpos(), d.getYpos());
        float sumOfGrowth = (d.getStartSize() + this.getStartSize())/2;
        if (sumOfGrowth > distance) {
          if (this.getStartSize() > d.getStartSize()) { //only sonify the larger of the two colliding circles
            this.sonify();
          }
          reverser(); //reverse this circle's growth . . .
        }
      }
    }
  }
}

Not like this one. This one you train. You start by given it nothing. It reads your brainwaves for 8 seconds, while you think of nothing. Then the fun begins. There is a vitual cube on the screen. And you train the software to move it with your mind. Example: for 8 seconds you think "move forward" or something. And you repeat this several times for different things like rotation, move left, right, up, down forward back ect. Then you set it so control keys on your keyboard.

Heres where processing comes in. I detect those keys, then send them serially to the arduino. Then from there wirelessly to the rover.

And that is my plan! Here are some links to the headset:

Ted Talks:

This youtube dudes video that convinced me this is the right one:

The website for it: http://emotiv.com/

A 10 - 30 dollar one will not suffice unless I attach it to one of those crappy RC cars that only go forward and back. Which I'll probably do for my little bro since hes got one.

But with this headset, I can also make a robotic arm, attach it to a quadriplegic (or Stephen Hawking) and give them an arm per-say.

Thanks for the reply.. I'd like them to appear as per the first sketch (like orange paint drips) It was the loss of colour info, and i think transparency that I don't understand. Why are they black?

Below, I have shown a Splash code. It generates a random splash on screen and whenever you click it drips down to screen. I have to this over a video feed so I have used PGraphics Layer without any background so that it can show the dripping effect but using PGraphics made it extremely slow so I used P3D render, thought it would make it run fast but it also not working and using P3D render loosed its transparency.

So I have two questions:

1. Is it possible to create Transparent PGraphics Layer with P3D render because I have found it is impossible (As I thought) . Whenever I try putting P3D render in testLayer = creategraphics(w,h,P3D); it shows a grey screen.

2. How to make it fast ? Because without any PGraphics and setting canvas background(-1) it run fast.

     ArrayList splatpoop;
     PGraphics testLayer;
     void setup()
     {
       size(400, 400, P3D);
       splatpoop = new ArrayList();
       testLayer = createGraphics(width, height, P3D);
     }
   
     void draw() {
       println(frameRate);
       background(-1);
       for (int i=0; i<splatpoop.size(); i++) {
         Splash s = (Splash) splatpoop.get(i);
         s.display();
         s.update();
       }
       testLayer.clear();
       image(testLayer,0,0);
     }
   
     void mousePressed() {
       color splc = (color) random(#000000);
       for (float i=3; i<29; i+=.35) {
         Splash sp = new Splash(mouseX, mouseY, i, splc);
         splatpoop.add(sp);
       }
     }
   
   
     class Splash {
       int x, y;
       float rad, angle, i;
       color c;
       Splash(int _x, int _y, float _i, color splc) {
         x = _x;
         y = _y;
         i = _i;
         rad = random(2, 50);
         angle = random(0, TWO_PI);
         c = splc;
       }
   
       void display() {
         testLayer.beginDraw();
         testLayer.fill(c);
         testLayer.noStroke();
         float spotX = x + cos(angle)*2*i;
         float spotY = y + sin(angle)*3*i;
         testLayer.ellipse(spotX, spotY, rad-i, rad-i+1.8);
         testLayer.endDraw();
       }
       void update() {
         y = y+1;
       }
     }
   

Extended question why this is not working ? It should capture the ellipse inside the polygon and leave the rest of them to slide down to the screen.

       ArrayList splatpoop;
      import java.util.*;
      Poly p;
      void setup() {
        size(500, 500);
        splatpoop = new ArrayList();
        //--------------------------
        int[] x = { 
          (int)random(20), (int)random(120), (int)random(320), (int)random(420), (int)random(250), (int)random(500)
          };
        int[] y = { 
          (int)random(500), (int)random(120), (int)random(320), (int)random(420), (int)random(250), (int)random(500)
          };
          p = new Poly(x, y, 6);
        background(-1);
        noStroke();
        //--------------------------
      }

      void draw() {
       background(-1);
        //--------------Splash holding inside the polygon------------------------
        fill(#FFE603);
        p.drawMe();
          for (int i=0; i<splatpoop.size(); i++) {
          Splash sp = (Splash) splatpoop.get(i);
          sp.display();
          sp.update();
          if (p.contains(sp.x, sp.y)) {
            sp.display();
          } 
          else {
            sp.update();
            if (sp.y>height) {
              splatpoop.remove(i);
            }
          }
        }
      }
      //-----------------------

      void mousePressed() {
        color splc = (color) random(#000000);
        for (float i=3; i<29; i+=.35) {
          Splash sp = new Splash(mouseX, mouseY, i, splc);
          splatpoop.add(sp);
        }
      }
      //-----------------------

      class Splash {
        int x, y;
        float rad, angle, i;
        color c;
        Splash(int _x, int _y, float _i, color splc) {
          x = _x;
          y = _y;
          i = _i;
          rad = random(2, 50);
          angle = random(0, TWO_PI);
          c = splc;
        }

        void display() {

          fill(c);
          noStroke();
          float spotX = x + cos(angle)*2*i;
          float spotY = y + sin(angle)*3*i;
          ellipse(spotX, spotY, rad-i, rad-i+1.8);

        }
        void update() {
          y = y+1;
        }
      }

      //---------------------------------------------
      class Poly extends java.awt.Polygon {
        public Poly(int[] x, int[] y, int n) {
          //call the java.awt.Polygon constructor
          super(x, y, n);
        }

        void drawMe() {
          beginShape();
          for (int i = 0; i < npoints; i++) {
            vertex(xpoints[i], ypoints[i]);
          }
          endShape(CLOSE);
        }
      }

There is no problem. It is just working fine on my system. I am using procesing 2.0.x on windows 7 64 bit system. It shows the drips pretty well but all in black color.

Try running your code on others system

So, I want to draw over a video, and managed to do it using topLayer. but when I try with this simple code for a kind of orange drip effect, the colour and transparency is lost, and I get solidish black "drips"

here is the drawing code I'd like to have appearing over a video

float x, y, r, g, b, radius;

int timer;

boolean sketchFullScreen() {

  return true;
}

void setup() {

  size(500, 500);

  background(0);

  noStroke();

  smooth();

  frame.setBackground(new java.awt.Color(0,0,0));
}

void draw() {
  // use frameCount to move x, use modulo to keep it within bounds
  y = frameCount % height;

  // use millis() and a timer to change the y every 2 seconds
  if (millis() - timer >= 6000+(random(2000)-2000)) {

    x = random(width);

    timer = millis();
  }


  r = (random(10) + 245);


  g= (random(100)+132);

  // use frameCount and noise to change the blue color component
  b = 155 - noise(1 + frameCount * 0.025) * 255;

  // use frameCount and noise to change the radius
  radius = noise(frameCount * 0.05) * 4;

  color c = color(r, g, b,(random(50)+50));
  fill(c);
  ellipse(x, y, radius, radius);
}

....................................................

this is my attempt to insert this over a video,

import processing.video.*; 

Movie myMovie; 
float x;
float y;
float r, g, b, radius;
int timer;


PGraphics topLayer;
boolean sketchFullScreen() {
  return true;
}

void setup() 
{ 
  size(960, 540); 
  myMovie = new Movie(this, "fall2.mov"); 
  myMovie.loop();
  topLayer = createGraphics(width, height);
  frame.setBackground(new java.awt.Color(0,0,0));
} 


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

void draw() 
{ 


  image(myMovie, 0,0, width, height);

  topLayer.beginDraw();
  // use frameCount to move x, use modulo to keep it within bounds
  y = frameCount % height;

  // use millis() and a timer to change the y every 2 seconds
  if (millis() - timer >= 6000+(random(2000)-2000)) {
    x = random(width);
    timer = millis();
  }


  r = (random(10) + 245);


  g= (random(100)+132);


  b = 155 - noise(1 + frameCount * 0.025) * 255;


  radius = noise(frameCount * 0.05) * 4;

  color c = color(r, g, b,(random(50)+50));
  topLayer.fill(c);

  topLayer.ellipse(x, y, radius, radius);

  topLayer.endDraw();
  image( topLayer, 0, 0 );


} 

............................

any help appreciated!