Euclides’ constructie van een middelevenredige lijn
Euclides laat in Boek VI propositie 13 zien hoe een middelevenredige lijn kan worden geconstrueerd tussen de lijnen AB en BC. Leg AB (a) en BC (b) in elkaars verlengde. Trek vanuit B een loodlijn. De cirkel met straal AC/2 snijdt de loodlijn in D. BD (x) is de gezochte middelevenredige lijn tussen AB en BC.
De middelevenredige lijn is dus de zijde van een vierkant dat een oppervlakte heeft die even groot als de oppervlakte van de rechthoek met zijdes AB (a) en BC (b). Algebraïsch laat middelevenredigheid zich als volgt formuleren: a:x=x:b; dus x² = ab of x = √ab.
Computerconstructie van middelevenredige lijnen
Met de computer kunnen we heel gemakkelijk een veelheid van middelevenredige lijnen construeren. Afhankelijk van de positie van de muis (van rechtsboven naar linksonder) beweegt zich C over de uitgangscirkel, ontstaat de rechthoekige driehoek ABC en wordt de diameter verdeeld in a en b .
Euclides geometrische middenvar center, startPunt;
var straal;
var hoogte, breedte, a, b, x;
var arrPoints = [];
var counter=0;
var specialCase=false;
function setup() {
colorMode(HSB, 200);
cnv=createCanvas(600, 600);
straal=200;
center= createVector(0,0);
startPunt=createVector(-200,0);
}
function draw() {
background(200);
stroke(0);
translate(width/2,height/2);
//grote cirkel
fill(60,10,180);
ellipse(center.x, center.y, 2*straal, 2*straal);
noFill();
//centrum van grote cirkel
ellipse(center.x, center.y, 3, 3);
//trek cirkel van startpunt door centrum
//diameter
line(-straal,0,straal,0);
//voor beweging van punt over omtrek op grote cirkel ahv mouseX/mouseY
var SnijPuntCirkel=circleLineIntersect(-straal,0,mouseX,-mouseY, center.x,center.y, straal);
//positie van centrum van de kleine ingeschreven cirkel die begint van rechts op diamter
var centrumKleineCirkel=createVector(SnijPuntCirkel.x, 0);
if(SnijPuntCirkel.x>0){
hoogte=straal-SnijPuntCirkel.x;
breedte=SnijPuntCirkel.x+SnijPuntCirkel.y;
}else{
hoogte=straal+SnijPuntCirkel.x;
breedte=SnijPuntCirkel.x-SnijPuntCirkel.y;
}
//de lila driehoek
/*
fill(180,80,200);
ellipse(SnijPuntCirkel.x, -hoogte, 5, 5);
beginShape();
//punt op diameter;
vertex(SnijPuntCirkel.x, 0);
//loodlijn omhoog;
vertex(SnijPuntCirkel.x, -hoogte);
vertex(breedte, 0);
//vertex(30, 75);
endShape(CLOSE);
noFill();
//kleine cirkel met hoogte als diameter; moet na lila driehoek vanwege fill()
ellipse(SnijPuntCirkel.x, 0,-2*hoogte,-2*hoogte);
//float Lengte=vindAfstand(startPunt, centrumKleineCirkel, hoogte);
*/
//tangent van Startpunt op klein cirkel
var raakpunt= findTangent(startPunt,centrumKleineCirkel, hoogte);
// is niet nodig; gaat via angleBetween
//float Hoek=vindHoek(startPunt,centrumKleineCirkel, hoogte);
//voeg het snijpunt in array voor tracen van curve
arrPoints[counter]=raakpunt;
//uit startpunt naar punt op cirkel: de grote hypothenusa
if(linePoint(startPunt.x,startPunt.y,SnijPuntCirkel.x, SnijPuntCirkel.y, raakpunt.x,raakpunt.y)){
stroke(120,180,180);
}
line(startPunt.x,startPunt.y,SnijPuntCirkel.x, SnijPuntCirkel.y);
line(SnijPuntCirkel.x, SnijPuntCirkel.y, 200, 0);
//de middelevenredige lijn naar diameter; oftewelloodlijn uit punt op cirkel naar diameter (is Meanproportional)
stroke(90,80,200);
strokeWeight(3);
line(SnijPuntCirkel.x,SnijPuntCirkel.y, SnijPuntCirkel.x,0);
stroke(0);
strokeWeight(1);
/*
//teken tangent uit Startpunt aan kleine cirkel
line(startPunt.x,startPunt.y, raakpunt.x,raakpunt.y);
//teken lijn centrum kleine cirkel naar punt tangent;
line(raakpunt.x, raakpunt.y, SnijPuntCirkel.x,0);
stroke(120, 200, 200);
for(var i=0;i<counter;i++){
var v = arrPoints[i];
ellipse(v.x,v.y,2,2);
}
stroke(0);
a=straal+SnijPuntCirkel.x;
b=straal-SnijPuntCirkel.x;
//trek de cirkel vanuit startpunt met straal a
arc(startPunt.x,0,2*a, 2*a, PI, TWO_PI);
//vindt het snijpunt tussen a-cirkel en b-cirkel
var SnijpuntAcirkelBcirkel=circleCircle(-200,0,a, SnijPuntCirkel.x, 0,b);
//testen van speciale situatie en instellen rode a
if(linePoint(0,0,0, -200, SnijpuntAcirkelBcirkel.x,SnijpuntAcirkelBcirkel.y)){
specialCase=true;
stroke(190,180,180);
strokeWeight(2);
ellipse(SnijpuntAcirkelBcirkel.x,SnijpuntAcirkelBcirkel.y,8,8);
}else{
specialCase=false;
}
//teken lijnstuk a op diameter
line(-straal,0, SnijPuntCirkel.x,0);
//de lijn uit punt op cirkel naar einde diameter (is gelijk a in speciale geval)
line(SnijPuntCirkel.x,SnijPuntCirkel.y, straal,0);
//op vertexdriehoek
line(SnijPuntCirkel.x, -hoogte, breedte, 0);
//teken lijn b op diameter
if(specialCase){
//teken lijnstuk b op diameter in andere kleur
stroke(110,180,180);
//op diameter
line(straal,0, SnijPuntCirkel.x,0);
//op rechtse driehoek
line(raakpunt.x, raakpunt.y, SnijPuntCirkel.x,0);
//de lijn gelijk aan middelevenredige
stroke(90,80,200);
line(startPunt.x,startPunt.y, raakpunt.x,raakpunt.y);
}
stroke(0);
strokeWeight(1);
//lijn uit centrum recht omhoog
line(center.x, center.y, center.x, -straal);
//teksten
text("D", breedte, -10);
text("E", SnijPuntCirkel.x, -10);
text("F", SnijPuntCirkel.x +10, -hoogte+5);
text("G", raakpunt.x-5, raakpunt.y-5);
*/
text("A", -210, 0);
text("B", 205, 0)
text("C", SnijPuntCirkel.x, SnijPuntCirkel.y-10);
text("a", -100,10);
text("b", (SnijPuntCirkel.x+hoogte/2),10);
text("x", SnijPuntCirkel.x, SnijPuntCirkel.y/2);
/*
//text("a: "+a+"; b: "+b+"; x: "+(-SnijPuntCirkel.y), -250, -270);
text("verhouding middelevenredig: "+nf(b/-SnijPuntCirkel.y,0,3), -250, -270);
text("verhouding b:a "+ nf(b/a, 0, 3), -250, -250);
text("verhouding a:geheel "+ nf(a/(a+b),0,3), -250, -230);
var cab = vindHoek(startPunt, SnijPuntCirkel);
var gae= vindHoek(startPunt, raakpunt);
text("hoek CAB: "+ nf(degrees(-cab),0, 3)+ "; hoek GAE:"+ nf(degrees(-gae), 0,3) , -250, -210);
*/
//text("verhouding cirkels: "+ (2*PI*hoogte)/(-2*PI*SnijPuntCirkel.y), -250, -170);
//text("opp kleine cirkel: "+ 2*PI*hoogte, -250, -150);
// text("opp grote cirkel: "+ -2*PI*SnijPuntCirkel.y, -250, -130);
counter++;
}
function circleLineIntersect( x1, y1, x2, y2, cx, cy, cr ) {
//println(cx+":"+cy);
var Snijpunt=createVector(0,0);;
var dx = x2 - x1;
var dy = y2 - y1;
var a = dx * dx + dy * dy;
var b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
var c = cx * cx + cy * cy;
c += x1 * x1 + y1 * y1;
c -= 2 * (cx * x1 + cy * y1);
c -= cr * cr;
var bb4ac = b * b - 4 * a * c;
//println(bb4ac);
if (bb4ac < 0) { // Not intersecting
//return false;
}else{
var mu = (-b + sqrt( b*b - 4*a*c )) / (2*a);
var ix1 = x1 + mu*(dx);
var iy1 = y1 + mu*(dy);
mu = (-b - sqrt(b*b - 4*a*c )) / (2*a);
var ix2 = x1 + mu*(dx);
var iy2 = y1 + mu*(dy);
//println(ix2+"; "+iy2);
// The intersection points
//from inside?
ellipse(ix1, iy1, 10, 10);
Snijpunt=createVector(ix1, iy1);
//from outside?
//ellipse(ix2, iy2, 10, 10);
}
return Snijpunt;
}
function findTangent(P, centrum, Straal){
// find tangents
//println(centrum.x+"; "+centrum.y+"; "+Straal);
//println(P.x+":"+P.y);
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dist = sqrt(dx * dx + dy * dy);
//boogsinus: theta die lijn van lengte P en centrum C maakt met lijn Straal.
var th = asin(Straal/dist);
//hoek tussen P en centrum C van cirkel
var d = atan2(dy, dx);
//println(degrees(d));
var d1 = d+th+PI/2;
var d2 = d-th+PI/2;
var T1x = centrum.x + Straal * cos(d1);
var T1y = centrum.y - Straal * sin(d1);
//ellipse(T1x, T1y, 15,15);
var T2x = centrum.x - Straal * cos(d2);
var T2y = centrum.y + Straal * sin(d2);
//ellipse(T2x, T2y, 10,10);
var Tpoint=createVector(T1x, T1y);
return Tpoint;
}
function circleCircle( c1x, c1y, c1r, c2x, c2y, c2r) {
var intersection1, intersection2;
intersection1 = createVector(0,0);
intersection2 = createVector(0,0);
var dx= c1x-c2x;
var dy=c1y-c2y;
var dist= sqrt(dx*dx+dy*dy);
// No solutions, the circles are too far apart.
if(dist>c1r+c2r){
}else if(dist<abs(c1r-c2r)){
// No solutions, one circle contains the other.
}else if(dist==0 & c1r==c2r){
// No solutions, the circles coincide.
}else{
var a = (c1r * c1r - c2r * c2r + dist * dist) / (2 * dist);
var h = sqrt(c1r * c1r - a * a);
// Find P2.
var Px2 = c1x + a * (c2x - c1x) / dist;
var Py2 = c1y + a * (c2y - c1y) / dist;
// Get the points P3.
intersection1 = createVector(
(Px2 + h * (c2y - c1y) / dist),
(Py2 - h * (c2x - c1x) / dist));
intersection2 = createVector(
(Px2 - h * (c2y - c1y) / dist),
(Py2 + h * (c2x - c1x) / dist));
ellipse(intersection1.x,intersection1.y, 5,5);
}
return intersection1;
}
function vindAfstand( P, centrum, Straal){
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dd = sqrt(dx * dx + dy * dy);
var Lengte=sqrt((dd*dd)-(Straal*Straal));
//ellipse(-200,0, 2*Lengte, 2*Lengte);
return Lengte;
}
function vindHoek(P, centrum){
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dist = sqrt(dx * dx + dy * dy);
var th = asin(centrum.y/dist);
return th;
}
function linePoint( x1, y1, x2, y2, px, py) {
// get distance from the point to the two ends of the line
var d1 = dist(px,py, x1,y1);
var d2 = dist(px,py, x2,y2);
// get the length of the line
var lineLen = dist(x1,y1, x2,y2);
// since floats are so minutely accurate, add
// a little buffer zone that will give collision
var buffer = 0.1; // higher # = less accurate
// if the two distances are equal to the line's
// length, the point is on the line!
// note we use the buffer here to give a range,
// rather than one #
if (d1+d2 >= lineLen-buffer & d1+d2 <= lineLen+buffer) {
return true;
}
return false;
}
function mouseClicked() {
//saveCanvas(cnv, 'middelevenredig', 'jpg');
}
Middelevenredigheid en de gulden snede
Er zal dus ook een positie van C zijn waarbij de diameter van de cirkel overeenkomstig de gulden snede wordt verdeeld. Dan geldt b: a = a : a+b, dus ab=a²-b². Omdat zoals we zojuist zagen ab = x² kunnen we nu ook schrijven x²=a²-b² of x²+b²=a². Dit is de fameuse stelling van Pythagoras maar dan onder de voorwaarde dat de hypothenusa (a) en de korte rechthoekszijde (b) zich verhouden als de gulden snede (en x dus middelevenredig tussen a en b is). Hoe vind je deze driehoek?
Middelevenredige Gulden Snedevar center, startPunt;
var straal;
var hoogte, breedte, a, b, x;
var arrPoints = [];
var counter=0;
var specialCase=false;
function setup() {
colorMode(HSB, 200);
cnv=createCanvas(600, 600);
straal=200;
center= createVector(0,0);
startPunt=createVector(-200,0);
}
function draw() {
background(200);
stroke(0);
translate(width/2,height/2);
//grote cirkel
fill(60,10,180);
ellipse(center.x, center.y, 2*straal, 2*straal);
noFill();
//centrum van grote cirkel
ellipse(center.x, center.y, 3, 3);
//trek cirkel van startpunt door centrum
//diameter
line(-straal,0,straal,0);
//voor beweging van punt over omtrek op grote cirkel ahv mouseX/mouseY
var SnijPuntCirkel=circleLineIntersect(-straal,0,mouseX,-mouseY, center.x,center.y, straal);
//positie van centrum van de kleine ingeschreven cirkel die begint van rechts op diamter
var centrumKleineCirkel=createVector(SnijPuntCirkel.x, 0);
if(SnijPuntCirkel.x>0){
hoogte=straal-SnijPuntCirkel.x;
breedte=SnijPuntCirkel.x+SnijPuntCirkel.y;
}else{
hoogte=straal+SnijPuntCirkel.x;
breedte=SnijPuntCirkel.x-SnijPuntCirkel.y;
}
//de lila driehoek
fill(180,80,200);
ellipse(SnijPuntCirkel.x, -hoogte, 5, 5);
beginShape();
//punt op diameter;
vertex(SnijPuntCirkel.x, 0);
//loodlijn omhoog;
vertex(SnijPuntCirkel.x, -hoogte);
vertex(breedte, 0);
//vertex(30, 75);
endShape(CLOSE);
noFill();
//kleine cirkel met hoogte als diameter; moet na lila driehoek vanwege fill()
ellipse(SnijPuntCirkel.x, 0,-2*hoogte,-2*hoogte);
//float Lengte=vindAfstand(startPunt, centrumKleineCirkel, hoogte);
//tangent van Startpunt op klein cirkel
var raakpunt= findTangent(startPunt,centrumKleineCirkel, hoogte);
// is niet nodig; gaat via angleBetween
//float Hoek=vindHoek(startPunt,centrumKleineCirkel, hoogte);
//voeg het snijpunt in array voor tracen van curve
arrPoints[counter]=raakpunt;
//uit startpunt naar punt op cirkel: de grote hypothenusa
if(linePoint(startPunt.x,startPunt.y,SnijPuntCirkel.x, SnijPuntCirkel.y, raakpunt.x,raakpunt.y)){
stroke(120,180,180);
}
line(startPunt.x,startPunt.y,SnijPuntCirkel.x, SnijPuntCirkel.y);
//de middelevenredige lijn naar diameter; oftewelloodlijn uit punt op cirkel naar diameter (is Meanproportional)
stroke(90,80,200);
strokeWeight(3);
line(SnijPuntCirkel.x,SnijPuntCirkel.y, SnijPuntCirkel.x,0);
stroke(0);
strokeWeight(1);
//teken tangent uit Startpunt aan kleine cirkel
line(startPunt.x,startPunt.y, raakpunt.x,raakpunt.y);
//teken lijn centrum kleine cirkel naar punt tangent;
line(raakpunt.x, raakpunt.y, SnijPuntCirkel.x,0);
stroke(120, 200, 200);
for(var i=0;i<counter;i++){
var v = arrPoints[i];
ellipse(v.x,v.y,2,2);
}
stroke(0);
a=straal+SnijPuntCirkel.x;
b=straal-SnijPuntCirkel.x;
//trek de cirkel vanuit startpunt met straal a
arc(startPunt.x,0,2*a, 2*a, PI, TWO_PI);
//vindt het snijpunt tussen a-cirkel en b-cirkel
var SnijpuntAcirkelBcirkel=circleCircle(-200,0,a, SnijPuntCirkel.x, 0,b);
//testen van speciale situatie en instellen rode a
if(linePoint(0,0,0, -200, SnijpuntAcirkelBcirkel.x,SnijpuntAcirkelBcirkel.y)){
specialCase=true;
stroke(190,180,180);
strokeWeight(2);
ellipse(SnijpuntAcirkelBcirkel.x,SnijpuntAcirkelBcirkel.y,8,8);
}else{
specialCase=false;
}
//teken lijnstuk a op diameter
line(-straal,0, SnijPuntCirkel.x,0);
//de lijn uit punt op cirkel naar einde diameter (is gelijk a in speciale geval)
line(SnijPuntCirkel.x,SnijPuntCirkel.y, straal,0);
//op vertexdriehoek
line(SnijPuntCirkel.x, -hoogte, breedte, 0);
//teken lijn b op diameter
if(specialCase){
//teken lijnstuk b op diameter in andere kleur
stroke(110,180,180);
//op diameter
line(straal,0, SnijPuntCirkel.x,0);
//op rechtse driehoek
line(raakpunt.x, raakpunt.y, SnijPuntCirkel.x,0);
//de lijn gelijk aan middelevenredige
stroke(90,80,200);
line(startPunt.x,startPunt.y, raakpunt.x,raakpunt.y);
}
stroke(0);
strokeWeight(1);
//lijn uit centrum recht omhoog
line(center.x, center.y, center.x, -straal);
//teksten
text("A", -210, 0);
text("B", 205, 0)
text("C", SnijPuntCirkel.x, SnijPuntCirkel.y-10);
text("D", breedte, -10);
text("E", SnijPuntCirkel.x, -10);
text("F", SnijPuntCirkel.x +10, -hoogte+5);
text("G", raakpunt.x-5, raakpunt.y-5);
text("a", -100,10);
text("b", (SnijPuntCirkel.x+hoogte/2),10);
text("x", SnijPuntCirkel.x, SnijPuntCirkel.y/2);
//text("a: "+a+"; b: "+b+"; x: "+(-SnijPuntCirkel.y), -250, -270);
text("verhouding middelevenredig: "+nf(b/-SnijPuntCirkel.y,0,3), -250, -270);
text("verhouding b:a "+ nf(b/a, 0, 3), -250, -250);
text("verhouding a:geheel "+ nf(a/(a+b),0,3), -250, -230);
var cab = vindHoek(startPunt, SnijPuntCirkel);
var gae= vindHoek(startPunt, raakpunt);
text("hoek CAB: "+ nf(degrees(-cab),0, 3)+ "hoek GAE:"+ nf(degrees(-gae), 0,3) , -250, -210);
//text("verhouding cirkels: "+ (2*PI*hoogte)/(-2*PI*SnijPuntCirkel.y), -250, -170);
//text("opp kleine cirkel: "+ 2*PI*hoogte, -250, -150);
// text("opp grote cirkel: "+ -2*PI*SnijPuntCirkel.y, -250, -130);
counter++;
}
function circleLineIntersect( x1, y1, x2, y2, cx, cy, cr ) {
//println(cx+":"+cy);
var Snijpunt=createVector(0,0);;
var dx = x2 - x1;
var dy = y2 - y1;
var a = dx * dx + dy * dy;
var b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
var c = cx * cx + cy * cy;
c += x1 * x1 + y1 * y1;
c -= 2 * (cx * x1 + cy * y1);
c -= cr * cr;
var bb4ac = b * b - 4 * a * c;
//println(bb4ac);
if (bb4ac < 0) { // Not intersecting
//return false;
}else{
var mu = (-b + sqrt( b*b - 4*a*c )) / (2*a);
var ix1 = x1 + mu*(dx);
var iy1 = y1 + mu*(dy);
mu = (-b - sqrt(b*b - 4*a*c )) / (2*a);
var ix2 = x1 + mu*(dx);
var iy2 = y1 + mu*(dy);
//println(ix2+"; "+iy2);
// The intersection points
//from inside?
ellipse(ix1, iy1, 10, 10);
Snijpunt=createVector(ix1, iy1);
//from outside?
//ellipse(ix2, iy2, 10, 10);
}
return Snijpunt;
}
function findTangent(P, centrum, Straal){
// find tangents
//println(centrum.x+"; "+centrum.y+"; "+Straal);
//println(P.x+":"+P.y);
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dist = sqrt(dx * dx + dy * dy);
//boogsinus: theta die lijn van lengte P en centrum C maakt met lijn Straal.
var th = asin(Straal/dist);
//hoek tussen P en centrum C van cirkel
var d = atan2(dy, dx);
//println(degrees(d));
var d1 = d+th+PI/2;
var d2 = d-th+PI/2;
var T1x = centrum.x + Straal * cos(d1);
var T1y = centrum.y - Straal * sin(d1);
//ellipse(T1x, T1y, 15,15);
var T2x = centrum.x - Straal * cos(d2);
var T2y = centrum.y + Straal * sin(d2);
//ellipse(T2x, T2y, 10,10);
var Tpoint=createVector(T1x, T1y);
return Tpoint;
}
function circleCircle( c1x, c1y, c1r, c2x, c2y, c2r) {
var intersection1, intersection2;
intersection1 = createVector(0,0);
intersection2 = createVector(0,0);
var dx= c1x-c2x;
var dy=c1y-c2y;
var dist= sqrt(dx*dx+dy*dy);
// No solutions, the circles are too far apart.
if(dist>c1r+c2r){
}else if(dist<abs(c1r-c2r)){
// No solutions, one circle contains the other.
}else if(dist==0 & c1r==c2r){
// No solutions, the circles coincide.
}else{
var a = (c1r * c1r - c2r * c2r + dist * dist) / (2 * dist);
var h = sqrt(c1r * c1r - a * a);
// Find P2.
var Px2 = c1x + a * (c2x - c1x) / dist;
var Py2 = c1y + a * (c2y - c1y) / dist;
// Get the points P3.
intersection1 = createVector(
(Px2 + h * (c2y - c1y) / dist),
(Py2 - h * (c2x - c1x) / dist));
intersection2 = createVector(
(Px2 - h * (c2y - c1y) / dist),
(Py2 + h * (c2x - c1x) / dist));
ellipse(intersection1.x,intersection1.y, 5,5);
}
return intersection1;
}
function vindAfstand( P, centrum, Straal){
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dd = sqrt(dx * dx + dy * dy);
var Lengte=sqrt((dd*dd)-(Straal*Straal));
//ellipse(-200,0, 2*Lengte, 2*Lengte);
return Lengte;
}
function vindHoek(P, centrum){
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dist = sqrt(dx * dx + dy * dy);
var th = asin(centrum.y/dist);
return th;
}
function linePoint( x1, y1, x2, y2, px, py) {
// get distance from the point to the two ends of the line
var d1 = dist(px,py, x1,y1);
var d2 = dist(px,py, x2,y2);
// get the length of the line
var lineLen = dist(x1,y1, x2,y2);
// since floats are so minutely accurate, add
// a little buffer zone that will give collision
var buffer = 0.1; // higher # = less accurate
// if the two distances are equal to the line's
// length, the point is on the line!
// note we use the buffer here to give a range,
// rather than one #
if (d1+d2 >= lineLen-buffer & d1+d2 <= lineLen+buffer) {
return true;
}
return false;
}
function mouseClicked() {
saveCanvas(cnv, 'middelevenredig', 'jpg');
}
Trek een cirkel met straal b op het snijpunt van de middelevenredige lijn (x) en de diameter. Trek vanuit A een lijn tangentieel aan deze cirkel, noem het raakpunt G. De straal GE staat loodrecht op tangens AG.
Als de hoek GAE gelijk is aan hoek CAB verdeelt x de diameter in een gulden snede!1 In dit geval ontstaan drie gelijke driehoeken: ∇AEG, ∇DEF en ∇EBC. Hoek GEA is gelijk aan hoek CBE. In dit geval is CB even groot als AE (a). Voor ∇EBC geldt nu x²+b²=a²; met andere woorden de combinatie van gulden snede en middelevenredigheid.
Keplers driehoek
Deze combinatie was Johannes Kepler al op het spoor. Hij schreef in 1597 aan zijn professor Mästlin: “If on a line which is divided in extreme and mean ratio2 one constructs a right angled triangle, such that the right angle is on the perpendicular put at the section point, then the smaller leg will equal the larger segment of the divided line.” Wat Kepler zegt is dat als AB in E wordt verdeeld volgens de gulden snede en de rechte hoek C exact boven dit punt komt te liggen dat dan AE en BC gelijk zijn.
Het bijzondere van deze driehoek is dat de zijden zich laten uitdrukken met behulp van phi, de gulden snede ratio. Stellen we \(EB=1\), dan geldt \(x=\sqrt \phi\) en \(BC=\phi\) met als resultaat een bijzondere versie van de stelling van Pythagoras: \(\phi^2=\phi +1\).
Bewijs dat AB door CE in verhouding van gulden snede wordt verdeeld
Als de cirkel met als centrum E en straal EB de cirkel met centrum A en straal AE elkaar snijden op een punt dat exact boven het centrum van de uitgangscirkel ligt, dus OO’ snijdt, dan verdeelt E AB exact in verhouding van de gulden snede.
Middelevenredige Gulden Snedevar center, startPunt;
var straal;
var hoogte, breedte, a, b, x;
var arrPoints = [];
var counter=0;
var specialCase=false;
function setup() {
colorMode(HSB, 200);
cnv=createCanvas(600, 600);
straal=200;
center= createVector(0, 0);
startPunt=createVector(-200, 0);
}
function draw() {
background(200);
stroke(0);
translate(width/2, height/2);
//grote cirkel
fill(60, 10, 180);
ellipse(center.x, center.y, 2*straal, 2*straal);
noFill();
//centrum van grote cirkel
ellipse(center.x, center.y, 3, 3);
//trek cirkel van startpunt door centrum
//diameter
line(-straal, 0, straal, 0);
//diameter omhoog
line(0, 0, 0, -straal);
//voor beweging van punt over omtrek op grote cirkel ahv mouseX/mouseY
var SnijPuntCirkel=circleLineIntersect(-straal, 0, mouseX, -mouseY, center.x, center.y, straal);
//positie van centrum van de kleine ingeschreven cirkel die begint van rechts op diamter
var centrumKleineCirkel=createVector(SnijPuntCirkel.x, 0);
//de lijnen waarmee Keplers driehoek wordt gemaakt
line(startPunt.x, startPunt.y, SnijPuntCirkel.x, SnijPuntCirkel.y);
line(SnijPuntCirkel.x, SnijPuntCirkel.y, 200, 0);
// de cirkels
var r =straal - SnijPuntCirkel.x;
var R =straal + SnijPuntCirkel.x;
ellipse(SnijPuntCirkel.x, 0, 2*r, 2*r);
arc(startPunt.x, 0, 2*R, 2*R, PI, TWO_PI);
/*
if (SnijPuntCirkel.x>0) {
hoogte=straal-SnijPuntCirkel.x;
breedte=SnijPuntCirkel.x+SnijPuntCirkel.y;
} else {
hoogte=straal+SnijPuntCirkel.x;
breedte=SnijPuntCirkel.x-SnijPuntCirkel.y;
}*/
//R=straal+SnijPuntCirkel.x;
//r=straal-SnijPuntCirkel.x;
//trek de cirkel vanuit startpunt met straal a
//arc(startPunt.x, 0, 2*a, 2*a, PI, TWO_PI);
//vindt het snijpunt tussen a-cirkel en b-cirkel
var SnijpuntAcirkelBcirkel=circleCircle(-200, 0, R, SnijPuntCirkel.x, 0, r);
//testen van speciale situatie en instellen rode a
if (linePoint(0, 0, 0, -200, SnijpuntAcirkelBcirkel.x, SnijpuntAcirkelBcirkel.y)) {
specialCase=true;
stroke(190, 180, 180);
strokeWeight(3);
ellipse(SnijpuntAcirkelBcirkel.x, SnijpuntAcirkelBcirkel.y, 8, 8);
stroke(180, 200, 200);
line(-straal, 0, SnijPuntCirkel.x, 0);
stroke(25, 200, 200);
line(SnijPuntCirkel.x, 0, straal, 0);
strokeWeight(1);
stroke(0);
} else {
specialCase=false;
}
//de lila driehoek
/*
fill(180,80,200);
ellipse(SnijPuntCirkel.x, -hoogte, 5, 5);
beginShape();
//punt op diameter;
vertex(SnijPuntCirkel.x, 0);
//loodlijn omhoog;
vertex(SnijPuntCirkel.x, -hoogte);
vertex(breedte, 0);
//vertex(30, 75);
endShape(CLOSE);
noFill();
//kleine cirkel met hoogte als diameter; moet na lila driehoek vanwege fill()
ellipse(SnijPuntCirkel.x, 0,-2*hoogte,-2*hoogte);
//float Lengte=vindAfstand(startPunt, centrumKleineCirkel, hoogte);
*/
//tangent van Startpunt op klein cirkel
//var raakpunt= findTangent(startPunt, centrumKleineCirkel, hoogte);
// is niet nodig; gaat via angleBetween
//float Hoek=vindHoek(startPunt,centrumKleineCirkel, hoogte);
//voeg het snijpunt in array voor tracen van curve
//arrPoints[counter]=raakpunt;
//uit startpunt naar punt op cirkel: de grote hypothenusa
//if (linePoint(startPunt.x, startPunt.y, SnijPuntCirkel.x, SnijPuntCirkel.y, raakpunt.x, raakpunt.y)) {
//stroke(120, 180, 180);
//}
//de middelevenredige lijn naar diameter; oftewelloodlijn uit punt op cirkel naar diameter (is Meanproportional)
stroke(90, 80, 200);
strokeWeight(3);
line(SnijPuntCirkel.x, SnijPuntCirkel.y, SnijPuntCirkel.x, 0);
stroke(0);
strokeWeight(1);
/*
//teken tangent uit Startpunt aan kleine cirkel
line(startPunt.x,startPunt.y, raakpunt.x,raakpunt.y);
//teken lijn centrum kleine cirkel naar punt tangent;
line(raakpunt.x, raakpunt.y, SnijPuntCirkel.x,0);
stroke(120, 200, 200);
for(var i=0;i<counter;i++){
var v = arrPoints[i];
ellipse(v.x,v.y,2,2);
}
stroke(0);
a=straal+SnijPuntCirkel.x;
b=straal-SnijPuntCirkel.x;
//trek de cirkel vanuit startpunt met straal a
arc(startPunt.x,0,2*a, 2*a, PI, TWO_PI);
//vindt het snijpunt tussen a-cirkel en b-cirkel
var SnijpuntAcirkelBcirkel=circleCircle(-200,0,a, SnijPuntCirkel.x, 0,b);
//testen van speciale situatie en instellen rode a
if(linePoint(0,0,0, -200, SnijpuntAcirkelBcirkel.x,SnijpuntAcirkelBcirkel.y)){
specialCase=true;
stroke(190,180,180);
strokeWeight(2);
ellipse(SnijpuntAcirkelBcirkel.x,SnijpuntAcirkelBcirkel.y,8,8);
}else{
specialCase=false;
}
//teken lijnstuk a op diameter
line(-straal,0, SnijPuntCirkel.x,0);
//de lijn uit punt op cirkel naar einde diameter (is gelijk a in speciale geval)
line(SnijPuntCirkel.x,SnijPuntCirkel.y, straal,0);
//op vertexdriehoek
line(SnijPuntCirkel.x, -hoogte, breedte, 0);
//teken lijn b op diameter
if(specialCase){
//teken lijnstuk b op diameter in andere kleur
stroke(110,180,180);
//op diameter
line(straal,0, SnijPuntCirkel.x,0);
//op rechtse driehoek
line(raakpunt.x, raakpunt.y, SnijPuntCirkel.x,0);
//de lijn gelijk aan middelevenredige
stroke(90,80,200);
line(startPunt.x,startPunt.y, raakpunt.x,raakpunt.y);
}
stroke(0);
strokeWeight(1);
//lijn uit centrum recht omhoog
line(center.x, center.y, center.x, -straal);
//teksten
text("D", breedte, -10);
text("F", SnijPuntCirkel.x +10, -hoogte+5);
text("G", raakpunt.x-5, raakpunt.y-5);
*/
text("E", SnijPuntCirkel.x, -10);
text("O", 0, 15);
text("O'", 0, -straal-10);
text("A", -210, 0);
text("B", 205, 0)
text("C", SnijPuntCirkel.x, SnijPuntCirkel.y-10);
text("a", -100, 10);
text("b", (SnijPuntCirkel.x+hoogte/2), 10);
text("x", SnijPuntCirkel.x, SnijPuntCirkel.y/2);
/*
//text("a: "+a+"; b: "+b+"; x: "+(-SnijPuntCirkel.y), -250, -270);
text("verhouding middelevenredig: "+nf(b/-SnijPuntCirkel.y,0,3), -250, -270);
text("verhouding b:a "+ nf(b/a, 0, 3), -250, -250);
text("verhouding a:geheel "+ nf(a/(a+b),0,3), -250, -230);
var cab = vindHoek(startPunt, SnijPuntCirkel);
var gae= vindHoek(startPunt, raakpunt);
text("hoek CAB: "+ nf(degrees(-cab),0, 3)+ "; hoek GAE:"+ nf(degrees(-gae), 0,3) , -250, -210);
*/
//text("verhouding cirkels: "+ (2*PI*hoogte)/(-2*PI*SnijPuntCirkel.y), -250, -170);
//text("opp kleine cirkel: "+ 2*PI*hoogte, -250, -150);
// text("opp grote cirkel: "+ -2*PI*SnijPuntCirkel.y, -250, -130);
counter++;
}
function circleLineIntersect( x1, y1, x2, y2, cx, cy, cr ) {
//println(cx+":"+cy);
var Snijpunt=createVector(0, 0);
;
var dx = x2 - x1;
var dy = y2 - y1;
var a = dx * dx + dy * dy;
var b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
var c = cx * cx + cy * cy;
c += x1 * x1 + y1 * y1;
c -= 2 * (cx * x1 + cy * y1);
c -= cr * cr;
var bb4ac = b * b - 4 * a * c;
//println(bb4ac);
if (bb4ac < 0) { // Not intersecting
//return false;
} else {
var mu = (-b + sqrt( b*b - 4*a*c )) / (2*a);
var ix1 = x1 + mu*(dx);
var iy1 = y1 + mu*(dy);
mu = (-b - sqrt(b*b - 4*a*c )) / (2*a);
var ix2 = x1 + mu*(dx);
var iy2 = y1 + mu*(dy);
//println(ix2+"; "+iy2);
// The intersection points
//from inside?
ellipse(ix1, iy1, 10, 10);
Snijpunt=createVector(ix1, iy1);
//from outside?
//ellipse(ix2, iy2, 10, 10);
}
return Snijpunt;
}
function findTangent(P, centrum, Straal) {
// find tangents
//println(centrum.x+"; "+centrum.y+"; "+Straal);
//println(P.x+":"+P.y);
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dist = sqrt(dx * dx + dy * dy);
//boogsinus: theta die lijn van lengte P en centrum C maakt met lijn Straal.
var th = asin(Straal/dist);
//hoek tussen P en centrum C van cirkel
var d = atan2(dy, dx);
//println(degrees(d));
var d1 = d+th+PI/2;
var d2 = d-th+PI/2;
var T1x = centrum.x + Straal * cos(d1);
var T1y = centrum.y - Straal * sin(d1);
//ellipse(T1x, T1y, 15,15);
var T2x = centrum.x - Straal * cos(d2);
var T2y = centrum.y + Straal * sin(d2);
//ellipse(T2x, T2y, 10,10);
var Tpoint=createVector(T1x, T1y);
return Tpoint;
}
function circleCircle( c1x, c1y, c1r, c2x, c2y, c2r) {
var intersection1, intersection2;
intersection1 = createVector(0, 0);
intersection2 = createVector(0, 0);
var dx= c1x-c2x;
var dy=c1y-c2y;
var dist= sqrt(dx*dx+dy*dy);
// No solutions, the circles are too far apart.
if (dist>c1r+c2r) {
} else if (dist<abs(c1r-c2r)) {
// No solutions, one circle contains the other.
} else if (dist==0 & c1r==c2r) {
// No solutions, the circles coincide.
} else {
var a = (c1r * c1r - c2r * c2r + dist * dist) / (2 * dist);
var h = sqrt(c1r * c1r - a * a);
// Find P2.
var Px2 = c1x + a * (c2x - c1x) / dist;
var Py2 = c1y + a * (c2y - c1y) / dist;
// Get the points P3.
intersection1 = createVector(
(Px2 + h * (c2y - c1y) / dist),
(Py2 - h * (c2x - c1x) / dist));
intersection2 = createVector(
(Px2 - h * (c2y - c1y) / dist),
(Py2 + h * (c2x - c1x) / dist));
ellipse(intersection1.x, intersection1.y, 5, 5);
}
return intersection1;
}
function vindAfstand( P, centrum, Straal) {
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dd = sqrt(dx * dx + dy * dy);
var Lengte=sqrt((dd*dd)-(Straal*Straal));
//ellipse(-200,0, 2*Lengte, 2*Lengte);
return Lengte;
}
function vindHoek(P, centrum) {
var dx = centrum.x - P.x;
var dy = centrum.y - P.y;
//afstand tussen punt en cirkelcentrum
var dist = sqrt(dx * dx + dy * dy);
var th = asin(centrum.y/dist);
return th;
}
function linePoint( x1, y1, x2, y2, px, py) {
// get distance from the point to the two ends of the line
var d1 = dist(px, py, x1, y1);
var d2 = dist(px, py, x2, y2);
// get the length of the line
var lineLen = dist(x1, y1, x2, y2);
// since floats are so minutely accurate, add
// a little buffer zone that will give collision
var buffer = 0.1; // higher # = less accurate
// if the two distances are equal to the line's
// length, the point is on the line!
// note we use the buffer here to give a range,
// rather than one #
if (d1+d2 >= lineLen-buffer & d1+d2 <= lineLen+buffer) {
return true;
}
return false;
}
function mouseClicked() {
//saveCanvas(cnv, 'middelevenredig', 'jpg');
}
De x-waarde van het snijpunt van twee cirkels kan worden bepaald met de formule $$x={{d^2-r^2+R^2} \over 2d}$$
(uitleg)
Stel cirkel met centrum O en straal 1.
Straal van kleine cirkel met centrum E is r; de straal R van de cirkel met centrum A, is dan 2-r. De afstand d tussen beide centra is ook 2-r. Ingevuld in de bovenstaande formule geeft dat de volgende vergelijking: $$ x={{(2-r)^2 -r^2+(2-r)^2} \over 2\cdotp(2-r)}$$ Maar in dit geval is x gelijk aan 1 (want gelijk aan x-waarde van O) wat, vereenvoudigd, de volgende vergelijking oplevert: $$ 1={{2(2-r)^2 -r^2} \over 2 \cdotp (2-r)}$$ De wortels zijn \( r= 3 +\sqrt 5\) en \( r= 3 -\sqrt 5\). AB wordt in dit geval door E gedeeld in \(AE={2-(3+\sqrt 5)}={ \sqrt 5-1}\) en \(EB=3 – \sqrt 5\). De gulden snede verhouding geldt als $${AE \over EB} ={AB \over AE}$$ Dus: $${{\sqrt 5-1}\over{3-\sqrt 5}}={2 \over {\sqrt5 -1 }} $$ en vereenvoudigd:
$$6-2\sqrt5=6-2 \sqrt5$$ Dus E verdeelt AB in de verhouding van de gulden snede als het snijpunt van cirkels met centrum E en A exact op de diameter loodrecht op AB valt. QED.