RIGHT ARROW = advance drawing one step<\/li>

ENTER = start & stop drawing<\/li>

‘r’ = refresh<\/li><\/ul>
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Name: Tsz Wing Clover Chau\n\/\/andrewid: ctchau\n\/\/Section E\n\/\/Project 9\n\n\nvar chosenPixels;\nvar step;\n\nvar bgPx = [];\nvar rStep;\n\nvar range = 30;\nvar baseImage;\n\n\nfunction preload(){\n baseImage = loadImage(\"https:\/\/i.imgur.com\/PaF0PFq.png\");\n}\n\nfunction setup(){\n createCanvas(480, 480);\n background(255);\n frameRate(30);\n baseImage.loadPixels();\n\n \/\/init array\n chosenPixels = [];\n bgPx = [];\n step = false;\n rStep = random(0, 30);\n\n for (var i = 0; i < rStep; i++){\n pt = makePoint(int(random(0, 480)), int(random(0, 480)));\n if (isRed(pt)) {\n bgPx.push(pt);\n } else {\n chosenPixels.push(pt);\n }\n }\n}\n\n\nfunction draw() {\n drawBg();\n if (keyIsDown(RIGHT_ARROW) || step){ \/\/ press right arrow to invidually step\n addPx();\n }\n drawFace();\n}\n\n\n\/\/HELPER FUNCTIONS\nfunction makePoint(px, py){\n var pt = {x: px, y: py};\n pt.c = baseImage.get(px, py);\n pt.neighbors;\n return pt;\n}\n\nfunction addPx(){\n rStep = random(0, 100);\n var newPx = 0;\n while (newPx < rStep){\n pt = makePoint(int(random(0, 480)), int(random(0, 480)));\n\n \/\/add to bg array + pick new if red\n while (isRed(pt)){\n if (int(random(0, 8)) == 1){\n bgPx.push(pt);\n }\n pt = makePoint(int(random(0, 480)), int(random(0, 480)));\n }\n\n var min_dist = range;\n for (var j = 0; j < chosenPixels.length; j++){\n var checkPx = chosenPixels[j];\n var d = dist(checkPx.x, checkPx.y, pt.x, pt.y);\n \n if ((dist(checkPx.x, checkPx.y, pt.x, pt.y) < range) & (d < min_dist)){\n min_dist = d;\n stroke(pt.c);\n strokeWeight(0.5);\n line(checkPx.x, checkPx.y, pt.x, pt.y);\n chosenPixels.push(pt);\n newPx ++;\n break;\n }\n }\n }\n}\n\n\nfunction isRed(pt){\n if (pt.c[0] > 50 & pt.c[1] < 30){\n return true;\n }\n return false;\n}\n\nfunction keyPressed(){\n if (keyCode == ENTER){ \/\/ENTER to autocomplete\n step = !step;\n } else if (key == 'r'){ \/\/press 'r' to reset!\n setup();\n }\n}\n\n\n\nfunction drawBg(){\n for (var i = 0; i < bgPx.length; i++){\n px = bgPx[i];\n px.c[3]= 80;\n stroke(px.c);\n strokeWeight(0.3);\n if (int(random(0,2)) == 1){\n line(px.x, 0, px.x, height);\n } else {\n line(0, px.y, width, px.y);\n }\n }\n}\n\nfunction drawFace(){\n for (var i = 0; i < chosenPixels.length; i++){\n var curPx = chosenPixels[i];\n stroke(curPx.c);\n strokeWeight(5);\n point(curPx.x, curPx.y);\n }\n}\n<\/code><\/pre><\/div>\n\n\n\nLogic\/Pseudocode:<\/strong><\/p>\n\n\n\n<ul><li>Configuration q = series of randomly generated non-background pixels (ie. not red). <\/li><li>Q = new randomly generated non-background pixels <ul><li>if distance from q -> Q < acceptable range, append to q<\/li><\/ul><\/li><li>N = rStep (ie. no. of new non-background pixels added to q)<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"579\" height=\"414\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-14.png\" alt=\"\" class=\"wp-image-75151\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-14.png 579w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-14-300x215.png 300w\" sizes=\"(max-width: 579px) 85vw, 579px\"><figcaption>Probabilistic Roadmap Path Planning by H. Choset et Al<\/figcaption><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"560\" height=\"889\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-13.png\" alt=\"\" class=\"wp-image-75150\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-13.png 560w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-13-189x300.png 189w\" sizes=\"(max-width: 560px) 85vw, 560px\"><figcaption>Probabilistic Roadmap Path Planning by H. Choset et Al<\/figcaption><\/figure>References: <a href=\"http:\/\/www.cs.columbia.edu\/~allen\/F15\/NOTES\/Probabilisticpath.pdf\">http:\/\/www.cs.columbia.edu\/~allen\/F15\/NOTES\/Probabilisticpath.pdf<\/a><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"This portrait is based on the idea of the probabilistic road map as described in ‘Probabilistic Roadmap Path Planning’ by H. Choset et al. where the figure in the portrait is graph G and the red background are obstacles\/collisions. Controls RIGHT ARROW = advance drawing one step ENTER = start & stop drawing ‘r’ = … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-9-computational-portrait\/\" class=\"more-link\">Continue reading “Project 9 – Computational Portrait”<\/span><\/a><\/p>\n","protected":false},"author":708,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,121,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75147"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/708"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75147"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75147\/revisions"}],"predecessor-version":[{"id":75161,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75147\/revisions\/75161"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}