http://symmetry30.mybluemix.net/   ここをクリック! IBM Bluemixで動いています。

 

(index.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);
 }
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);
}
}

このページの下でもお絵かきアプリが動きます。左下の灰色のウインドウでマウスをクリックしながら動かすと対称な絵を描きます。

javascript, p5.jsのプログラムは「java phpなど」のページにあります。