This is a tutorial for making an hsb color wheel.
I will show you:
- How to make the color wheel
- Making sliders to adjust Saturation and Brightness instead of typing in the number
- Saving your color for later use
If you came here for Hopscotch on a fridge, then I’d look elsewhere.
The width for every trail is 1
Step 1: Creating the wheels
Hue
So, first you need to drag a sprite so there’s something to perform your code. This will not have a screenshot as it’s pretty basic;)
Next, put a “when game starts” rule in the text Object
This is where there are choices. If you have Awesome_E’s JSON hack to get secret blocks, put “Create a Clone of This Object Times: 360”. If not, then “repeat times 360 create a clone of this object”.
BUT if you want higher quality, keep adding 360 clones (for best quality, make it 1440) . There WILL be more lag though!
Next, we will code what the clones will do. We want them to make a color wheel.
First put set position x 512 y 384 (this is the center, for you it doesn’t have to be)
Next, the hard part.
We will first draw a trail color
H (clone index)/(how many times 360 goes into the total clones) - 2
S (Sat) <— this is a value
B (Bright) < — this is also a value
Then put “set position x 150 • sine ( (self clone index) - 2 ) / ((self total clones) - 1) • 360 + self x position
Repeat that for the Y, but with self Y position and cosine
Then
Set value (self x) to (self x position)
Set value (self y) to (self y position)
After that
Repeat Forever
Set trail color H (clone index)/(how many times 360 goes into the total clones) - 2
S (Sat) <— this is a value
B (Bright) < — this is also a value
Set position to x 512 y 38
Set position to x (self x) y (self y)
All that is in the ref pic.
Now, on to the Saturation and Brightness. Luckily, these are easier. I spent 20 minutes trying to figure out the color wheel lol
Saturation
Drag a new text Object out of the editor. Clone the object 100 times.
Then, code what color the trail is.
When Object is cloned
Set position X 200 Y 384 + (50 + (self clone index) - 2)
Repeat Forever
Draw a trail color H (Hue) S (self clone index) - 2 B (Bright)
Set position X 250 Y (self y position)
Set position X 200 Y (self y position)
End
Then, code the algorithm for changing the Saturation.
Pictures are easier here.
In the first pic, we make sure Saturation can’t go over 100 or under 100
In this second pic, we are using “wait 0” for the one frame delay, so YTouch3 and YTouch4 aren’t the same. We increase Sat by the difference of the two values.
In the third, we add a little dot to show where the Saturation is on a scale.
Brightness
Add a new object first.
Basically the same code will be used here as Saturation, just with YTouch1 and YTouch2 for values. No need for images. Also change the Sat value to the Bright value. And the clone will set position
X 800 y 384 + 50 + clone index - 2
As well the trail will be
H (Hue)
S (Sat)
B (clone index -2)
Step 2: Adding the save color feature
The code for this is pretty simple.
I use the rounded square as the basic block, but you can use any shape.
This will show the color you will be saving. Also where the saved color will be put. (The Values)
This is a system for placing the saved colors, when the X position gets too big, it goes back and changes Y position. I put a max Y position in mine, but it is not necessary. Also this uses clones for the save color.
This is what color the clones will be. It sets a value for its color as well so when it is tapped it will change the color. THIS IS VERY IMPORTANT!
See how it’s important now? This sets the HSB to the clones current color!
Well, now that you read that long post, you should know how to make a color Finder with save colors!
Was this helpful?
- Yes
- No
- I wanted Hopscotch on a Fridge
Did you know how to do this already?
- Yes
- No
- I didn’t read it
Was it understandable?
- Yes
- No
- I like polls
After that is all done, this is your finished product.
