{"id":75380,"date":"2022-11-06T17:04:41","date_gmt":"2022-11-06T22:04:41","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75380"},"modified":"2022-11-06T17:07:13","modified_gmt":"2022-11-06T22:07:13","slug":"75380","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/75380\/","title":{"rendered":"Project 9 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><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-30.js\" data-width=\"480\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Evette LaComb \n\/\/Section D \n\/\/09 project \n\n\n\/\/the portrait must be an un-retouched photograph of a person\n\/\/that can be acessed on imgur.com \n\/\/you can only display the portrait generated\n\/\/should not be bigger than 480 x 480\n\/\/show creativity \n\/\/write a sentance or tow reflecting on your process and product \n\n\nlet img;\nvar x; \nvar y;\n\nvar angle = 0;\nvar radius = 0;\nvar frameCount = 0;\nvar circleSize = 1;\n\nfunction preload() {\n  img = loadImage(\"https:\/\/i.imgur.com\/a9JqjIf.jpg\");\n}\n\nfunction setup() {\n  createCanvas(480, 480);\n  img.loadPixels();\n  imageMode(CENTER);\n  img.resize(480, 480)\n  background(\"grey\");\n\n  noStroke();\n\n}\n\nfunction draw() {\n\n    \/\/varaibles for x and y occording to spiral \n\n    x = radius * cos(radians(angle));\n    y = radius * sin(radians(angle));\n\n    \/\/code for calling pixels: \n\n\n   var pix = img.get(x, y);\n   var pixx = img.get(width\/2, y);\n\n   \/\/code for the circels and fill:\n\n\n    fill(pix);\n    circle(x, y, circleSize);\n    fill(pixx);\n    circle(x, y, circleSize\/2);\n\n    \/\/code for the spiral:\n\n    radius += frameCount \/ 3000;\n    angle += 8;\n    frameCount += 1;\n    circleSize += 0.07;\n    if (frameCount &gt; 3000) {\n        noLoop();\n    }\n\n    \/\/border to cover where circles could not be drawn:\n\n    fill(\"white\");\n    rect(0, 0, width, 20);\n    rect(0, height - 20, width, height - 20);\n    rect(0, 0, 20, height);\n    rect(height - 20,0,  height, width- 20);\n\n}\n\n\/\/my process for this was I wanted to include a spiral effect revealing the image\n\/\/I found that translating th spiral to the center effted where my pixel colors were being grabbed from\n\/\/I changed the spiral instead to start at 0, 0\n\/\/I ended up liking this effect better because it shows how the that top corner \n\/\/is the brightest part. The spiral created a sun ray effect that looked cool\n\/\/I then wanted something else in the circled so I made donuts with the \n\/\/inverted color in the center. This helped to bring some color to the top corner\n\/\/so it wasnt just all white.\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Evette LaComb \/\/Section D \/\/09 project \/\/the portrait must be an un-retouched photograph of a person \/\/that can be acessed on imgur.com \/\/you can only display the portrait generated \/\/should not be bigger than 480 x 480 \/\/show creativity \/\/write a sentance or tow reflecting on your process and product let img; var x; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/75380\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 9 portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":732,"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\/75380"}],"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\/732"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75380"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75380\/revisions"}],"predecessor-version":[{"id":75382,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75380\/revisions\/75382"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}