“What on earth is four-stroke apparent motion?”, I hear you say.

It’s this mind-melting (and, after staring for a while, potentially stomach-churning!) effect:

What’s amazing is that this effect is generated by presenting just two (!) images again and again (so the illusion lasts more than a few milliseconds 😎) and inverting their luminance profiles with each repetition (hence four-stroke, since it’s essentially a four image sequence). Thats all it takes… kinda wild!

I won’t go into the specifics of why this gives rise to the perception of never-ending motion, but it relates to my previous post on motion energy filtering and there are several interesting papers on the topic (if you’re familiar with motion energy filtering then Figure 1 of the paper by Mather & Murdoch should help your intuition!).

So, how can you make your own version of this effect? First you need to go find a gif that contains interesting motion! The one I used for the demo above looked like this:

Then, it turns out that you can open gifs in preview (sorry non-mac users, I’m sure there is a very simple windows equivalent… but I’m not going to google it) and get at the individual frames. Having done so, all you need to do is pick two sequential (or there abouts…) frames from your gif, where there is interesting motion happening. Export the two frames as images (.tiff is fine), naming the first ‘img1’ and the second ‘img2’ (easiest way is to just drag and drop the relevant frame and then rename it).

(Note, I also desaturated the images in preview… you don’t strictly have to do this, but if you don’t then be warned that things will look kinda hectic when you invert the image colour profiles!)

Now here’s the code I used to actually generate the demo (which you can easily run too, so long as you have psychopy installed).

from psychopy import visual, core

#create a window
win = visual.Window(fullscr = False, size = (800,800), units = 'pix', screen = 1)

im1 = visual.ImageStim(win, image='img1', size = 800)
im2 = visual.ImageStim(win, image='img2', size = 800)

for i in range(2):

    for i in range(3):

        im1.draw()   
        win.flip()
        win.getMovieFrame(buffer='front')

    for i in range(3):

        im2.draw()   
        win.flip()
        win.getMovieFrame(buffer='front')

    im1.color *= -1
    im2.color *= -1

win.saveMovieFrames(fileName='f1_headache.gif', fps = 60) # save movie

win.close()
core.quit()

There are obviously myriad other ways to do this (e.g., with imageio), so here’s the essential logical steps: 1) You need to load the images, 2) present them for a few frames (I chose 3 arbitrarily, fewer frames give a more flicker-y vibe), 3) invert the luminance/colour profiles and present them again. Oh and you also need a way of saving the frame buffer with each screen refresh and then stitching the frames together at the end. That’s it!

If you’ve actually bothered to follow these steps and make a demo then please feel free to send it my way - I’d love to see it!

There are also some interesting follow up ideas which you (or future me!?) might consider playing with. For example, edge-detection filtering could be used to find salient edges (essentially as regions of interest) which can then be slightly offset and contrast reversed… like local four-stroke apparent motion sequences within an image. That might be a cool way of making stationary images appear to move in interesting ways? And may make the image look slightly less 🤮-inducing (since you might not have to contrast reverse everything?). Who knows…

If you’re reading this and have been bothered to implement that, then I guess you now know… so please enlighten me!

Update (7/1/2024): Future me was actually bothered!

I decided to quickly implement a rough version of the idea I had above, using a simple Sobel filter for edge detection. I think the results are pretty cool! Here are two examples using William Turner’s (not me, nor the pirate… the other one) painting ‘The Shipwreck’ and Hokusai’s ‘The Great Wave off Kanagawa’ (then code below).

Pretty cool effects in my opinion! Here’s the code I whipped up:

import numpy as np
import matplotlib.pyplot as plt
from scipy.signal import convolve2d
import cv2
import imageio
import os

def edge_detection(image, filter):
    x = convolve2d(image[:,:,0], filter)
    y = convolve2d(image[:,:,0], np.flip(filter.T, axis=0))
    edges = np.sqrt(np.square(x) + np.square(y))
    edges *= 255.0 / edges.max()

    return edges

def mask_image(edge_image, rep, offset = False, direction = 0):

    if offset:
        edge_image = np.concatenate(
            (np.zeros((offset, edge_image.shape[1])), edge_image[offset:, :]),axis=0
            )
        edge_image = np.concatenate(
            (np.zeros((edge_image.shape[0], offset)), edge_image[:, :-offset]),axis=1
            )

    mask_image = np.ma.masked_where(edge_image < 50, 255 * np.ones_like(edge_image))

    return mask_image

