week 3

This week I had a partner for coding, Chaski. We decided to create some kind of pattern that is controlled by a slider. I designed a pattern on Adobe Illustrator:

It was really hard to start from that!!! So we decided to start with one line and a shape (rect) that will move with it (like a slider). In the beginning we defined the y parameter for both objects as MouseY, it's worked - the rect moved together with the line!! The only problem was that the rect didn't stop at the end of the canvas.

The function constrain (that we found in Allison's example) helped us to define the limit of the slider. First we defined the height and width of the rect as W and H, then we defined the height limitation as the height of the canvas minus height of the rect (400-h). And it worked! The rect moved with the line and stopped at the end of the canvas.

The results: https://editor.p5js.org/ds6298/sketches/PruwLt--G

We had a slider. But I didn't want to give up on our original idea. So I used the code that we used for the slider, duplicated the lines, did the same thing with horizontal lines and I changed all the parameters to the x-axis. But there was a problem with both sliders working together. Every time I pressed and dragged one of the sliders the other one moved to the end of the slide.

I didn't understand what was the problem. First I noticed that the rect is outside of the limitation of the slider.

So I wrote a constrain function so the problem didn't happen when I drag the rect but only when I pressed the mouse. I knew the problem was with MousePressed. I needed to define the "area" (which is the rect) it took me quite some time to understood it, so I sketched it:

And then wrote an if statement that will limit the area where the mouse can press. I did it horizontal:

if ( slidehorizontal <= mouseX && mouseX < slidehorizontal + w)

And vertical :

if (dragvertical <= mouseY && mouseY < dragvertical + w ){


It worked with both sliders.

Here is the result: https://editor.p5js.org/ds6298/sketches/m8gxjxAWM

** There is still a problem when the mouse pressing on the other slider the other one work

10 views0 comments

Recent Posts

See All