I would like to ask you a lot like this triangle. How can I present it in a recursive way? How can I play?
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).
1 Like
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
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.
2 Likes
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, 2r, 2r);
float nr;
nr = r / sqrt(2);
fill(255);
rect(-nr, -nr, 2nr, 2nr);
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?
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?
Alright. So you want to have a Processing sketch! Let’s start with a basic processing sketch.
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.
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.
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:
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:
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:
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:
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))
);
}
1 Like
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!
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:
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.
1 Like
Weeeeee!
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!
2 Likes
Thank you, although I don’t have all the directors, I still learn a lot.