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 made a resolution this year to design and implement an original video game, even if it had to be quite a simple one. I have many ideas that are far too complicated to complete in a year and even the simplest had to be scaled back to seem doable, but I’m working away at it.

I want to record the game’s stages of development, and this is stage 1. It’s not so much playable yet, though it is interactive. It’s also not so much going to work on a phone, just for a warning.

[Visit my blog to fiddle with this]

The post My latest game project appeared first on rweber.net.

More progress on the fishpond! The fish are slightly attracted to the mouse pointer when it’s inside the canvas, and you can click to feed them, which attracts them more. They also got a tiny upgrade in attractiveness. They’re still twitchy and awkward but I have various thoughts on how to improve that situation.

[Visit my blog to see the fish in action]

Code for this is on Github.

The post Feedable Fish 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.

What turned out to be my last major job before starting at King Arthur was a new website for Second Growth, a local nonprofit dedicated to treatment, recovery, and prevention of substance abuse in adolescents and young adults. Before I came on board with Aquilino Arts my partner had set them up with a lovely Joomla site, but it was hard to update in terms of both content and software. It was time to shift to WordPress, and clean up and reorganize a little at the same time. I was involved in the organization – though we stuck fairly close to the previous structure – and gave feedback and input on the design, but my main job was the technical aspects. I wanted to discuss them here because it is our most sophisticated site to date and it gives a fairly thorough overview of my methods for site construction.

By the way, I have a Pinterest board devoted to plugins we use, which you can take as recommendations.

The front page starts with a mosaic; the left half has a YouTube video and a mini-menu, the right half is split into 3 pieces whose contents can be changed from within the Customizer. The theme is set to use two menus, intended to be the mini-menu and a full menu. The mini-menu includes a link to the full menu; the full menu appears in the footer, which is where the link goes, but if you have JavaScript, it hijacks the link and pops the full menu up in a lightbox (the method is shown almost exactly in my post about AJAX in WordPress).

Below the mosaic and a divider band, there are three more spots whose contents can be set in the Customizer. In every case the options are a page, a specific blog post, or the latest blog post. The footer includes not only the full menu but a 2-up slider of donor logos. The gallery uses Media Library Assistant to allow logos to be selected by categorizing them appropriately on the back end and is set to have two columns and random order. Flickity applies itself after page load and turns each column into a panel of the slider. All gallery/slider and lightbox functionality (which is via Colorbox) is in a custom plugin so it can persist should they change their theme down the road. The choice of Flickity and Colorbox is semi-arbitrary; I’m familiar with both of them and they do what I want. I’ve never written about Colorbox here, but I’ve written fairly extensively about Flickity.

On interior pages the mini-menu appears as the top-of-page menu; the logo gets you back home if you don’t want to use the full menu popup. Certain content is accordion-folded, which is also provided by the custom plugin but is hand-coded. Different pages have different sidebar content via Display Widgets, chosen as the least awkward of the options. Almost all of them have a donate button and contact link; most have a two-column gallery of donor logos; a couple have a still of the home page’s YouTube video that lightboxes up into a watchable video. One has 1-up slider of photos, chosen via Media Library Assistant’s tagging system.

The contact form is from Contact Form 7, because of the option of Selectable Recipient with Pipes, including the ability to use the pre-pipe content by prefixing the label with _raw_. The event calendar is Event Organiser, chosen because it does recurring events and is developer-friendly. I didn’t end up turning off the original CSS, but I found it reassuring that the developer included that option. It provides for per-category colors, which we used to make one-off events stand out from weekly recurring events, and also produces the lists of upcoming events that appear on the home page (set to show only the next instance of any recurring event) and in the sidebar of one of the interior pages.

There are two custom post types aside from contact forms and events, both created and given custom taxonomies using Custom Post Type UI. One is testimonials, which currently only exist in the sidebar of one page (a single random one selected and shown by Flexible Posts Widget with a custom template – and by the way you can get all my custom FPW templates on GitHub). The other is resources. The resources archive and news (blog) archive look similar: they are topped with buttons for each category (or topic, the resource-specific hierarchical taxonomy) and for the whole archive. These buttons are coded into the archive templates. The list of all resources actually excludes one of the categories; resource archives also display alphabetically by title instead of by date and with more allowed per page.