def plot_image(image, mask, color_map, saving, i, filenames):
    fig, ax = plt.subplots(figsize=(30, 30))

    ax.imshow(image[...,::-1])
    # ax.imshow(image[:, :, 0], cmap=color_map, alpha=0.2)
    ax.imshow(mask, cmap=color_map, interpolation='none', vmin=0, vmax=255)
    ax.axis('off')

    if saving:
        filename = f'{i}.png'
        filenames.append(filename)
        fig.savefig(filename)
        plt.close()
        i += 1

    return i, filename    

def build_gif(filenames):
    with imageio.get_writer('hokusai.gif', mode='I', duration=0.09) as writer:
        for filename in filenames:
            image = imageio.imread(filename)
            writer.append_data(image)

    for filename in set(filenames):
        os.remove(filename)

filter = np.array([[-1, 0, 1], [-2, 0, 2], [-1, 0, 1]]) # simple sobel filter

image = cv2.imread("hokusai.jpeg")
edges = edge_detection(image, filter)

i = 0
filenames = []
for rep, color in enumerate(['Greys', 'Greys_r']):
        mask = mask_image(edges, rep)
        i, filename = plot_image(image, mask, color, True, i, filenames)

        mask = mask_image(edges, rep, offset=3)
        i, filename = plot_image(image, mask, color, True, i, filenames)

build_gif(filenames)

There are lots of parameters to be played with, and no doubt many improvements to be made, but here’s the essential logic. Basically: 1) I use Sobel filter to find the salient edges within the image, 2) I create a mask of those edges, 3) I plot the mask over the original image four times following the typical four-stroke apparent motion logic (having a sequential offset of the mask, which is then repeated with a luminance inversion). You can also toggle on and off having an additional partially transparent greyscale overlay of the image which switches luminance… this seems to make the motion effect stronger, but also adds even more annoying flicker, so I commented it out for the demos above.

Recently I moved to a new university and found myself banging my head against the problem of transferring large files from my old uni’s High Performance Computing (HPC) system (‘SPARTAN’) and my new uni’s HPC (‘Lyra’). I found this somewhat tricky because you are dealing with two remote hosts that can’t directly communicate with one another. I wanted to come up with a solution that avoided the need for manually downloading everything from the old HPC onto a local computer before re-uploading to the new HPC.

Below is the process that worked for me. Note, this is mac specific (OS Catalina 10.15.7)

1. Install macFuse and sshfs from here.

2. Go to System Preferences -> Users & Groups -> Click the ‘+’ sign at the bottom left of the window -> Set the New Account dropdown to ‘Group’ -> Full Name = ‘fuse’ -> Click on group and user check box to mark yourself as a member

3. Make a folder where you will ‘mount’ the old HPC:

    mkdir ~/sshfs_mount
   

4. Mount the relevant folder from your old HPC (enter old HPC password when prompted)

    sshfs -o idmap=user OLD_USERNAME@OLD-HPC-ADDRESS://OLD_PATH-TO-FOLDER ~/sshfs_mount
   

5. Navigate to the mounted folder on your local computer (you don’t need to ssh into the old HPC).

    cd ~/sshfs_mount 
   

6. Use rsync to transfer files from mounted folder to new HPC (in the example below I am transferring all files ending in ‘.bdf’ from the old HPC to the new HPC).

    rsync -rv --ignore-existing --progress *.bdf NEW_USERNAME@NEW_HPC_ADDRESS:NEW_PATH_TO_FOLDER
   

Troubleshooting

To get macFUSE to work I had to go to: Security & Privacy System Preferences -> General preferences, and allow loading system software from developer “Benjamin Fleischer”.

When I first tried mounting the remote folder I got this error message: 'remote host has disconnected'… this was because I’d mis-typed my old HPC address 🤦

Then when I tried remounting the remote I got this message: 'mount_macfuse: mount point /Users/willturner/sshfs_mount is itself on a macFUSE volume'

To fix that I simply had to run: diskutil umount force ~/sshfs_mount

If you’ve stumbled across this, I hope it was helpful. Please feel free to reach out and let me know if you’ve come across a better method for solving this task.

UPDATE (3/8/23)

The above method, whilst technically functional, is in practise agonisingly slow (with transfer speeds of Kb/s 🤦). To speed things up this is what I’ve been doing (if you have better ideas please let me know!):

1) I use a virtual machine (provided by my uni) as the intermediate ‘bridge’ between the two remotes, instead of my laptop.

2) On that computer (a windows machine) I mounted my old HPC (following these instructions).

3) Then I used cyberduck, connected to the new HPC, to upload the files off the mounted folder on the virtual machine. This massively increased the upload speed (although it does still take ages to transfer 250Gb of data… but luckily that can all chug away on the virtual machine in the background!).

The GitHub repo with Python code and stimulus files can be found here.

What is motion energy filtering?

