Jim Blackler

I’ve made a new project which is online in an App Engine instance at https://nonogrampro.appspot.com/

About

I’m a fan of Nonogram puzzles, also known as Picross and many other names. Nonogram puzzles were invented in 1987 by Non Ishida and independently by Tetsuya Nishio. Players have to complete a grid to discover which cells are shaded based on number clues in the rows and columns. The Wikipedia article on Nonograms is a good source of history of the puzzle type as well as information on how to play.

There are many Nonogram games that can be played online. However some may know that I made a website based Solitaire game which has become modestly popular over the years. https://jimblackler.net/blog/?p=303 People have said they appreciate the clean design with no advertisements or flashy effects that distract from the game. I thought maybe I could do the same for Nonogram puzzles. 

Completing the project

First something of a confession; I actually started this project in 2017. I made a lot of progress, but I must have got distracted by something, so I left it unfinished. Sadly as many tinkerers like me have found it’s a lot easier to start something than it is to finish. This project was still in the back of my mind though, so I made the decision to pick it up again recently, and have successfully completed it. This just shows it’s never too late to resurrect an abandoned project.

I did update it to the latest tech though. It’s now written in Typescript, and I converted the old Python back end to one written in Node.js. This is the tech that I’m really enjoying working with these days. One advantage of using Node.js is that code can be easily shared between client and server and that can be useful for puzzle processing. This is handy for the ‘hint’ function I’ve supplied with the game; it uses the same solver that is used server-side to make sure that puzzles can be completed.

How it works

The client works by rendering the puzzle as an SVG created in script.I could have used Canvas, but using SVG handles the graphical updates efficiently and allows me to use CSS to style the puzzles.

Having written the game I needed some actual puzzle designs to use. I could probably have done some drawings but I’m not really that artistic and I wanted about 50 or so. I hit on the idea of creating puzzles using libraries of icon images that can be freely remixed; i.e. ones that have a Creative Commons or public domain licence. Even better if they were stored in a vector format like SVG; they could be then scaled to the Nonogram grid.

This approach worked surprisingly well. My importer can iterate through whole libraries and render the images in a very large grid. It then ‘trims’ off the vertical and horizontal edges that contain no content, then shrinks the leftover image to a pattern of shaded cells of the required grid size.

However you might be surprised to learn that more often than not importing an image like that would create a puzzle that either had more than one solution or that would require advanced solution techniques because they couldn’t be solved one row or column at a time. That’s no fun for the player, so the importer actually attempts to solve the puzzle first from the generated clues. If it’s not possible to complete it using the standard set of techniques the puzzle isn’t used. If it is possible to complete it, the number of rounds required to complete with the standard method becomes the ‘difficulty’ shown with the puzzle.

I then look at the generated puzzles and select the best ones to publish on the front page.

I tried to include a variety of grid sized puzzles, 5×5, 10×10, etc. up to 30 x 30. And the import worked so well that I smashed my target of 50 puzzles. There are over 600 in the collection.

Game and editor

The game uses the browser’s local storage to keep track of which puzzles you’ve completed. 

I’ve even included an editor so you can design and publish your own Nonogram puzzles!

You can try them in your own browser, or publish them on the site. This creates a link for the puzzles that could be sent to other people so they can try them. To do that requires signing in with a Google account and selecting an author name for your puzzles.

If you have generated any puzzle you’re particularly pleased with, let me know by email and I’ll consider adding them to the selection of puzzles that everyone sees on the front page of the site.

As usual the code for my projects is on GitHub so that anyone can see how it works, and made available with an open source licence.