{"id":725,"date":"2021-09-14T18:17:36","date_gmt":"2021-09-14T22:17:36","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?p=725"},"modified":"2021-09-15T15:04:56","modified_gmt":"2021-09-15T19:04:56","slug":"sweetcorn-lineexercises","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/sweetcorn\/09\/14\/sweetcorn-lineexercises\/","title":{"rendered":"sweetcorn &#8211;  LineExercises"},"content":{"rendered":"<p><iframe loading=\"lazy\" title=\"drawing with machines line exercises\" width=\"840\" height=\"630\" src=\"https:\/\/www.youtube.com\/embed\/u4kgBQ4Bl5Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/frame-3039.svg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-726\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/frame-3039.svg\" alt=\"\" width=\"600\" height=\"600\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/\/2021\/09\/frame-3039.svg 150w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/\/2021\/09\/frame-3039.svg 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/\/2021\/09\/frame-3039.svg 600w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-727\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/plot25.svg\" alt=\"\" width=\"1056\" height=\"816\" \/><\/p>\n<pre>int[] mouseCoordsX = new int[100];\r\nint[] mouseCoordsY = new int[100];\r\nPVector[] mouseCoords = new PVector[100];\r\nPVector[] offsetCoords = new PVector[100];\r\nint coordIndex = 0;\r\nfloat growingNoise = 0;\r\nboolean record;\r\n\r\nimport processing.svg.*;\r\n\r\nvoid setup() {\r\n  size(600, 600);\r\n  stroke(255);\r\n  strokeWeight(1);\r\n  noFill();\r\n\r\n  background(0);\r\n}\r\n\r\nvoid draw() {\r\n}\r\n\r\nvoid drawShakyLine() {\r\n  growingNoise += 0.01;\r\n  drawLivingLine(1, growingNoise);\r\n}\r\n\r\nvoid drawCircle(int mode) {\r\n  float radius = (sqrt(pow(mouseX-(width\/2), 2) + pow(mouseY - (height\/2), 2)));\r\n\r\n  if (mode == 0) {\r\n    curveTightness(-0.7);\r\n    beginShape();\r\n    for (int i=0; i&lt;2; i++) {\r\n      curveVertex(radius + width\/2, radius + height\/2);\r\n      curveVertex(radius + width\/2, -radius + height\/2);\r\n      curveVertex(-radius + width\/2, -radius + height\/2);\r\n      curveVertex(-radius + width\/2, radius + height\/2);\r\n    }\r\n    curveTightness(0);\r\n    endShape();\r\n  } else {\r\n    push();\r\n    translate(width\/2 + 4*radius, height\/2);\r\n    float step = PI\/12;\r\n    for (float i=0; i&lt;2*PI; i+=step) {\r\n      rotate(step);\r\n      translate(0, radius);\r\n      line(0, 0, 0, -radius);\r\n    }\r\n    pop();\r\n  }\r\n}\r\n\r\nvoid drawSpiral() {\r\n  curveTightness(-0.7);\r\n  beginShape();\r\n  push();\r\n  translate(width\/2, height\/2);\r\n  float step = PI\/12;\r\n  for (float i=0; i&lt;12*PI*mouseX\/width; i+=step) {\r\n    rotate(step);\r\n    translate(0, i);\r\n    line(0, 0, 0, -i);\r\n  }\r\n  pop();\r\n}\r\n\r\nvoid drawCalligraphicLine() {\r\n  int lineSize = 10;\r\n\r\n  beginShape();\r\n  for (var i=lineSize; i&lt;coordIndex-lineSize; i++) {\r\n\r\n    float perpX = mouseCoords[i+lineSize].y - mouseCoords[i-lineSize].y;\r\n    float perpY = mouseCoords[i-lineSize].x - mouseCoords[i+lineSize].x;\r\n\r\n    float thickness = 200\/sqrt(pow(perpX, 2) + pow(perpY, 2));\r\n\r\n    float dist = sqrt(pow(perpX, 2) + pow(perpY, 2));\r\n\r\n    perpX *= thickness\/dist;\r\n    perpY *= thickness\/dist;\r\n\r\n    offsetCoords[i] = new PVector(mouseCoords[i].x - perpX, mouseCoords[i].y - perpY);\r\n\r\n    curveTightness(8);\r\n    if (i%2 == 0) {\r\n      curveVertex(offsetCoords[i].x, offsetCoords[i].y);\r\n    } else {\r\n      curveVertex(mouseCoords[i].x, mouseCoords[i].y);\r\n    }\r\n    curveTightness(0);\r\n  }\r\n  endShape();\r\n}\r\n\r\nvoid drawLineSeries() {\r\n  push();\r\n  translate(0, height\/6);\r\n  drawThickLine(1, width\/6, 0, 5*width\/6, 0);\r\n  translate(0, height\/6);\r\n  drawThickLine(10, width\/6, 0, 5*width\/6, 0);\r\n  translate(0, height\/6);\r\n  drawThickLine(20, width\/6, 0, 5*width\/6, 0);\r\n  translate(0, height\/6);\r\n  drawThickLine(30, width\/6, 0, 5*width\/6, 0);\r\n  translate(0, height\/6);\r\n  drawThickLine(40, width\/6, 0, 5*width\/6, 0);\r\n  translate(0, height\/6);\r\n  drawThickLine(50, width\/6, 0, 5*width\/6, 0);\r\n  pop();\r\n}\r\n\r\nvoid keyPressed() {\r\n  if(key == 's') {\r\n    record = true;\r\n  }\r\n}\r\n\r\nvoid drawThickLine(int thickness, int x1, int y1, int x2, int y2) {\r\n  int lineSize = 10;\r\n\r\n  beginShape();\r\n  for (var i=lineSize; i&lt;coordIndex-lineSize; i++) {\r\n    float perpX = mouseCoords[i+lineSize].y - mouseCoords[i-lineSize].y;\r\n    float perpY = mouseCoords[i-lineSize].x - mouseCoords[i+lineSize].x;\r\n\r\n    float dist = sqrt(pow(perpX, 2) + pow(perpY, 2));\r\n\r\n    perpX *= thickness\/dist;\r\n    perpY *= thickness\/dist;\r\n\r\n    offsetCoords[i] = new PVector(mouseCoords[i].x - perpX, mouseCoords[i].y - perpY);\r\n\r\n    curveTightness(8);\r\n    if (i%2 == 0) {\r\n      curveVertex(offsetCoords[i].x, offsetCoords[i].y);\r\n    } else {\r\n      curveVertex(mouseCoords[i].x, mouseCoords[i].y);\r\n    }\r\n    curveTightness(0);\r\n  }\r\n  endShape();\r\n}\r\n\r\nvoid mouseMoved() {\r\n  background(0);\r\n  \r\n  if (record) {\r\n    \/\/ Note that #### will be replaced with the frame number. Fancy!\r\n    beginRecord(SVG, \"frame-####.svg\");\r\n  }\r\n\r\n  \/\/drawDashedLine(); \/\/ 1\r\n  \/\/drawLivingLine(0, 0); \/\/ 2.1\r\n  \/\/drawLivingLine(1, 0); \/\/ 2.2\r\n  \/\/drawShakyLine(); \/\/ 3\r\n  \/\/drawCircle(0); \/\/ 4.1\r\n  \/\/drawCircle(1); \/\/ 4.2\r\n  \/\/drawSpiral(); \/\/ 5\r\n  \/\/drawLivingLine(2, 0); \/\/ 6\r\n  \/\/drawThickLine(0, 50); \/\/ 7.1\r\n  \/\/drawThickLine(1, 50); \/\/ 7.2\r\n  \/\/drawCalligraphicLine(); \/\/ 8\r\n  drawLineSeries();\r\n\r\n  if (coordIndex &lt; 99) {\r\n    coordIndex++;\r\n  }\r\n\r\n  mouseCoordsX[coordIndex] = mouseX;\r\n  mouseCoordsY[coordIndex] = mouseY;\r\n\r\n  mouseCoords[coordIndex] = new PVector(mouseX, mouseY);\r\n\r\n  for (var i=0; i&lt;coordIndex; i++) {\r\n    mouseCoordsX[i] = mouseCoordsX[i+1];\r\n    mouseCoordsY[i] = mouseCoordsY[i+1];\r\n\r\n    mouseCoords[i] = mouseCoords[i+1];\r\n  }\r\n  \r\n  if (record) {\r\n    endRecord();\r\n    record = false;\r\n  }\r\n}\r\n\r\nvoid drawLivingLine(int mode, float noise) {\r\n  beginShape();\r\n  if (mode == 0) {\r\n    for (var i=0; i &lt; coordIndex; i++) {\r\n      vertex(mouseCoordsX[i] + noise*randomGaussian(), mouseCoordsY[i] + noise*randomGaussian());\r\n    }\r\n  } else if (mode == 1) {\r\n    for (var i=0; i &lt; coordIndex; i++) {\r\n      vertex(mouseCoords[i].x + noise*randomGaussian(), mouseCoords[i].y + noise*randomGaussian());\r\n    }\r\n  } else if (mode == 2) {\r\n    for (var i=0; i &lt; coordIndex; i++) {\r\n      vertex(mouseCoords[i].x + noise*randomGaussian(), mouseCoords[i].y + noise*randomGaussian());\r\n    }\r\n    endShape();\r\n    beginShape();\r\n    int offset = 100;\r\n    int lineSize = 10;\r\n    for (var i=lineSize; i &lt; coordIndex-lineSize; i++) {\r\n      float perpX = mouseCoords[i+lineSize].y - mouseCoords[i-lineSize].y;\r\n      float perpY = mouseCoords[i-lineSize].x - mouseCoords[i+lineSize].x;\r\n\r\n      float dist = sqrt(pow(perpX, 2) + pow(perpY, 2));\r\n\r\n      perpX *= offset\/dist;\r\n      perpY *= offset\/dist;\r\n\r\n      vertex(mouseCoords[i].x - perpX, mouseCoords[i].y - perpY);\r\n    }\r\n  }\r\n  endShape();\r\n}\r\n\r\nvoid drawThickLine(int mode, int thickness) {\r\n  int lineSize = 10;\r\n\r\n  beginShape();\r\n  for (var i=lineSize; i&lt;coordIndex-lineSize; i++) {\r\n    float perpX = mouseCoords[i+lineSize].y - mouseCoords[i-lineSize].y;\r\n    float perpY = mouseCoords[i-lineSize].x - mouseCoords[i+lineSize].x;\r\n\r\n    float dist = sqrt(pow(perpX, 2) + pow(perpY, 2));\r\n\r\n    perpX *= thickness\/dist;\r\n    perpY *= thickness\/dist;\r\n\r\n    offsetCoords[i] = new PVector(mouseCoords[i].x - perpX, mouseCoords[i].y - perpY);\r\n\r\n    if (mode == 0) {\r\n      curveTightness(8);\r\n      if (i%2 == 0) {\r\n        curveVertex(offsetCoords[i].x, offsetCoords[i].y);\r\n      } else {\r\n        curveVertex(mouseCoords[i].x, mouseCoords[i].y);\r\n      }\r\n      curveTightness(0);\r\n    } else if (mode == 1) {\r\n      for (int j=0; j&lt;thickness; j+=thickness\/20) {\r\n        if (j%thickness\/40 == 0) {\r\n          vertex(offsetCoords[i].x + j, offsetCoords[i].y);\r\n        } else {\r\n          vertex(mouseCoords[i].x, mouseCoords[i].y);\r\n        }\r\n      }\r\n    }\r\n  }\r\n  endShape();\r\n}\r\n\r\nvoid drawDashedLine() {\r\n  push();\r\n  rotate(atan2(mouseY, mouseX));\r\n  for (var i=0; i&lt;sqrt(pow(mouseY, 2) + pow(mouseX, 2)); i+=20) {\r\n    line(i, 0, i+10, 0);\r\n  }\r\n  pop();\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>int[] mouseCoordsX = new int[100]; int[] mouseCoordsY = new int[100]; PVector[] mouseCoords = new PVector[100]; PVector[] offsetCoords = new PVector[100]; int coordIndex = 0; float growingNoise = 0; boolean record; import processing.svg.*; void setup() { size(600, 600); stroke(255); strokeWeight(1); noFill(); background(0); } void draw() { } void drawShakyLine() { growingNoise += 0.01; drawLivingLine(1, growingNoise); } &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/sweetcorn\/09\/14\/sweetcorn-lineexercises\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;sweetcorn &#8211;  LineExercises&#8221;<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/725"}],"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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/725\/revisions"}],"predecessor-version":[{"id":970,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/725\/revisions\/970"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}