Realtree

color selector notes

Posted by Justin Bernard on August 8, 2015

- Canvas scaling to fit/cover browser… Not sure, you can probably find a jquery solution or something.

- CSS pretty making

- Hex, HSV, Blah color output under the picker. Not hard to implement, I can do tomorrow if needed.

- I need to preload the images. If you get a blank or half rendered canvas, just mess with the colors and it should show up


http://snaptopixel.com/angrybear/realtree/


Some non-obvious things:


- The “card” and “swatches” images are composited to the canvas (not controlled by css), you’ll see in index.html that they have “data-pos” attributes which tell the js where to draw them. Feel free to change the images at will, everything should still work automagically.

- In scripts.js my code starts at line 381

- I optimized the camo images pretty heavily, you’re welcome :P


If you’d like to change the starting colors look here:


Line 430:


    var viewModel = {

        color1: ko.observable("#888888"),

        color2: ko.observable("#000000”),