{"id":697,"date":"2021-09-13T15:56:28","date_gmt":"2021-09-13T19:56:28","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?p=697"},"modified":"2021-09-13T16:26:29","modified_gmt":"2021-09-13T20:26:29","slug":"stickz-linewalk","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/stickz\/09\/13\/stickz-linewalk\/","title":{"rendered":"stickz – LineWalk"},"content":{"rendered":"

 <\/p>\n

\"\"\r\n\r\nI was interested in creating a line that expresses a human-like scribble that has the stroke appearance of a 0.5mm ball point pen. I messed around with sine and cosine functions that ended up creating anelliptical, vortex-like, scribble that has a direction that varies with noise, where a new drawing is constantly generated (hitting the spacebar starts and stops the generating of new drawings)\"\"<\/a> \"\"<\/pre>\n
 <\/p>\n
\/\/applies the noise function in creating randomness\r\n\/\/ Uses https:\/\/github.com\/zenozeng\/p5.js-svg to export SVG.\r\n\r\nvar bExportSvg = false;\r\nvar runDrawing = true;\r\n\r\nfunction setup() {\r\n  createCanvas(600, 600, SVG);\r\n}\r\n\r\nfunction draw() {\r\n  if (runDrawing == true) {\r\n    background(230);\r\n    if (bExportSvg) clear();\r\n    strokeWeight(0.2);\r\n    noFill();\r\n\r\n    var cx = width \/ 2;\r\n    var cy = height \/ 2;\r\n    var px = cx;\r\n    var py = cy;\r\n\r\n    var direction = random(PI \/ 2, PI);\r\n\r\n    beginShape();\r\n\r\n    for (var i = 0; i < 2000; i++) {\r\n      var increment = 3 + noise(i \/ 1000);\r\n      var displacementX = px - cx;\r\n      var displacementY = py - cy;\r\n      var offset = max(3, sqrt(displacementX ** 2 + displacementY ** 2) \/ 20);\r\n      increment *= 0.7 * offset;\r\n      direction += radians(50 * (noise(i) - 10));\r\n\r\n      px += 5 * noise(i) * increment * cos(200 * direction);\r\n      py += 5 * noise(i) * increment * sin(200 * direction);\r\n\r\n      var pointX = cx + displacementX * offset ** -0.8;\r\n      var pointY = cy + displacementY * offset ** -0.8;\r\n\r\n       \r\n      vertex(pointX, pointY);\r\n    }\r\n\r\n    endShape();\r\n    var seed = millis()**0.5;\r\n    randomSeed(seed);\r\n    noiseSeed(seed); \/\/random noise value generated for each drawing coordinated with the seconds function, inspired by Golan Levin's Linewalk\r\n    loop();\r\n  }\r\n  if (bExportSvg) {\r\n    saveSVG(\"stickz_line_on_a_walk.svg\");\r\n    bExportSvg = false;\r\n  } \r\n}\r\n\r\nfunction keyPressed() {\r\n  if (key == \"s\") {\r\n    bExportSvg = true;\r\n    loop();\r\n  }\r\n  if (keyCode === 32) { \/\/if SPACEBAR is pressed, pause drawing\r\n    if (runDrawing == false) runDrawing = true;\r\n    else runDrawing = false;\r\n  }\r\n}\r\n<\/pre>\n
link to code<\/a><\/pre>\n","protected":false},"excerpt":{"rendered":"
  I was interested in creating a line that expresses a human-like scribble that has the stroke appearance of a 0.5mm ball point pen. I messed around with sine and cosine functions that ended up creating anelliptical, vortex-like, scribble that has a direction that varies with noise, where a new drawing is constantly generated (hitting … Continue reading “stickz – LineWalk”<\/span><\/a><\/p>\n","protected":false},"author":16,"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\/697"}],"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=697"}],"version-history":[{"count":9,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/697\/revisions"}],"predecessor-version":[{"id":712,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/697\/revisions\/712"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}