クレーター錯視(by Prof.Kitaoka)をJavaScriptで回す。

（プログラム crater.html）

<html>

<head>

  <meta charset="UTF-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"></script>

<script language="javascript" type="text/javascript" src="crater.js"></script>

</head>

<body>

</body>

</html>

 

（以下のプログラムは crater.js です。別ファイルにして保存。）

function preload() {img = loadImage("Crater.png");}

function setup() {createCanvas(1000, 800);}

   var i=0;

function draw() {

  frameRate(30); background(153,153,153);

   textSize(32); text("Crater illusion by Prof.Kitaoka", 10, 30);

   translate(width/2, height/2);

    i+=1; rotate(PI/200.0*(i)); image(img, -342, -147, 684, 295);

 }