Fading and Rotating - Newbie Help

edited November 2014 in Questions about Code

Hi all,

I'm trying to get the following going. Perhaps someone could be of assistance.

I'd like to have the first Outer Circle rotate clockwise and disappear while the second outer circle appears then disappears rotating counter clockwise. All the while the inner circle fades from the outside in making it appear to grow and get smaller.

Any suggestions ? Below is my code

All I've seemed to manage is the rotation of the entire image which is not ideal :\ Many thanks

int i = 0;
float x;
float y;
float angle = 1000;
float r = 5000;
float diff = 5000;

void setup() {
  size(600,600);
  smooth();
  background(0);
}

void draw() {

  /** Outer Circle */

  background(0);
  translate(width/2,height/2);
  for(int i= 0; i<150;i++){
    rotate(r);
    rotate(TWO_PI/150);
    ellipse(100,100,4,4);
    ellipse(103,103,4,4);
    ellipse(105,105,4,4);
    ellipse(107,107,4,4);
    ellipse(109,109,4,4);
    ellipse(111,111,4,4);
    ellipse(113,113,4,4);
    ellipse(115,115,4,4);
    ellipse(117,117,4,4);
    stroke(1);
    strokeWeight(2);

    /** Second Outer */

    rotate(TWO_PI/172);
    ellipse(128,128,5,5);
    ellipse(131,131,5,5);
    ellipse(133,133,5,5);
    ellipse(135,135,5,5);
    ellipse(137,137,5,5);
    ellipse(139,139,5,5);
    ellipse(141,141,5,5);
    ellipse(143,143,5,5);
    ellipse(145,145,5,5);
    stroke(1);
    strokeWeight(2);

    /** Inner circle */

    rotate(TWO_PI/50);
    ellipse(4,4,4,4);
    ellipse(6,6,4,4);
    ellipse(8,8,4,4);
    ellipse(10,10,4,4);
    ellipse(12,12,4,4);
    ellipse(14,14,4,4);
    ellipse(16,16,4,4);
    ellipse(18,18,4,4);
    ellipse(20,20,4,4);
    ellipse(22,22,4,4);
    ellipse(24,24,4,4);
    ellipse(26,26,4,4);
    ellipse(28,28,4,4);
    ellipse(30,30,4,4);
    ellipse(32,32,4,4);
    ellipse(34,34,4,4);
    ellipse(36,36,4,4);
    ellipse(38,38,4,4);
    ellipse(40,40,4,4);
    ellipse(42,42,4,4);
    ellipse(44,44,4,4);
    ellipse(46,46,4,4);
    ellipse(48,48,4,4);
    ellipse(50,50,4,4);
    ellipse(53,53,4,4);
    ellipse(56,56,4,4);
    ellipse(58,58,4,4);
    ellipse(60,60,4,4);
    ellipse(62,62,4,4);
    ellipse(64,64,4,4);
    ellipse(66,66,4,4);
    ellipse(68,68,4,4);
    ellipse(70,70,4,4);
    ellipse(72,72,4,4);
    ellipse(74,74,4,4);
    ellipse(76,76,4,4);
    ellipse(78,78,4,4);
    ellipse(80,80,4,4);
    ellipse(82,82,4,4);
    ellipse(84,84,4,4);
    stroke(1);
    strokeWeight(2);
  }

  angle = angle =1000;
  r = r - diff;

  if ( r == 0 || r == 1000) {
    diff =  diff * 5;
  }
}

