Early this year, CSS-Tricks linked to a page on Refactoring UI about building a color palette. They discuss problems with some common color palette selection options and ways you can get stuck with (or introduce technical debt fixing) problems from not having enough colors with enough distinct shades. They say “it’s not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI.” That is, a scale of neutrals (white to very dark gray with other grays in between), a scale of your primary color, and a scale of each of several accent colors – at least one accent color is a must, but you may need more to give user feedback such as warnings versus errors, success messages, or information.

I got to thinking about the color scheme of this website, and another site I built recently which I had trouble picking colors for. What if you’d like your “neutral” scale not to be grays? The text on this site is brown; or technically, it’s a very dark red, #300. If I lighten it in 20% increments with the fantastic Hex Color Tool, I get the following:

This is not leading to a usable “neutral” scale; a pale pink is simply not interchangeable with a light gray.

However, what if you simultaneously lightened and desaturated your initial color? Would that work? My first attempt converted the color to HSL, divided the distance between the saturation and 0 and between the lightness and 1 into equal pieces, and stepped them both simultaneously. To my surprise, while the lightest colors are certainly more usable as a neutral scale than the RGB lightening, the intermediate ones are significantly more saturated.

For a second try, I exponentially decayed the saturation, using the points (0, initial_saturation) and (final_shade_step, 0.05) to define the equation. That 0.05 was done by feel — I started with 0.001 and my brown grayed out way too fast; 0.01 was still too fast, but 0.1 seemed too slow. I went back and forth between 0.075 and 0.05 but ultimately the latter seemed better for a wider variety of starting colors.

It’s still not quite as desaturated as the plain hex lightening in the intermediate colors, but it’s more comparable and still a big improvement in the lightest colors.

When I tested my code, I found it worked great for fairly saturated starting colors. For less-saturated starts, though, the colors weren’t great OR my equation fell apart entirely and spat back junk. I could fix the latter with some min/max checks, but that was suboptimal – keeping the same saturation level throughout the scale. Instead, for starting colors where the saturation is under 55%, the saturation value at the final shade step is computed as 0.01 of the starting saturation value. That works much better. For example, taking a 50% saturated dark blue-green…

Min-max checks in place, but using same equation as above:

With the adjusted equation:

I added a similar cutoff point at 35% saturation, dropping the constant down to 0.001, although at that point the linear equation works quite well.

After all that, do you want to play?

“Colorful Neutral” Color Scale Generator

If you would like to peek or fool around with it, the code for this can be found in my GitHub colorful-neutral-scale repository.

Fade to black and white image by Alexas_Fotos on Pixabay.

The post Non-Gray Grayscales appeared first on rweber.net.

I’ve added another game at long last. I’m calling it Take 1 because I can think of numerous ways to improve it. I’m posting it as Take 1 because A) there’s no reasonable way forward without refactoring from the ground up, B) while none of my AI are terrifically difficult, they can be lively, and C) I have other projects in the works and no timeline for getting back to this one.

The story: once upon a time, I became very interested in games that can be played on some arrangement of up to four 4×4 boards. That is, if you cut a checkers or chess board into quarters and use one or more pieces in some configuration, how many games can you play? A lot, as it turns out, especially if you’re a little loose in how you use the squares (e.g. to envision a mancala board out of a 4×8 board, ignore all non-edge-squares and collect the 4 squares on each end into a single location).

My research brought up numerous board games I was unfamiliar with. When I decided to start implementing existing games on the way to designing my own, I went to that list and chose a game from Korea called Four Field Kono. The rules are simple: you have a 4×4 board and begin by filling half of it with light pieces and half with dark. All moves are orthogonal, and there are two types: slide a piece into an empty adjacent square, or jump a piece over another one of your own pieces onto an enemy piece, capturing that enemy piece. You win when there is no way your opponent could make another capture, which will either be because your opponent has only one piece remaining or because your opponent has no more legal moves.

This was a challenge mostly because it was my first significant AI. I had been thinking it was my first AI at all, but technically tic-tac-toe had an AI opponent. The manner in which the AI makes its decisions is similar for both games; there’s a “preference chain” of moves/tactics and it executes the first one it can. Tic-tac-toe’s AI was simplistic: win, block, center, random. Also, tic-tac-toe strategy was well known to me in advance.

