# Please greatly teach me how to use the work to present it. I am very grateful

**URL:** <https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195>\
**Category:** Coding Questions\
**Created:** [November 4, 2018, 7:25pm UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195 "2018-11-04T19:25:29Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![alk5603](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@alk5603](https://discourse.processing.org/u/alk5603)\
**Post date:** [November 4, 2018, 7:25pm UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/1 "2018-11-04T19:25:29Z")

</div>

![S__46120963](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/07869e1d31c49f6a49f56504fca7e574b5005b38.jpeg)

I would like to ask you a lot like this triangle. How can I present it in a recursive way? How can I play?

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 4, 2018, 10:14pm UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/2 "2018-11-04T22:14:10Z")

</div>

You can just create the triangle(), then the ellipse() inside, inside a for loop and multiply the respective variables with the int from the for loop. (You might Need to add a modifier to the int).

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [November 4, 2018, 10:16pm UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/3 "2018-11-04T22:16:43Z")

</div>

Show your attempt. The first thing I would try is to nest ellipses on each other having alternating white and black color, so you can see the nesting effect. Adding the triangle will be just extra.

Kf

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 4, 2018, 10:45pm UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/4 "2018-11-04T22:45:04Z")

</div>

Hint: If your big triangle has a “radius” of X, then the ellipse that fits in it perfectly has a diameter of X.

And the triangle that fits inside that ellipse has a “radius” of X/2.

---

<div class="post-metadata">

**Author:** ![alk5603](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@alk5603](https://discourse.processing.org/u/alk5603)\
**Post date:** [November 6, 2018, 5:00am UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/5 "2018-11-06T05:00:44Z")

</div>

void setup() {  
size(800,800);  
stroke(255);  
strokeWeight(20);  
noFill();  
noStroke();  
}

void draw() {  
background(0);

//rotate(frameCount / 60.0);

circleRect(width/2, height/2, width/2, frameCount / 60.0);  
}

void circleRect(float x, float y, float r, float angle) {

//rotate(angle);  
if (r \< 5)  
return;  
else {  
pushMatrix();  
translate(x, y);  
fill(0);  
ellipse(0, 0, 2_r, 2_r);  
float nr;  
nr = r / sqrt(2);  
fill(255);  
rect(-nr, -nr, 2_nr, 2_nr);

```
 circleRect(-nr/2, -nr/2, nr/2, angle*0.5);
 circleRect(nr/2, -nr/2, nr/2, angle*0.5);
 circleRect(nr/2, nr/2, nr/2, angle*0.5);
 circleRect(-nr/2, nr/2, nr/2, angle*0.5);
 popMatrix();

```

}  
}

How do i write this kind commands?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 6, 2018, 5:24am UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/6 "2018-11-06T05:24:22Z")

</div>

Interesting code you have there. It recursively draws squares in ellipses.

But what you are trying to do is not clear. Are you still trying to recreate the first image with triangles and ellipses?

If so, can you make a simple sketch that draws either one triangle inside an ellipse, or one ellipse inside a triangle?

---

<div class="post-metadata">

**Author:** ![alk5603](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@alk5603](https://discourse.processing.org/u/alk5603)\
**Post date:** [November 6, 2018, 5:29am UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/7 "2018-11-06T05:29:42Z")

</div>

![544](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/70bc68051cf0006678e15149316cbabae34d83ea.png)

Similar to this

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 6, 2018, 7:13am UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/8 "2018-11-06T07:13:45Z")

</div>

Alright. So you want to have a Processing sketch! Let’s start with a basic processing sketch.

```auto
void setup(){
  size(800,800);
}

void draw(){
  background(0);
}

```

Notice that this code works. It is boring, and it doesn’t do anything, but it runs, you understand it completely, and there are no errors. These are important properties! If we only add working code that we understand to it and get no errors, we can be assured that the code we end with is something we understand, runs, and has no errors…!

Now, you want to draw a triangle. But before we get to drawing a triangle, we need to know some things about the triangle we want to draw. For one thing, WHERE IS IT GOING TO BE? Or rather, where do we want the CENTER of the triangle to be?

