HTML
<script src="https://cindyjs.org/dist/latest/Cindy.js"></script>
<script src="https://cindyjs.org/dist/v0.8.7/Cindy.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>SatzVonPick.cdy</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#CSConsole {
background-color: #FAFAFA;
border-top: 1px solid #333333;
bottom: 0px;
height: 200px;
overflow-y: scroll;
position: fixed;
width: 100%;
}
</style>
<script type="text/javascript" src="http://cinderella.de/CindyJS/latest/Cindy.js"></script>
<script id="csdraw" type="text/x-cindyscript">
n=floor(N.y); N.y=floor(N.y); N.caption=text(n); A.xy=[0,n]; B.xy=[2*n,0]; C.xy=B+[n,2*n]; D.xy=A+[n,2*n]; repeat(n,j,start->floor(A.y+1),stop->floor(C.y-1),step->1, repeat(n,k,start->floor(D.x+1),stop->floor(B.x-1),step->1, pointcolor((0,0.55,0)); draw([k,j]);
); ); repeat(n,j,start->A.y,stop->1,step->-1, repeat(n,k,start->floor(n+1+(A.y-2*j)),stop->floor(B.x-1),step->1, pointcolor((0.5,0.50,1)); draw([k,j]); ); ); repeat(n,k,start->D.x,stop->1,step->-1, repeat(n,j,start->floor(A.y+1),stop->floor(D.y-1-2*(D.x-k)),step->1,
pointcolor((0.5,0.25,1)); draw([k,j]); print([k,j]); ); ); repeat(n,j,start->C.y,stop->D.x-1,step->1, repeat(n,k,start->floor(D.x+1),stop->floor(C.x-1+2*(C.y-j)),step->1, pointcolor((0,0.0,1)); draw([k,j]); print([k,j]); ); ); repeat(n,k,start->B.x,stop->C.x-1,step->1,
repeat(n,j,start->floor(1+2*(k-B.x)),stop->floor(C.y-1),step->1, pointcolor((0.1,0.2,0.5)); draw([k,j]); print([k,j]); ); ); ;
</script>
<script id="csinit" type="text/x-cindyscript">
Nmax.size=2; N.size=10; N.labelled=true; N1.size=2; N1.y=1; s1.labelled=false; s2.labelled=false; s3.labelled=false; s4.labelled=false; slider1.caption=""; slider1.labelled=false;
</script>
<script type="text/javascript">
createCindy({
scripts: "cs*",
...