See the Pen QQeobK by NombreNombre (@NombreNombre) on CodePen.

Face with Slider

This code's objective is to create a face and change background while using sliders.

To Start you must create variables with this names: Rslider, Gslider, Bslider.The first letters are reffered to RGB code (Red green blue).

Then you must setup the canvas, the text size and take out the borders.

After that, we start with the slider codes:

To start with your slider codes, you must write this:

rSlider = createSlider(0, 255, 100); rSlider.position(20, 20);

With this, we firsly created the slider, telling the minimun value and maximun value, and on what position it starts, then the position which it will be located.

Repat this process for variables B and G.

After that, you create first the function draw,then the background, and the colour of the background, you must write the variables name on R G B style.

On the fnal part, you create a face, with the geometrical forms and the text that will go next to sliders.

During the creation of the face, when you will write where it will be located, you must write Rslider and Bslider, so it will move with the sliders.

And on the size part, you must put the Gslider, so the Gslider will make it grow.

After creating the face, you create the final texts next to the sliders.

And done, you have created a face with sliders.