› › ›

Fading and Rotating - Newbie Help

Kaygo124Kaygo124
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;
  }
}
Tagged:

Best Answers

Answers

  • ChrisirChrisir
    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 ;-)

  • koogskoogs
    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...

  • Kaygo124Kaygo124

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

  • Kaygo124Kaygo124

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

  • ChrisirChrisir

    I don't know...

    write a personal message to Philho please

  • ChrisirChrisir
    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();
}

//
  • ChrisirChrisir

    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
  • Kaygo124Kaygo124

    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 ?

  • ChrisirChrisir
    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

  • ChrisirChrisir

    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)

  • Kaygo124Kaygo124

    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.

  • ChrisirChrisir

    yes, conditional

    scaleInner+= myscaleInnerAddValue;

if (scaleInner > 200) { myscaleInnerAddValue = myscaleInnerAddValue * -1; }

if (scaleInner < 10) { myscaleInnerAddValue = myscaleInnerAddValue * -1; }
  • ChrisirChrisir
    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);
}
  • Kaygo124Kaygo124

    doesn't seem to be working. It's still expanding outside of the first outer circle until the edges of the screen.

  • ChrisirChrisir

    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);
  }
}

//
  • ChrisirChrisir

    200 was too big, correct was 1.1

    ;-)

  • Kaygo124Kaygo124

    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 ?

  • ChrisirChrisir
    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);
  }
}

//
  • Kaygo124Kaygo124

    Got it ! Thanks again for your help ! I've been scratching my head for hours :)

  • ChrisirChrisir

    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);
  }
}

//
  • ChrisirChrisir

    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);
  • ChrisirChrisir
    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);

    }

}
  • Kaygo124Kaygo124

    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.

  • ChrisirChrisir

    what exactly are wavy motions?

  • ChrisirChrisir

    do you mean the speed of the expansion?

  • ChrisirChrisir
    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);
  }
}

//
  • Kaygo124Kaygo124
    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
  • Kaygo124Kaygo124

    I know I'd have to add curves somewhere but am lost as to where exactly

  • PhiLhoPhiLho

    See How to format code and text

  • ChrisirChrisir

    please format your code correctly.

  • ChrisirChrisir

    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.

  • Kaygo124Kaygo124
    edited November 2014

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

  • ChrisirChrisir

    please format your code correctly.

  • Kaygo124Kaygo124

    My apologies ! Done :)

  • ChrisirChrisir

    Your code is not complete.

  • Kaygo124Kaygo124

    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.