The news archive shows the featured image and an excerpt; the resource archive shows the full content with no image. Featured images aren’t set to automatically show on any of the individual posts or pages; they are used for the front page featured content and news archive only.

The theme is fully responsive, and below a certain width the two-column donor logo galleries are hidden so as not to make the page infinitely long. When at “full size” the right sidebar is positioned and sized via display: table-cell. This caused some problems on Firefox with the pages with the video still in the sidebar, where the sidebar was displaying far wider than it was set to (35%). The fix was to set width: 100% on the still (in addition to the max-width: 100% set on all images in the theme). It was tricky to repair because my browsers have gotten very tenacious about using the old CSS file, regardless of hard refresh or cache clearing, until I change the version number. I’d switched to CSS tables because I was having the same problem in Flexbox, but since then have determined the same fix would have worked for Flexbox.

Using CSS tables or Flexbox was important for getting the main content and sidebar to be the same height, since the leafy divider is actually a small vertically-repeating background image on the sidebar, transparent beyond the leaves on the sidebar side and with solid white background (covering the translucent green background of the sidebar) on the main content side. When the sidebar drops below we switch the image and its positioning and repeat settings.

Originally the footer used CSS columns, as well as the sidebar when it dropped below but had width enough for multiple widgets, but then I discovered Flickity doesn’t play well with CSS columns. At all. I had crazy spillover outside the Flexbox viewport that I couldn’t figure out how to fix. No more CSS columns; they are now done the old fashioned way with percentage width and floating.

The behind the scenes plugins in the site are WP Smush for image optimization, WP-SpamShield for comment spam elimination, Google Analytics by Yoast, and W3 Total Cache for caching. With such an image-heavy site both image optimization and caching are key elements. I didn’t use WP Fastest Cache because the free version has to be cleared from the hosting account if you haven’t just published a post or page – changing the featured items in the front page won’t do it. W3TC doesn’t detect changes in the front page but you can clear its cache from a button at the top of any of its pages.

The post Touring a New(ish) Site appeared first on rweber.net.

I love aBowman’s fish gadget, but it’s Flash, which seems to be more restricted every year. Nowadays it won’t even run for longer than a minute or so without clicking a play button.

Recreating an interactive fishpond with HTML, CSS, and JavaScript seemed like an excellent way to learn the associated skills. I started with MDN’s JS/canvas Breakout tutorial and then made the ball more interesting, and then plural. Here’s what I have so far:

[Visit my blog to see the fish in action]

This came together amazingly fast, but I expect every additional improvement will take longer than the last – more natural movement and appearance in particular. It has been a highly enjoyable challenge so far, though.

You can monitor the progress and grab this and other code on my GitHub. I can’t improve on the MDN tutorial, so (for now at least) I’ll just be showing results.

The post Here fishy fishy appeared first on rweber.net.

After my JS Color Layer Flattener and research for Web Design for the Non-Designer, I decided to implement the color scheme selection process outlined in WebdesignerDepot’s article How to Get a Professional Look With Color: choose up to five colors; increase to fifteen by adding the result of overlaying each color with translucent black or white; unify the fifteen by overlaying all with a common translucent color. Instead of manual input like the layer flattener, I went with Brian Grinstead’s color picker Spectrum, except for the black and white layers. The colors populate on load via David Merfield’s Random Color script, something I pinned a while ago but never used. I do use the blending part of my color layer flattener to compute hex values for the fifteen resulting colors.

Try it out!

To use it yourself there are two pieces you need: jscsp-form.html and either jscsp-complete.js or jscsp-no-jquery.js. The form includes Spectrum’s CSS and both the scripts include both Spectrum and Random Color; jscsp-complete.js includes jQuery, as you might guess, so use jscsp-no-jquery.js if your site already loads jQuery. At the moment the GitHub repo for this is slightly behind CSS-wise but not functionality-wise.

To use: place a div with id="csp-container" in your page. If the file jscsp-form.html is not at the root of your webpage, assign the container div a data-path attribute with the URL between the domain and jscsp-form.html. For example, for example.com/gadgets/color/jscsp-form.html you would use data-path="gadgets/color". Including or excluding slashes on each end is okay. Call jscsp-complete.js or jscsp-no-jquery.js sometime after the container div.

My intention is to come back to this and add a means to select, say, five of the fifteen resultant colors and have them appear by themselves underneath the current contents, perhaps against both black and white backgrounds.

The post A color scheme picker, take 1 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.