It all started at the time of minting Love & Wild and Love & Wild - Reminiscence. I was on vacation in Dalmatia, Croatia, a narrow belt of land on the east shore of the Adriatic Sea. This is where my mother was born, and it was a place where I always felt close. And there I was, all day, looking at those beautiful landscapes, the white sailboats in the bay and the city behind it draped in the warm sun. And at that moment, I knew what my next project would be.

But instantly, I felt doubt. Can I really recreate sailboats using code? It all looked so complicated. The shape of the hull, the sail, the cables, the roof, and all the parts that made up the boat.. it felt insurmountable. But after weeks of research and looking at hundreds of pictures and paintings, I felt I had cracked the code.

Now to some interesting technical bits

Cables and Roofs

Let's start with something easier. Straight lines. From 2 points, the top of the mast and bow, you can draw a lerped line with changing strokeWeight, some dots, some randomness, and cables are here.

The same lerped lines will generate the city walls and roofs. With some transparency and variety in distance/amount of interpolation, the same function even builds house floors, and you have consistency in art style.

On Hull and Curves

This was the hardest part as in representational art, and those shapes should be precise or at least easily recognizable. To have that kind of precision with curveVertex and especially with control points, it's best to use some design software or make your own little one directly in p5js.

Here problem and beauty of generative randomness appear as I wanted more differentiated hull shapes to appear, but curves were so wild that in the end, I chose tightly controlled ones with just a little bit of randomness. Those wild ones will finish as a BuggedBoats 1% rare feature, and in the future, I'll explore this idea more.

For connecting those points with nice dotted lines, the beautiful p5 built-in curvePoint function was used. With all points precisely named and connected, it was "easy" to use more curves and set sail.

Seagull and Sea

Already familiar with canvas points in space and how curves will behave, it was easy to sketch the seagull with those same curved squared lines. At this point, the sea was just a nice gradient, and how to make it really lightened when I tested how Voyage would look with thousands of birds flying around.

Sunshine of Your Clouds

I already had some nice code for the sun, but this time multilayered them to have the circle behind objects but also a nice atmosphere and coloring in front of everything. At the end of the project, after adding sails, I decided, for most cases, to move away boats from the direct light source as it didn't always look right. Sun position, of course, defines all of the shadows and little reflection details on sea, boats, and roofs.

Cut the Storm

Hills and clouds are "ordinary layered map noises" that clicked after a lot of experimentation. Some more stormy weather clouds didn't make it to the final cause they rendered slowly, and transparency bugs plus differences through different browsers were notorious. As the final art must be responsive and without obvious errors, I had to decide to cut the stormy weather feature sadly. I would take a look to somehow find a way to include these in future projects.

On optimisation

Voyage was made in p5js from code only without any additional libraries, shaders, or WebGL, as this pure 2D simulating 3D gives me a nice "artistic touch". Throughout this Voyage, I carefully watched every step to keep the rendering fast (yes, hardware acceleration Chrome :) ).

If you zoom (press “2” or “4” for hires image) on the shadows and curves close enough, you will see lots of squares. Drawing squares is a lot faster than drawing circles.

Fun fact, in my previous projects, I worked partially on the iPhone Processing app as my smartphone is always with me, and it's easier to sketch/code ideas whenever you have time. This was a double-edged sword, as iPhone single cores are obviously much stronger than some desktops. And at the end of the day, I didn't want the "art to suffer" chasing after more and more optimizations. , wrongly thinking that what it takes 30 sec on a ten-year-old Mac would render in a fraction of the time on newer machines. And often, it was worse.

Voyage Voyage

Not the greatest fan of disco, but during the late phase, the French hit "Voyage Voyage" came to my ears, and I could not get it out of my head, so let's finish with it.

I hope you will find interesting ideas and inspirations for your own generative art Voyages.