Perpetual Soapiness

Concept

On the island of Crete in the Mediterranean there is a family business that makes handmade skin care products, using olive oil as their main base for all their creams and soaps. The company was created by family members of Bomburo and we have been working with them since the beginning of their journey. We’ve designed their brand identity, packaging, website and communication materials.

Naturally, they are a brand that is very close to our hearts, not only because of our personal ties but also their ethos and high quality of their products.

Inspired by their creations we wanted to build an art project that is connected to the brand, in a subtle but sincere way, is very low maintenance and can, perhaps, raise awareness in the long term to an audience that is not their usual target group.

At the same time, we wanted to learn more about generative art, the process of creating art through code. This is how the Perpetual Soapiness project was born.

Inspired by other generative projects like the Soft Landscapes Twitter bot, we decided to make a bot that, once a day, creates a unique soap bar and posts it on Instagram.

Challenges

Our initial excitement was quickly replaced by disappointment because there doesn’t seem to be an easy way to make an Instagram bot without using some pirated version of the Instagram API and we definitely didn’t want to do that.

There is however an API available for Twitter bots so we kept this as our fallback solution, in case we didn’t find a way to automated Instagram glory.

Another challenge that became painfully obvious once we started thinking about how to build this bot was that we had no idea where to start and what kind of technologies and frameworks we would need.

We didn’t get discouraged though and we started doing research, breaking the task into smaller steps: we know how to make websites so, before we make a bot, why not make a web page that generates a soap bar every time you visit it?

While searching for ways to generate art through code we looked into processing, a programming language widely used for artistic projects, which we knew from our university years. Another framework that got our attention was ThreeJS, a Javascript library that lets you build and manipulate 3D objects in the browser. Since we were already familiar with Javascript, we decided this was the way to go.

Visual development

With a new tool at hand and plenty of documentation to look through we started putting together the building blocks of our art generator. Using ThreeJS we started from a basic rectangular object with randomly varying dimensions.

For the background it was simple enough to make a gradient using two random colours in every page-reload (it wasn’t).

The next challenge was to remove the feel of 3Dness from the soap bars. You know, this hard edged, unnaturally lit, pixelated grey objects that give this 90s low-budget visual effects feel.

We experimented with rounded corners but this still looked quite sad. In the end we used a noise texture to create a subtle deformation through the shader. We could then adjust the amount of distortion to get exactly the effect we needed.

We also wanted to create the subtle translucency that a soap bar might have. Luckily, ThreeJs has a translucent shader that we slightly modified to make it work with our noise deformation shader.

Finally, we added several post processing passes to introduce imperfections and distortions that would take us further away from the cold 3D feel. A depth of field pass for a more dreamy feel, a halftone pattern and a slight chromatic aberration for a glitchy effect. It was quite a challenge to get all these distortions and effects to work together, as we were still learning the ropes with shaders, GLSL and ThreeJS.

The last step was to add buttons for re-generating the soap bar and for downloading a screenshot.

Hosting

All this time we have been working on a local version of the page and now we were ready to move everything online. We already use Webflow for many of our projects and it gives us a platform where we can launch something very fast. So we set up a Webflow page and made the necessary adjustments to get the script to behave online as it was behaving locally.

Since Webflow doesn’t allow us to host large script files, we used GitHub for the modified shader script and served it through open source CDN JsDelivr.

So that was the basis for creating the bot. Now we had a web page that created a beautiful, translucent soap bar every time you re-loaded the page.

It was a bit unclear how to move forward at this point, but we suspected that we should be able to create a python script that somehow grabs a screenshot of the page.

Creating an Instagram bot

This was the last step in the process and the most intimidating one because we were unfamiliar with python and automating processes. We did a lot of research trying to understand what technologies and frameworks we would need to use.

We didn’t want to host the scripts ourselves so we chose Heroku, a service that allows you to host python scripts and provides an easy way to schedule these scripts to run in intervals.

We found a tutorial that would scrape images from a website and post them on social media but the problem was that our soap generator website didn’t have any generated images hosted in its servers. Also we weren’t sure if it would be possible to, somehow upload an image to the Webflow server using code from within the website and not their back-end upload form.

That’s when we found the Selenium framework that lets you automate the use of a browser. We then wrote a python script, using Selenium, that, when run, visits perpetualsoapiness.webflow.io, locates the download button and clicks it.

We deployed our script on Heroku and scheduled it to run once a day while crossing our fingers that the downloaded file would be saved in the temporary storage that Heroku offers.

From there it should be relatively simple to upload on Instagram (it wasn’t).

How to get to instagram

With such a visual project, Instagram felt like the right fit but we wanted to get the soaps posted without breaking the rules.

We knew that Twitter allowed automated posting through their API and we suspected that we could use social media scheduler Hootsuite in combination with task automator Zapier to schedule re-posts from Twitter to Instagram.

It turned out that this wasn’t possible, because the Instagram Hootsuite integration didn’t allow automated posts. When we thought all was lost, we realised that Zapier had introduced a direct integration with the Instagram business API.

From there it was as simple as setting up a Zapier task that checks the Perpetual Soapiness twitter account for new posts and reposts the latest tweet on Instagram.

Our first code-generated, automatically posted soap bar was online and the script kept doing its job diligently every day without hiccups. It was a success!

Next steps

We see this as an ongoing art project with future improvements to the visual style of the soaps. We like the idea that, over time, there will always be a history of posts where one can look back and see how the project evolved through the years.

We are trained as designers and artists so coding can sometimes be an intimidating area for us. At the same time we enjoy learning new disciplines and ways to be creative.

Working on this project was a rollercoaster of emotions. Approaching a new programming language and building something with it can be daunting and we had to do it three times in this project: it was the first time using ThreeJS, the first time writing shaders with GLSL and the first time writing a python script.

Likewise, the sense of accomplishment at every small victory, every bug fixed and finally seeing the automated posts appear for the first time, made the frustrating moments worth it.

See the bot in action and follow here: Perpetual Soapiness