Adrian Herbez Rotating Header Image

PLARL: the 3d printed roguelike (proof of concept)


This was a project to generate a 3d printable dungeon using OpenSCAD. To play the game, the player uses a screwdriver or similar to break away parts of the printed model, revealing additional information.

The result has multiple layers stacked on top of each other, with the bottom layer (red) consisting of the maze pattern, the middle layer (green) supporting iconography for things like monsters, and the top layer (blue) being the door. Both the blue and green layers break away.

To see a playthrough of an example level, check out this video:

Procedural Flowers (WebGL)

Example flower

This was a project to create procedural flowers using pure WebGL. All of the geometry and textures are generated via code, and the only external library used is glMatrix. The flowers are also generated using a seed derived from lat-long coordinates, so specific flowers can be generated for specific locations. To see it in action, head here.

Development Process

Step 1: Flat leaves
The project happened over the course of about a week and a half. I started by generating flat, 2d versions of leaves:

glflower 1

I started by implementing Bezier curves, then using two cubic curves to set the shape of the leaf edge and generating faces to fill in the contents. I also set up a simple shader to have the center of the leaf be a bit red, fading to green at the edges. See this version head here: http://www.adrianherbez.net/glflower/01/.

Step 2: 3d Leaves
Once I had the basic 2d leaf working, it was time to add additional cubic curves to make it bend backwards along its length as well as to curve gently away from the spine of the leaf.

glflower 2

To see this in action, head here: http://www.adrianherbez.net/glflower/02/.

Step 3: Adding a Stem
Once I was happy with the leaf shapes, I added in a gently curving stem, and added leaves along the length.

glflower 3

This also had its own shader, but with the color gradient changing along its length. See it here: http://www.adrianherbez.net/glflower/03/

Step 4: Expanding leaves to petals, normals
At this point, it was time to move onto the flower itself. I refactored the code for the leaf to be more general, making it a general class for creating geometry from sets of curves (XY, XZ, and YZ). By changing the curves, it was easy to go from pointy leaves to more bell-like petals.

glflower 4

I also added in proper normal calculations for the faces, which also meant writing a normal shader for easy debugging. All of the geometry is rendered double-sided, with one side rendering with the normal color and the other either red (for petals) or green (for leaves).
See this version here: http://www.adrianherbez.net/glflower/04/

Step 5: Lathed Geometry
In order to create the central part of the flower, I created a LathedGeometry class that could take a curve and spin it around the Y axis to generate a sealed piece of geometry.

glflower 5

See it in action here: http://www.adrianherbez.net/glflower/05/. Each refresh of the page makes a slightly different model.

Step 6: Putting it all together
Now that I had all of the parts I needed, I put it all together into a full flower, with a stem, leaves, a central element, and petals.

glflower 6
The colors look a bit crazy, but that’s because I was still using the normal shader as a diagnostic. It makes a lot more sense if you see it moving- to do that, head here: http://www.adrianherbez.net/glflower/06/. Moving the mouse in the canvas will change the angle of the flower (added that in to make it easier to see what was going on).

Step 7: Colors!
With all of the geometry in, I started working on better colors for the shaders.

glflower 7
See it in action here: http://www.adrianherbez.net/glflower/07/.

Step 8: Lat-long based seed values
Now that the flower was close to done, I turned my attention to adding support for a lat/long-derived seed value.

glflower 8

Once set, the same seed is used for all the randomized generation, allowing any place in the world to have its own unique flower. At this point, the colors were still always the same though. See it here: http://www.adrianherbez.net/glflower/08/

Step 9: Finishing Touches
I was pretty happy with things at this point, but added a few things here and there to provide some polish, namely:
– randomized colors for the petals
– modification of the leaf shader to have stripes on the underside
– changed the background color to a nice medium gray

If you’ve made it this far, thanks for reading! Be sure to see the final result here: http://www.adrianherbez.net/glflower/.

Also, if you’d like to have a look at the code, it’s available on Github here: https://github.com/aherbez/glflower





Logic Puzzle Generation v0.1

Screen Shot 2019-03-21 at 11.08.53 PMI’ve been a huge fan of logic puzzles since I was a kid, and for a long time I’ve wanted to try my hand at building a system to generate them.
This represents the first pass of such a system- a puzzle is generated, along with 16 clues, pulled from four different types:

  • Assertion Clues that state that two things are linked (“Alice ordered a burger”)
  • Negation Clues that state that two things are notlinked (“Alice did not order a burger”)
  • List All Clues that give one fact for each component of a solution (“The four people were: Alice, the person that ordered the steak, the person that ordered a beer, and the person from New Orleans”)
  • Either / Or Clues that generate two facts, one true and one false (“Either Alice ordered a burger OR the person from New Orleans ordered a steak”)

I’m pretty happy with what I have so far, though the big missing feature is that there’s no guarantee that a given puzzle is solvable with the clues given. For that, I plan on approaching things by starting with all the possible values, and trimming things away as clues are applied. Once there’s only a single option for each value, then the clues are sufficient.

