› › ›

How to create a pulsating particle system that is being built?

KevinKevin
edited September 2014 in How To...

Hello all,

I'm trying to put together a few ideas but I'm not sure how to execute them in code. I have some basic code down with the system that I want to pulse but I have no idea how get the circles to pulse (i.e. the radius of the circle slightly expands and contracts as a function of distance away from the center). I'm not sure what the best approach would be. Maybe an array which I can store each circles data and then I can call upon/edit that circles radius? Anyways, I'm not sure how to tackle this and if anyone can point me in the right direction that would be great!

int n = 1;
int c = 15;


void setup() {
  size(640,360);  
  background(255);
  noStroke();
}

void draw() {

  n++;
  float r = c*pow(n,.55);
  float radius = 10;
  float theta = n*PI*(3-sqrt(5));

  fill(62,map(r,1,width,0,255),138,200);

    pushMatrix();
      translate(width/2,height/2);
      ellipse(r*cos(theta)/4,r*sin(theta)/4,radius,radius);
      rotate(theta);
    popMatrix();

}
Tagged:

Best Answer

Answers

  • blykblyk 
    int n = 1;
int c = 15;


void setup() {
  size(640,360);  
  background(255);
  noStroke();
}
   float radius = 10;
void draw() {

  n++;
  float r = c*pow(n,0.55f);

  float theta = n*PI*(3-sqrt(5));

  fill(62,map(r,1,width,0,255),138,200);
    pushMatrix();
      translate(width/2,height/2);
      ellipse(r*cos(theta)/4,r*sin(theta)/4,radius-=0.05,radius-=0.05);
      rotate(theta);
    popMatrix();

}
  • KevinKevin

    That's pretty cool! But I was thinking of something more like this. But in the flower pattern where the wave propagates outward radially.

    float t=0;

void setup() {
  size(400,400);
  background(255);
  smooth();
  stroke(1);
  fill(0,50);
  strokeWeight(2);
}

void draw() {
  background(255);

  t = t + .05;


  for (int i=0; i<8; i++) {
    for (int j=0; j<8; j++) {
      float pulse = pow(sin(t*PI/3-i*PI/8),2);
      ellipse(width/4 + i*30, height/4 + j*30, 40*pulse, 40*pulse);
    }
  }
}
  • KevinKevin

    I suppose something like this. However I hadn't anticipated how the pulse pattern would propagate.

    int c = 16;
float t = 1;
int nprime = 1;

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

}

void draw() {
  t = pow(t,1.00001) + .1;
  nprime++;
  background(255);
  translate(width/2,height/2);
  circles();
}

void circles() {

  for (int n = 1; n < nprime*3; n++) {;
    float r = c*sqrt(n);
    float radius = 3;
    float theta = n*PI*(3-sqrt(5));
    fill(62,map(r/2,1,width,0,255),138,100);
    float pulse = pow(sin(t*PI/3-n*PI/8),1);
    ellipse(r*cos(theta)/4,r*sin(theta)/4,pulse*radius+6,pulse*radius+6);

  }
}
  • blykblyk

    oh! Sorry my bad ! :/ But yeah you got some cool effect though :) best of luck

  • GoToLoopGoToLoop
    edited September 2014 Answer ✓

    Nice pulsating spiral flower effect! I've publish it online: =:)
    http://studio.processingtogether.com/sp/pad/export/ro.90WsCogc75rxf/latest

    Made a CoffeeScript version of it too: :bz

    ###
* Pulsating Spiral Flower (v3.01.1)
* by  Kevin (2014/Apr)
* mod GoToLoop
*
* forum.processing.org/two/discussion/4266/
* how-to-create-a-pulsating-particle-system-that-is-being-built
*
* studio.processingtogether.com/sp/pad/export/ro.90WsCogc75rxf/latest
###


GAP = `020`; RAD = 3; EIGHTH_PI = Processing::QUARTER_PI/2.0
ang = 0

setup: ->

    size 500, 500, JAVA2D; frameRate 60; smooth 4
    do noStroke; ellipseMode CENTER
    
    ang = PI * (3 - sqrt 5)


draw: ->

    background -1; translate width>>1, height>>1
    do circles


circles = ->

    t = .1*THIRD_PI*frameCount; n = 3*frameCount

    while --n

        r = .25*GAP*sqrt n
        theta = n*ang
        pulse = 6 + RAD*sin t - n*EIGHTH_PI

        fill `0100`, map(r*2.0, 0, width, 0, `0400`), `0220`, `0200`
        ellipse r*cos(theta), r*sin(theta), pulse, pulse


    return
  • KevinKevin
    edited April 2014

    Ooh! Nice! I have been tweaking the code a bit more. This is what I came up with. There is a slight blur effect while the canvas spins. Also If you mess with the phase shift slightly the pulsing effect is a bit more pronounced (I'm talking about line 27 from the code above).

    float pulse = pow(sin(t*PI/3-n*PI/8),1);

    If you mess with the phase offset (i.e. n*PI/8) you can get the clusters of pulses to change more. I find values between 3 and 50 work best. You can also mess with the degree of the exponential in that function as well to get some interesting results. I combined a few of these techniques below with a modulo and raised the function to 1.5 power. It's pretty crazy!

    //Kevin Gutowski
//Friday April 11 2014
//A study of the golden ratio

int c = 16;
float t = 1;
int nprime = 1;

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

}

void draw() {
  t = pow(t,1.00001) + .1;
  nprime++;
  translate(width/2,height/2);
  rotate(PI*sin(t/50));
  fill(255,255,255,30);
  rect(-width/2,-height/2,width,height);

  circles();
}

void circles() {


  for (int n = 1; n < nprime*3; n++) {;
    float r = c*sqrt(n);
    float radius = 3;
    float theta = n*PI*(3-sqrt(5));
    fill(62,map(r/2,1,width,0,200),138,100);
    float pulse = pow(sin(t*PI/3-n*PI/(t%100)),1.5);
    pushMatrix();
    ellipse(r*cos(theta)/4,r*sin(theta)/4,pulse*radius+6,pulse*radius+6);
    popMatrix();
  }
}
  • KevinKevin

    Hey GoToLoop! I appreciate the mod a ton! I was just wondering if you could put a url to my website when you credit me? I need to start putting it in the code that I put online (still pretty new at Processing). I'm over at http://www.ocf.berkeley.edu/~keving/

    Thanks!

Sign In or Register to comment.