coding noob needs help: how do I draw an expanding circle that triggers with a mouse click?

costi6

Hi, I'm new at processing, so it may be an easy question for you veterans:

I'm trying to code a "water circle effect", you know, a drop falls on a water surface and generates waves. In my case It must be super simple: 3 circles that expand after you click the canvas.

so far I managed to code so that the circles expands when i press the mouse and keep it pressed with this code:

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


int radio = 10;

void draw() {

  background (185, 229, 255);
  fill(185, 229, 255); 



  if (mousePressed == true) { 
    noFill(); 
    stroke(18, 163, 250); 
    ellipse(mouseX, mouseY, (radio/4), (radio/4));
    noFill(); 
    stroke(18, 163, 250); 
    ellipse(mouseX, mouseY, (radio/2), (radio/2));
    noFill();
    stroke(18, 163, 250);
    ellipse(mouseX, mouseY, radio, radio); 
    radio++;} 
    if (mousePressed == false){
    radio = 10;}

}

But i'd like the circles to keep expanding after i release the mouse button.

Could anyone help me out, please?

jas0501

This is closer to what you want but it reverses direction on alternate mouse releases.

void setup() 
{ 
  size (500, 500); 
  smooth();
  radio = 4; // <====== Need to establish initial value =============
}

int radio = 10;
int incr = 0;
void draw() 
{
  background (185, 229, 255); 
  fill(185, 229, 255);
  noFill(); 
  stroke(18, 163, 250); 
  ellipse(mouseX, mouseY, (radio/4), (radio/4));
  noFill(); 
  stroke(18, 163, 250);
  ellipse(mouseX, mouseY, (radio/2), (radio/2));
  noFill();
  stroke(18, 163, 250);
  ellipse(mouseX, mouseY, radio, radio); 
  radio += incr;
}
void mouseReleased()
{
  if (incr == 0)
 {
    incr =1;
 }
   else
   {
    incr *= -1;   
   }
}

GoToLoop

I've made own version. But it's more complex, b/c it uses 2 classes.
1 to define a Wave and the other to group 3 of it as a WaveTrio! <:-P

You can play it online at the link below:
http://studio.processingtogether.com/sp/pad/export/ro.9lTJ6qSlmCidk/latest

And here's the source. Don't fret to ask for any doubts about how it works: :-j

/**
 * Wave Trios (v1.31)
 * by  GoToLoop (2014/Jun)
 * for Costi6
 *
 * forum.processing.org/two/discussion/5615/
 * coding-noob-needs-help-how-do-i-draw-an-expanding-circle-
 * that-triggers-with-a-mouse-click
 *
 * studio.processingtogether.com/sp/pad/export/ro.9lTJ6qSlmCidk/latest
 */

static final short DIAM = 050, GROWTH = 6;
static final short FPS  = 60, QUALITY = 0;
static final color BG = #BAE5FF;

final ArrayList<WaveTrio> trios = new ArrayList();

void setup() {
  size(600, 600, JAVA2D);
  frameRate(FPS);
  smooth(QUALITY);
  ellipseMode(CENTER);

  noFill();
  stroke(Wave.OUTLINE);
  strokeWeight(Wave.WEIGHT);
}

void draw() {
  background(BG);

  for (int len = trios.size(), i = len; i-- != 0;)
    if (trios.get(i).script()) {
      trios.set(i, trios.get(--len));
      trios.remove(len);
    }

  if (!online)  frame.setTitle("Wave Trios: #" + nf(trios.size(), 2)
    + "\t\tFrame Rate: #" + round(frameRate));
}

void mousePressed() {
  trios.add(new WaveTrio(mouseX, mouseY, DIAM, ceil(random(1, GROWTH))));
}

class WaveTrio {
  final ArrayList<Wave> waves =
    online? new ArrayList() : new ArrayList(3);

