dull...

by jessica uphoff

BACKGROUND & OVERVIEW

Dull is a color-mixing game that allows you to explore the art of color-mixing. One of the beauties of subtractive color mixing is that the more you mix, the more the color turns dull… Many painters will tell you, don’t over mix your colors, but with dull that is the point of the game!

• BOARD: A 10 x 10 grid of 100 different color tiles.

• GOAL: The goal of the game is to mix the right tiles to make the target color, creating a path to the target space. The level amount represents the distance away from the start tile (level 1 is 1 click away...level 10 is 10 clicks...)

• DYNAMIC LEVELS: each level is auto generated each round, allowing for a different gameplay every refresh and optimized level count capabilities.

  while ((count) <= level) {
    optionTiles = nextMoveOptions(false);
    let next = optionTiles[randomNum(optionTiles.length)];
    selectedTiles.push(next);

    if (!next) {
      currentTile = start;
      currentColor = startColor;
      selectedTiles = [];
      setPath();
      return;
    }

    let nextColor = allTiles[next].ele.getAttribute('colorId');
    count++

    mixedColor = addColor(nextColor, count);
    currentTile = posObject(next);

  };

• MOVEMENT: Players are provided with a start tile and can move to the neigboring lateral and horizontal colors towards the target position. The current tile has a count of how many clicks there are left in the center circle. The path can not cross over itself and will trigger reset button when the path is incorrect or there are no neighboring options.

The player may use the mouse or keyboard to navigate the grid.

• ARROWS: Allows the user to navigate the board one space at a time.
• ENTER: User can press enter to trigger a blinking button.
• H: Help
• R: results
• A: about

• COLOR MIXING: Subtractive mixing (values add to black) is used to mix the current color with the selected option. RGB codes are converted to CMYK, proportionality averaged together, then converted back to RGB for css styling.

export function addColor(rgbColor, count) {
  let cmykColor = rgbCMYK(colorArr(rgbColor));

  C = ((C * (count - 1)) + cmykColor[0]) / count
  Y = ((Y * (count - 1)) + cmykColor[2]) / count
  M = ((M * (count - 1)) + cmykColor[1]) / count
  cmykMax();

  return cmykRGB([C, M, Y, K])
}

• SWATCHES: The swatch console (bottom right corner) is where the player can compare the following;
  • TARGET: Final color that the player is trying to mix. The background is also the target color, to bring focus to the goal and allow for easy comparison.
  • CURRENT: All of the colors that the player has mixed so far in the path. Same as the color of the current position.
  • OPTION: The player can hover their mouse over the current position options, to review in the swatch console.

• RESULTS: As the player beats levels the paths are recored in the results modal. This also acts as the popup when the player loses.

• HELP: Modal explaining how the game works with gif animations. Opens automatically.

Architecture & Technology

• Javascript
• HTML
• Sass
• Webpack

Future Changes

• Button that allows user to mix up the colors, so they are not in rainbow order.
• Add hints:
  1. Highlight mid point of the path.
  2. Provide a preview of the mixed color for hover swatch.
  3. Reveal the next tile.