北岡明佳先生の錯視画像をJavaScriptで動かしてみました
眼振の様に見えるには、移動速度、停止時間、移動距離をうまく選ぶ必要があります。いろいろ試してこれが良さそうな結果です。
<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">
function preload() {
img = loadImage("Kitaoka2.png");
}
function setup() {
createCanvas(1200, 500);
}
var i=0; var s=1; var xmove=5;
function draw() {
frameRate(60);
background(153);
translate(xmove*i, 0);
i+=s;
if(i==20 || i==0){ s=s*(-1); frameRate(2);};
image(img, 5, 50);
}
</script>
</head>
</html>
JvaScriptでp5.jsを使用しない場合のプログラミング例