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.
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.
¬for (let i = 2; i --;) {
¬const x = -Math.sin(time + i * Math.PI + Math.sin(time + i * Math.PI + 2) * .3)¬ * 100
¬let y = Math.cos(time + i * Math.PI + Math.sin(time + i * Math.PI + 2))¬ * 100
if (y > 0) y = 0
¬const swing = Math.sin(time + i * Math.PI + Math.sin(time + i * Math.PI + 3.1))¬
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!
