Spirales
Spirale géométrique
longueur (jusque là…): ln≈
<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()
Spirale harmonique
longueur (jusque là…): Ln≈
<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>