Motion energy filtering revolves around a surprisingly powerful observation: that motion manifests as oriented structure in space-time. If you’re reading about this for the first time and find that idea completely incomprehensible (it certainly was for me!) I’d recommend checking out this blog by Jacob Yates, which does a far better job of explaining things than I ever could. Seriously, go check it out, it’s entertaining AND informative. If, however, you want to just soldier on, really all you need to know is that motion = orientation in space-time.

Motion energy filtering involves building detectors (‘filters’) which are sensitive to orientation in space-time, providing an elegantly simple means of detecting motion. To make things extra interesting, its generally thought that this is (part of) what the visual system does to sense motion!

Below I’ve plotted the filters generated in the demo. Notice how they contain diagonally oriented streaks… that’s essentially what enables them to look for oriented structure in space-time (i.e., motion)! In fact, if you cycle through each time-slice of the filters you will see what looks like ‘pulses’ of leftwards and rightwards motion, giving a hint at what they are trying to detect. Jacob’s blog has a really nice demo of this.

Additional resources

The original paper on motion energy filtering by Adelson and Bergen can be found here. It’s somewhat dense, but is a beautiful paper once you wrap your head around things. I’d recommend reading it after going through Jacob’s blog, before diving into the code.

George Mather’s website contains detailed descriptions of the steps involved in the demo code. I’d recommend having this open as you go through the Python translation.

The current demo only considers 1D motion (e.g., motion along a single axis). For more complex (2D motion) implementations see this nice MATLAB toolbox by Anne Urai and Klaus Wimmer, which contains links to additional resources.

What kind of website is this?

This is a static website (really just a collection of files) built using Jekyll and the academicpages template. It’s hosted for free (!) on GitHub Pages hence the funky (some might say cool?!) ‘github.io’ address.

What does is cost?

Zero dollars… 🤯 🎉

All you need is a bit of time up your sleeve, it took me ~1-2 hrs to get a basic site up and running.

What coding knowledge is required?

All that’s required is some familiarity with using a git client (I used SourceTree) and a willingness to google Markdown formatting issues until you get what you want. If you have no idea what Markdown and git are then don’t fear… learning the basics of both is actually super simple. So building a website like this even with zero experience is still very doable (it might just take you a wee bit longer!).

To ease you into things, I’ll briefly sketch out the steps that lie between you and being a website owner. First, you will use a git client (a bit like dropbox for code) to transfer all the template website files onto your computer. Then you will edit and personalise some of these newly acquired files, using the Markdown language to specify text formatting (e.g., specifying whether things should be bolded, italicised, hyperlinked etc). After you are done editing things, you will use your trusty git client to ‘push’ the files back onto the web for people to look at (in the form of your new website). That’s pretty much it! All the fancy website formatting is taken care of by the academicpages template, so you really only have to edit text files and move them around (easy!).

Are you ready to roll?

Here’s what you need to do:

1. Make sure you have a GitHub account. If you don’t have one then… make one! Also bear in mind that your username becomes the initial part of your website address, so you probably want to pick a professional looking username (or end up with one like mine 😬). If you really don’t want a funky ‘github.io’ address you also have the option of 💸 buying 💸 your own domain name (e.g., bestpostdoc.com… actually I just checked and it’s taken but postdoc.best is available and will only set you back AU$42.78).

2. Make sure you have a git client installed (or do everything through terminal, if you’re into that!). If you want to follow in my footsteps exactly then use SourceTree. Download the app, make an account and link it to your GitHub. Remember, we will use SourceTree to move files from GitHub onto your computer so we can then edit them and then upload the freshly edited files back onto the web!

3. For the initial website building process I’d recommend you just follow this excellent guide by Rob Williams. Its very clear and beautiful. Note, however, that I deviated from this guide slightly. I opted to just push my edited files onto the web immediately (using SourceTree) and fix bugs that I saw in the online version with subsequent pushes, rather than testing my website ‘locally’ (i.e. behind closed doors). I found this much easier, but in doing so you do run the risk of someone catching a glimpse of your mangled half-built website, so beware!

