{"id":88,"date":"2014-09-17T13:38:04","date_gmt":"2014-09-17T13:38:04","guid":{"rendered":"http:\/\/itp.fromjia.com\/?p=88"},"modified":"2014-09-18T02:55:15","modified_gmt":"2014-09-18T02:55:15","slug":"paint-by-pong","status":"publish","type":"post","link":"http:\/\/itp.fromjia.com\/?p=88","title":{"rendered":"Paint by Pong"},"content":{"rendered":"<p><em>**UPDATE** I updated the program so the loading time is not as long.<br \/>\n<\/em><strong>Move your mouse to control the paddles. Click to alter the paint&#8217;s path.<\/strong><\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/www.openprocessing.org\/sketch\/161377\/embed\/?width=600&amp;height=600&amp;border=true\" width=\"628\" height=\"680\" frameborder=\"0\" scrolling=\"no\"><\/iframe><br \/>\nFor my second ICM assignment, I was paired with Hugo to make an animated sketch. We started with implementing the classic Pong.<\/p>\n<p>With Pong, the challenge for us was figuring out at what distance the ball should bounce from the paddles. We\u00a0calculated the longest possible distance from the center of the ball to the center of the paddle if the ball should bounce from it, and used that value to determine whether the ball was close enough to the paddle. The issue then was to make sure that the ball actually touches the paddle when it bounces. Since the paddle is always on the same x-axis, the ball&#8217;s axis is always the same when it&#8217;s touching the paddle. So we added a check for that on top of the check for longest distance.<\/p>\n<div id=\"attachment_97\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/calculate2.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-97\" class=\"wp-image-97 size-medium\" src=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/calculate2-300x230.jpg\" alt=\"\" width=\"300\" height=\"230\" srcset=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/calculate2-300x230.jpg 300w, http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/calculate2-1024x785.jpg 1024w, http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/calculate2-1200x920.jpg 1200w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-97\" class=\"wp-caption-text\">Calculating longest distance and shortest distance between the paddle and the ball.<\/p><\/div>\n<div id=\"attachment_104\" style=\"width: 510px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/pong2.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-104\" class=\"size-full wp-image-104\" src=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/pong2.gif\" alt=\"Our Pong!\" width=\"500\" height=\"377\" \/><\/a><p id=\"caption-attachment-104\" class=\"wp-caption-text\">Our Pong!<\/p><\/div>\n<p>Then Hugo and I split up to create separate versions of the Pong game. I decided to turn the ball into a paint brush and create abstract strokes with the game. My inspiration was Rafael Rozendaal&#8217;s interactive gradience shapes.<\/p>\n<div id=\"attachment_98\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.oozemove.com\/\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-98\" class=\"size-medium wp-image-98\" src=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/Screen-Shot-2014-09-17-at-10.16.08-AM-300x219.png\" alt=\"new move.com\" width=\"300\" height=\"219\" srcset=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/Screen-Shot-2014-09-17-at-10.16.08-AM-300x219.png 300w, http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/Screen-Shot-2014-09-17-at-10.16.08-AM-1024x750.png 1024w, http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/Screen-Shot-2014-09-17-at-10.16.08-AM-1200x879.png 1200w, http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/Screen-Shot-2014-09-17-at-10.16.08-AM.png 1600w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-98\" class=\"wp-caption-text\">new move.com<\/p><\/div>\n<p>To draw a gradience with the ball, I saved color values into a 2D array. Then drew an ellipse\u00a0with the stored color value every time the ball moved. The ellipses connected into a stoke. Below are some variations of the strokes I made with the game.<\/p>\n<p><a href=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/drawings.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-100 size-medium\" src=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/drawings-291x300.jpg\" alt=\"drawings\" width=\"291\" height=\"300\" srcset=\"http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/drawings-291x300.jpg 291w, http:\/\/itp.fromjia.com\/wp-content\/uploads\/2014\/09\/drawings.jpg 579w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/a><\/p>\n<p><strong>Takeaways:<\/strong><\/p>\n<ul>\n<li>When designing an interactive program I should really think about where and how it would be displayed and how would the participant encounter it. In this instance, I made the window way too long\u00a0for the WP blog display. Also the game starts immediately after it loads, without giving the player a prompt.<\/li>\n<li>For animated or interactive visual display type of work, it&#8217;s not very interesting when element values (e.g. the colors) are hard coded in. It would be better if the value is changing or has some randomness to it.<\/li>\n<li>Coding for over 5 hours without a break\u00a0is a very bad idea.<\/li>\n<li>Don&#8217;t draw any elaborate elements in setup(), or the program will take forever to load.<\/li>\n<li>If the program takes forever to load, distract the participant with something.<\/li>\n<\/ul>\n<p><strong>Questions:<\/strong><\/p>\n<ul>\n<li><del>The programs takes some time to load. How to make it faster?<\/del><\/li>\n<li>How can I draw an ellipse over the trail of another ellipse? (how can I still show the ball in a different color over the stroke?)<\/li>\n<\/ul>\n<p><script src=\"https:\/\/gist.github.com\/OhJia\/e1d44d374cc609a7f807.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>**UPDATE** I updated the program so the loading time is not as long. Move your mouse to control the paddles. Click to alter the paint&#8217;s path. For my second ICM assignment, I was paired with Hugo to make an animated sketch. We started with implementing the classic Pong. With Pong, the challenge for us was [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-intro-to-computational-media"],"_links":{"self":[{"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88"}],"version-history":[{"count":10,"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":111,"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=\/wp\/v2\/posts\/88\/revisions\/111"}],"wp:attachment":[{"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/itp.fromjia.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}