{"id":6870,"date":"2020-10-29T21:41:22","date_gmt":"2020-10-30T01:41:22","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?p=6870"},"modified":"2020-11-01T22:36:10","modified_gmt":"2020-11-02T03:36:10","slug":"sweetcorn-mask","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/bkrummenandrew-cmu-edu\/10\/29\/sweetcorn-mask\/","title":{"rendered":"sweetcorn-mask"},"content":{"rendered":"

Children’s Stories<\/a><\/h3>\n

You are your own virtual teacher as you generate your own children’s stories. Open your mouth to show each new word.<\/p><\/blockquote>\n

I determine if the user is opening their mouth by comparing the distance between their lips to the distance between the top of their head and the bottom of their head.<\/p>\n

\"\"<\/p>\n

Above is a very early demonstration of this in my debug-mode, which also shows the indices of the vertices that I use to draw the face. I am using Beyond Reality Face<\/em><\/a> for face tracking.<\/p>\n

Below, I had started filling in features using the given vertices. Most features were very simple to turn into shapes by using beginShape()<\/em> and endShape(CLOSE)<\/em> around a for loop across each point and creating a curveVertex()<\/em> at the coordinates of that point. A few features had to be estimated or otherwise fiddled with.<\/p>\n

\"\"<\/p>\n

For example, Beyond Reality <\/em>does not supply the top of the head, so I estimated it using the width of the face and drew an ellipse. I had to angle it to match the angle of the face with atan2()<\/em>. At those same angles, I added a couple hair arcs for bangs and a couple triangles for pigtails.<\/p>\n

The nose vertices, as you can see in the debug-view, make up two curves: the bridge and the underside of the nose. I could have made the nose simply those two strokes, but I thought it would be kind of cute to create a triangle from the top of the bridge to the two ends of the nostrils.<\/p>\n

There were no pupils given either, so I had to guess where those would be. Luckily that’s pretty predictable if I assume the character will be looking straight ahead. The center of each circle was placed at the average of the coordinates of two diagonal vertices in each eye. The radius of the pupil is some fraction of the distance between those two points. It looked kind of boring without eyelashes, so I added a line anchored at each eye vertex and angled it away from the pupil using atan2() <\/em>and some simple math.<\/p>\n

The face still seemed a little bare at this point, so I added cheeks using calculations similar to those of the pupils. The center of the blush circle is the average of the coordinates of the side of the face and the bridge of the nose. The radius is some fraction of the distance between the two\u2014this one mattered more than with the pupils, since as you turn your face, the size of one side becomes a lot larger than that of the other side.<\/p>\n

The last thing I did was add a simple neck and body using a rectangle and a quadrilateral, with proportions relative to the head width. I had to use the width, rather than the height (the more intuitive option), as the height of the head changes greatly when you open your mouth and it would be silly to have the size of your neck and body change with it.<\/p>\n

I then focused on text generation using RiTa.js<\/a>, <\/em>which I fed a bunch of children’s stories from this page <\/a>of short stories for children. When you open your mouth, the next word of a generated sentence (stripped of punctuation) appears. I wrote these sentences with Lingdong’s p5.hershey.js.\u00a0<\/a>Originally, I had these words simply appearing, but it would have been a shame if I hadn’t utilized hershey fonts<\/a> to at least some of their potential.<\/p>\n

Animating the text was one of the trickiest parts of this project, but by modifying Lingdong’s code to have an extra putChar()<\/em> function called\u00a0putAnimatedChar(), <\/em>which takes a time parameter and draws vertices only if time elapsed is over a certain multiple of their index. With this, I could successfully draw words, but only by drawing all the words at the same time. To solve this, I made a boolean parameter for putText(),\u00a0 <\/em>which determines if the text passed to it should be animated. I broke the text into two strings in an array: one of previous words and one of the current word. The former passes false <\/em>and the latter passes true<\/em>. I use estimateTextWidth() <\/em>to determine the leftward translation of the previous words.<\/p>\n