![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/plot-7-copy.svg\")
<\/p>\n<\/p>\n
<\/p>\n
<\/a>\n\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t<\/div>\n\t\t\t\t<\/p>\n
APPROACH: I really wanted to create a line that alternates between lines and curves. I got stuck with applying and reapplying matrix transformation with push() and pop(). I ended up using a stack of matrix transformations. I also wanted the animation of watching the line 'walk' be really satisfying so I used p5.func to use several different easing functions. I found that tuning various parameters in the way I transform the matrix between strokes was incredible sensitive and produced several interesting results.\r\n\r\nLIVE EXAMPLE<\/a> + CODE<\/a><\/pre>\nlet FUNCS = ['quadraticIn', 'quadraticOut', 'quadraticInOut', 'doubleQuadraticBezier', 'doubleQuadraticSigmoid', 'quadraticBezier', 'quadraticBezierStaircase', 'cubicIn', 'cubicOut', 'cubicInOut', 'brycesCubic', 'cubicBezier', 'cubicBezierThrough2Points', 'doubleCubicOgee', 'doubleCubicOgeeSimplified', 'quarticIn', 'quarticOut', 'quarticInOut', 'generalizedQuartic', 'quinticIn', 'quinticOut', 'quinticInOut']\r\nlet MIN_SPEED = 5, MAX_SPEED = 15, UPDATE = 0.1\r\nlet context = {}\r\nlet transforms = []\r\nlet e = new p5.Ease()\r\n\r\nfunction setup() {\r\n createCanvas(windowWidth, windowHeight, SVG)\r\n angleMode(DEGREES)\r\n stroke(0)\r\n strokeWeight(5)\r\n updateContext(width\/2, height\/2)\r\n \r\n}\r\n\r\nfunction draw() {\r\n\r\n \/\/ apply transformations\r\n push()\r\n for (const [type, vec] of transforms) {\r\n switch (type) {\r\n case 'translate': translate(vec.x, vec.y); break;\r\n case 'rotate': rotate(atan2(vec.y, vec.x)); break;\r\n }\r\n }\r\n\r\n \/\/ draw line\r\n line(...lineargs())\r\n\r\n \/\/ exit condition\r\n if (context.prog >= 1) updateContext(context.width, 0)\r\n context.prog = min(1, context.prog + UPDATE * context.speed)\r\n pop()\r\n}\r\n\r\nfunction lineargs() {\r\n var val = e[context.easing](context.prog) * context.width\r\n return [0, 0, val, 0]\r\n}\r\n\r\nfunction updateContext(x, y) {\r\n context.start = createVector(x, y)\r\n\r\n if (context.dir == undefined) context.dir = p5.Vector.random2D()\r\n else context.dir = createVector(random(-.1, .1), random(1, 4))\r\n \/\/ else context.dir = createVector(1, random(-1, 1))\r\n\r\n context.speed = random(MIN_SPEED, MAX_SPEED)\r\n context.easing = random(FUNCS)\r\n context.width = random(random(0,10), random(10, 100))\r\n \/\/ context.width = 5\r\n context.prog = 0.\r\n\r\n transforms.push(['translate', context.start])\r\n transforms.push(['rotate', context.dir])\r\n}\r\n\r\nfunction keyPressed() {\r\n if (key == 'd') {\r\n noLoop()\r\n save('plot.svg')\r\n loop()\r\n }\r\n}\r\n<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
APPROACH: I really wanted to create a line that alternates between lines and curves. I got stuck with applying and reapplying matrix transformation with push() and pop(). I ended up using a stack of matrix transformations. I also wanted the animation of watching the line ‘walk’ be really satisfying so I used p5.func … Continue reading “gabagoo-LineWalk”<\/span><\/a><\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/526"}],"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\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=526"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/526\/revisions"}],"predecessor-version":[{"id":560,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/526\/revisions\/560"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}