  WaveTrio(int x, int y, int d, int e) {
    for (int i = 0; i != 3; waves.add(new Wave(x, y, d << i++, e)));
  }

  boolean script() {
    for (int i = waves.size(); i-- != 0;)
      if (waves.get(i).script())  waves.remove(i);

    return waves.size() == 0;
  }
}

class Wave {
  static final color OUTLINE = #10A0FA;
  static final float WEIGHT  = 2.0, LIMIT = 1.3;

  final short x, y; // coords. (x & y)
  short d;          // diameter
  final short e;    // expansion

  Wave(int xx, int yy, int dd, int ee) {
    x = (short) xx;
    y = (short) yy;
    d = (short) dd;
    e = (short) ee;
  }

  boolean script() {
    update();
    display();
    return gotTooBig();
  }

  void update() {
    d += e;
  }

  void display() {
    ellipse(x, y, d, d);
  }

  boolean gotTooBig() {
    return d > width*LIMIT;
  }
}

blyk

boolean grow = false;
int rad = 10;
void setup() {
  size (500, 500);
}

void draw() {
  background (-1);
  fill(#FF1C61,20); 
  if (grow) rad++;
  ellipse(mouseX, mouseY, rad, rad);
  ellipse(mouseX, mouseY, rad/2, rad/2);
  ellipse(mouseX, mouseY, rad/4, rad/4);
}

void mousePressed() {
  grow = true;
}

costi6

Thank you everybody for helping me out! :) I'm gonna study all the codes and apply them.

thank you again!

GoToLoop

CoffeeScript Mode version: ~O)

---

###
 * Wave Trios (v1.31.2)
 * by  GoToLoop (2014/Jun)
 * for Costi6
 *
 * forum.processing.org/two/discussion/5615/
 * coding-noob-needs-help-how-do-i-draw-an-expanding-circle-
 * that-triggers-with-a-mouse-click
 *
 * studio.processingtogether.com/sp/pad/export/ro.9lTJ6qSlmCidk/latest
###


DIAM  = `050`; GROWTH = 6; FPS = 60; QUALITY = 0; BG = 0xffBAE5FF
trios = []


setup: ->

  size 600, 600, JAVA2D; frameRate FPS; smooth QUALITY; ellipseMode CENTER
  do noFill; stroke Wave::OUTLINE; strokeWeight Wave::WEIGHT


draw: ->

  background BG

  i = len = trios.length; while i--
      if do trios[i].script then trios[i] = trios[--len]; do trios.pop

  frame.setTitle "Wave Trios: ##{nf trios.length, 2}" +
      "\t\tFrame Rate: ##{round frameRate}"  unless online


mousePressed: ->

  trios.push new WaveTrio mouseX, mouseY, DIAM, ceil random 1, GROWTH

---

class WaveTrio

  constructor: (x, y, d, e) ->

      @waves = Array 3
      @waves[i] = new Wave x, y, d<<i, e  for i in [0...3]


  script: ->

      i = @waves.length; while i--
          do @waves.pop  if do @waves[i].script

      not @waves.length


class Wave

  OUTLINE: 0xff10A0FA; WEIGHT: 2; LIMIT: 1.3

  constructor: (@x, @y, @d, @e) ->

  script:    -> do @update; do @display; do @gotTooBig

  update:    -> @d += @e
  display:   -> ellipse @x, @y, @d, @d
  gotTooBig: -> @d > width*Wave::LIMIT

---

_vk

When I load this page it gives me this alert 3 or 4 times then settle... Safari 7.0.6

GoToLoop

Tell that to those responsible to this forum's scripts to fix the odious @ bug! >:P
And while at it, add support to <pre lang="coffeescript"> SyntaxHighlighter too!
It's an official Processing Mode, ya know? :-t

I've tried to place each code line inside ``, but I've lost indentation! :-q
And just like Python, indentation replaces curly brace blocks {}! #-o

