Coded Optical Illusions

I had a great time this summer doing art and professional development with Twitter peers. On one of the days, Ellen Thomson hosted activities with Optical Illusions. This got me thinking of all the ways this could be done with coding + math groups. There are two approaches I take in coding groups. T

Coded Optical Illusions

I had a great time this summer doing art and professional development with Twitter peers. On one of the days, Ellen Thomson hosted activities with Optical Illusions. This got me thinking of all the ways this could be done with coding + math groups.

There are two approaches I take in coding groups. The first approach is to give a prompt (picture, idea, concept, etc). This approach works well for students that are semi-familiar with coding. The second approach is to give students working code and have them change it into their own remix. I relate it to taking apart a radio and trying to figure out what different components do and what can be done to make it better.

Each one of the prompts/projects can open up discussion and problem-solving dealing with math concepts at many levels. In the examples below you may see matrices, linear equations, unit circles, systems of equations, trigonometry, functions of time, and so much more.

Below are optical illusions coded in p5.js to break, remix, and share. The code below is editable, but I recommend copying and playing with it at p5js.org or Codepen. Some have comments and some do not (on purpose). I hope to add more coded illusions to this post as I get time. Please feel free to request certain illusions.

Herman Grid Illusion

See the Pen OL_PonzoIllusion by Sophia (@fractalkitty) on CodePen.


Ehrenstein Illusion

See the Pen OL_bentSquare by Sophia (@fractalkitty) on CodePen.


Titchener circles

See the Pen OL_Circles by Sophia (@fractalkitty) on CodePen.


Kanizsa’s Triangle

See the Pen OL_TitchenerCircles by Sophia (@fractalkitty) on CodePen.


Ponzo Illusion

See the Pen OL_PonzoIllusion by Sophia (@fractalkitty) on CodePen.


Checkered Illusion

(source: http://www.psy.ritsumei.ac.jp/~akitaoka/checkerede.html)

See the Pen OL_squares by Sophia (@fractalkitty) on CodePen.


Hering Illusion

See the Pen OL_CafeWall by Sophia (@fractalkitty) on CodePen.


Cafe Wall

See the Pen OL_KanizsaTriangle by Sophia (@fractalkitty) on CodePen.


Pinna’s Illusory

See the Pen by Sophia (@fractalkitty) on CodePen.