{"id":502,"date":"2021-09-08T13:31:51","date_gmt":"2021-09-08T17:31:51","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?p=502"},"modified":"2021-09-08T13:31:51","modified_gmt":"2021-09-08T17:31:51","slug":"dinkolas-linewalk","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/dinkolas\/09\/08\/dinkolas-linewalk\/","title":{"rendered":"dinkolas – LineWalk"},"content":{"rendered":"

\"\"<\/a>\"\"<\/p>\n

I wanted to try to do a random walk weighted to walk through an image. The line mostly retains its velocity from step to step, but slightly steers towards bright areas. To be honest, it’s not much different from a pure random walk, and I had hoped to have the walks resemble to images much more. I intend to work more on it to improve the results…<\/p>\n

const dosvg = false;\r\nlet img;\r\n\r\nfunction preload() {\r\n  img = loadImage('elephant.jpg');\r\n}\r\n\r\nfunction setup() {\r\n  createCanvas(img.width, img.height, SVG);\r\n  noLoop();\r\n  img.loadPixels();\r\n}\r\n\r\nfunction draw() {\r\n  if (!dosvg) image(img, width\/4, height\/4, width\/2,height\/2);\r\n  let pvs = [];\r\n  \/\/console.log(img);\r\n  for (let i = 0; i < img.pixels.length; i+=4) {\r\n    pvs.push(img.pixels[i]);\r\n  }\r\n  \/\/console.log(pvs);\r\n  let index = sampleList(pvs);\r\n  let loc = getLoc(index);\r\n  stroke(255,0,0);\r\n  strokeWeight(10);\r\n  \/\/point(loc.x, loc.y);\r\n  let r = 5;\r\n  let circle_r = 30;\r\n  let theta = 0;\r\n  \r\n  stroke(255, 0,0);\r\n  strokeWeight(1);\r\n  \r\n  for (let i = 0; i < 5000; i++) { let circle = getCircle(loc, theta, circle_r); let weighted = weightList(circle, t => t \/*4*(t-0.5)**2*\/);\r\n    let circleIndex = sampleList(weighted);\r\n    \/\/let circleIndex = maxIndex(weighted);\r\n    let targetTheta = theta + map(circleIndex, 0, circle.length, 0, 2*PI);\r\n    \r\n    \r\n    let diff = ((targetTheta - theta) % TWO_PI + TWO_PI) % TWO_PI;\r\n    if (diff > PI) diff -= TWO_PI;\r\n    theta = (theta + 0.2*diff) % TWO_PI;\r\n    let newLoc = {x: loc.x + r * Math.cos(theta), y: loc.y + r * Math.sin(theta)};\r\n    line(map(loc.x, 0, width, width*0.25, width*0.75),\r\n         map(loc.y, 0, height, height*0.25, height*0.75), \r\n         map(newLoc.x, 0, width, width*0.25, width*0.75), \r\n         map(newLoc.y, 0, height, height*0.25, height*0.75));\r\n    loc = newLoc;\r\n  }\r\n}\r\n\r\nfunction maxIndex(l) {\r\n  let m = -Infinity;\r\n  let id = 0;\r\n  for (let i = 0; i < l.length; i++) { if (l[i] > m) {\r\n      m = l[i];\r\n      id = i;\r\n    }\r\n  }\r\n  return id;\r\n}\r\n\r\nfunction weightList(l, f) {\r\n  let w = [];\r\n  for (let i = 0; i < l.length; i++) {\r\n    let t = map(i, 0, l.length - 1, 0, 1);\r\n    w.push(l[i] * f(t));\r\n  }\r\n  return w;\r\n}\r\n\r\nfunction getCircle(loc, theta, r) {\r\n  let vs = [];\r\n  for (let i = 0; i < 32; i++) { let angle = theta + map(i, 0, 32, 0, 2*PI); let l = {x: loc.x + r * Math.cos(angle), y: loc.y + r * Math.sin(angle)}; let index = getIndex(l); if (index === -1) { vs.push(0); } else { vs.push(1 - (img.pixels[index] \/ 255.0)); } } return vs; } function getLoc(i) { return {x: i % img.width, y: Math.floor(i \/ img.width)}; } function getIndex(loc) { if (loc.x >= img.width || loc.y >= img.height ||\r\n     loc.x < 0 || loc.y < 0) return -1;\r\n  return Math.floor(loc.x) + img.width * Math.floor(loc.y);\r\n}\r\n\r\nfunction keyPressed() {\r\n  saveSVG(\"dingus.svg\");\r\n}\r\n\r\nfunction sampleList(l) {\r\n  let v = l[0];\r\n  if (v < 0) console.log('negative!!!');\r\n  let cumsum = [v];\r\n  let sum = v;\r\n  for (let i = 1; i < l.length; i++) {\r\n    let v = l[i];\r\n    if (v < 0) console.log('negative!!!');\r\n    sum += v;\r\n    cumsum.push(sum);\r\n  }\r\n  let t = sum * Math.random();\r\n  \/\/TODO: binary search\r\n  for (let i = 0; i < cumsum.length; i++) { if (cumsum[i] >= t) return i;\r\n  }\r\n  console.log('shouldnt hapen');\r\n  return cumsum.length - 1;\r\n}\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
I wanted to try to do a random walk weighted to walk through an image. The line mostly retains its velocity from step to step, but slightly steers towards bright areas. To be honest, it’s not much different from a pure random walk, and I had hoped to have the walks resemble to images much … Continue reading “dinkolas – LineWalk”<\/span><\/a><\/p>\n","protected":false},"author":14,"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\/502"}],"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\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=502"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/502\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/502\/revisions\/524"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}