Four Field Kono is much more sophisticated and I started much more blind. I ended up with four AI opponents, each using 6 or 7 of 8 tactics (including making a random move) in some order. You can read the source code for the strategy; no spoilers here.

If you’d like to try it out I’ve put it in my webspace: play Four Field Kono.

The post Four Field Kono, take 1 appeared first on rweber.net.

I got back to this sooner than I thought – and good thing, too, since I found a bug dating clear back to my color layer flattener (not accounting for leading zeroes when converting to a hex string is a lot more noticeable once you are doing something with said hex string besides displaying it). You can read about the idea behind this in the previous color scheme picker post.

You can now select up to five colors from the grid of fifteen and have those colors show as the highlight on the corresponding hex code and in boxes below against black and white backgrounds. You can actually select more than five but only the first five (left to right, top to bottom in the grid) will show up below. Have fun!

Up-to-date code is available in the GitHub repo. Thanks again to Brian Grinstead and David Merfield for the color utilities they’ve written and made freely available.

The post Return of the Color Scheme Picker appeared first on rweber.net.

I’m on a mission to reduce the number of incomplete games and other interactive programs I have in progress. June’s finish was a clone of Minesweeper you can find at rweber.net/minefield/.

I won’t expound on this in great detail, but I’ll share some features that are either nonobvious or that I’m particularly pleased with.

• I added a feature: I’m not a mine-flagger by nature but it is sometimes necessary to know how many mines remain to deduce their locations. To assist with that the game shows you the number of unopened squares in addition to the number of flagged mines.
• There’s no jQuery, just vanilla JavaScript. Except for the AJAX calls this was unexpectedly easy to do.
• There’s a high score list (well, low score list) stored in a database and accessed via AJAX. This took some doing because apparently in the short while since the last time I wrote something that interacted with a database I forgot everything I ever knew. And decided to give some functions inputs which don’t take inputs. And thought I could parametrize the database table in a PDO prepared statement.
• New games can also be started with AJAX – the buttons across the bottom of the minefield don’t reload the page.
• I created a custom icon font with four Font Awesome icons for the clock, mines, flags, and an X you get if you flag a wrong square and then lose. I should say IcoMoon created the font; it was remarkably easy and the Unicode values stayed the same as in Font Awesome as a whole.
• When you click a square that has no mine and no neighboring mines, the space of contiguous blank squares and their immediate numbered neighbors opens with a ripple effect. This involved a whole lot of setTimeouts, partially because every direction of neighbor had to be accounted for separately in the two-dimensional array representing the board – there may be a better way to do that but I’ll have to refresh myself on data structures.
• The timer pauses when you leave the tab or window in which you’re playing the game. Instead of trying to do something fancy with stopping the setInterval, there’s just an if statement that only increments the counter if document.hidden is false (and your game is still in progress).
• The first-clicked square is never a mine. This is accomplished by shuffling an array of pairs of numbers that collectively represent the grid (at whatever size desired), and then copying the first n values and the second n values into two other arrays, where n is the number of mines. If the first square clicked has coordinates in the first array, the second array is used as the mine locations. Otherwise the first array is used. The rest of game setup (building the array of objects that represents the game board) happens at that point.

Since I intend to make game development a major focus – and it won’t always involve programming – I’ve created a new category for it. That category will include material that’s not a game itself (like the animated fishpond) but which I have pursued because of its relevance to game development. The tag “games” will be applied to posts that include or link to playable games (mine or others’).

The post Sweeping the Minefield appeared first on rweber.net.

A while ago I was trying to find an appropriate opaque fallback color for a translucent background color. Although after some thought I understand what the method is to calculate such a thing, at the time I just did a search and came across an article by Lance Gutin relating transparency and color for grayscale. I thought I might expand it to full-color, and after little time on the Mozilla Development Network and a lot in Stack Overflow and Brackets, I have a little utility for you. You can use it here or grab it on GitHub.

Since the arithmetic turned out to be straightforward and my need for this sort of calculation is infrequent, this project turned more into a way to practice non-DOM-manipulation and plain-vanilla JavaScript. My goal was for any valid color specification syntax to be acceptable, and maybe for it to be even more forgiving than that. I found the MDN pages on the color CSS data type and regular expressions in JavaScript most helpful.