I think a good place for the triangle to be would be in the middle of the sketch. But instead of trying to work out where that is and then draw a triangle there, what I’m going to do is move where the point (0,0) is so that it is in the middle of the sketch. That way, I can draw a triangle centered on (0,0), and it will be in the middle of the sketch.

```auto
void setup(){
  size(800,800);
}

void draw(){
  background(0);
  translate(width/2,height/2);
  stroke(255);
  line(-10,0,10,0);
  line(0,10,0,-10);  
}

```

Notice I am drawing a small cross in the middle of the sketch in this one, to denote that that is whee (0,0) is now.

So anyway, a triangle. We could… uh… Huh. Hmm. Triangles are hard! Forget the triangle, let’s just do a circle.

```auto
void setup(){
  size(800,800);
}

void draw(){
  background(0);
  translate(width/2,height/2);
  stroke(255);
  noFill();
  line(-10,0,10,0);
  line(0,10,0,-10);
  ellipse(0,0,800,800);
}

```

Well, that’s a pretty sweet ellipse. Notice that because I’m drawing it at (0,0), and (0,0) has been moved to the middle of the sketch, this ellipse shows up nicely centered.

Anyway, back to the triangle. We can easily know where one point of the triangle must be. The top point of the triangle is in the middle of the sketch, at the very top. Let’s draw a small red dot there so we can denote it:

```auto
void setup(){
  size(800,800);
}

void draw(){
  background(0);
  translate(width/2,height/2);
  
  // The big circle.
  stroke(255);
  noFill();
  ellipse(0,0,800,800);
  
  // The center cross.
  line(-10,0,10,0);
  line(0,10,0,-10);
  
  // Red spot at top marks first point of triangle.
  noStroke();
  fill(255,0,0);
  ellipse(0,-400,20,20);
}

```

Where are the other two points of the triangle going to be? Oh! Look! We want them to be the same distance away from the center of the sketch as the first point. That means the other points for the triangle will have to be on the circle!

If we just divide the circle into three equal parts, the points where the parts meet will be the three points that will form our triangle. So, how can we divide the circle into three equal parts? Well, we know that the angle in the middle of a circle measures 360 degrees. If we divide that into 3, we see that each section must span 120 degrees.

Let’s use rotate() to draw three points that are rotated 0 degrees, 120 degrees, and 240 degrees:

```auto
void setup(){
  size(800,800);
}

void draw(){
  background(0);
  translate(width/2,height/2);
  
  // The big circle.
  stroke(255);
  noFill();
  ellipse(0,0,800,800);
  
  // The center cross.
  line(-10,0,10,0);
  line(0,10,0,-10);
  
  // Red spot at top marks first point of triangle.
  noStroke();
  fill(255,0,0);
  ellipse(0,-400,20,20);
  
  // Green spot.
  rotate(radians(120));
  fill(0,255,0);
  ellipse(0,-400,20,20);
  
  // Blue spot.
  rotate(radians(120));
  fill(0,0,255);
  ellipse(0,-400,20,20);
}

```

Clearly these are the three points we want! Can we find their positions without using rotate()? Why yes, with a little math, we can! If you treat the big circle like a unit circle, These three points are at (cos(a),sin(a)), for some value a. To scale that point out to a circle of a radius of 400, we just need to multiply by 400! Thus:

```auto
void setup(){
  size(800,800);
}

void draw(){
  background(0);
  translate(width/2,height/2);
  
  // The big circle.
  stroke(255);
  noFill();
  ellipse(0,0,800,800);
    
  // Red spot at top marks first point of triangle.
  noStroke();
  fill(255,0,0);
  ellipse(400*cos(radians(-90+0)), 400*sin(radians(-90+0)),20,20);
  
  // Green spot.
  fill(0,255,0);
  ellipse(400*cos(radians(-90+120)), 400*sin(radians(-90+120)),20,20);
  
  // Blue spot.
  fill(0,0,255);
  ellipse(400*cos(radians(-90+240)), 400*sin(radians(-90+240)),20,20);
  
}

```

Whew! Of course we don’t want three colored ellipses at these points. We want one triangle.

So let’s use those three points and draw a triangle:

