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

edited October 2014 in How To...

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?

Answers

  • Answer ✓

    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;   
       }
    }
    
  • edited September 2014 Answer ✓

    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;
      }
    }
    
  • Answer ✓
    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;
    }
    
  • Thank you everybody for helping me out! :) I'm gonna study all the codes and apply them.

    thank you again!

  • edited June 2015

    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_vk
    edited September 2014

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

    Screen Shot 2014-09-19 at 1.05.18 AM

  • edited June 2015

    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
    
  • edited October 2014

    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;
    }
    //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    
Sign In or Register to comment.