Answers

  • edited October 2014 Answer ✓

    before copy and paste here, hit ctrl-t in processing IDE, it auto-formats your code (indents)

    also for properly posting code here, pls read "To newcomers in this forum: read attentively these instructions"

    Chrisir ;-)

  • Answer ✓
    ellipse(4,4,4,4);
    ellipse(6,6,4,4);
    ellipse(8,8,4,4);
    ellipse(10,10,4,4);
    ellipse(12,12,4,4);
    ellipse(14,14,4,4);
    ellipse(16,16,4,4);
    ellipse(18,18,4,4);
    ellipse(20,20,4,4);
    ellipse(22,22,4,4);
    ellipse(24,24,4,4);
    ellipse(26,26,4,4);
    ellipse(28,28,4,4);
    ....
    ellipse(84,84,4,4);
    

    see these, they all go up by two each time. you could write a loop, replace that whole block with 3 lines...

  • thanks. Any suggestions on how to get the animation going ?

  • @Chrisir I accidentally marked your responses as answered . Is there a way to fix ? I wouldn't want this question to be overlooked. Thx !

  • I don't know...

    write a personal message to Philho please

  • edited October 2014

    Hello,

    programming is a lot about breaking down a complex problem into single steps. Each step then becomes simple. You got three circles, tackle them one by one. So I separated them into three different sub-functions. The circles also have different colors now. So you can see which circle you change.

    Also these lines

      angle = angle =1000;
      r = r - diff;
    
      if ( r == 0 || r == 1000) {
        diff =  diff * 5;
      }
    

    do in fact not belong into draw() but into the sub-function that is using them. Have a separate r and angle for each circle please (like r1,angle1, r2, angle2, r3, angle3). When all works, you can start optimizing but never before.

    pushMatrix and popMatrix

    Also another trick is to use pushMatrix and popMatrix. With those you isolate the circles from each other in terms of scaling and rotating (see reference). Now you can therefore rotate each circle individually.

    I didn't solve the thing, I just wanted to give you some input.

    Best, Chrisir ;-)

    int i = 0;
    float x;
    float y;
    float angle = 1000;
    float r = 5000;
    float r2 = 5000;
    float diff = 5000;
    float scaleInner = 0.0;
    
    void setup() {
      size(600, 600);
      smooth();
      background(0);
    }
    
    void draw() {
    
      background(0);
      translate(width/2, height/2);
    
      /** Outer Circle */
      firstOuter();
      secondOuter();
      /** Inner circle */
      innerCircle();
    
      angle = angle =1000;
      r = r - diff;
    
      if ( r == 0 || r == 1000) {
        diff =  diff * 5;
      }
    } // func
    
    // ----------------------------------------------
    
    void firstOuter() {
    
      // this is the second ring counted from outside !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
      pushMatrix();
    
      stroke(255, 2, 255); // blue 
    
      for (int i= 0; i<150;i++) {
    
        rotate(r);
        rotate(TWO_PI/150); // why two rotate ??????????????????????????
    
        ellipse(100, 100, 4, 4);
        ellipse(103, 103, 4, 4);
        ellipse(105, 105, 4, 4);
        ellipse(107, 107, 4, 4);
        ellipse(109, 109, 4, 4);
        ellipse(111, 111, 4, 4);
        ellipse(113, 113, 4, 4);
        ellipse(115, 115, 4, 4);
        ellipse(117, 117, 4, 4);
        //    stroke(1);
        //    strokeWeight(2);
      }
      popMatrix();
    }
    
    
    void secondOuter() {
    
      /** Second Outer */
    
      // this is the 1st ring counted from outside !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
      stroke(1, 255, 0); //  GREEN
      pushMatrix();
    
      rotate(radians(r2));
    
      for (int i= 0; i<150;i++) {   
    
        ellipse(128, 128, 5, 5);
        ellipse(131, 131, 5, 5);
        ellipse(133, 133, 5, 5);
        ellipse(135, 135, 5, 5);
        ellipse(137, 137, 5, 5);
        ellipse(139, 139, 5, 5);
        ellipse(141, 141, 5, 5);
        ellipse(143, 143, 5, 5);
        ellipse(145, 145, 5, 5);
        //    stroke(1);
        //    strokeWeight(2);
      } // for
      popMatrix();
      r2--;
    } // func 
    
    void innerCircle() {
    
      stroke(255, 2, 2);
    
      pushMatrix();
    
    
      scale (scaleInner); 
    
      for (int i= 0; i<150;i++) {   
    
    
    
        rotate(TWO_PI/50);
    
        ellipse(4, 4, 4, 4);
        ellipse(6, 6, 4, 4);
        ellipse(8, 8, 4, 4);
        ellipse(10, 10, 4, 4);
        ellipse(12, 12, 4, 4);
        ellipse(14, 14, 4, 4);
        ellipse(16, 16, 4, 4);
        ellipse(18, 18, 4, 4);
        ellipse(20, 20, 4, 4);
        ellipse(22, 22, 4, 4);
        ellipse(24, 24, 4, 4);
        ellipse(26, 26, 4, 4);
        ellipse(28, 28, 4, 4);
        ellipse(30, 30, 4, 4);
        ellipse(32, 32, 4, 4);
        ellipse(34, 34, 4, 4);
        ellipse(36, 36, 4, 4);
        ellipse(38, 38, 4, 4);
        ellipse(40, 40, 4, 4);
        ellipse(42, 42, 4, 4);
        ellipse(44, 44, 4, 4);
        ellipse(46, 46, 4, 4);
        ellipse(48, 48, 4, 4);
        ellipse(50, 50, 4, 4);
        ellipse(53, 53, 4, 4);
        ellipse(56, 56, 4, 4);
        ellipse(58, 58, 4, 4);
        ellipse(60, 60, 4, 4);
        ellipse(62, 62, 4, 4);
        ellipse(64, 64, 4, 4);
        ellipse(66, 66, 4, 4);
        ellipse(68, 68, 4, 4);
        ellipse(70, 70, 4, 4);
        ellipse(72, 72, 4, 4);
        ellipse(74, 74, 4, 4);
        ellipse(76, 76, 4, 4);
        ellipse(78, 78, 4, 4);
        ellipse(80, 80, 4, 4);
        ellipse(82, 82, 4, 4);
        ellipse(84, 84, 4, 4);
      } // for 
      //  stroke(1);
      //  strokeWeight(2);
      scaleInner+=.01;
      popMatrix();
    }
    
    //
    
  • instead of using simple lines, you use a lot of ellipses that look like lines...

    when you are into maths you can calculate the lines easily (and use lines instead of ellipses)

    with strokeWeight you can make the lines thicker

    float point1x, point1y, 
    point2x, point2y;
    
    void setup() {
      size(600, 600);
      smooth();
      background(0);
    }
    
    void draw() {
    
      background(0);
      translate(width/2, height/2);
      stroke(255);
    
      for (int i= 0; i<360;i+=4) {
    
        point1x = 70 * cos (radians(i)); 
        point1y = 70 * sin (radians(i));
        point2x = 90 * cos (radians(i)); 
        point2y = 90 * sin (radians(i));
    
        line (point1x, point1y, point2x, point2y);
      } // for
    } // func
    
  • Thanks @Chrisir ! This explains a lot. How would I stop the radials in the center circle from expanding ? Is there a way to do this ? That is - stopping them once they reach the first circle then having them come back in to the center ?

  • edited October 2014

    How would I stop the radials in the center circle from expanding

    instead of scaleInner+=.01;

    say scaleInner+= myscaleInnerAddValue;

    before setup() have float myscaleInnerAddValue = 0.01;

    Then

    once scaleInner > 200 say myscaleInnerAddValue = myscaleInnerAddValue * -1;

    once scaleInner < 10 say myscaleInnerAddValue = myscaleInnerAddValue * -1;

    so it becomes a negative value or a positive one, so scaleInner grows or shrinks

  • that's a simple bouncing trick

    you just change the value you are adding to the size (once the size is getting too small or too big)

  • hm I see.. How am I adding the following statements :

    once scaleInner > 200 say myscaleInnerAddValue = myscaleInnerAddValue * -1; once scaleInner < 10 say myscaleInnerAddValue = myscaleInnerAddValue * -1;

    Would I make these conditional ? Sorry total newbie here.

  • yes, conditional

    scaleInner+= myscaleInnerAddValue;
    
    if (scaleInner > 200) { myscaleInnerAddValue = myscaleInnerAddValue * -1; }
    
    if (scaleInner < 10) { myscaleInnerAddValue = myscaleInnerAddValue * -1; }
    
  • edited October 2014

    or a little more advanced (abs() just always gives you the positive value of a number)

    scaleInner+= myscaleInnerAddValue;
    
    if (scaleInner > 200) { 
      // now let's make our add-value negative
      myscaleInnerAddValue = abs(myscaleInnerAddValue) * -1;
    }
    
    if (scaleInner < 10) { 
      // now let's make our add-value positive
      myscaleInnerAddValue = abs(myscaleInnerAddValue);
    }
    
  • doesn't seem to be working. It's still expanding outside of the first outer circle until the edges of the screen.

  • here

    int i = 0;
    float x;
    float y;
    float angle = 1000;
    float r = 5000;
    float r2 = 5000;
    float diff = 5000;
    
    float scaleInner = 0.0;
    float myscaleInnerAddValue = 0.03;
    
    void setup() {
      size(600, 600);
      smooth();
      background(0);
    }
    
    void draw() {
    
      background(0);
      translate(width/2, height/2);
    
      /** Outer Circle */
      firstOuter();
      secondOuter();
      /** Inner circle */
      innerCircle();
    
      angle = angle =1000;
      r = r - diff;
    
      if ( r == 0 || r == 1000) {
        diff =  diff * 5;
      }
    } // func
    
    // ----------------------------------------------
    
    void firstOuter() {
    
      // this is the second ring counted from outside !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
      pushMatrix();
    
      stroke(255, 2, 255); // blue 
    
      for (int i= 0; i<150;i++) {
    
        rotate(r);
        rotate(TWO_PI/150); // why two rotate ??????????????????????????
    
        ellipse(100, 100, 4, 4);
        ellipse(103, 103, 4, 4);
        ellipse(105, 105, 4, 4);
        ellipse(107, 107, 4, 4);
        ellipse(109, 109, 4, 4);
        ellipse(111, 111, 4, 4);
        ellipse(113, 113, 4, 4);
        ellipse(115, 115, 4, 4);
        ellipse(117, 117, 4, 4);
        //    stroke(1);
        //    strokeWeight(2);
      }
      popMatrix();
    }
    
    
    void secondOuter() {
    
      /** Second Outer */
    
      // this is the 1st ring counted from outside !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
      stroke(1, 255, 0); //  GREEN
      pushMatrix();
    
      rotate(radians(r2));
    
      for (int i= 0; i<150;i++) {   
    
        ellipse(128, 128, 5, 5);
        ellipse(131, 131, 5, 5);
        ellipse(133, 133, 5, 5);
        ellipse(135, 135, 5, 5);
        ellipse(137, 137, 5, 5);
        ellipse(139, 139, 5, 5);
        ellipse(141, 141, 5, 5);
        ellipse(143, 143, 5, 5);
        ellipse(145, 145, 5, 5);
        //    stroke(1);
        //    strokeWeight(2);
      } // for
      popMatrix();
      r2--;
    } // func 
    
    void innerCircle() {
    
      stroke(255, 2, 2);
    
      pushMatrix();
    
      scale (scaleInner); 
    
      for (int i= 0; i<150;i++) {   
    
        rotate(TWO_PI/50);
    
        ellipse(4, 4, 4, 4);
        ellipse(6, 6, 4, 4);
        ellipse(8, 8, 4, 4);
        ellipse(10, 10, 4, 4);
        ellipse(12, 12, 4, 4);
        ellipse(14, 14, 4, 4);
        ellipse(16, 16, 4, 4);
        ellipse(18, 18, 4, 4);
        ellipse(20, 20, 4, 4);
        ellipse(22, 22, 4, 4);
        ellipse(24, 24, 4, 4);
        ellipse(26, 26, 4, 4);
        ellipse(28, 28, 4, 4);
        ellipse(30, 30, 4, 4);
        ellipse(32, 32, 4, 4);
        ellipse(34, 34, 4, 4);
        ellipse(36, 36, 4, 4);
        ellipse(38, 38, 4, 4);
        ellipse(40, 40, 4, 4);
        ellipse(42, 42, 4, 4);
        ellipse(44, 44, 4, 4);
        ellipse(46, 46, 4, 4);
        ellipse(48, 48, 4, 4);
        ellipse(50, 50, 4, 4);
        ellipse(53, 53, 4, 4);
        ellipse(56, 56, 4, 4);
        ellipse(58, 58, 4, 4);
        ellipse(60, 60, 4, 4);
        ellipse(62, 62, 4, 4);
        ellipse(64, 64, 4, 4);
        ellipse(66, 66, 4, 4);
        ellipse(68, 68, 4, 4);
        ellipse(70, 70, 4, 4);
        ellipse(72, 72, 4, 4);
        ellipse(74, 74, 4, 4);
        ellipse(76, 76, 4, 4);
        ellipse(78, 78, 4, 4);
        ellipse(80, 80, 4, 4);
        ellipse(82, 82, 4, 4);
        ellipse(84, 84, 4, 4);
      } // for 
      //  stroke(1);
      //  strokeWeight(2);
      //  scaleInner+=.01;
    
      popMatrix();
    
      scaleInner+= myscaleInnerAddValue;
      println(scaleInner);
    
      if (scaleInner > 1.1) {
        // now let's make our add-value negative
        myscaleInnerAddValue = abs(myscaleInnerAddValue) * -1;
      }
    
      if (scaleInner < 0.1) {
        // now let's make our add-value positive
        myscaleInnerAddValue = abs(myscaleInnerAddValue);
      }
    }
    
    //
    
  • 200 was too big, correct was 1.1

    ;-)

  • You're wonderful ! Thanks a mil...

    final question, why was the 2nd outer circle removed ? Is there a way to have it rotate in that same direction and still remain showing ? That is - not appear as a line ?

  • edited October 2014

    is the direction of your circle correct?

    btw one thing about programming is using the right terms... e.g. your firstOuter circle is the second ring counted from outside... so maybe find a better name... or write a comment at the start of the sketch - and remove my comment....

    ;-)

    int i = 0;
    float x;
    float y;
    float angle = 1000;
    float r = 5000;
    float r2 = 5000;
    float r2a = 2.4;
    float diff = 5000;
    
    float scaleInner = 0.0;
    float myscaleInnerAddValue = 0.03;
    
    void setup() {
      size(600, 600);
      smooth();
      background(0);
    }
    
    void draw() {
    
      background(0);
      translate(width/2, height/2);
    
      /** Outer Circle */
      firstOuter();
      secondOuter();
      /** Inner circle */
      innerCircle();
    
      angle = angle =1000;
      r = r - diff;
    
      if ( r == 0 || r == 1000) {
        diff =  diff * 5;
      }
    } // func
    
    // ----------------------------------------------
    
    void firstOuter() {
    
      // this is the second ring counted from outside !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
      pushMatrix();
    
      stroke(255, 2, 255); // blue 
    
      for (int i= 0; i<150;i++) {
    
        rotate(r);
        rotate(TWO_PI/150); // why two rotate ??????????????????????????
    
        ellipse(100, 100, 4, 4);
        ellipse(103, 103, 4, 4);
        ellipse(105, 105, 4, 4);
        ellipse(107, 107, 4, 4);
        ellipse(109, 109, 4, 4);
        ellipse(111, 111, 4, 4);
        ellipse(113, 113, 4, 4);
        ellipse(115, 115, 4, 4);
        ellipse(117, 117, 4, 4);
        //    stroke(1);
        //    strokeWeight(2);
      }
      popMatrix();
    }
    
    
    void secondOuter() {
    
      /** Second Outer */
    
      // this is the 1st ring counted from outside !!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
      stroke(1, 255, 0); //  GREEN
      pushMatrix();
    
      rotate(radians(r2));
    
      for (int i= 0; i<150;i++) {   
    
        rotate(radians(r2a));
    
        ellipse(128, 128, 5, 5);
        ellipse(131, 131, 5, 5);
        ellipse(133, 133, 5, 5);
        ellipse(135, 135, 5, 5);
        ellipse(137, 137, 5, 5);
        ellipse(139, 139, 5, 5);
        ellipse(141, 141, 5, 5);
        ellipse(143, 143, 5, 5);
        ellipse(145, 145, 5, 5);
        //    stroke(1);
        //    strokeWeight(2);
      } // for
      popMatrix();
      r2--;
    } // func 
    
    void innerCircle() {
    
      stroke(255, 2, 2);
    
      pushMatrix();
    
      scale (scaleInner); 
    
      for (int i= 0; i<150;i++) {   
    
        rotate(TWO_PI/50);
    
        ellipse(4, 4, 4, 4);
        ellipse(6, 6, 4, 4);
        ellipse(8, 8, 4, 4);
        ellipse(10, 10, 4, 4);
        ellipse(12, 12, 4, 4);
        ellipse(14, 14, 4, 4);
        ellipse(16, 16, 4, 4);
        ellipse(18, 18, 4, 4);
        ellipse(20, 20, 4, 4);
        ellipse(22, 22, 4, 4);
        ellipse(24, 24, 4, 4);
        ellipse(26, 26, 4, 4);
        ellipse(28, 28, 4, 4);
        ellipse(30, 30, 4, 4);
        ellipse(32, 32, 4, 4);
        ellipse(34, 34, 4, 4);
        ellipse(36, 36, 4, 4);
        ellipse(38, 38, 4, 4);
        ellipse(40, 40, 4, 4);
        ellipse(42, 42, 4, 4);
        ellipse(44, 44, 4, 4);
        ellipse(46, 46, 4, 4);
        ellipse(48, 48, 4, 4);
        ellipse(50, 50, 4, 4);
        ellipse(53, 53, 4, 4);
        ellipse(56, 56, 4, 4);
        ellipse(58, 58, 4, 4);
        ellipse(60, 60, 4, 4);
        ellipse(62, 62, 4, 4);
        ellipse(64, 64, 4, 4);
        ellipse(66, 66, 4, 4);
        ellipse(68, 68, 4, 4);
        ellipse(70, 70, 4, 4);
        ellipse(72, 72, 4, 4);
        ellipse(74, 74, 4, 4);
        ellipse(76, 76, 4, 4);
        ellipse(78, 78, 4, 4);
        ellipse(80, 80, 4, 4);
        ellipse(82, 82, 4, 4);
        ellipse(84, 84, 4, 4);
      } // for 
      //  stroke(1);
      //  strokeWeight(2);
      //  scaleInner+=.01;
    
      popMatrix();
    
      scaleInner+= myscaleInnerAddValue;
      println(scaleInner);
    
      if (scaleInner > 1.1) {
        // now let's make our add-value negative
        myscaleInnerAddValue = abs(myscaleInnerAddValue) * -1;
      }
    
      if (scaleInner <= 0.2) {
        // now let's make our add-value positive
        myscaleInnerAddValue = abs(myscaleInnerAddValue);
      }
    }
    
    //
    
  • Got it ! Thanks again for your help ! I've been scratching my head for hours :)

  • maybe it looks better with noStroke(); plus fill(color...);

    no outline for the ellipses, just filling them

    I also did some house cleaning...

    // int i = 0;
    //float x;
    //float y;
    //float angle = 1000;
    
    float r = 5000;
    float r2 = 5000;
    float r2a = 2.4;
    
    //float diff = 5000;
    
    float scaleInner = 0.0;
    float myscaleInnerAddValue = 0.03;  // speed of the grow/shrink 
    
    void setup() {
      size(600, 600);
      smooth();
      background(0);
    }
    
    void draw() {
    
      background(0);
      translate(width/2, height/2);
    
      /** Outer Circles */
      firstOuter();
      secondOuter();
      /** Inner circle */
      innerCircle();
    
      //  angle = angle =1000;
      //  r = r - diff;
      //
      //  if ( r == 0 || r == 1000) {
      //    diff =  diff * 5;
      //  }
    } // func
    
    // ----------------------------------------------
    
    void firstOuter() {
    
      // this is the 1st outer ring counted from inside 
    
      pushMatrix();
    
      fill(255, 2, 255); // 
      noStroke(); 
    
      for (int i= 0; i<150;i++) {
    
        rotate(r);
        rotate(TWO_PI/150); // why two rotate ??????????????????????????
    
        ellipse(100, 100, 4, 4);
        ellipse(103, 103, 4, 4);
        ellipse(105, 105, 4, 4);
        ellipse(107, 107, 4, 4);
        ellipse(109, 109, 4, 4);
        ellipse(111, 111, 4, 4);
        ellipse(113, 113, 4, 4);
        ellipse(115, 115, 4, 4);
        ellipse(117, 117, 4, 4);
        //    stroke(1);
        //    strokeWeight(2);
      }
      popMatrix();
    }
    
    
    void secondOuter() {
    
      /** Second Outer */
    
      // this is the 2nd outer ring counted from inside
    
      fill(1, 255, 0); //  GREEN
      noStroke();
    
      pushMatrix();
    
      rotate(radians(r2));
    
      for (int i= 0; i<150;i++) {   
    
        rotate(radians(r2a));
    
        ellipse(128, 128, 5, 5);
        ellipse(131, 131, 5, 5);
        ellipse(133, 133, 5, 5);
        ellipse(135, 135, 5, 5);
        ellipse(137, 137, 5, 5);
        ellipse(139, 139, 5, 5);
        ellipse(141, 141, 5, 5);
        ellipse(143, 143, 5, 5);
        ellipse(145, 145, 5, 5);
        //    stroke(1);
        //    strokeWeight(2);
      } // for
      popMatrix();
      r2--;
    } // func 
    
    void innerCircle() {
    
      // stroke(255, 2, 2); // red
      noStroke();
      fill(255, 2, 2); // red
    
      pushMatrix();
    
      scale (scaleInner); 
    
      for (int i= 0; i<150;i++) {   
    
        rotate(TWO_PI/150);
    
        ellipse(4, 4, 4, 4);
        ellipse(6, 6, 4, 4);
        ellipse(8, 8, 4, 4);
        ellipse(10, 10, 4, 4);
        ellipse(12, 12, 4, 4);
        ellipse(14, 14, 4, 4);
        ellipse(16, 16, 4, 4);
        ellipse(18, 18, 4, 4);
        ellipse(20, 20, 4, 4);
        ellipse(22, 22, 4, 4);
        ellipse(24, 24, 4, 4);
        ellipse(26, 26, 4, 4);
        ellipse(28, 28, 4, 4);
        ellipse(30, 30, 4, 4);
        ellipse(32, 32, 4, 4);
        ellipse(34, 34, 4, 4);
        ellipse(36, 36, 4, 4);
        ellipse(38, 38, 4, 4);
        ellipse(40, 40, 4, 4);
        ellipse(42, 42, 4, 4);
        ellipse(44, 44, 4, 4);
        ellipse(46, 46, 4, 4);
        ellipse(48, 48, 4, 4);
        ellipse(50, 50, 4, 4);
        ellipse(53, 53, 4, 4);
        ellipse(56, 56, 4, 4);
        ellipse(58, 58, 4, 4);
        ellipse(60, 60, 4, 4);
        ellipse(62, 62, 4, 4);
        ellipse(64, 64, 4, 4);
        ellipse(66, 66, 4, 4);
        ellipse(68, 68, 4, 4);
        ellipse(70, 70, 4, 4);
        ellipse(72, 72, 4, 4);
        ellipse(74, 74, 4, 4);
        ellipse(76, 76, 4, 4);
        ellipse(78, 78, 4, 4);
        ellipse(80, 80, 4, 4);
        ellipse(82, 82, 4, 4);
        ellipse(84, 84, 4, 4);
      } // for 
      //  stroke(1);
      //  strokeWeight(2);
      //  scaleInner+=.01;
    
      popMatrix();
      noFill();
    
      scaleInner+= myscaleInnerAddValue;
      println(scaleInner);
    
      if (scaleInner > 1.1) {
        // now let's make our add-value negative
        myscaleInnerAddValue = abs(myscaleInnerAddValue) * -1;
      }
    
      if (scaleInner < 0.1) {
        // now let's make our add-value positive
        myscaleInnerAddValue = abs(myscaleInnerAddValue);
      }
    }
    
    //
    
  • line 89

    1st you add 3 then 2; better always add 2 or write a for-loop as has been said

        ellipse(128, 128, 5, 5);
        ellipse(131, 131, 5, 5);
        ellipse(133, 133, 5, 5);
        ellipse(135, 135, 5, 5);
        ellipse(137, 137, 5, 5);
        ellipse(139, 139, 5, 5);
        ellipse(141, 141, 5, 5);
        ellipse(143, 143, 5, 5);
        ellipse(145, 145, 5, 5);
    
  • edited October 2014

    or line 115 to 159 :

    for (int i= 0; i<150;i++) {  
    
        rotate(TWO_PI/150);
    
        for (int i2= 4; i2<=84;i2+=2) {  
    
            ellipse(i2, i2, 4, 4);
    
        }
    
    }
    
  • Thanks ! Out of curiosity, would it be possible to make the inner circle expand and retract in 'wavy' motions coming from the inside ? Not even remotely sure how to go about this.

  • what exactly are wavy motions?

  • do you mean the speed of the expansion?

  • edited November 2014

    you can give it a certain flashiness when varying upper bound; also maybe use a cooler background color

    float r = 5000;
    float r2 = 5000;
    float r2a = 2.4;
    
    float scaleInner = 0.0;
    float myscaleInnerAddValue = 0.03;  // speed of the grow/shrink 
    
    float upperBound = 0.3f;
    float upperBoundAdd = .1f; 
    
    void setup() {
      size(600, 600);
      smooth();
      background(0);
    }
    
    void draw() {
    
      background(0);
      translate(width/2, height/2);
    
      /** Outer Circles */
      firstOuter();
      secondOuter();
      /** Inner circle */
      innerCircle();
    } // func
    
    // ----------------------------------------------
    
    void firstOuter() {
    
      // this is the 1st outer ring counted from inside 
    
      pushMatrix();
    
      fill(255, 2, 255); // 
      noStroke(); 
    
      for (int i= 0; i<150;i++) {
    
        rotate(r);
        rotate(TWO_PI/150); // why two rotate ??????
    
        ellipse(100, 100, 4, 4);
        ellipse(103, 103, 4, 4);
        ellipse(105, 105, 4, 4);
        ellipse(107, 107, 4, 4);
        ellipse(109, 109, 4, 4);
        ellipse(111, 111, 4, 4);
        ellipse(113, 113, 4, 4);
        ellipse(115, 115, 4, 4);
        ellipse(117, 117, 4, 4);
      }
      popMatrix();
    }
    
    
    void secondOuter() {
    
      /** Second Outer */
    
      // this is the 2nd outer ring counted from inside
    
      fill(1, 255, 0); //  GREEN
      noStroke();
    
      pushMatrix();
    
      rotate(radians(r2));
    
      for (int i= 0; i<150;i++) {   
    
        rotate(radians(r2a));
    
        ellipse(128, 128, 5, 5);
        ellipse(131, 131, 5, 5);
        ellipse(133, 133, 5, 5);
        ellipse(135, 135, 5, 5);
        ellipse(137, 137, 5, 5);
        ellipse(139, 139, 5, 5);
        ellipse(141, 141, 5, 5);
        ellipse(143, 143, 5, 5);
        ellipse(145, 145, 5, 5);
      } // for
      popMatrix();
      r2--;
    } // func 
    
    void innerCircle() {
    
      // stroke(255, 2, 2); // red
      noStroke();
      fill(255, 2, 2); // red
    
      pushMatrix();
    
      scale (scaleInner); 
    
      for (int i= 0; i<150;i++) {   
    
        rotate(TWO_PI/150);
    
        ellipse(4, 4, 4, 4);
        ellipse(6, 6, 4, 4);
        ellipse(8, 8, 4, 4);
        ellipse(10, 10, 4, 4);
        ellipse(12, 12, 4, 4);
        ellipse(14, 14, 4, 4);
        ellipse(16, 16, 4, 4);
        ellipse(18, 18, 4, 4);
        ellipse(20, 20, 4, 4);
        ellipse(22, 22, 4, 4);
        ellipse(24, 24, 4, 4);
        ellipse(26, 26, 4, 4);
        ellipse(28, 28, 4, 4);
        ellipse(30, 30, 4, 4);
        ellipse(32, 32, 4, 4);
        ellipse(34, 34, 4, 4);
        ellipse(36, 36, 4, 4);
        ellipse(38, 38, 4, 4);
        ellipse(40, 40, 4, 4);
        ellipse(42, 42, 4, 4);
        ellipse(44, 44, 4, 4);
        ellipse(46, 46, 4, 4);
        ellipse(48, 48, 4, 4);
        ellipse(50, 50, 4, 4);
        ellipse(53, 53, 4, 4);
        ellipse(56, 56, 4, 4);
        ellipse(58, 58, 4, 4);
        ellipse(60, 60, 4, 4);
        ellipse(62, 62, 4, 4);
        ellipse(64, 64, 4, 4);
        ellipse(66, 66, 4, 4);
        ellipse(68, 68, 4, 4);
        ellipse(70, 70, 4, 4);
        ellipse(72, 72, 4, 4);
        ellipse(74, 74, 4, 4);
        ellipse(76, 76, 4, 4);
        ellipse(78, 78, 4, 4);
        ellipse(80, 80, 4, 4);
        ellipse(82, 82, 4, 4);
        ellipse(84, 84, 4, 4);
      } // for 
    
      popMatrix();
      noFill();
    
      scaleInner+= myscaleInnerAddValue;
      println(scaleInner);
    
      // using var upperbound 
      if (scaleInner > upperBound) {
        // now let's make our add-value negative
        myscaleInnerAddValue = abs(myscaleInnerAddValue) * -1;
        upperBound+=upperBoundAdd;
        // upperbound management 
        if (upperBound>=1.1) 
          upperBoundAdd=abs(upperBoundAdd)*-1;
        else if  (upperBound<=.2) 
          upperBoundAdd=abs(upperBoundAdd);
      }
    
      if (scaleInner < 0.1) {
        // now let's make our add-value positive
        myscaleInnerAddValue = abs(myscaleInnerAddValue);
      }
    }
    
    //
    
  • edited November 2014

    This is perfect. Thanks. I'm trying to get the inner circle to formulate in a wavy motion such as this : but coming from the inside so that the waves are not on the outer rim of the circle but on the inner . Does it make sense ?

    float theta = 0.0;
    
    void setup() {
      size(200, 200);
      smooth();
    }
    
    void draw() {
      background(255);
    
      // Increment theta (try different values for " angular velocity " here)
      theta += 0.02;
      noStroke();
      fill(0);
      float x = theta;
    
      // A for loop is used to draw all the points along a sine wave (scaled to the pixel dimension of the window).
      for (int i = 0; i 
  • I know I'd have to add curves somewhere but am lost as to where exactly

  • please format your code correctly.

  • I'm trying to get the inner circle to formulate in a wavy motion such as this : but coming from the inside so that the waves are not on the outer rim of the circle but on the inner . Does it make sense ?

    No.

  • edited November 2014

    I'm trying to replicate this [mylink] (http://rhizome.florentschildknecht.com/) .. any insight ?

  • please format your code correctly.

  • My apologies ! Done :)

  • Your code is not complete.

  • it isn't my code , it is a code I found online but all in all I'd like to recreate this [mylink] http://rhizome.florentschildknecht.com/)

Sign In or Register to comment.