```auto
void setup(){
  size(800,800);
}

void draw(){
  background(0);
  translate(width/2,height/2);
  
  // The big circle.
  stroke(255);
  noFill();
  ellipse(0,0,800,800);
  
  // The big triangle.
  triangle(
    400*cos(radians(-90+0)), 400*sin(radians(-90+0)),
    400*cos(radians(-90+120)), 400*sin(radians(-90+120)),
    400*cos(radians(-90+240)), 400*sin(radians(-90+240))
  );
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 6, 2018, 7:45am UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/9 "2018-11-06T07:45:01Z")

</div>

Next, we want a smaller copy of this ellipse/triangle combo inside the one we just drew.

How much smaller is it?

Well, we know that the “radius” of the big triangle - the distance from the center of it to one of the points, is 400. Why? because it is half the height of the sketch window!

And some helpful person… me… has already told you that the ellipse that fits inside that triangle perfectly will have a diameter of that same amount: 400

In fact, we can just draw that ellipse now!

```auto
void setup(){
  size(800,800);
}

void draw(){
  background(0);
  translate(width/2,height/2);
  
  // The big circle.
  stroke(255);
  noFill();
  ellipse(0,0,800,800);
  
  // The big triangle.
  triangle(
    400*cos(radians(-90+0)), 400*sin(radians(-90+0)),
    400*cos(radians(-90+120)), 400*sin(radians(-90+120)),
    400*cos(radians(-90+240)), 400*sin(radians(-90+240))
  );
  // The inner ellipse.
  ellipse(0,0,400,400);
}

```

Whoa! The inner circle is half the size of the outter one! `scale(0.5);` is our new best friend!

Next, realize that all you need to do is put what we just made inside a function, and then call it recursively, scaling after each call. I’ll throw the proper fill colors in for you at this point now too, because at this point, this is the full-code solution:

```auto
void setup() {
  size(800, 800);
  noStroke();
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rec_tri_cir(7);
}

void rec_tri_cir(int level) {
  if ( level == 0 ) return;
  // The big triangle.
  fill(255);
  triangle(
    400*cos(radians(-90+0)), 400*sin(radians(-90+0)), 
    400*cos(radians(-90+120)), 400*sin(radians(-90+120)), 
    400*cos(radians(-90+240)), 400*sin(radians(-90+240))
    );
  // The inner ellipse.
  fill(0);
  ellipse(0, 0, 400, 400);
  // The next one is smaller!
  scale(millis()>5000?0:0.5);
  // Call it again!
  rec_tri_cir( level - 1 );
}

```

Hopefully you followed along and don’t just blindly submit this code for credit. I mean, you learn nothing that way, and will grow up to be hated by all your programming coworkers because you don’t understand recursive functions.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 6, 2018, 7:54am UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/10 "2018-11-06T07:54:02Z")

</div>

Weeeeee!

```auto
void setup() {
  size(420, 420, OPENGL);
  colorMode(HSB, 255);
  background(64);
}

void draw() {
  background(64);
  fill(0);
  ellipse(210, 210, 400, 400);
  noStroke();
  translate(210, 210);
  rotate(-HALF_PI);
  for ( int t = 1; t < 7; t++ ) {
    rotate( map(frameCount%300, 0, 300, 0, TWO_PI));
    fill(255);
    noStroke();
    beginShape();
    int max = 9 - t;
    for ( int i = 0; i < max*2; i++) {
      fill(map(i, 0, max*2, 0, 255), 255, 255 );
      vertex(
        ((i%2==0)?200:100) * cos(i * TWO_PI/float(max*2)), 
        ((i%2==0)?200:100) * sin(i * TWO_PI/float(max*2))
        );
    }      
    endShape(CLOSE);
    fill(0);
    if ( t < 6 ) {
      ellipse(0, 0, 200, 200);
    }
    scale(.5);
  }
}

```

Programming!

---

<div class="post-metadata">

**Author:** ![alk5603](https://avatars.discourse-cdn.com/v4/letter/a/f14d63/32.png) [@alk5603](https://discourse.processing.org/u/alk5603)\
**Post date:** [November 6, 2018, 10:24am UTC](https://discourse.processing.org/t/please-greatly-teach-me-how-to-use-the-work-to-present-it-i-am-very-grateful/5195/11 "2018-11-06T10:24:27Z")

</div>

Thank you, although I don’t have all the directors, I still learn a lot.