{"id":68265,"date":"2021-10-30T19:48:50","date_gmt":"2021-10-30T23:48:50","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68265"},"modified":"2021-10-30T19:51:29","modified_gmt":"2021-10-30T23:51:29","slug":"project-09-computational-portrait","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-09-computational-portrait\/","title":{"rendered":"Project 09: 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>First reading the instructions for this project, I was reminded of mosaic effect on images. <\/p>\n\n\n\n<p>I proceeded to work with square pixels, but I realized that using a rounded shape like an ellipse could create a more organic jittery effect on my animated portrait.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-136.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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\">var p = 1000;\nvar particles = [];\n\nfunction preload() {\n    img = loadImage(\"https:\/\/i.imgur.com\/30d3jx2.jpeg\"); \n}\n\nfunction setup() {\n  createCanvas(480, 480);\n  pixelDensity(5);\n \n  for (var i = 0; i &lt; p; i++) {\n    particles[i] = new squareParticle(240, 240); \/\/appending new square paricles to the array that will draw the shapes\n  }\n}\n\nfunction draw() {\n \n  for (var i = 0; i &lt; particles.length; i++) {\n    particles[i].update();\n    particles[i].show();\n  }\n}\n\n\nfunction squareParticle(x, y) { \n  this.x = x;\n  this.y = y;\n  this.r = random(1, 5); \/\/range of particle size\n\n  this.update = function() { \n    this.x += random(-3, 3);\n    this.y += random(-3, 3);\n\n    this.x = constrain(this.x, 0, width);\n    this.y = constrain(this.y, 0, height);\n  };\n\n  this.show = function() {\n    stroke(250);\n    strokeWeight(0.1);\n    var c = img.get(this.x, this.y);\n    fill(c); \n    ellipse(this.x, this.y, this.r, this.r+3);\n  \n\n  }\n}<\/code><\/pre><\/div>\n\n\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>First reading the instructions for this project, I was reminded of mosaic effect on images. I proceeded to work with square pixels, but I realized that using a rounded shape like an ellipse could create a more organic jittery effect on my animated portrait. sketch var p = 1000; var particles = []; function preload() &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/30\/project-09-computational-portrait\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 09: Computational Portrait&#8221;<\/span><\/a><\/p>\n","protected":false},"author":682,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[110,111,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68265"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/682"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68265"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68265\/revisions"}],"predecessor-version":[{"id":68271,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68265\/revisions\/68271"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}