Spirales

Deux constructions de spirales

On s'intéresse à deux manières de construire une spirale, à chaque fois à partir d'un carré qu'on transforme étape par étape. Ces constructions sont détaillées en deux exercices pour introduire la notion de limite d'une suite.
On calcule de plus dans ces constructions la longueur de la spirale construite jusqu'à l'étape courante.
Les éléments mathématiques, exercices, corrigés et calculs de longueur puis limites se trouvent à la page précisée.
Sur cette page, on s'intéresse à la programmation en javascript et en python.
Avec du javascript dans un canvas on pilote la construction graphique.

Construction et animation de la spirale géométrique


longueur (jusque là…): ln≈
et le code javascript pour tout ceci:
<canvas id="spi" width="400" height="400" style="border:1px solid black"></canvas>
<form onchange="Draw()">
<label>Rapport k:</label>
<input type="number" id="k" min="0" value="0.25" max="1" step="0.01">
</form>
<form onchange="Draw()">
<label>Nombre de carrés:</label>
<input type="number" id="Nc" min="0" value="10" max="500" step="1">
</form>
<br>longueur (jusque là…): l<sub>n</sub>≈<span id="Textl"></span>

<script>
canvas = document.getElementById("spi");
ctx = canvas.getContext("2d");
Width=document.getElementById("spi").width;
Height=document.getElementById("spi").height;
ctx.clearRect(0,0,Width,Height);
function bary(A,B,k) {
    //return C tel que V(AC)=kV(AB)
    xC=A[0]+k*(B[0]-A[0])
    yC=A[1]+k*(B[1]-A[1])
    return [xC,yC] 
}
function plotsq(x,y) {
ctx.strokeStyle="blue";
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(x[0],y[0]);ctx.lineTo(x[1],y[1]);
ctx.lineTo(x[2],y[2]);
ctx.lineTo(x[3],y[3]);
ctx.lineTo(x[0],y[0]);
ctx.stroke();
}

function Draw() {
ctx.clearRect(0,0,Width,Height);
k=document.getElementById("k").value;
Nc=document.getElementById("Nc").value;
var x=new Array
var y=new Array
var xn=new Array
var yn=new Array

x=[0,400,400,0]
y=[0,0,400,400];
plotsq(x,y)

xn=x;yn=y
l=0
for (i=0;i<Nc;i++) {
 x=xn;x[x.length]=x[0];
 y=yn;y[y.length]=y[0];
 xn=[];yn=[]
 for(j=0;j<4;j++){
        A=[x[j],y[j]];B=[x[j+1],y[j+1]]
        M=bary(A,B,k)

        xn[xn.length]=M[0]
        yn[yn.length]=M[1]
}
ctx.strokeStyle="red";
ctx.lineWidth=6;
ctx.beginPath();
ctx.moveTo(x[0],y[0]);ctx.lineTo(xn[0],yn[0]);
ctx.stroke();

plotsq(xn,yn)

l=l+Math.pow(Math.pow(xn[0]-x[0],2)+Math.pow(yn[0]-y[0],2),0.5)
lr=l/100
document.getElementById("Textl").innerHTML=Math.round(lr*100000)/100000;
}}

Draw();
</script>


et, en prime, le code Python: 
from pylab import *
import numpy as np
k=0.1
ion() # mode intercation on
def bary(A,B,k):
    #return C tel que V(AC)=kV(AB)
    x=A[0]+k*(B[0]-A[0])
    y=A[1]+k*(B[1]-A[1])
    return(x,y) 
def plotsq(x,y):
    x.append(x[0])
    y.append(y[0])
    plot(x,y,'-b')

    # Initialisation
x=[0,1,1,0]
y=[0,0,1,1]
plotsq(x,y)
axis([-.3,1.3,-.3,1.3])

xn=x;yn=y
Lx=[x[0]];Ly=[y[0]]
l=0
for i in range(150):
    x=xn;x.append(x[0]);y=yn;y.append(y[0])
    xn=[];yn=[]
    for i in range(4):
        A=[x[i],y[i]];B=[x[i+1],y[i+1]]
        M=bary(A,B,k)
        xn.append(M[0])
        yn.append(M[1])
    Lx.append(xn[0]);
    Ly.append(yn[0]);
    plotsq(xn,yn)
    plot([x[0],xn[0]],[y[0],yn[0]],'-r',linewidth=3)
    draw()
    pause(0.5)
    l=l+sqrt((xn[0]-x[0])**2+(yn[0]-y[0])**2)
    print(l)
ioff() # mode interaction off
show()

Construction et animation de la spirale harmonique


longueur (jusque là…): Ln≈
et le code javascript associé cette fois: 
<canvas id="spih" width="400" height="400" style="border:1px solid black"></canvas>
<form onchange="Drawh()">
<label>Nombre de carrés:</label>
<input type="number" id="Nch" min="0" value="10" max="500" step="1">
</form>
<br>longueur (jusque là…): L<sub>n</sub>≈<span id="Textlh"></span>

<script>
canvash = document.getElementById("spih");
ctxh = canvash.getContext("2d");
Width=document.getElementById("spih").width;
Height=document.getElementById("spih").height;
ctxh.clearRect(0,0,Width,Height);
function baryh(A,B,k) {
    //return C tel que V(AC)=kV(AB)/||AB||
    normAB=Math.pow(Math.pow(B[0]-A[0],2)+Math.pow(B[1]-A[1],2),0.5)
    xC=A[0]+k*(B[0]-A[0])/normAB
    yC=A[1]+k*(B[1]-A[1])/normAB
    return [xC,yC] 
}
function plotsqh(x,y) {
ctxh.strokeStyle="blue";
ctxh.lineWidth=2;
ctxh.beginPath();
ctxh.moveTo(x[0],y[0]);ctxh.lineTo(x[1],y[1]);
ctxh.lineTo(x[2],y[2]);ctxh.lineTo(x[3],y[3]);
ctxh.lineTo(x[0],y[0]);
ctxh.stroke();
}
function Drawh() {
 ctxh.clearRect(0,0,Width,Height);
 Nch=document.getElementById("Nch").value;
 var xh=new Array
 var yh=new Array
 var xnh=new Array
 var ynh=new Array

 xh=[0,400,400,0]
 yh=[0,0,400,400];
 plotsqh(xh,yh)

xnh=xh;ynh=yh
lh=0
for (i=1;i<Nch;i++) {
 xh=xnh;xh[xh.length]=xh[0];
 yh=ynh;yh[yh.length]=yh[0];
 xnh=[];ynh=[]
 for(j=0;j<4;j++){
        A=[xh[j],yh[j]];B=[xh[j+1],yh[j+1]]
        M=baryh(A,B,1/i*100)

        xnh[xnh.length]=M[0]
        ynh[ynh.length]=M[1]
}
ctxh.strokeStyle="red";
ctxh.lineWidth=6;
ctxh.beginPath();
ctxh.moveTo(xh[0],yh[0]);ctxh.lineTo(xnh[0],ynh[0]);
ctxh.stroke();

plotsqh(xnh,ynh)

lh=lh+Math.pow(Math.pow(xnh[0]-xh[0],2)+Math.pow(ynh[0]-yh[0],2),0.5)
lrh=lh/100
document.getElementById("Textlh").innerHTML=Math.round(lrh*100000)/100000;
}}

Drawh();
</script>
Voir aussi:
LongPage: h2: 3 - h3: 0