Spirales

<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>

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()

<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>