{"id":73356,"date":"2022-10-01T12:35:46","date_gmt":"2022-10-01T16:35:46","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73356"},"modified":"2022-10-01T12:37:24","modified_gmt":"2022-10-01T16:37:24","slug":"project-5-wallpaper-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/01\/project-5-wallpaper-2\/","title":{"rendered":"Project 5: Wallpaper"},"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 class=\"wp-block-file\"><a id=\"wp-block-file--media-1e85bbd4-65a8-4a2e-b34f-80e4c0cdb6de\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-5.js\"><br>sketch<\/a><\/div>\n\n\n\n<p>In this project I tried to create a set of repetitive diamond geometry and also a glowing effect that makes it look like it&rsquo;s in 3D.<\/p>\n\n\n<div><a class=\"p5_sketch_link\" data-width=\"800\" data-height=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-5.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"800\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\nvar r=50\n\nfunction setup() {\n    createCanvas(800,600);\n    background(220);\n}\n\nfunction draw() {\n    drawingContext.shadowBlur=20;\n    drawingContext.shadowColor=color(20);   \/\/glowing effect and black shadow\n    noStroke();\n\n    \/\/first set of geometries\n    for(var col=0;col&lt;4;col++){\n        for(var row=0;row&lt;20;row++){\n            push();\n            translate(col*r,(row-2)*r);\n            diamondColor(row);\n            diamondOne();\n            pop();\n        }\n    }\n\n    \/\/second set of geometries\n    for(var col=4;col&lt;8;col++){\n        for(var row=0;row&lt;20;row++){\n            push();\n            translate(col*r,(row-2)*r);\n            diamondColor(row);\n            diamondTwo();\n            pop();\n        }\n    }\n\n    \/\/third set of geometries\n    for(var col=8;col&lt;12;col++){\n        for(var row=0;row&lt;20;row++){\n            push();\n            translate(col*r,(row-2)*r);\n            diamondColor(row);\n            diamondOne();\n            pop();\n        }\n    }\n\n    \/\/fourth set of geometries\n    for(var col=12;col&lt;16;col++){\n        for(var row=0;row&lt;20;row++){\n            push();\n            translate(col*r,(row-2)*r);\n            diamondColor(row);\n            diamondTwo();\n            pop();\n        }\n    }    \n    \n\n}\n\n\n\/\/first type of diamond\nfunction diamondOne(){\n    quad(0,0,r,r,r,2*r,0,r);\n}\n\n\n\/\/second set of diamond\nfunction diamondTwo(){\n    quad(0,r,r,0,r,r,0,2*r);\n\n}\n\n\n\/\/coloring the diamonds\nfunction diamondColor(row){\n    if(row%8==0){\n        fill(22,76,122);\n    }else if(row%8==1){\n        fill(254,252,204);\n    }else if(row%8==2){\n        fill(255,190,14);\n    }else if(row%8==3){\n        fill(226,92,3);\n    }else if(row%8==4){\n        fill(119,147,172);\n    }else if(row%8==5){\n        fill(1,24,66);\n    }else if(row%8==6){\n        fill(224,28,1);\n    }else if(row%8==7){\n        fill(255,141,6);\n    }\n}<\/code><\/pre><\/div>\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>In this project I tried to create a set of repetitive diamond geometry and also a glowing effect that makes it look like it&rsquo;s in 3D. sketch var r=50 function setup() { createCanvas(800,600); background(220); } function draw() { drawingContext.shadowBlur=20; drawingContext.shadowColor=color(20); \/\/glowing effect and black shadow noStroke(); \/\/first set of geometries for(var col=0;col&lt;4;col++){ for(var row=0;row&lt;20;row++){ push(); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/01\/project-5-wallpaper-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 5: Wallpaper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":770,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73356"}],"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\/770"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73356"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73356\/revisions"}],"predecessor-version":[{"id":73363,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73356\/revisions\/73363"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}