Creating digital artwork using custom code and AI with Slater

By Jack Redley

‍

If you haven't heard, there's a competition happening with Edgar Allan agency 👀

They have the best merch of any design agency in the land.

And you have a chance to win it... 👸

All you have to do is create a piece of digital artwork using custom code.

I know what you're thinking...

"How the hell do I do that?"

Don't you worry yourself — Slater has got you covered.

It's a product designed by Edgar Allan to make custom coding as easy and painless as possible for your Webflow websites.

How the deuce does it work?

First of all, you need a Slater Account — if you want one, send an email to jack@edgarallan.com or dm @slater_app on Twitter.

Then, follow this process:

‍

Log in to Slater
Create a new project in Slater
Create a new project in Webflow
Embed the script from Slater in the body tag of your new webflow project → HIT PUBLISH

Now, your file is set up.

So, the next step is to create some artwork!

Type “How to create digital artwork using custom code” into the AI tool
Copy code — hit publish. You’re on the way.

Here was the process that I used to create this monstrosity:

https://slater-digital-artwork.webflow.io/

Type in “Can you create a piece of digital artwork using p5.js please?” in the AI tool

(p5.js is just a library. There's various different libraries as I've asked later just here. There's p5.js, processing, 3.js, d3.js, paper.js, et cetera, et cetera. All I've done is I've said, can you create a piece of digital artwork using p5.js please?)

Copy. And I've actually pasted that in there, and then I hit publish page, right? Now, once that says successfully saved to production, this is what I have. This disgusting piece of artwork here. You guys can surely do better.

But don't just stop there. Then I've asked Slater “Can you make the canvas size 100 viewport width and 100 viewport height?”
Copy this, delete previous code, paste in new code, and save to production, refresh. We now have a canvas size that is 100 viewport width, but we still got those disgusting rectangle and circle.

Now, can you change the artwork to have 50 bouncing balls in it instead of a circle and a rectangle please? And it's just generated this code for me so let's try this now. Publish page, save to production. And it's there.

We have a page full of bouncing balls, 50 bouncing balls. Now, obviously, you guys can do way more interesting things than just this. Look how quickly I've generated this bit of artwork. Explore. Work out what you can make. Push Slater to the boundaries of its limits and make something awesome in Webflow.