class WaveTrio

    constructor: (x, y, d, e) ->
        @waves = []; @waves.push new Wave x, y, d<<i, e  for i in [0...3]


    script: ->

        i = @waves.length; while i--
            do @waves.pop  if do @waves[i].script

        !@waves.length


class Wave
  
    OUTLINE: 0xff10A0FA; WEIGHT: 2; LIMIT: 1.3

    constructor: (@x, @y, @d, @e) ->

    script:    -> do @update; do @display; do @gotTooBig

    update:    -> @d += @e
    display:   -> ellipse @x, @y, @d, @d
    gotTooBig: -> @d > width*Wave::LIMIT

GoToLoop

And finally, the p5js version! Just paste it in any http://p5js.org/reference/ editable example: o->

/**
 * Wave Trios (v1.31.3)
 * by  GoToLoop (2014/Jun)
 * for Costi6
 *
 * forum.processing.org/two/discussion/5615/
 * coding-noob-needs-help-how-do-i-draw-an-expanding-circle-
 * that-triggers-with-a-mouse-click
 *
 * studio.processingtogether.com/sp/pad/export/ro.9lTJ6qSlmCidk/latest
 */

///////////////////////////////////////////////////////////////////////
const DIAM  = 050, GROWTH = 6, FPS = 60, QUALITY = 0;
const trios = [],  BG = freeze([0xBA, 0xE5, 0xFF]);
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

///////////////////////////////////////////////////////////////////////
function setup() {
  freeze(createCanvas(600, 600));
  frameRate(FPS).smooth(QUALITY).ellipseMode(CENTER);

  noFill();
  stroke(Wave.prototype.OUTLINE);
  strokeWeight(Wave.prototype.WEIGHT);
}

function draw() {
  background(BG);

  for (var i = trios.length; i--;)  if (trios[i].script())
    trios[i] = trios[trios.length-1], --trios.length;
}

function mousePressed() {
  trios.push( new WaveTrio(mouseX, mouseY, DIAM, ceil(random(1, GROWTH))) );
}
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

///////////////////////////////////////////////////////////////////////
function WaveTrio(x, y, d, e) {
  this.waves = Array(3);
  for (var i = 0; i != 3; this.waves[i] = new Wave(x, y, d << i++, e));
  freeze(this);
}

WaveTrio.prototype.script = function() {
  for (var i = this.waves.length; i--;)
    if (this.waves[i].script())  --this.waves.length;

  return !this.waves.length;
};

freeze(WaveTrio);
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

///////////////////////////////////////////////////////////////////////
function Wave(x, y, d, e) {
  this.x = x, this.y = y, this.d = d, this.e = e;
  seal(this);
}

Wave.prototype.OUTLINE = [0x10, 0xA0, 0xFA];
Wave.prototype.WEIGHT  = 2, Wave.prototype.LIMIT = 1.3;

Wave.prototype.script = function() {
  this.update();
  this.display();
  return this.gotTooBig();
};

Wave.prototype.update = function() {
  this.d += this.e;
};

Wave.prototype.display = function() {
  ellipse(this.x, this.y, this.d, this.d);
};

Wave.prototype.gotTooBig = function() {
  return this.d > width*Wave.prototype.LIMIT;
};

freeze(Wave);
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

///////////////////////////////////////////////////////////////////////
function isObj(obj) {
  return obj instanceof Object;
}

function freeze(obj) {
  if (!isObj(obj))  return obj;
  Object.freeze(obj);
  return freezeProto(obj);
}

function seal(obj) {
  if (!isObj(obj))  return obj;
  Object.seal(obj);
  return freezeProto(obj);
}

function freezeProto(obj) {
  const proto = obj.prototype;
  if (!isObj(proto))  return obj;
  Object.freeze(proto);

  Object.getOwnPropertyNames(proto)
    .filter (function(key) { return isObj (proto[key]); })
    .forEach(function(key) { Object.freeze(proto[key]); });

  return obj;
}
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\