Mathity Math

The simplest calculation is on an opaque background, where you take a weighted average of the color values. If the alpha of your overlay color is set to 0.8, to find the red value of the color you see (the composite color), you’ll calculate 0.8*(red value of overlay) + (1 - 0.8)*(red value of background). Do that for all three color channels and you have the code for the composite color. You can make this calculation for some opacities via the Color Blender from Eric Meyer (opacity must be a fraction with denominator less than or equal to 11).

When you add translucency as an option for the background the arithmetic increases in length but not really in complexity: the spec for simple alpha blending or compositing (which applies to both SVG and CSS) simply takes a doubly-weighted average, though it does not take the color underneath the background into account.

Here’s the fully written out calculation, for the red channel:
(composite alpha)*(composite red) = (1 - overlay alpha)*(background alpha)*(background red) + (overlay alpha)*(overlay red)
The composite color’s alpha value will be 1 - (1 - overlay alpha)*(1 - background alpha). If either background or overlay is opaque, the composite will be opaque. If the background is opaque the equation simplifies to the one we had previously; if the overlay is opaque it simplifies to composite red = overlay red.

A translucent background on an opaque bottom layer (the tallest stack I was interested in manipulating) can be dealt with in two steps: average the background and the bottom layer and then average that with the overlay.

Turns out that calculation is the simplest of the bunch, though, and extracting the color information from the assorted kinds of input permitted is much more complicated. I’ll leave that story to the code itself, though.

Rainbow Cake (both cake and photo) by Dabbisch on Deviantart [CC BY-NC-ND 3.0].

The post Flattening Color Layers with JavaScript appeared first on rweber.net.

Sitting around during some home repair yesterday, I made a page of hex color codes that spell words: Color Words / Word Colors.

I did let 0 stand in for O, 5 for S, and 1 for I, though there are plenty of 3- and 6-letter words that use only the letters A through F, in case you’re a purist.

It’s even responsive – by virtue of simplicity!

The post A little color fun appeared first on rweber.net.

My desire to be a Master Programmer has drawn me to find extracurricular programming projects. As you may recall, for the filterable WordPress gallery I did some significant programming, but it was all within WordPress, using a lot of WP’s custom functions and shortcodes from the plugin Media Library Assistant. I read once early on that WordPress is a bad way to learn PHP, but if you know PHP well you can do amazing things with WordPress. That seems wiser and wiser as I gain experience with both.

I also told you long ago that I wanted to learn PHP via creating a sort of RPG/adventure game, but I’ve come to realize that’s too large a project to begin with – not to mention the amount of time required to develop the game itself, independent of implementing it. I did make a character creation form way back when, but starting over recently I went simpler: tic-tac-toe. And it took hours. At least 5, maybe 6. It’s entirely PHP (and HTML, of course); there’s no JavaScript and the CSS is minimal. I could take it further, but there’s one problem: tic-tac-toe is awesomely boring. I did see a Games Magazine puzzle about tic-tac-toe played on three boards simultaneously (each player marks one square per turn, on the board of their choice), and if I do go back to it I’ll probably try a variation like that one.

In the meantime, though, I continued through my list of games to Mastermind. That’s the one where you have to guess a sequence of colors by getting feedback of the form “one part of this guess was completely correct, two were correct colors but in the wrong place, and one was completely incorrect.” This one didn’t require even the minimal AI of tic-tac-toe, but did require more complicated information to be stored from turn to turn. I also made it object-oriented, which wasn’t the case with tic-tac-toe. I styled the whole thing to look like marbles placed on a wooden board with cylindrical holes drilled into it, and let the player choose whether the secret sequence should allow duplicate colors or not (allowing duplicates is the “real” version, though not allowing duplicates is the default of my version).

Then I decided to AJAXify it, so the page wouldn’t bounce back up to the top every time you made a guess. That was more of an adventure than anticipated – the whole thing needed refactoring. After a good deal of argh I got it working, though, and it makes for a quicker and nicer play experience. I have to give credit here to Jade Krafsig, whose AJAX tic-tac-toe game was invaluable in getting Mastermind converted.