There’s also a huge amount of room for improvement with respect to the way clue text is generated, so that’s something I want to improve as well. The ultimate goal with this is less about just generating puzzles and more about building logic puzzles into other kinds of games.

To play with it yourself, head here. Note that at present, the generated image is meant to be printed, rather than solved online. That’s mainly because this incarnation is more about puzzle generation (for later inclusion in other projects). Also note that the solution is printed upside-down at the bottom of the page.

Making some noise

test

I spent some time recently diving into noise generation, which is something I’ve previously taken for granted. As part of that, I ended up putting together a simple 2d noise generator. The code isn’t particularly optimized or well-structured, as this is just a stepping stone on the way to bigger things. I was pretty happy with the results anyways though, so I’ve put the current state up. See if for yourself here.

Honeycomb Cavern Dice Roller

downloadA former coworker of mine, Alexander Shen, recently ran a successful Kickstarter campaign for his awesome pen-and-paper game, Honeycomb Cavern.

I picked up a few of the books, and absolutely love them. When I gave my girlfriend’s niece her copy, we couldn’t find the required three dice to play. So I whipped up a quick little JS canvas project to roll three D6s. Once I had that working, I went ahead and added some logic to draw the various options available to the player according to the Honeycomb tavern rules.

To use it for yourself, head here. Reload the page to get a new result.

Bot Logic

Screen Shot 2019-03-20 at 11.03.33 PM

This is a small game prototype I created over a few evenings, based on classic “knights and knaves” type puzzles. The player is presented with three characters, one of which is guilty. Each of the bots either always tells the truth (a “knight”) or always lies (a “knave”).

The player is tasked with parsing the various statements to figure out who the guilty party is. Clicking on a bot to make a guess not only reveals the culprit, but also color-codes all the statements for red (lies) or green (truths).

For video of it in action, head here. Or, to play it yourself, head over here.

Puzzle Keepers: Folio XIII

micro_3

This was the fourth Puzzle Keepers puzzle I created, this one on the occasion of my nephew’s 7th birthday. In this, I introduced an antagonist faction- the Knowledge Containment Initiative (KCI), as a sort of bureaucratic and vaguely fascist foil to the open nature of the Puzzle Keepers. The backstory for the puzzle was that a set of papers (“Folio XIII”) that had long been in the possession of the PK had been stolen by Knowledge Containment agents. The pages were blank, but both groups had good reason to believe that there was invisible writing that could be revealed by applying the proper substance.

KCI scientists worked at the problem, and were getting close. But luckily for our heroes, the information was liberated from a KCI facility and returned to the PK. However, since KCI is so committed to containing information, it was stored in an unconventional manner, on a series of slides. A KCI device for reading the slides was obtained as well, though it was unfortunately not in working order.

So, the puzzle had three components:

  1. First, the machine had to be repaired.
  2. Secondly, the machine could be used to read the slides.
  3. Lastly, the information so obtained could be used to solve an online component and reveal what was written in Folio XIII

Continue reading →

Virtual Books (first pass)

Lately, I’ve been working on a system to display virtual books in a browser as fully 3d objects using Three.js. While there are still lots of things I want to add, it’s finally at the point where I feel like it’s worth sharing.

book_exterior
The system loads data from archive.org and uses it to create a 3d model of a book. The book can be opened, and pages can be flipped, allowing the user to read the entire contents. The current iteration is hard-coded to load just one book (The Wizard of Oz), but I’ll be expanding it to pull from the rest of the Internet Archive’s extensive collection.

To see it for yourself, head here. Controls:
  • space: start/stop rotation
  • up/down: open/close the book
  • left/right: flip the pages

All of the geometry is procedural, allowing for books of any size and proportion. The texture used for the cover is also procedural, allowing for any color of book, and for proper rendering of title and author along the spine.

book_open

Drawing with plumbing

pipesThis was a quick little one-evening project where I challenged myself to grab a sprite set off of opengameart.org and do something fun with it.

I ended up grabbing a really awesome sprite sheet of pixel art pipes, and implementing a simple drawing app that lets you draw with pipes, and updates the pipe images as necessary based on the number of inputs to each cell.

Nothing too complex going on here, but a fun little experiment, nonetheless. To try it for yourself, head here.

Throwback: Virtual Graffiti

screen-shot-2016-09-14-at-12-45-38-pmThis was an experiment I worked on back when I was at Sony. While our team was working on the Playground space, one of my coworkers came across GML: Graffiti Markup Language. That seemed like an opportunity to me, so I implemented a minigame that would render a given GML file onto a screen within Home.

The implementation was fairly simple- just drew dots as found in the GML file, with lines to connect them. GML files also include time information, which makes it possible to have the result feel like it’s actually being drawn as the rate of drawing speeds up/slows down in response to the shapes being created.

See below for video of it in action.