JavaScript、p5.js プログラム このページの下の窓で動きます
// Symmetry3.html プログラムファイル
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script language="javascript" type="text/javascript" src="Symmetry3.js"></script>
</head>
<body>
</body>
</html>
// Symmetry3.js プログラムファイル
var X=300, dX=1; Y=300, dY=1;
function setup() {
createCanvas(601, 601);
background(50,50,50);// 背景の白さ
stroke(0,0,0);// 線の色
fill(255,255, 0);
// fill(0, 0, 0);
}
function draw() {
fill(255-Math.abs(X/2),255-Math.abs(Y/2), Math.abs(dX*20));
dX=dX+random(2)-1; X=X+dX;
if (X<100){X=100;dX=1} ; if (X>width-0){X=width-0;dX=-1} ;
dY=dY+random(2)-1; Y=Y+dY;
if (Y<100){Y=100;dY=1} ; if (Y>height-0){Y=height-0;dY=-1} ;
rect(X-20, Y ,60,30); // 線の太さ
var L=pow(pow(X-width/2,2)+pow(Y-height/2,2),0.5);
var angle=atan2(height/2-Y,X-width/2);
for (var i=1; i<8; i++) {
a=angle-PI/8*i*2;
rect(width/2+L*cos(a)-20,height/2-L*sin(a),60,30);
}
for (var i=0; i<8; i++) {
a=PI/2-angle+PI/8*i*2;
rect(width/2+L*cos(a)-20,height/2-L*sin(a),60,30);
}
}