Selecting Colors

[REAS]

One of our four code sections is about color. How do the student select colors by eye and then get the numbers into the code? The fanciest way is to have an icon to the right of fill() and stroke() commands that opens a spectrum (like in Khan and Tweek mode). This might be beyond our quick scope. Another way would be to have a color icon in the menu we're building. This icon will open a color window. I'm sure there are other ways.

[scottgarner]

The inline icon is definitely the slickest. I think there might be a way to set up a regular expression in Ace that wraps things like stroke and fill in a class that I could then use to stick in a color picker button. This might prove to be kind of a time sink, though.

At any rate, I think we can certainly explore color browsing options even if they don't auto populate.

[shiffman]

Just making a note that we'll need to have something in place (or at least a strong plan in place for this) by the video shoot nov 9th so I'll know to refer to it correctly.

[scottgarner]

I haven't come up with a great solution for this yet because of the way Ace draws the code.

I have a start on what I think might be the easiest possible solution, which involves turning functions like stroke and fill into clickable links that could pop up a color selector. This isn't as handy as the inline box showing the color, but without digging into Ace, it might be the most straightforward approach.

[scottgarner]

Turns out this is really hard.

I dug into Khan, which uses Ace, but their solution appears to be built almost entirely outside of the editor and it's nearly impossible to navigate their code, which is obfuscated.

I think I have the gist of it, though, and believe it involves listening for events whenever anything changes (even if the cursor moves) and using regular expressions to match things like numbers and colors. I'm kind of amazed it works as smoothly as it does.

I don't feel comfortable enough with the inner workings of Ace to say we could recreate that reliably in the short time we have left. I do have a working version of the approach I mentioned above, though, which should work now for stroke, fill and background. Click any of those words in the editor and you'll get a color picker.

Getting it to work for color() would take more work because right now it wants to replace the whole line, but it's not impossible.

[shiffman]

@scottgarner and i just met to discuss this and we like the solution we have now. we will only worry about making it work for background(), stroke(), and fill() since that is all we are teaching in this tutorial. @REAS @alignedleft could you check in out sometime and let us know if you think it's ok? click on any instance of stroke() or fill() and you'll see. I'll be referencing this in the videos so we'll need to nail this down by the end of the week.

[REAS]

I think selecting a "link" in the code is great. Even better if fill() and stroke() have the underline by default without the rollover. If possible, it would be great to have a little color swatch square to show people what color are selecting more clearly, the swatch would update dynamically as mouse moves within the gradient. (See Processing color selector.) I've attached this image just to show a possible layout with the swatch, but please disregard the button styling.

[scottgarner]

I just pushed a new version. No problem on always showing the underline.

I'm using a preexisting color picker called Spectrum for now. It comes with a feature to show the color as you mentioned, but I'll need to do a little work to get it to function perfectly.

[REAS]

Great. Regarding Spectrum changes, maybe let's put that on the list of "nice" and not "necessary" until we have the larger issues all worked out.

[scotthmurray]

I love this! Just tested it out, and it works perfectly. I also love that I can just type the method name without the parens, like fill or even fill(, then click the underlined text, choose a color, and the script autocompletes the parens and fills in the values for me.

[shiffman]

I think we can close this and note that making the color picker nicer is on the to do with medium priority.

https://github.com/scottgarner/Processing-Hour-Of-Code/blob/gh-pages/TODO.md