{"id":2127,"date":"2016-08-30T21:15:59","date_gmt":"2016-08-30T21:15:59","guid":{"rendered":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/?page_id=2127"},"modified":"2016-09-28T20:54:12","modified_gmt":"2016-09-28T20:54:12","slug":"generative-faces","status":"publish","type":"page","link":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/generative-faces\/","title":{"rendered":"Generative Faces"},"content":{"rendered":"<p>The face is the window to the soul. We are exquisitely\u00a0attuned to reading facial expressions, emotions and other information from the face. We could even\u00a0think about the face as the &#8216;Graphical User Interface&#8217; to the body.<\/p>\n<p>There is\u00a0a rich historic context for reading and exploring facial expressions.<\/p>\n<p>Without any effort, we maintain a massively multidimensional model that can recognize minor variations in shape and color. One theory says that <a href=\"http:\/\/www.sciencedaily.com\/releases\/2006\/03\/060320221839.htm\">color vision evolved in apes to help us empathize<\/a>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/b41995b2e733af74584ea1fed7a3d17456c90cfe\/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f312f31372f436865726e6f66665f66616365735f666f725f6576616c756174696f6e735f6f665f55535f6a75646765732e7376672f35303070782d436865726e6f66665f66616365735f666f725f6576616c756174696f6e735f6f665f55535f6a75646765732e7376672e706e67\" alt=\"Chernoff Faces\" data-canonical-src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/17\/Chernoff_faces_for_evaluations_of_US_judges.svg\/500px-Chernoff_faces_for_evaluations_of_US_judges.svg.png\" \/><\/p>\n<p>Structurally, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Chernoff_faces\"> Herman Chernoff<\/a> came up with the idea that a facial expression could be reduced to 18 variables and that these could be used to visualize data sets. Chernoff Faces are discussed in every information visualization course, and are referenced in many papers. Yet the only serious use of faces in visualization is for calibration, not for data display. Faces are so special that we better know their perceptual properties really well before we can use them, which we don\u2019t.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/f06c70c55047ff7ca6069874bbc6dbb663970c57\/687474703a2f2f7777772e656373652e7270692e6564752f2537456376726c2f746f6e67792f61757265636f676e6974696f6e5f66696c65732f696d6167653030362e6a7067\" alt=\"FACS\" data-canonical-src=\"http:\/\/www.ecse.rpi.edu\/%7Ecvrl\/tongy\/aurecognition_files\/image006.jpg\" \/><\/p>\n<p>Some more examples of artworks dealing with faces:<\/p>\n<p>Golan Levin created this software work, <a href=\"http:\/\/www.flong.com\/projects\/reface\/\">Reface, Portrait Sequencer<\/a> that\u00a0remixes\u00a0faces captured from recordings of visitors to the artwork.<\/p>\n<p><a href=\"http:\/\/www.mokafolio.de\/works\/Weird-Faces\">This generative facial project<\/a>\u00a0was made by artist Mattias Dorfelf uses software to make infinite illustrations of facial possibilities.<\/p>\n<p>And this project, Cheese by Christian Moeller brilliantly explores what is <a href=\"http:\/\/www.christian-moeller.com\/display.php?project_id=36\">computationally detected as a smile and what is not.<\/a><\/p>\n<p>For an amazing archive of more face research <a href=\"https:\/\/github.com\/kylemcdonald\/AppropriatingNewTechnologies\/wiki\/Week-2\">see this page by Kyle McDonald.<\/a><\/p>\n<p><strong>Assignment task description<\/strong><\/p>\n<p>Assignment Task 2 is to develop your\u00a0face from Part 1 into a face generator so that when\u00a0the mouse is clicked, the\u00a0facial expression changes &#8211; use\u00a0the random function in some way.<\/p>\n<p>Create a GIFF of your face being clicked (<a href=\"http:\/\/www.cockos.com\/licecap\/\">using licecap<\/a>) (or if you prefer, create a grid of 9 different facial expressions taking screenshots. To make the grid you will need to put this together in photoshop or equivalent) Post to the\u00a0blog this week.<\/p>\n<div class=\"page\" title=\"Page 1\">\n<div class=\"section\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p>Please submit your .pde files and any additional media to the assignment dropbox on Moodle. Zip up all project files labelling your folder:\u00a0<em>LastName-FirstName-Assignment1<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>And here is another template, remember if you use this. You must change it substantially to make it your own.<\/p>\n\n<!-- iframe plugin v.6.0 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/www.courses.tegabrain.com\/PVA2\/wp-content\/uploads\/2015\/02\/facegen.html\" title=\"Face Generator\" height=\"400\" width=\"100%\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre lang=\"java\">\/\/create variables we will want to change\r\nfloat faceW; \/\/variable for face width\r\nfloat faceH; \/\/variable for face height\r\n\r\nfloat eye1X; \/\/variable for eye 1 X position\r\nfloat eye2X;  \/\/variable for eye 2 Y position\r\n\r\nfloat mouth1X; \/\/variable for eye 1 X position\r\nfloat mouth2X;  \/\/variable for eye 2 Y position\r\nfloat d = 350;\r\n\r\nvoid setup() {\r\n  size(400, 400);\r\n  \/\/intial values for variables\r\n  faceW=300;\r\n  faceH=300;\r\n\r\n  eye1X= width\/2 - 50; \/\/ 50 pixels left of the middle of the screen\r\n  eye2X= width\/2 + 50; \/\/ 50 pixels right of the middle of the screen\r\n\r\n  mouth1X=150; \/\/variable for mouth left X position\r\n  mouth2X=250;  \/\/variable for mouth right Y positio\r\n}\r\n\r\n\r\nvoid draw() {\r\n  background(255, 0, 0); \/\/refresh background each time\r\n\r\n  \/\/face\r\n  ellipse (width\/2, height\/2, faceW, faceH);\r\n\r\n  \/\/eyes\r\n  ellipse(eye1X, 150, 20, 20);\r\n  ellipse(eye2X, 150, 20, 20);\r\n\r\n  \/\/mouth\r\n  curve(100, 0+d, mouth1X, 250, mouth2X, 250, 300, 0+d); \/\/see https:\/\/processing.org\/reference\/curve_.html\r\n\r\n  \/\/then if the mouse is clicked\r\n\r\n}\r\n\r\nvoid mouseClicked(){\r\n    \/\/generate new values for our variables\r\n    faceW=random(280, 320); \/\/new random width within the range of 280-320\r\n    faceH=random(280, 320); \/\/new random height\r\n\r\n    eye1X= width\/2 - random(20, 80); \/\/ locate eye1 at a random value between 40-60 pixels left of the middle of the screen\r\n    eye2X= width\/2 + random(20, 80); \/\/ locate eye1 at a random value between 40-60 pixels right of the middle of the screen\r\n\r\n    mouth1X=random(100, 180); \/\/variable for eye 1 X position\r\n    mouth2X=random(230, 300);  \/\/variable for eye 2 Y position\r\n\r\n  d= random(0,400);\r\n\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The face is the window to the soul. We are exquisitely\u00a0attuned to reading facial expressions, emotions and other information from the face. We could even\u00a0think about the face as the &#8216;Graphical User Interface&#8217; to the body. There is\u00a0a rich historic context for reading and exploring facial expressions. Without any effort, we maintain a massively multidimensional &hellip; <a href=\"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/generative-faces\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Generative Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2127","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/wp-json\/wp\/v2\/pages\/2127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/wp-json\/wp\/v2\/comments?post=2127"}],"version-history":[{"count":6,"href":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/wp-json\/wp\/v2\/pages\/2127\/revisions"}],"predecessor-version":[{"id":2519,"href":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/wp-json\/wp\/v2\/pages\/2127\/revisions\/2519"}],"wp:attachment":[{"href":"https:\/\/www.courses.tegabrain.com\/2016\/PVA2\/wp-json\/wp\/v2\/media?parent=2127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}