{"id":75178,"date":"2022-11-05T19:39:14","date_gmt":"2022-11-05T23:39:14","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75178"},"modified":"2022-11-05T19:39:14","modified_gmt":"2022-11-05T23:39:14","slug":"project-9-computational-portrait-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-9-computational-portrait-2\/","title":{"rendered":"project 9: computational portrait"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>i made a computational portrait using perlin noise to randomly draw lines until an image emerges. source image below <\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"400\" data-height=\"400\" id=\"wp-block-file--media-bc9758f1-506b-454f-b1ca-cd605ff4957f\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-11.js\">isisproject9<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ isis berymon section D\n\/\/using perlin noise to randomly generate lines\n\/\/that over time create an image of my face\n\nvar isis; \/\/ portrait\nvar xstep = 0.0; \/\/noise step vars\nvar ystep = 0.0;\nvar x1 = 200; \/\/line vars\nvar y1 = 200;\nvar x2;\nvar y2;\n\n\/\/preload image\nfunction preload(){\n   isis = loadImage(\"https:\/\/i.imgur.com\/gspKB1I.jpg\");\n}\n\n\nfunction drawLine(){ \/\/draws continuous line over canvas\n    \/\/randomly generate line path\n    x2 = map(noise(xstep), 0, 1, -200, 600);\n    y2 = map(noise(ystep), 0, 1, -200, 600);\n    xstep += .08;\n    ystep += .06;\n\n    \/\/use colors from portrait\n    strokeWeight(2);\n    stroke(isis.get(x2,y2));\n    line(x1, y1, x2, y2);\n    \/\/make 2nd point 1st point and repeat\n    x1 = x2;\n    y1 = y2;\n}\n\nfunction setup(){\n    createCanvas(400, 400);\n    background(50);\n    frameRate(60);\n}\n\nfunction draw(){\n    drawLine();\n}<\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-container-2 wp-block-gallery-1 wp-block-gallery has-nested-images columns-default is-cropped\"><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"513\" height=\"513\" data-id=\"75185\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-17.png\" alt=\"\" class=\"wp-image-75185\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-17.png 513w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-17-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/image-17-150x150.png 150w\" sizes=\"(max-width: 513px) 85vw, 513px\"><\/figure><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"400\" height=\"400\" data-id=\"75186\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Snapchat-1461905536_2-1-1.jpg\" alt=\"\" class=\"wp-image-75186\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Snapchat-1461905536_2-1-1.jpg 400w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Snapchat-1461905536_2-1-1-300x300.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/Snapchat-1461905536_2-1-1-150x150.jpg 150w\" sizes=\"(max-width: 400px) 85vw, 400px\"><\/figure><figcaption class=\"blocks-gallery-caption\">program after 3 minutes | source image<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>i made a computational portrait using perlin noise to randomly draw lines until an image emerges. source image below isisproject9 \/\/ isis berymon section D \/\/using perlin noise to randomly generate lines \/\/that over time create an image of my face var isis; \/\/ portrait var xstep = 0.0; \/\/noise step vars var ystep = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/05\/project-9-computational-portrait-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;project 9: computational portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":703,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75178"}],"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\/703"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75178"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75178\/revisions"}],"predecessor-version":[{"id":75188,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75178\/revisions\/75188"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}