How do I use the availableColors sink with a sketch?

Questions
1

I tried to use the avialableColors sink (referenced here) but I couldn’t work out how to make a colorList, which is the type that was expected.

Does anyone have any examples of how this works?

2

Happy Friday!!

1 Like
3

Thanks Jay! I didn’t realise that the colors.list was a way to actually construct the list itself!

I’m including the relevant part of your code below for future reference:

availableColors: colors.list(colors.red, colors.blue, rgb(255,0,255))

1 Like
4

This is a cool feature. It would be nice if you could do something similar with changing the 6-color palette for a graph component.

Also, it seems like rgb still does not pull the appropriate hexcode, unless there is some layer that makes the sketch colors different intentionally.

5

Is it a shade difference? Sketch is at < 100% opacity if that helps.

6

How do you force sketch strokes to be 100% opaque? I have a feeling I am not using setOpacity correctly.

background: sketchLayer(sketch1.sketch.setColor(rgb(t.cellNumericValue(1,1),t.cellNumericValue(1,2),t.cellNumericValue(1,3))).setOpacity(1))
7

I found a workaround by just stacking the sketchlayer…

background: layerStack(sketchLayer(sketch1.sketch.setColor(rgb(t.cellNumericValue(1,1),t.cellNumericValue(1,2),t.cellNumericValue(1,3))).setOpacity(1)),
sketchLayer(sketch1.sketch.setColor(rgb(t.cellNumericValue(1,1),t.cellNumericValue(1,2),t.cellNumericValue(1,3))).setOpacity(1)),
sketchLayer(sketch1.sketch.setColor(rgb(t.cellNumericValue(1,1),t.cellNumericValue(1,2),t.cellNumericValue(1,3))).setOpacity(1)),
sketchLayer(sketch1.sketch.setColor(rgb(t.cellNumericValue(1,1),t.cellNumericValue(1,2),t.cellNumericValue(1,3))).setOpacity(1)),
sketchLayer(sketch1.sketch.setColor(rgb(t.cellNumericValue(1,1),t.cellNumericValue(1,2),t.cellNumericValue(1,3))).setOpacity(1)))
8

You can append any sketch color with .setOpacity

9

Thanks, I think layering is my best option at this point. I can see from your example that even the 100% opacity in the sketch appears to stack with other parts of the sketch if you have multiple strokes. My desired output is that the strokes wouldn’t stack at all because it’s 100% opaque — also I want the color to match a standard hexcode eye dropper.

I started planning an activity back in May that has students switching between RGB (base 256), Hexcode (base 16), bitcolor (base 2), and decimal (base 10) as an introduction to polynomials. This will let me finish it.

Here is the gist of what I am talking about – granted the actual mathematics on my activity will be different. Same concept in terms of the colors.

10

I’m having the same issue. I would like the 100% opacity to match the exact RGB of the color picker. I still can teach my lesson without that, but it would be nice.