Blog: #texturing

Some dinky pixel art experiments, exploring what it looks like when you add texture and make them look kind of like mosaic tiles. (I’m sure someone else has already done this, but I haven’t, so here we are.) Also, this isn’t great pixel art, just to be clear.

For this first experiment, I made the squares in Figma and set the colors there, which was pretty laborious. Exported to SVG and added turbulence/displacement filters to get some variation. When exporting to PNG via Inkscape, I ran into the perennial issue where the filters sometimes only work on the top and left sides of the shape. (Someday I’ll figure out what’s going on there, since the filters look fine in Finder via Quick Look. In this case, from a distance, it still kind of looks okay.) Finally, I added some textures in Affinity Photo with opacity set to around 20% and blend mode set to soft light or overlay.

Second experiment: making things easier. I made a 48x48 image in Procreate Pocket on my phone and painted the scene using the oil paint brush. (Which is why the eyes are crazy and there isn’t a ton of definition on the characters. Like I said, not great pixel art.) I then wrote a quick command-line script (JS/Node) to take a PNG and export an SVG where each pixel of the PNG is a <rect> in SVG. Way faster than making the squares in Figma. The script shrinks each square a little and adds some jitter to the points as well. And I changed the background color to be more ground-like. Exported to PNG and textured as in the first experiment.

Some ideas for future exploration:

• More subdivision on the tiles, for a little more geometric variety
• Programmatically export masks from the SVG so that each tile can look more different from its neighbors, texturally (a masked tile would be next to an unmasked one, basically, with some randomness thrown in)
• Rounding the edges of the tiles a little
• Rendering the tiles in Blender (either with heightfields or by generating actual geometry with Python), ideally with some procedural texturing

Anyway, a fun afternoon diversion.

Reply via email or office hours

• Weeknotes are back, I think, and we’ll start a new season to celebrate the gap.
• Today marks one full year since BYU announced that classes were going remote, and tomorrow is the anniversary of my work and the kids’ school following suit. One year. Whew. A bit mind-blowing. It’s certainly taken longer than we thought it would, but hope is finally upon us. My wife and I are looking forward to getting vaccinated next month, and then hopefully the trials with children go well. (We have a child with a high-risk medical condition, so we can’t really breathe easy until the whole family’s vaccinated. Which probably won’t be till the end of the year. Endure to the end!)
• Quick update on the new job (which is great, loving it): while I still hit occasional pockets of onboarding slowness (new parts of the codebase, mainly), overall I feel like the impostor syndrome is mostly shutting the heck up. Also, Go turns out to be a great language for team-based work, at least in my view. Extremely easy to read, and it feels transparent, like it’s just you and what you’re trying to do, without the language getting in the way.
• A couple weeks ago I messed up my back and have been dealing with the fallout since then. This time it’s taking longer to recover than it did a few years ago, which I suspect has to do at least in part with age. What a joy.
• Art has slowed down a bit. I’m still planning to keep at it, but on a less regular basis. (It’s been my main thing for a while now and I think I’d like to focus more on other things.) When I do work on it, I’m planning to continue exploring the new texturing technique I used on Where Can I Turn for Peace? (probably redo a few old pieces with it). Maybe some more Blender, too, though I’m not really sure yet how that fits in.
• Most of my writing projects are in the planning/outlining stages, so there’s not much to show yet there, sadly. (A fact which needs to bother me more, enough so that I start actually finishing stories. Good grief. But I guess part of working in public is being incompetent in public. Here you go! And I hope that the beats idea is the answer to my writing woes.)
• I’ve finished the initial draft of lowercase letters on the Hinte typeface, and I’m in the middle of refining those and starting on the uppercase. Hoping to do much more type design going forward. (And eventually replace Literata on this site with something homegrown.)
• As part of that endeavor, by the way, I’m itching to build that nice new web-based version of Curves. (FontForge is functional, sure, but its UI definitely does not spark joy for me.) Since I’ve already built the font-generating backend, the main remaining challenge here is just figuring out how I want the UI to work.

Reply via email or office hours

New artwork: Where Can I Turn for Peace?

On this one I tried a new texturing technique which I’ll explain later, once I’ve used it on a few more pieces.

Reply via email or office hours

New artwork: Within the Walls of Your Own Homes.

I realized (this is the very small breakthrough I mentioned yesterday) that I could use Blender to add 3D texture to my pieces. Verisimilitude has been the goal all along, and using an actual 3D renderer brings so much to the table that it boggles my mind that I didn’t think of this much earlier.

A closeup of the texture:

How I made this piece: I mocked it up in Illustrator, then exported it to SVG where I manually added the turbulence and displacement filters (in Vim) to distress the edges of the white square, which you can see in that closeup. I used Inkscape to export the SVG to a 6500×6500 PNG.

Then, in Blender, I created a plane and went to town on the shading, using a combination of procedural and image textures to mix the colors together and displace the geometry of the plane. There’s a key light and a dim fill light. And in the compositor I added a little chromatic aberration around the edges with the lens distortion filter.

Rendered it at 5200×5200, which took about two hours on my 16″ MacBook Pro. I tend to work a little smaller and then upscale to 6500×6500 (for square pieces), since Photoshop’s upscaling is fairly decent these days. After upscaling, I added my signature thingie, which I’ll add in Blender in the future so it fits in better.

Here’s the node setup on the plane (and in the future I’ll use groups to make things more manageable):

Overall, I’m happy with this technique. It’s more time-consuming than painting textures in Photoshop, but I can do other things while it’s rendering, and the result looks much better to me. Working in 3D is more fun, too. Most importantly, using Blender gives me loads of new options that would have been harder to do well with my old technique — shiny paint, glowing materials, etc.

Reply via email or office hours