Description
Process:
I wanted to make a face that gets unhappier as you get closer to it with your mouse. I've attached my initial visual design sketch as 'faces.png' which should be in the list of sketch files. I observed how crazy everyone went with their mouse on interactive sketches and thought it would be fun if the sketch reacted to that and responded with a dialogue.
I used variables, random(), mouseX, mouseY and mousePressed() in my sketch.To help me change the face expression I split up the canvas into 4 regions. Using the 'if' condition statements I assigned different expressions to each region.
I used ellipses, arcs and lines to make the face, eyes, mouth and eyebrows. Using mouseX and mouseY as the width and height made the face change shape with the mouse movement but I had to make sure to add some more parameters to that so the face still looked like a face!
I used mousePressed() and random() to change the color of the background on click and finally added text to the top!
What I discovered about the form:
I found it interesting how even when the form is very disfigured it still looks like a face because of the eyes and mouth. It's also interesting how I can create expressions using simple shapes and colors.
I was concerned about using mouseX and mouseY for the width and height of all the shapes because initially it felt very out of control and did not resemble a face. But after playing around a little bit adding, subtracting and dividing with constant numbers help create sort of parameters for the size of these shapes.
I also really enjoy the mousePressed and keyPressed() functions and can't wait to use it for complex sketches.