Joachim Ford About
15.01.2022

Anthrophobia

It all began when I made a dweet on the last day of 2021. It had potential, and it turned out that both this and my game Snakes And Ladders were inspired from it.

Check Out the Source Code

Making procedural creatures like these is pretty simple. The idea is to generate a template "box-man" and then apply randomness to it's colour, body height, arm length, leg length, eye distance, eye size ect..., and then to move each figure in a random direction, stop at intervals, blink, and move its eyes.

I think the most notable part of this experiment is the way some of these creatures walk. This function is based on a circular movement which is limited at the bottom to create a simple walking motion. Quite a handy trick for when you need it.

#const yDrop = cvs.height / 5

#for (let i = 2; i --;) {
    const x = cvs.width / 2 - Math.sin(time + i * Math.PI) * cvs.height / 4 - 10
    let y = cvs.height / 2 + Math.cos(time + i * Math.PI) * cvs.height / 4 - 10

    #if (y > cvs.height / 2) y = cvs.height / 2
    #y += yDrop

    const swing = Math.sin(time + i * Math.PI)
    #let rise = swing
    #if (rise < 0) rise = 0
    #y -= rise * 40

Of course, the manner of this walk can be changed by stretching its movement or by giving it more characteristic bops and drags. The example below really shows how loose you can be with the whole thing. For me, this walk is much better. Probably not so good for the heels, but more realistic to look at, that is.

#for (let i = 2; i --;) {
    const x = -Math.sin(time + i * Math.PI + Math.sin(time + i * Math.PI + 2) * .3) * 100
    let y = 30 + Math.cos(time + i * Math.PI + Math.sin(time + i * Math.PI + 2)) * 130

    #if (y > 0) y = 0

    const swing = Math.sin(time + i * Math.PI + Math.sin(time + i * Math.PI + 3.1)) * 1.3
    #let rise = swing
    #if (rise < 0) rise = 0
    #y -= rise * 40

In the above example I tried to make the walk a bit comical, so you'd probably want to tweak it based on what your using it for, as human and animal walks are usually a bit less extreme. For a larger implementation, see this article.

Anyway, I hope you found this page as helpful as I found it fun. Please contact me if you have any more ideas for experiments!

All comments are reviewed before being posted. No contact details or other personal information will be shared.

If there's anything else you don't want published, please say so in the comment.

Thanks for your feedback!

Leave a comment

Thanks!

© Copyright joachimford.uk