Flower Child | Skillshare Projects



Flower Child

Great class, Josh! I love your enthusiasm, and how you really take care to communicate clearly. Props for the dance number!

I decided to try using flowers to create a face. 

I have some prior experience with Processing, and I've used it to do things like 'repaint' a photograph by randomly placing circles on the canvas and filling them with the corresponding X/Y image colours. So when it came time to do the homework, I was curious to try doing something like this -- but with vector shapes, and in HYPE.

I'll be honest, I was mainly excited to start playing with the code, not drawing the vectors, so I farted out the initial art pretty quickly by tracing a few flowers I found on the NYPL digital collection.


Build 1: randomly placed flowers, coloured with a limited set of colours distilled from a photograph (via the palette reduction method):


Next, I wanted to use HPixelColorist and determine the flowers' colours based on an image. By Build 3, I was already getting somewhere, I think. Here's an image based on a photograph of my partner, Suzanne:


I'm hoping to end up with something nice enough that I might even want to print it out and give it to her as a gift. This one's a little too "comic book" for me, so I tried lightening the strokes, and I allowed for smaller flowers so I might get more detail:


Better, but the monotonous grey outline lines are kind of boring so I experimented with stroke colours. 

At first I tried selecting a random stroke colour from anywhere in the image, but that proved too chaotic. 

What worked pretty well was selecting a stroke colour from a random pixel "nearby" the current X/Y:

.stroke( pcolors.getColor( d.x()+random(-50,50), d.y()+random(-50,50)), 200 )

Build 6 strokes the flowers with "nearby" a colour:


I like this iteration because the strokes of each flower usually end up in the same "family" of colour as their fill, but sometimes they match the fill well enough to vanish, while other times they are way off the mark and really stand out. 

By the way, the code might target X & Y coordinates that are beyond the bounds of the image, and then it goes black, which is why there are so many black strokes at the edges. But, you know, this is art, so ... I totally meant to do that!

I kept experimenting with opacity and scale, and then I flipped the colours around so that the fill colours were pulled at random while the stroke colours were pulled from the "correct" image pixel...

Build 7 "Ghost Mosaic" 


I like this. It's kind of interesting because Suzanne is in there, but it's hard to see exactly how since she's only in the outlines. Here's a close up:


Around this time, I also revisited my flower vectors and refined them a little:


And I kept tweaking and tweaking, looking for a balance of soft, painterly impressionism and crisp hand-drawn elements. Here's "Build 9":


I don't know if it's very flattering. And Suzanne's a bit lost in there.

So I took a break and went nuts instead, making a few "super-messy" builds to shake things up:


Tangent: I really wanted to add some shadows under each flower but I haven't figured it out yet. (The code didn't like it when I tried to create variables within the object.) I've noticed that some people add shadows"in post" using Photoshop, which is cool, but I hope to crack the code at some point. (I'm open to suggestions, Josh! )

After a few more "messy" builds, was ready to reign things in again. So I tried using HGridLayout to see what a more regimented approach would do...

...and ended up with a pretty happy surprise!


Because the flower graphics have random scale (and rotation), the underlying grid layout isn't at all obvious. BUT, because HGridLayout starts in the top left and moves sequentially to the bottom right, the flowers are placed down in order. And this stacking order gives the image a sense of physicality, of being oriented in a space in a cohesive way. It's all layered up and "sculpted" in, like, 2.5 dimensions or something.

It's a smiling boquet of Suzanne. Neato burrito! This is pretty much what I had started out to make, so I revised the vector art one more time and added a fifth flower, too:


And I made some final tweaks to my settings:




The vector drawings need a lot more detail, I think.

But at least it's got a little charm now, maybe?

I'll come back to it later.

But for now, I'm going to keep evolving the code. Here's some more stuff:








If you made it this far, thanks for checking out my process! 


Please sign in or sign up to comment.