How to: Make an HSB color finder (with save)

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

0 voters

Did you know how to do this already?

  • Yes
  • No
  • I didn’t read it

0 voters

Was it understandable?

  • Yes
  • No
  • I like polls

0 voters

After that is all done, this is your finished product.

13 Likes

Hey nice work GCC!

4 Likes

Thanks

Dunno why the polls aren’t showing, I edited out the details part

2 Likes

You may wanna fix your polls tho :wink:

2 Likes

I did though…

2 Likes
  • Yes
  • No
  • I wanted Hopscotch on a fridge

0 voters

Did you know how to do this already?

  • Yes
  • No
  • I didn’t read it

0 voters

Was the presentation understandable?

  • Yes
  • No
  • I like voting in polls

0 voters

4 Likes

Here you go!

3 Likes

Fixed it thanks

Had to delete the polls then re write them for some reason

2 Likes

Haha no problemo!

It’s because the end tags were not correct. For any type of tag, even a <h1> tag always has to end with a “/“ then the name of the tag, eg [/poll]

2 Likes

I will probably update my art pad with this now! Very helpful!

4 Likes

Just added the new feature! It came out really good

2 Likes

It rocks!

Nice touch Ko!

1 Like

In this project:


I made a color finder, not saver. It’s also pretty interesting.

5 Likes

Great topic. Will be very helpful to hopscotch users!

2 Likes

Interesting

I have a guess on how you did it, it’s really cool!

2 Likes

Wow, what a well-written and awesome tutorial! Great job :slight_smile:

Thanks!

1 Like