{"id":75339,"date":"2022-11-06T16:08:33","date_gmt":"2022-11-06T21:08:33","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75339"},"modified":"2022-11-06T16:08:33","modified_gmt":"2022-11-06T21:08:33","slug":"random-quad-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/random-quad-portrait\/","title":{"rendered":"random quad portrait"},"content":{"rendered":"\n

this sketch samples pixel colors and draws random quadrilaterals where the pixel was sampled from. mouseX controls the size of the shapes, while pressing the mouse will fill the shapes, rather than using the color as a stroke. press a key to erase the canvas.<\/p>\n\n\n\n

below are some earlier variations in which I manually changed the size and fill\/stroke boolean, and tested out density using a loop. (this version was not interactive).<\/p>\n\n\n\n

size 1, fill<\/figcaption><\/figure>
$\"\"$
size 5, fill<\/figcaption><\/figure>
$\"\"$
size 15, fill<\/figcaption><\/figure>
$\"\"$
size 30, fill<\/figcaption><\/figure>
$\"\"$
size 15, lines<\/figcaption><\/figure>
$\"\"$
size 30, lines<\/figcaption><\/figure><\/figure>
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ jaden luscher\n\/\/ jluscher@andrew.cmu.edu\n\/\/ section a\n\/\/ project 09\n\n\/\/ initially i had tried making a chuck close-style portrait with a pixel matrix,\n\/\/ then i shifted to funky shapes instead. the ineraction was added at the end\n\/\/ when i kept wanting to tweak the size and fill\/stroke modes.\n\nvar jaden; \/\/ original image\nvar x1;\nvar y1;\nvar dx = 0; \/\/ noise step\nvar dy = 0;\nvar size; \/\/ bounds of shape\nvar yesFill = false;\n\nfunction preload() {\n jaden = loadImage(\"https:\/\/i.imgur.com\/BRUtdb2.png\") \/\/ original portrait\n}\n\nfunction setup() {\n createCanvas(400, 400);\n background(0);\n frameRate(60);\n jaden.loadPixels();\n}\n\nfunction draw() {\n size = int(map(constrain(mouseX, 0, width), 0, width, 5, 50));\n if (mouseIsPressed) { \/\/ toggle fill mode\n yesFill = true;\n } else { \/\/ reset to line drawing mode\n yesFill = false;\n }\n if (keyIsPressed) { \/\/ erase drawing\n background(0);\n }\n drawShape();\n print(yesFill);\n}\n\nfunction drawShape() {\n x1 = int(map(noise(dx), 0, 1, -150, width + 150));\n y1 = int(map(noise(dy), 0, 1, -150, height + 150));\n dx += random(0.1, 1.0);\n dy += random(0.1, 1.0);\n\n if (yesFill == true) {\n noStroke();\n fill(jaden.get(x1, y1)); \/\/ returns pixel from canvas\n } else if (yesFill == false) {\n strokeWeight(1);\n stroke(jaden.get(x1, y1)); \/\/ returns pixel from canvas\n noFill();\n }\n beginShape(QUADS); \/\/ generate random polygons\n vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);\n vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);\n vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);\n vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);\n endShape();\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>this sketch samples pixel colors and draws random quadrilaterals where the pixel was sampled from. mouseX controls the size of the shapes, while pressing the mouse will fill the shapes, rather than using the color as a stroke. press a key to erase the canvas. below are some earlier variations in which I manually changed … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/random-quad-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “random quad portrait”<\/span><\/a><\/p>\n","protected":false},"author":741,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75339"}],"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\/741"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75339"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75339\/revisions"}],"predecessor-version":[{"id":75356,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75339\/revisions\/75356"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

size 1, fill<\/figcaption><\/figure>
$\"\"$
size 5, fill<\/figcaption><\/figure>
$\"\"$
size 15, fill<\/figcaption><\/figure>
$\"\"$
size 30, fill<\/figcaption><\/figure>
$\"\"$
size 15, lines<\/figcaption><\/figure>
$\"\"$
size 30, lines<\/figcaption><\/figure><\/figure>
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ jaden luscher\n\/\/ jluscher@andrew.cmu.edu\n\/\/ section a\n\/\/ project 09\n\n\/\/ initially i had tried making a chuck close-style portrait with a pixel matrix,\n\/\/ then i shifted to funky shapes instead. the ineraction was added at the end\n\/\/ when i kept wanting to tweak the size and fill\/stroke modes.\n\nvar jaden; \/\/ original image\nvar x1;\nvar y1;\nvar dx = 0; \/\/ noise step\nvar dy = 0;\nvar size; \/\/ bounds of shape\nvar yesFill = false;\n\nfunction preload() {\n jaden = loadImage(\"https:\/\/i.imgur.com\/BRUtdb2.png\") \/\/ original portrait\n}\n\nfunction setup() {\n createCanvas(400, 400);\n background(0);\n frameRate(60);\n jaden.loadPixels();\n}\n\nfunction draw() {\n size = int(map(constrain(mouseX, 0, width), 0, width, 5, 50));\n if (mouseIsPressed) { \/\/ toggle fill mode\n yesFill = true;\n } else { \/\/ reset to line drawing mode\n yesFill = false;\n }\n if (keyIsPressed) { \/\/ erase drawing\n background(0);\n }\n drawShape();\n print(yesFill);\n}\n\nfunction drawShape() {\n x1 = int(map(noise(dx), 0, 1, -150, width + 150));\n y1 = int(map(noise(dy), 0, 1, -150, height + 150));\n dx += random(0.1, 1.0);\n dy += random(0.1, 1.0);\n\n if (yesFill == true) {\n noStroke();\n fill(jaden.get(x1, y1)); \/\/ returns pixel from canvas\n } else if (yesFill == false) {\n strokeWeight(1);\n stroke(jaden.get(x1, y1)); \/\/ returns pixel from canvas\n noFill();\n }\n beginShape(QUADS); \/\/ generate random polygons\n vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);\n vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);\n vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);\n vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);\n endShape();\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>this sketch samples pixel colors and draws random quadrilaterals where the pixel was sampled from. mouseX controls the size of the shapes, while pressing the mouse will fill the shapes, rather than using the color as a stroke. press a key to erase the canvas. below are some earlier variations in which I manually changed … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/06\/random-quad-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “random quad portrait”<\/span><\/a><\/p>\n","protected":false},"author":741,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75339"}],"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\/741"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75339"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75339\/revisions"}],"predecessor-version":[{"id":75356,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75339\/revisions\/75356"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}