Adrian Herbez Rotating Header Image

Posts Tagged ‘javascript’

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.

The system loads data from 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.


projects, Uncategorized , , ,

Drawing with plumbing

pipesThis was a quick little one-evening project where I challenged myself to grab a sprite set off of 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.

projects ,

PKP: Cora Aldencamp’s journal

book_screenshotA while back, I created a second Puzzle Keeper’s mystery for my girlfriend’s niece. A full rundown of the puzzle can be seen here.

As I work towards making the Puzzle Keepers something that can be accessed by everyone (not just the immediate nieces and nephews the puzzles are made for), I’m working towards making more of the components digital. As such, I’ve created a version of Cora’s lost journal that can be read online. Clicking on the page will flip the pages of the book back or forwards.

Check it out here, and be sure to be on the lookout for the secret message hidden in its contents.

projects ,

Cartesian Grid Puzzle Maker, v2

After getting some feedback from my friend, I’ve made some changes to the Cartesian grid puzzle maker tool from my last post, including:

  • larger text for the questions
  • randomized ordering of questions (to make each sheet different)
  • prevention of answers being placed on either the X or Y axis (for greater readability)
  • better positioning of controls and image (the canvas no longer moves down as questions are added)

To check out the new version, head here.

projects ,

Cartesian Grid Puzzle Maker

Interface and results for a cartesian puzzle maker.

Interface and results for a cartesian puzzle maker.

While on vacation in New Orleans, I was talking to a good friend of mine who happens to be a grade school teacher. She was saying how she wanted to make a fun activity for her incoming 5th graders that would:

  • Allow her to use information about the students collected via surveys, so they could get to know each other
  • Introduce them to the concept of X-Y plotting on a Cartesian grid

We ended up talking about a worksheet that would present students with a list of questions, each with a coordinate, and a grid with various answers plotted. To find the correct answer, students have to use the coordinates to find the correct dot, and then read the associated word or phrase.

Later that night, back at my hotel room, I threw together a quick app that allows the user to add question and answer pairs, then generates an image with each answer plotted at a random location, and each question listed below the graph with the corresponding x,y coordinate pair. The user can also add a comma-separated list of extra answers to make things a bit more interesting.

Once all of the question/answer pairs have been entered, along with any extra answers, the controls can be toggled, allowing the user to print the page to get a worksheet suitable for classroom use. The “make image” button can be clicked multiple times to re-randomize the positions and coordinates, either to improve results or to generate different worksheets for each student.

Everything is implemented via javascript, with a 2d canvas for the output and simple DOM manipulation for the questions. There are definitely a few things that would make it better, such as saving as an actual image (rather than relying on printing the page), as well as some refinements to the UI. However, I wanted to post this version anyways, as it’s usable as-is, and because part of my reason for building it was to challenge myself to build a useful tool in a short timeframe (total time to execute was about three hours).

The final result ends up looking like the following image, and if you’d like to play with it yourself, head here.


projects ,

Stephenson Security

ssc_envelop I’m currently teaching an introduction to C++ for game programming at the Academy of Art University. Each week, I give the students an assignment to complete, but I wanted to do something extra fun for the midterm.

So instead of just a straight assignment, I set my students up as recent recruits to “Stephenson Security Consultants”, a shadowy organization that offers its services to the highest bidder.


Each student received a packet containing details on 4 “missions” to solve via C++, plus two bonus questions. If you’d like to try your hand at the problems, head here and type “download” into the prompt.

projects, teaching , ,

PKP: The lost journal of Cora Aldencamp

I recently made a second PKP puzzle for my girlfriend’s niece. The puzzle revolves around a box that once belonged to Cora Aldencamp, a former PKP member. The box contains a series of stamps that can be used to uncover the code needed to unlock a secondary (virtual) box.

Once the correct code is entered, the user can print out a PDF that can be cut and assembled into Cora’s lost journal, which contains a further hidden message.

To see a full album of the build process, head here.
To try the web-based component (implemented in WebGL via Three.js), head here.
If you want to make your own copy of Cora’s journal, grab the PDF here.

projects , , ,

Cardboard Paint v1

I’ve continued the work from my last post, and gotten to the point where it’s presentable as a first pass. In addition to creating shapes with cardboard, the user can also apply paint and marker marks on top of the cardboard.

Paint and marker marks only show up on top of cardboard, and can be erased independently of each other.

To try it, click on the image to the left.

projects ,

The start of something… cardboard

This is an experiment in using composite modes with canvas rendering to achieve a 3d effect, allowing users to “paint” shapes in cardboard. At present, it’s possible to draw shapes with the mouse, and to erase them, all the while maintaining the illusion of 3d cardboard, thanks to both an interior and exterior layer.
This is just a start though- I’m hoping to develop this into something much more interesting.
To see what I have so far, head here, or just click on the image.

projects ,

SETI: the game

A few months ago, I attended SETIcon, which was all-around wonderful. However, I thought that the panel on science and videogames left quite a bit to be desired. Several SETI-themed games were presented, but I felt that they were more about overlaying a SETI theme on unrelated mechanics.

Which got me thinking… what would a game that lifted its mechanics (as well as its theme) from SETI look like? I had an idea that I thought could work, and it sat around in my notebook until this past Sunday when I found myself at a laundromat with a laptop and some time to kill.

setigame v0_1

The game takes the form of a puzzle game, where the player has to tweak settings to extract a digital image from a noisy analog signal. The fiction of the game is that aliens are sending a sequence of 1s and 0s that will create an image when properly viewed. However, there are a couple of obstacles in the way:

  • traveling through space has rendered the signal noisy
  • the player doesn’t know the specifics of the alien transmission standard

So, the player has three things that they can alter:

  1. the threshold of what amplitude constitutes a 1 This translates the analog signal (the top-left waveform) into a digital one (the bottom-left)
  2. the width (in time) for each sample This alters the way in which the analog signal is translated into the digital.
  3. the width of the image This controls how many pixels there are per row of the final image (displayed to the right

The threshold value can be changed by clicking and dragging the gray box, and is represented by the green horizontal line. The other two values have to be entered in the fields at the bottom of the interface (for now- I plan on making them visually draggable as well).

I wrote a small Python script that can be used to translate a given low-resolution image into a sequence of noisy values (like this). The demo only has one image, but it’s one that’s bound to be familiar to SETI enthusiasts and science nerds in general.

To try it for yourself, head here.

projects , ,