4. If you have ignored my advice to go follow Rob’s guide, here’s a sketch of the steps involved… in Rob’s guide:

   1. ‘Fork’ the academicpages repository into your GitHub (this just means we make our own copy of the original bunch of files, to do whatever we want with).
   2. ‘Clone’ the newly forked repository from your GitHub onto your computer (this just means we create a local copy of the repository on our own computer… kind of like downloading everything). We do this so we can then edit the files. I did all of this with… you guessed it, SourceTree!
   3. Edit the relevant files. I used MacDown to edit all files. I started by editing the ‘_config.yml’ file, following Rob’s guide. Then I edited the ‘about.md’ file (in the ‘pages’ folder) to add in a blurb about myself. Finally I added my profile photo into the ‘images’ folder to replace the original ‘profile.png’ file.
   4. For the initial version of my website I decided to just have an ‘about me’ page with links to my twitter, email, google scholar, and github accounts on the left-hand side and nothing else. So I went to the ‘data’ folder and edited the ‘navigation.yml’ file to remove all the default links to other pages at the top of the website. To do this you just have to put a hash (‘#’) in front of the lines you don’t want. For example, to remove the publications link you do this:

# main links links
main:
  #- title: "Publications"
  #  url: /publications/

Customising your site

Icon links

I later came back to my initial husk of a website and decided to add in my publications at the bottom of the ‘about me’ page.

Here’s a snapshot of the code I added in to the ‘about.md’ file to achieve this (this snippet adds in the first two publications I have listed).

### Publications

1. Ko, Feuerriegel, **Turner**, Overhoff, Niessen, Stahl, Hester, Fink, Weiss, & Bode (2022). Divergent effects of absolute evidence magnitude on decision accuracy and confidence in perceptual judgements. *Cognition*. <a href="../files/Ko_et_al_2022.pdf"><i class="fas fa-file-pdf"></i></a> <a href="https://www.sciencedirect.com/science/article/pii/S0010027722001135?dgcid=coauthor"><i class="fas fa-link"></i></a> <a href="https://osf.io/r8vfx/"><i class="fas fa-code"></i></a>

2. **Turner** (2022). Unravelling the neural mechanisms which encode rapid streams of visual input. *The Journal of Neuroscience*. <a href="../files/Turner_2022.pdf"><i class="fas fa-file-pdf"></i></a> <a href="https://www.jneurosci.org/content/42/7/1170"><i class="fas fa-link"></i></a>

With a bit of googling I worked out how to use some simple HTML to add in fancy icons like this which I use to link to a pdf copy of my papers. I put these pdfs in the ‘files’ folder and then pushed them onto GitHub with… SourceTree. Happily, you don’t need to install anything extra to use icons like this. You can search to see what other icons are available on the Font Awesome website.

To make things a bit more digestable, I’ll focus in on the code snippet that goes into making just one of these links:

<a href="../files/Turner_2022.pdf"><i class="fas fa-file-pdf"></i></a>

The first bit <a href="../files/Turner_2022.pdf"> specifies the link to the pdf document which I put in the files folder. The second bit <i class="fas fa-file-pdf"></i></a> says that the link should be an icon from the Font Awesome Solid (‘fas’) class, specifically the pdf doc one (‘fa-file-pdf’). How did I work out that I needed to write fas fa-file-pdf to get that? Well I went on the Font Awesome website and searched for ‘pdf’. I then clicked on the icon I liked and looked at the html snippet provided. If you’re particularly sharp eyed you’ll notice that this html snippet <i class="fa-solid fa-file"></i> is actually different to the one I used, and so it didn’t work when I first copied it in 😱! It turns out that this is because the academicpages template uses version 5 of Font Awesome. After some googling I found this page which showed me the old syntax for referencing icons in version 5 <i class="fas fa-file-pdf"></i> which fixed the issue! Note, for all of this to work you might need to make the small edit suggested here under the heading ‘Fixing fancy icons’.

Code chunks (and wrapping to avoid long scroll bars)

To add in a code chunk you simply add three back ticks ` before and after the code (and to get syntax highlighting you just add the language (e.g., python) straight after the first lot of back ticks). To write code inline (i.e. in the middle of a sentence) you just add one back tick either side of the code.

One issue I ran into when using this default code chunk quoting is that for long lines of code, the text wont ‘wrap’, so you can end up with a ridiculously long horizontal scroll bar. If you want to avoid that, all you need to do is open the ‘_base.scss’ file in the ‘_sass’ folder, search for the word ‘pre’ and change the following chunk:

pre {
  overflow-x: auto; /* add scrollbars to wide code blocks*/
}

to this:

pre {
  overflow-x: auto; /* add scrollbars to wide code blocks*/
  white-space: pre-line;
}

After you save and push that change it should fix the issue (at least when viewing on google chrome… I haven’t tested other browsers).

Update 5/1/2024: to get wrapping but still respect indentation within code blocks you actually want to set white space to ‘pre-wrap’ rather than ‘pre-line’ (this is what I have now done).

Emojis

To add emojis to your text all you need to do is find out the ‘hexadecimal HTML code’ for the emoji you want. So for example, if I wanted to add in a cowboy hat emoji I would google ‘cowboy hat emoji hexadecimal HTML’ and copy in the relevant code 🤠 … 🤠