DEV Community

Posted on Jun 7, 2021

A Game of Blobs - Dead Or Alive

One boring day, some month ago during the Covid Quarantine, stuck in my room in Italy, finding something to do I found an article about Generative Art and it blow my mind.

What the hell is the "Generative Art"?

“Generative art is art made using a predetermined system that often includes an element of chance – is usually applied to computer based art”

The Article

Generative blob characters using SVG!

George Francis ・ Jan 11 '21

#webdev #tutorial #javascript #codepen

The article summarize what "Generative Art" means and explain how to generate using javascript Blobs. Yes, BLOBS! And you know what? I love blobs.

What to do with infinite Blobs

I lost hours thinking about them to find out something to do with them. And, when i was in the bathroom I had an idea.
What is the better think you can using randomly infinite cute blobs with cute eyes that will make everyone fall in love?
A skill game in which the user must find the "Wanted" blob before the time end. Each time a blob is found the user receive earn point and receive a new blob to find, dead or alive.

How to make cute Blobs

In the original article a library to generate svg is used to make blobs, but, I decided to use React.
I will not explain how the shape of the blob is made because the [source article](https://dev.to/georgedoescode/tutorial-generative-blob-characters-using-svg-1igg already explain it very well.

The recipe

Ingredients for cute and juicy Blobs

a random number of points
1 eye for a cyclopic blob or 2 eyes for a normal blob
a random cute pastel color palette

Start collecting all the ingredients than get the point and spline them to get a blobby cute shape, add the eyes in the right position and at last put some color, and, puff you get the nicest blob ever!

const SvgBlobEye = (props) => { const { x, y, size, colors } = props return ( <g transform={`matrix(1,0,0,1,${x},${y})`} className="blob-eye" > <circle r={size} cx="0" cy="0" stroke-width="2" stroke={colors.dark} fill={colors.light} className="blob-eye-iris" /> <circle r={size / 2} cx="0" cy="0" fill={colors.dark} className="blob-eye-pupil" style={{ '--radius': `${size / 2}px`, }} />  </g>  ) } const SvgBlob = ({ width, height, body, eyes, colors, }) => { return ( <svg viewBox={`0 0 ${width} ${height}`} className="blob" > <path d={spline(body as any[], 1, true)} stroke-width={2} stroke={colors.dark} fill={colors.primary} />  <g> {eyes.map((eye) => <SvgBlobEye {...eye} colors={colors}/>)}  </g>  </svg>  ) }

The cutest blob is the one that move eyes in funny ways

But i wanted more from my blobs, i wanted them to seem alive and interact with the user.
So i decided to add some animations:

randomly the blobs must move their eyes
if clicked the blob will shake the eyes

const animations = ['eye-roll', 'eye-roll-reverse', 'eye-converge', 'eye-converge-reverse']; const SvgBlob = ({ width, height, body, eyes, colors, animated, }) => { const [animation, setAnimation] = useState(''); useEffect(() => { if (!animated) return; if (!animation) { const timeout = setTimeout(() => setAnimation(randomItem(animations)), random(0, 20000)) return () => clearTimeout(timeout) } }, [animation, setAnimation]) return ( <svg viewBox={`0 0 ${width} ${height}`} className={`blob ${animated && animation}`} onClick={() => setAnimation('eye-flock')} onAnimationEnd={() => setAnimation('')} > <path d={spline(body as any[], 1, true)} stroke-width={2} stroke={colors.dark} fill={colors.primary} />  <g> ${eyes.map((eye) => <SvgBlobEye {...eye} colors={colors}/>)}  </g>  </svg>  ) }

@keyframes roll { 0% { transform: translate(0, 0); } 20% { transform: translate(5px, 5px); } 40% { transform: translate(5px, 0px); } 60% { transform: translate(5px, -5px); } 60% { transform: translate(0, -5px); } 100% { transform: translate(0, 0); } } @keyframes converge-left { 0% { transform: translate(0, 0); } 50% { transform: translate(5px, 0); } 100% { transform: translate(0, 0); } } @keyframes converge-right { 0% { transform: translate(0, 0); } 50% { transform: translate(-5px, 0); } 100% { transform: translate(0, 0); } } @keyframes flock { 0% { transform: translate(0, 0); } 20% { transform: translate(5px, 0px); } 40% { transform: translate(calc(-5px), 0px); } 60% { transform: translate(5px, 0px); } 80% { transform: translate(-5px, 0px); } 100% { transform: translate(0, 0); } } .eye-roll .blob-eye-pupil { transform: translate(0, 0); animation: roll linear 3s; } .eye-roll-reverse .blob-eye-pupil { transform: translate(0, 0); animation: roll linear 3s reverse; } .eye-converge .blob-eye:nth-child(1) .blob-eye-pupil { transform: translate(0, 0); animation: converge-left linear 0.5s; } .eye-converge .blob-eye:nth-child(2) .blob-eye-pupil { transform: translate(0, 0); animation: converge-right linear 0.5s; } .eye-converge-reverse .blob-eye:nth-child(1) .blob-eye-pupil { transform: translate(0, 0); animation: converge-right linear 0.5s; } .eye-converge-reverse .blob-eye:nth-child(2) .blob-eye-pupil { transform: translate(0, 0); animation: converge-left linear 0.5s; } .eye-flock .blob-eye-pupil { transform: translate(0, 0); animation: flock linear 1s; }

Now you can enjoy your juicy blob!

Last things

This is only a part of the process i used to make the game Blobs - Dead or Alive but if you want you can look at the full code in the github repository.