My Sketches and Process

Not much to say just yet. Just getting set up. Packing for the journey.

Updated much later...

Now about halfway through the course. Really loving it - Davis has a great delivery and attitude that makes watching the videos more engaging and less tedious than they could be. Mostly doing "monkey see, monkey do" with the work, but starting to get some ideas and beginning to experiment with shapes. Here are some of my sketches based on HPixelColor and HColorField:

The only thing I'd like to find is documentation for all the parameters for each of the Hype framework elements, so I know what aspects I can control.


Working on the HDrawablePool and HShape lessons. Trying to use the HPixelColorist function in, but can't seem to get the colors to appear in their correct positions. Nevertheless, getting some interesting results here:

(Kinda like this cloud of shapes...) And yes, this color source taps into two of my favorite colors, hence my overuse of them. I promise more color diversity going forward :-)


Okay, some more monkey-see, monkey-do stuff, using HGridLayout, HColorPool, and HShape:

I had to dick around with Illustrator to figure out how to confine the Artboard to a 50x50 size and then force the SVG export to respect that size. I was using Sketch for a while, because it's really easy to use, and because I like to use it for other vector work. Unfortunately, its boolean operations and SVG export aren't as robust as Illustrator's. Too bad, because it's really a great tool. Maybe next version...

Anyway, another sketch:

At this point, I get it into my head that I want to have two different grids overlapping each other. I kinda know how that might work, but first, I set up a new HColorPool to more easily distinguish between one grid layout and another. So here's a test to see how the new HColorPool looked - still using only one HGridLayout. though:

So far, so good. And now the two grids together:

So now I want to make the top grid a bit transparent. None of the tutorials explicitly detail how to do this with HShape (since there's no alpha parameter in that framework that I could find, anyway) for the d.randomColors instruction. So a little digging around on the Hype Framework site got me this little gem inside this HColorPool example (http://www.hypeframework.org/examples/HColorPool/example_004/index.html) and, to quote Emiril, BAM! I got my transparency going:

Now I'm working on some shape artwork very near and dear to my foodie heart, so that's what's coming next. Time for the monkey to do a bit of his own thing. Digging around on the Hype Framework site is a great way to learn about other parameters not covered in the course, and it's the best thing going, since there's no actual documentation spelling out the framework's API - yet, anyway.

Feeback and ideas always appreciated. Again, not a lot of deep-end diving here yet, but I'm ready to take the plunge.

Later that day...

The monkey took the plunge! Worked out good.

First, since I'm a good hand at SketchUp, I thought it might be fun to model the shapes I needed to use in that app. What's the image? Sushi. So here's the model I made, in an orthographic view with the shading minimized to give me some flat color:

From there, I exported it as a PDF file for import into Illustrator. That went fine. Until I passed it through to Processing:

A lot of the construction lines were still present, so I had to do a bit of cleanup. The second pass went a little better:

And now some seaweed color:

But I realized (and this is why I was working with overlaying grids in my previous exercises) - I wanted to randomize the seaweed wrapper colors only a little bit, but the rice filling could only be one color. Meaning I needed another grid layout and another piece of shape artwork. So I broke it down:

And one more for the rice filling (which I forgot to screenCap). Once I had that fixed, I added the next grid layout:

And after sampling some photos of sushi for color reference (using the awesome ColorSchemer Studio - highly recommended for building color palettes, sampling colors from photos, and getting those handy-dandy hex color numbers), the monkey went all the way in:

Three layers of HGridLayout, two HColorPools, and this sushi fan is on his way. Now to build on the idea a bit. God, this was fun!!

And now I have this craving for...


Back in the saddle after a whole buncha stuff. School is about to start and I have to do teacher stuff, but I'm plugging away at this one again.

This time, it's creating more optimized geometry for my vector art. Yes, it might be easier for me to do the drawings by hand, but this is about process and skill development as much as it is about making art. And I need to work on my 3D modeling skills. SketchUp is easy enough, and as I've mentioned, I'm a good hand at it. However, SketchUp can make funky geometry and managing those edges and splines in SketchUp is a job and a half, ma'am. Even more so when cleaning it up in Illustrator. So in an attempt to find a happier medium, I jumped into my other fave 3D app, Blender. Blender can be more labor-intensive to use, but it's also feature-rich and offers much greater control. In this case, my goal was to make a more efficient mesh of my maki sushi model so that Illustrator clean-up would be less laborious. In addition, I found a wonderful add-on called CreateIsoCam by Reiner 'Tiles' Prokein. This script allows me to set up a true isometric camera rather than an approximation, which is all I can manage in SketchUp. Below is the result of both my first model and the isocam view of it. I'm presenting it in edit mode so you can see the edges and vertices that make up the model. Cleaner, I think.

Doing it this way means more control over my geometry and viewpoint. It took a little more time to construct this version, but I learned a lot in the process. It will go faster next time. Tomorrow (time permitting) I will export to Illustrator and see if my goals make sense. Maybe a hybrid of the two might be necessary. Maybe I'm wrong. It's been known to happen.

A couple of hours later...

Aw hell, I couldn't wait. Had to find an add-on for Blender that would output to .SVG, and I found a SVG exporter on the Blender Artists Forum by Ilero. Once I got that out to Illustrator, it was a simple matter to group each set of objects to their color (since they're being rendered as flat colors), selecting each group, applying a fill, removing the strokes (since I can add those in Processing if desired), using Pathfinder to Add all the selected shapes of a set together, Expand Appearance, and Simplify the shapes so they become a single shape with a reduced set of vertices (or anchors, in Illustrator lingo). Do that for all of them, and I get a nice clean set of shapes ready for use. One added benefit of the Simplify command is that it adds an element of variability to the shape, so it doesn't look quite so mechanical - an effect from the considerable reduction in vertices which means less accuracy. Liking it, so keeping it.


Working on the nigiri sushi model. Actually, this will have different versions of the topping, since toppings have different shapes based on the type of fish. Salmon and tuna typically look like this one, whereas eel and some others have tapered ends. Here's the view from Blender:

And after Illustrator and the techniques detailed above:

And separated into their individual parts. I could have trimmed the rice piece (magenta) but since the topping would be on a higher layer, thereby covering it, I didn't think it worth the trouble, nor would it be expensive for the processor.

So in a day or two I'll try dropping those into the composition and see what happens...


Please sign in or sign up to comment.