{"id":75464,"date":"2022-11-08T03:53:55","date_gmt":"2022-11-08T08:53:55","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75464"},"modified":"2022-11-08T03:53:55","modified_gmt":"2022-11-08T08:53:55","slug":"project-09-portrait-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/08\/project-09-portrait-4\/","title":{"rendered":"Project – 09: Portrait"},"content":{"rendered":"\n

Using pointillism for different shapes. Before, I was trying to use different lines, but I wasn’t able to get it to work sadly. <\/p>\n\n

After 1 minute<\/figcaption><\/figure>
$\"\"$
After 2 minutes<\/figcaption><\/figure>
$\"\"$
After 5 minutes<\/figcaption><\/figure><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var sonia;\nvar smallPoint, largePoint;\n\nfunction preload() {\n sonia = loadImage(\"https:\/\/i.imgur.com\/3h0u1wQ.jpeg\");\n}\nfunction setup() {\n createCanvas(480, 480);\n \/\/creating variables for the smallPoint size and the largePoint size\n smallPoint = 4;\n largePoint = 20;\n noStroke();\n background(220);\n rectMode(CENTER)\n}\n\nfunction draw() {\n \/\/created 6 x and y variables to hold different sizes of widths and heights based on the corresponding variable\n var x1 = floor(random(sonia.width));\n var y1 = floor(random(sonia.height));\n \/\/-10 and +10 so that it would always draw a shorter line, so when I used get, it would get a color closer to the point.\n var x2 = floor(random(x1 - 10, x1 + 10));\n var y2 = floor(random(y1 -10, y1 + 10));\n var x = floor(random(sonia.width));\n var y = floor(random(sonia.height));\n var lineLength = ((y2 - y1) \/ (x2 - x1)) \/ 10;\n createMultipleLines(x1,y1, x2,y2);\n createMultipleRectangles(x,y);\n createMultiplePoints(x,y);\n}\n\nfunction createMultipleLines(x1, y1, x2, y2) {\n var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n \/\/gets color\n var pix = sonia.get(x1,y1);\n var pix1 = sonia.get(x2,y2);\n stroke(pix);\n \/\/random strokeWeight\n strokeWeight(random(0.1, pointillize));\n line(x1,y1,x2,y2);\n}\n\nfunction createMultipleRectangles(x,y) {\n \/\/creates multiple rectangles using same method\n var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n print(sonia.width);\n print(sonia.height)\n var pix = sonia.get(x,y);\n fill(pix);\n noStroke();\n rect(x,y, pointillize, pointillize);\n}\n\nfunction createMultiplePoints(x,y) {\n \/\/creates multiple circular points using same method.\n var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n print(sonia.width);\n print(sonia.height)\n var pix = sonia.get(x,y);\n fill(pix);\n noStroke();\n ellipse(x,y, pointillize, pointillize);\n}\n \n\n\n\/\/ function createTinyLines(x1,y1,x2,y2, lineLength) {\n\/\/ var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n\/\/ for (var i = 0; i< lineLength; i ++) {\n\/\/ var pix = sonia.get(x1,y1);\n\/\/ var pix1 = sonia.get(x2,y2);\n\/\/ stroke(pix);\n\/\/ line(x1,y1,x2,y2);\n\/\/ var slopeY = y2 - y1;\n\/\/ var slopeX = x2 - x1;\n\/\/ x1 = x2;\n\/\/ y1 = y2;\n\/\/ x2 += slopeX;\n\/\/ y2 += slopeY;\n\/\/ }\n\/\/ }\n\n\/\/ function createOneLine(x1,y1,x2,y2, lineLength) {\n\/\/ \/\/var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n\/\/ var pix = sonia.get(x1,y1);\n\/\/ var pix1 = sonia.get(x2,y2);\n\/\/ stroke(pix);\n\/\/ for (var i = 0; i< 20; i ++) {\n\/\/ line(x1,y1,x2,y2);\n\/\/ var slopeY = y2 - y1;\n\/\/ var slopeX = x2 - x1;\n\/\/ x1 == x2;\n\/\/ y1 == y2;\n\/\/ x2 += slopeX;\n\/\/ y2 += slopeY;\n \n\/\/ }\n \n\/\/ }<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Using pointillism for different shapes. Before, I was trying to use different lines, but I wasn’t able to get it to work sadly. sketch var sonia; var smallPoint, largePoint; function preload() { sonia = loadImage(“https:\/\/i.imgur.com\/3h0u1wQ.jpeg”); } function setup() { createCanvas(480, 480); \/\/creating variables for the smallPoint size and the largePoint size smallPoint = 4; largePoint … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/08\/project-09-portrait-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project – 09: Portrait”<\/span><\/a><\/p>\n","protected":false},"author":753,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75464"}],"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\/753"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75464"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75464\/revisions"}],"predecessor-version":[{"id":75470,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75464\/revisions\/75470"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

After 1 minute<\/figcaption><\/figure>
$\"\"$
After 2 minutes<\/figcaption><\/figure>
$\"\"$
After 5 minutes<\/figcaption><\/figure><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var sonia;\nvar smallPoint, largePoint;\n\nfunction preload() {\n sonia = loadImage(\"https:\/\/i.imgur.com\/3h0u1wQ.jpeg\");\n}\nfunction setup() {\n createCanvas(480, 480);\n \/\/creating variables for the smallPoint size and the largePoint size\n smallPoint = 4;\n largePoint = 20;\n noStroke();\n background(220);\n rectMode(CENTER)\n}\n\nfunction draw() {\n \/\/created 6 x and y variables to hold different sizes of widths and heights based on the corresponding variable\n var x1 = floor(random(sonia.width));\n var y1 = floor(random(sonia.height));\n \/\/-10 and +10 so that it would always draw a shorter line, so when I used get, it would get a color closer to the point.\n var x2 = floor(random(x1 - 10, x1 + 10));\n var y2 = floor(random(y1 -10, y1 + 10));\n var x = floor(random(sonia.width));\n var y = floor(random(sonia.height));\n var lineLength = ((y2 - y1) \/ (x2 - x1)) \/ 10;\n createMultipleLines(x1,y1, x2,y2);\n createMultipleRectangles(x,y);\n createMultiplePoints(x,y);\n}\n\nfunction createMultipleLines(x1, y1, x2, y2) {\n var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n \/\/gets color\n var pix = sonia.get(x1,y1);\n var pix1 = sonia.get(x2,y2);\n stroke(pix);\n \/\/random strokeWeight\n strokeWeight(random(0.1, pointillize));\n line(x1,y1,x2,y2);\n}\n\nfunction createMultipleRectangles(x,y) {\n \/\/creates multiple rectangles using same method\n var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n print(sonia.width);\n print(sonia.height)\n var pix = sonia.get(x,y);\n fill(pix);\n noStroke();\n rect(x,y, pointillize, pointillize);\n}\n\nfunction createMultiplePoints(x,y) {\n \/\/creates multiple circular points using same method.\n var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n print(sonia.width);\n print(sonia.height)\n var pix = sonia.get(x,y);\n fill(pix);\n noStroke();\n ellipse(x,y, pointillize, pointillize);\n}\n \n\n\n\/\/ function createTinyLines(x1,y1,x2,y2, lineLength) {\n\/\/ var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n\/\/ for (var i = 0; i< lineLength; i ++) {\n\/\/ var pix = sonia.get(x1,y1);\n\/\/ var pix1 = sonia.get(x2,y2);\n\/\/ stroke(pix);\n\/\/ line(x1,y1,x2,y2);\n\/\/ var slopeY = y2 - y1;\n\/\/ var slopeX = x2 - x1;\n\/\/ x1 = x2;\n\/\/ y1 = y2;\n\/\/ x2 += slopeX;\n\/\/ y2 += slopeY;\n\/\/ }\n\/\/ }\n\n\/\/ function createOneLine(x1,y1,x2,y2, lineLength) {\n\/\/ \/\/var pointillize = map(mouseX, 0, width, smallPoint, largePoint);\n\/\/ var pix = sonia.get(x1,y1);\n\/\/ var pix1 = sonia.get(x2,y2);\n\/\/ stroke(pix);\n\/\/ for (var i = 0; i< 20; i ++) {\n\/\/ line(x1,y1,x2,y2);\n\/\/ var slopeY = y2 - y1;\n\/\/ var slopeX = x2 - x1;\n\/\/ x1 == x2;\n\/\/ y1 == y2;\n\/\/ x2 += slopeX;\n\/\/ y2 += slopeY;\n \n\/\/ }\n \n\/\/ }<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Using pointillism for different shapes. Before, I was trying to use different lines, but I wasn’t able to get it to work sadly. sketch var sonia; var smallPoint, largePoint; function preload() { sonia = loadImage(“https:\/\/i.imgur.com\/3h0u1wQ.jpeg”); } function setup() { createCanvas(480, 480); \/\/creating variables for the smallPoint size and the largePoint size smallPoint = 4; largePoint … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/08\/project-09-portrait-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project – 09: Portrait”<\/span><\/a><\/p>\n","protected":false},"author":753,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75464"}],"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\/753"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75464"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75464\/revisions"}],"predecessor-version":[{"id":75470,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75464\/revisions\/75470"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}