It is not responsive, I’ll warn you, but it’s enjoyable to play and fits even on a small laptop, so I thought I’d put it in my webspace to share: Play Mastermind. If you play it, let me know what you think!

Update: now you can also get the code for Mastermind on GitHub.

The post Mastering Mastermind appeared first on rweber.net.

My sister sent me a link to an article in Mental Floss where they picked out ten items from a recent addition to the Internet Archive: a large collection of MS-DOS games. Excitement! Recently I’ve started playing video games a bit – escape and match-3 games, to distract myself on the elliptical machine or rest my brain – but before recently there was a long gap, and before that DOS games are pretty representative of what I was playing.

The organization of the games leaves a little bit to be desired; you can sort them by title, views, date, or creator, and you can search, but you can’t, say, jump to a particular letter of the alphabet. My M.O. was to gradually scroll down so the “infinite scroll” made all the entries visible and then peruse at my leisure, with some find-in-page searches. I clicked through to anything that seemed familiar or interesting, which meant under 10% of the total, but that was still a lot of games.

Some notes on the emulator: Be patient with DOSBox. It takes its time, but in general does load eventually. Of course, not all of the implementations worked well. Nothing I tried that requires a mouse functioned well enough to play, for instance – the in-game and out-of-game pointers would be misaligned in the browser, and in full screen mode the in-game pointer would lag or double my clicks. I had trouble with other games because they relied on processor speed and hence were too fast in the emulator. Frogger, for example, has to cross a strip consisting of one continuous turtle.

And, of course, not all of them panned out as worth including, so now we’ve cut our original 2301 results down to ten of our own.

The very first game I tried was Moria, a simple RPG rather similar to the one I hope to make to learn PHP. My sister has no recollection of it but it seemed very familiar to me. I died quickly – into the dungeon and whoop! dispatched by a kobold – but this is one game I see myself returning to.

We had a number of Sierra games when I was growing up, nearly none of which (assorted King’s, Space, and Police Quests) are in this archive. We did have the ever-tacky Leisure Suit Larry, which I tried to play with just as much (read: little) success as originally (1 point, killed by a mugger; 1 point, flattened by a car). The only other game which I think I may have played in this exact version is Wheel of Fortune, which is entertaining as a brief trip into the past, but I’m thinking that even at the time its appeal must have been largely novelty.

As someone with a small collection of artificial intelligence books, I clicked right through to Racter, a conversation program used to write the book The Policeman’s Beard is Half-Constructed. It’s amusing but definitely more of historical interest.

For your arcade pleasure, I liked Beyond Columns (though I didn’t know how to rotate the symbols within the columns the first couple of games: K or 5). In that you have three-symbol columns falling from the sky and you have to place them to three or more symbols line up horizontally, vertically, or diagonally. Those symbols will disappear, and like Tetris, the point is to keep the stack from reaching the top of the screen for as long as possible. I should probably note that I played on the second-easiest setting and it was still quite… perky, so it probably is another game relying on processor speed, saved only by having many difficulty settings.

Actual Tetris is also available, of course, though it makes for poor playing unless you have a number pad. Doing a find-in-page for “tris”, at least once you’ve made all the entries visible, will net you many clones (though not Nyet, which is a good one). Dig Dug and Burger Time both work reasonably well (though I have no idea what the goal of Dig Dug is), and you can find many versions of Pac-Man of varying quality; do a find-in-page for “pac”.

Finally, The Quest of Kwirk’s Castle is a puzzle game that had a sibling available for GameBoy, Kwirk the Chilled Tomato. You have to move boxes and revolving doors and sometimes push the boxes into water to provide crossing. While I could have used an undo command, this one holds up well. I would love to know how to trigger backspace to restart the level (none of the something-delete key combinations worked) but hitting escape and clicking down to the level you were on isn’t a huge impediment.

Is that ten? Well, perhaps I cheated. The only ones I’m likely to play again are Moria, Beyond Columns, and The Quest of Kwirk’s Castle. Three’s plenty for me, though.

DOS logo by Clker-Free-Vector-Images on Pixabay.

The post Games, games, and more (DOS) games appeared first on rweber.net.