How to make this, or similar kind of pattern? Ellipses are close to each other, but not intersecting. The radius of ellipses is slowly decreasig, from center to side, or from top to bottom.
If you look at the middle picture, you can almost guess how they did it.
Some basic math first:
An ellipse have four parameters: x-axis, y-axis, width and hight. If width and hight are the same you have a circle. The width would then be called the diameter. And the distance from the centre of the circle to the edge would be the radius. The radius is diameter divided by 2.
If you pick a point on a canvas, say 50,50, and then draw an ellipse at that point width radius 5 it would look like this: ellipse(50,50,10,10); Now pick a new point at least 6 pixels(preferably 10 or more) away from (50,50). and draw another ellipse at that point with a radius that is the length between the two points minus the radius of the first circle. Now you have two ellipses that are laying beside eachother. Well, their edges are actually laying on top of eachother, so subtract another two pixels from the diameter of the second circle and they are laying beside eachother like the first picture.
Now you can try to translate this into code. It would be cool to see how you make this, so post your result here along with questions and the forum will probably help you a lot :) good luck!
For general cases of this kind of algorithm, a useful term of art to know here in mathematics and computer science is "circle packing." There are worked examples e.g. circle packing in a square.
If you wish to fill the entire screen you may wish to set the packing area borders as larger than the screen dimensions -- either packing e.g. (-100,-100, width+100, height+100) ... or packing e.g. (0,0,width+200,height+200) and then translate(100,100).
Answers
If you look at the middle picture, you can almost guess how they did it.
Some basic math first: An ellipse have four parameters: x-axis, y-axis, width and hight. If width and hight are the same you have a circle. The width would then be called the diameter. And the distance from the centre of the circle to the edge would be the radius. The radius is diameter divided by 2.
If you pick a point on a canvas, say 50,50, and then draw an ellipse at that point width radius 5 it would look like this: ellipse(50,50,10,10); Now pick a new point at least 6 pixels(preferably 10 or more) away from (50,50). and draw another ellipse at that point with a radius that is the length between the two points minus the radius of the first circle. Now you have two ellipses that are laying beside eachother. Well, their edges are actually laying on top of eachother, so subtract another two pixels from the diameter of the second circle and they are laying beside eachother like the first picture.
Now you can try to translate this into code. It would be cool to see how you make this, so post your result here along with questions and the forum will probably help you a lot :) good luck!
thanks, I will try to translate this into code
For general cases of this kind of algorithm, a useful term of art to know here in mathematics and computer science is "circle packing." There are worked examples e.g. circle packing in a square.
If you wish to fill the entire screen you may wish to set the packing area borders as larger than the screen dimensions -- either packing e.g. (-100,-100, width+100, height+100) ... or packing e.g. (0,0,width+200,height+200) and then translate(100,100).