ICM- Adding HTML elements

Ok, so I set my major goal this week: I wanted to control the movement of the hedgehog with an HTML slider. I’m really not sure how something thought to be so simple is so complicated for me, but here we are.

I used last week’s sketch but just drew one hedgehog class with it. I added an HTML slider to my sketch, but it took some time to figure out how to map the slider’s location to the location of the hedgehog.

My logic was that if x should be equal to slider.value, so that wherever the slider was, p5 does all the equations from that  location and then draws the hedgehog. This would all be in draw() so that it’s being drawn over and over.

I also used print to print the slider value to the console. It was a recommendation from someone on the floor and I trusted them 🙂

I changed my move() from going back and forth automatically to reading the slider value to determine the location.

The move() fuction changed the this.x variable into a newPosition. Then when it’s called in the main sketch, the position changes based on the slider.


I added some HTML directions, just in case the UX wasn’t obvious!

Leave a Reply

Your email address will not be published. Required fields are marked *