<\/p>\n
Jittery<\/b>, an interactive drawing app that generates lines that draw for you. Glitch + Phone Sensors + p5.js<\/span><\/p>\n<\/iframe><\/p>\n<pre><strong>Inspirations\u00a0<\/strong>\r\n\r\n<span style=\"font-weight: 400\">Initially, I was inspired by <a href=\"https:\/\/experiments.withgoogle.com\/ink-space\">Inkspace<\/a>, a drawing app created by Zach Lieberman that lets users draw in 3D, where swiping horizontally and vertically across the screen \u201crotates' ' the canvas to another dimension, while keeping previous marks in other planes. I was interested in creating a drawing tool that allows one to create 3D forms, and approached it in a different way.\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400\">I was intrigued by the idea of being able to generate lines and mechanisms that draw for you. Fourier drawing machines was another inspiration, where a couple of circles attached together can create intricate, and accurate drawings. I decided to do something in this ball park, creating drawing mechanisms and tools that are simply lines connected to one another, but have a unique behavior that shows in how fast they travel (different \u201cmasses\u201d travel at different speeds) and how much energy they possess (altering the damping of each mechanism). <\/span>\r\n\r\n<span style=\"font-weight: 400\">I was also interested in the concept of painting and mark-making with a non-traditional medium like a bouncy ball, where applying paint on the ball and having it roll around on a canvas was another idea that I could implement. The ball moves on it\u2019s own, but is ultimately controlled by the user in the way he tilts or shakes the canvas, or how he applies forces to the ball that leaves different marks, such as bouncing the ball on the canvas (create harsher marks) or rolling the ball slowly (generates fainter marks).\u00a0\r\n\r\n<\/span><\/pre>\n<pre><strong>How it works<\/strong>\r\n\r\n<span style=\"font-weight: 400\">The user decides where these \u201cjittery\u201d, drawing tools exist on the screen; placing them on the canvas portion of the screen results in instantaneous marks that are left behind as the generated drawing tools meander and travel based on the device orientation. When drawing off-canvas (black portions of the screen), you can see the form of the drawing tool much clearer, where drawing marks aren\u2019t created. By rotating, flipping, tilting, and shaking the device, the user is able to control the direction and speed that the generated line-mechanisms move, resulting in different stroke-widths and patterns that are left as marks on the canvas. Using the device\u2019s accelerometer data, forces are applied to the drawing physics, mainly the tilt angle (affects the magnitude of the force) and direction of the tilt (decides the direction of the force). Shaking the device generates circles that take the shape of the drawing tool, where the size of circles drawn are based upon how vigorously the device was shaken (force applied on the device in the z-plane).\r\n<\/span><\/pre>\n<p> <\/p>\n<pre><strong>Process\r\n\r\n<\/strong><span style=\"font-weight: 400\">A large part of the problem was perfecting the physics that the drawing mechanisms moved in. On a basic level, the drawing mechanisms are essentially springs that move and rotate with forces applied to it. Using a template created by <a href=\"https:\/\/github.com\/LingDong-\">LingDong Huang<\/a>, I was able to access the device\u2019s accelerometer data, along with the current orientation and position of the screen, and had different forces applied to the way the springs moved across the screen. For example, tilting the screen downwards applies a gravity-like force, where the springs fall towards the bottom of the screen. \r\n\r\n<\/span><span style=\"font-weight: 400\">Adjusting the appearance of the drawing mechanisms (the springs) was another part that needed to be sorted out. I decided to stick with a set of 3 color themes (warm colors, cool colors, and a combination) and wanted to figure out: What kind of marks look best? I initially enjoyed thicker lines, but realized that smaller lines and marks can generate much more complex shapes, specifically drawing \u201cFake-3D\u201d forms that can create forms that look like topographic maps or 3D models of flowers.\u00a0<\/span><\/pre>\n<pre>Initial Version with larger drawing mechanisms and marks<\/pre>\n<p>[videopack id=”2485″]https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/RPReplay_Final1638348340.mov[\/videopack]<\/p>\n<pre>Versions without the \"clear\"and \"theme\" button<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2489 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-774x1024.png\" alt=\"\" width=\"774\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-774x1024.png 774w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-363x480.png 363w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-768x1017.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-1160x1536.png 1160w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-1547x2048.png 1547w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-1200x1589.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284.png 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<pre>Example with many layered marks<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-2491 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-774x1024.png\" alt=\"\" width=\"774\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-774x1024.png 774w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-363x480.png 363w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-768x1017.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-1160x1536.png 1160w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-1547x2048.png 1547w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-1200x1589.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551.png 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<pre>Example of \"flower pedal\" forms<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2490 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-774x1024.png\" alt=\"\" width=\"774\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-774x1024.png 774w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-363x480.png 363w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-768x1017.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-1160x1536.png 1160w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-1547x2048.png 1547w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-1200x1589.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620.png 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<pre><span style=\"font-weight: 400\">In the final form, I implemented buttons to clear the canvas and change colors, which I felt were important additions for a more functional drawing app. I placed those two buttons under the accelerometer diagram in the top right corner of the interface. <\/span><\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2492 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-776x1024.png\" alt=\"\" width=\"776\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-776x1024.png 776w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-364x480.png 364w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-768x1014.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-1164x1536.png 1164w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-1551x2048.png 1551w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-1200x1584.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505.png 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<pre><span style=\"font-weight: 400\">Looking back, I\u2019m quite satisfied with the way the drawing project turned out. I\u2019m impressed by the visuals that can be created (3D forms), and the way the physics turned out. Though, the art and marks generated look mathematical, and can pass off as \u201ctoo random\u201d or \u201ctoo repetitive\u201d. In the future, I\u2019m interested in adding more features to the project, and changing the forms so that they look more intentional, and less mathematical. I hope to create more recognizable 3D forms, as in its current stage, the marks left are still quite abstract and look similar. Adding more variation, through color choices and controlling the personality of the drawing machines would really benefit the drawing app. <\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"<p> Jittery, an interactive drawing app that generates lines that draw for you. Glitch + Phone Sensors + p5.js Inspirations\u00a0 Initially, I was inspired by Inkspace, a drawing app created by Zach Lieberman that lets users draw in 3D, where swiping horizontally and vertically across the screen \u201crotates’ ‘ the canvas to another dimension, while … <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/stickz\/12\/08\/stickz-finalprojectdocumentation\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “stickz – FinalProjectDocumentation”<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[22],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/2472"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=2472"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/2472\/revisions"}],"predecessor-version":[{"id":2481,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/2472\/revisions\/2481"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=2472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=2472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=2472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/iframe><\/p>\n<pre><strong>Inspirations\u00a0<\/strong>\r\n\r\n<span style=\"font-weight: 400\">Initially, I was inspired by <a href=\"https:\/\/experiments.withgoogle.com\/ink-space\">Inkspace<\/a>, a drawing app created by Zach Lieberman that lets users draw in 3D, where swiping horizontally and vertically across the screen \u201crotates' ' the canvas to another dimension, while keeping previous marks in other planes. I was interested in creating a drawing tool that allows one to create 3D forms, and approached it in a different way.\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400\">I was intrigued by the idea of being able to generate lines and mechanisms that draw for you. Fourier drawing machines was another inspiration, where a couple of circles attached together can create intricate, and accurate drawings. I decided to do something in this ball park, creating drawing mechanisms and tools that are simply lines connected to one another, but have a unique behavior that shows in how fast they travel (different \u201cmasses\u201d travel at different speeds) and how much energy they possess (altering the damping of each mechanism). <\/span>\r\n\r\n<span style=\"font-weight: 400\">I was also interested in the concept of painting and mark-making with a non-traditional medium like a bouncy ball, where applying paint on the ball and having it roll around on a canvas was another idea that I could implement. The ball moves on it\u2019s own, but is ultimately controlled by the user in the way he tilts or shakes the canvas, or how he applies forces to the ball that leaves different marks, such as bouncing the ball on the canvas (create harsher marks) or rolling the ball slowly (generates fainter marks).\u00a0\r\n\r\n<\/span><\/pre>\n<pre><strong>How it works<\/strong>\r\n\r\n<span style=\"font-weight: 400\">The user decides where these \u201cjittery\u201d, drawing tools exist on the screen; placing them on the canvas portion of the screen results in instantaneous marks that are left behind as the generated drawing tools meander and travel based on the device orientation. When drawing off-canvas (black portions of the screen), you can see the form of the drawing tool much clearer, where drawing marks aren\u2019t created. By rotating, flipping, tilting, and shaking the device, the user is able to control the direction and speed that the generated line-mechanisms move, resulting in different stroke-widths and patterns that are left as marks on the canvas. Using the device\u2019s accelerometer data, forces are applied to the drawing physics, mainly the tilt angle (affects the magnitude of the force) and direction of the tilt (decides the direction of the force). Shaking the device generates circles that take the shape of the drawing tool, where the size of circles drawn are based upon how vigorously the device was shaken (force applied on the device in the z-plane).\r\n<\/span><\/pre>\n<p> <\/p>\n<pre><strong>Process\r\n\r\n<\/strong><span style=\"font-weight: 400\">A large part of the problem was perfecting the physics that the drawing mechanisms moved in. On a basic level, the drawing mechanisms are essentially springs that move and rotate with forces applied to it. Using a template created by <a href=\"https:\/\/github.com\/LingDong-\">LingDong Huang<\/a>, I was able to access the device\u2019s accelerometer data, along with the current orientation and position of the screen, and had different forces applied to the way the springs moved across the screen. For example, tilting the screen downwards applies a gravity-like force, where the springs fall towards the bottom of the screen. \r\n\r\n<\/span><span style=\"font-weight: 400\">Adjusting the appearance of the drawing mechanisms (the springs) was another part that needed to be sorted out. I decided to stick with a set of 3 color themes (warm colors, cool colors, and a combination) and wanted to figure out: What kind of marks look best? I initially enjoyed thicker lines, but realized that smaller lines and marks can generate much more complex shapes, specifically drawing \u201cFake-3D\u201d forms that can create forms that look like topographic maps or 3D models of flowers.\u00a0<\/span><\/pre>\n<pre>Initial Version with larger drawing mechanisms and marks<\/pre>\n<p>[videopack id=”2485″]https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/RPReplay_Final1638348340.mov[\/videopack]<\/p>\n<pre>Versions without the \"clear\"and \"theme\" button<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2489 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-774x1024.png\" alt=\"\" width=\"774\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-774x1024.png 774w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-363x480.png 363w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-768x1017.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-1160x1536.png 1160w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-1547x2048.png 1547w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284-1200x1589.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0030-2-e1638987096284.png 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<pre>Example with many layered marks<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-2491 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-774x1024.png\" alt=\"\" width=\"774\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-774x1024.png 774w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-363x480.png 363w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-768x1017.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-1160x1536.png 1160w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-1547x2048.png 1547w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551-1200x1589.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0036-2-e1638987160551.png 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<pre>Example of \"flower pedal\" forms<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2490 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-774x1024.png\" alt=\"\" width=\"774\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-774x1024.png 774w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-363x480.png 363w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-768x1017.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-1160x1536.png 1160w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-1547x2048.png 1547w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620-1200x1589.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0035-2-e1638987120620.png 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<pre><span style=\"font-weight: 400\">In the final form, I implemented buttons to clear the canvas and change colors, which I felt were important additions for a more functional drawing app. I placed those two buttons under the accelerometer diagram in the top right corner of the interface. <\/span><\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2492 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-776x1024.png\" alt=\"\" width=\"776\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-776x1024.png 776w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-364x480.png 364w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-768x1014.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-1164x1536.png 1164w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-1551x2048.png 1551w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505-1200x1584.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/12\/IMG_0046-2-e1638987025505.png 1640w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<pre><span style=\"font-weight: 400\">Looking back, I\u2019m quite satisfied with the way the drawing project turned out. I\u2019m impressed by the visuals that can be created (3D forms), and the way the physics turned out. Though, the art and marks generated look mathematical, and can pass off as \u201ctoo random\u201d or \u201ctoo repetitive\u201d. In the future, I\u2019m interested in adding more features to the project, and changing the forms so that they look more intentional, and less mathematical. I hope to create more recognizable 3D forms, as in its current stage, the marks left are still quite abstract and look similar. Adding more variation, through color choices and controlling the personality of the drawing machines would really benefit the drawing app. <\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"<p> Jittery, an interactive drawing app that generates lines that draw for you. Glitch + Phone Sensors + p5.js Inspirations\u00a0 Initially, I was inspired by Inkspace, a drawing app created by Zach Lieberman that lets users draw in 3D, where swiping horizontally and vertically across the screen \u201crotates’ ‘ the canvas to another dimension, while … <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/stickz\/12\/08\/stickz-finalprojectdocumentation\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “stickz – FinalProjectDocumentation”<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[22],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/2472"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=2472"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/2472\/revisions"}],"predecessor-version":[{"id":2481,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/2472\/revisions\/2481"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=2472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=2472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=2472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}