Skip to content

Contrast Illusion Animation

Published November 29, 2017 by Paul Lefebvre

I was reading Twitter recently and came across this Tweet:

So of course, I though that would be cool to try in Xojo. After a few minutes of playing around I quickly had it.

In addition to being a cool illusion (eyes are weird), this project is a good excuse for me to again show how easily you can do animation with Xojo.

Essentially, you just need a Timer that tells a Canvas to update regularly. The Canvas then redraws itself using your objects.

I added a Block class to serve as the blocks that move across the stripe pattern. This class has properties for the X, Y, color and a method to draw itself.

In the Open event of the Canvas, the block objects are initialized:

Block1 = New Block // property on Window
Block1.X = 0
Block1.Y = Canvas1.Height / 3
Block1.BlockColor = &cFFFF00

Block2 = New Block // property on Window
Block2.X = 0
Block2.Y = (Canvas1.Height / 3) * 2
Block2.BlockColor = &c0000ff

A Timer is added to the Window (Period = 10) with code to update the block’s X coordinates:

Block1.X = Block1.X + 1
Block2.X = Block2.X + 1

If Block1.X > Canvas1.Width Then Block1.X = 0
If Block2.X > Canvas1.Width Then Block2.X = 0

Canvas1.Invalidate(False)

The Paint event then draws the stripe pattern (or not if a hide checkbox is selected):

If HideStripeCheck.Value Then
  g.ForeColor = &ccccccc
  g.FillRect(0, 0, g.Width, g.Height)
Else
  g.ForeColor = &c000000
  g.FillRect(0, 0, g.Width, g.Height)
  Dim showStripe As Boolean
  For i As Integer = 0 To g.Width Step 25
    If showStripe Then
      g.ForeColor = &cffffff
      g.FillRect(i, 0, 25, g.Height)
    End If
    showStripe = Not showStripe
  Next
End If

Block1.Draw(g)
Block2.Draw(g)

Download the illusion project and be amazed at how your eyes play tricks on you:

Illusion Project

 

 

Published in Fun