北岡明佳先生の錯視画像を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を使用しない場合のプログラミング例
JavaScriptでの画像を揺らすプログラム.pdf
PDFファイル 62.2 KB

https://profkitaoka.mybluemix.net/   をクリックすればBluemixで動いていますが、

 

 

下でも動いています。