{"id":73341,"date":"2022-10-01T11:40:56","date_gmt":"2022-10-01T15:40:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73341"},"modified":"2022-10-01T11:40:56","modified_gmt":"2022-10-01T15:40:56","slug":"project-05-wallpaper-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/01\/project-05-wallpaper-2\/","title":{"rendered":"Project -05: 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><p>I wanted my wallpaper to look 3D and look like if the light was shining from the top left side!<\/p>\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-3.js\" data-width=\"400\" data-height=\"400\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n    createCanvas(400, 390);\n    background(0);\n}\n\nfunction draw() {\n    rotateGrid(-50,0); \/\/rotate's final grid\n}\n\nfunction drawTriangleOne(x,y) { \/\/draws Triangle 1\n    strokeWeight(0.1);\n    fill(150); \/\/Triangle 1\n    triangle(x, y, x + 50, y, x + 25, y + (sqrt(1875))\/2);\n    fill(80)\n    triangle(x + 50, y, x + 25, y + sqrt(1875), x + 25, y + (sqrt(1875))\/2);\n    fill(230)\n    triangle(0, 0, x + 25, y + (sqrt(1875))\/2, x + 25, y + sqrt(1875));\n}\n\nfunction drawTriangleTwo(x,y) { \/\/draws Triangle 2\n    fill(200); \/\/Triangle 2\n    triangle(x + 50, y, x + 25, y + (sqrt(1875)), x + 50, y + (sqrt(1875))\/2); \n    fill(150);\n    triangle(x + 50, y, x + 50, y + (sqrt(1875))\/2, x + 75, y + sqrt(1875));\n    fill(80);\n    triangle(x + 25, y + (sqrt(1875)), x + 50, y + (sqrt(1875))\/2, x + 75, y + sqrt(1875));\n}\n\nfunction drawFlipTriangleOne(x,y) { \/\/Draws Triangle 3 \n    push();\n    translate(-25, sqrt(1875));\n    drawTriangleTwo(x,y);\n    pop();\n}\n\nfunction drawFlipTriangleTwo(x,y) { \/\/Draws Triangle 4\n    push();\n    translate(25, sqrt(1875));\n    drawTriangleOne(x,y);\n    pop();\n}\n\nfunction drawSingleRowTriangles(x,y) { \/\/Draws First Row of Triangles\n    for (var i = 0; i &lt; 8; i++) {\n        drawTriangleOne(x,y);\n        drawTriangleTwo(x,y);\n        translate(50,0);\n    }\n    \n}\n\nfunction drawFourStartingTriangles(x,y) { \/\/Groups First Four Starting Triangles\n    for (var i = 0; i &lt; 9; i++) {\n        drawTriangleOne(x,y);\n        drawTriangleTwo(x,y);\n        drawFlipTriangleOne(x,y);\n        drawFlipTriangleTwo(x,y);\n    }\n}\n\nfunction drawTwoRowTriangles(x,y) { \/\/Draws First 2 Rows of Triangles\n    push();\n    for (var i = 0; i &lt; 11; i++) {\n        drawFourStartingTriangles(x,y);\n        translate(50,0);\n    }\n    drawTriangleOne(x,y);\n    drawFlipTriangleOne(x,y);\n    pop();\n}\n\nfunction drawTriangleGrid(x,y) { \/\/Uses for loops to create entire Triangle Grid\n    push();\n    for (var i = 0; i &lt; 6; i++) {\n        drawTwoRowTriangles(x,y);\n        translate(0, 2*sqrt(1875));\n    }\n    drawSingleRowTriangles(x,y);\n    drawTriangleOne(x,y);\n    drawTriangleTwo(x,y);\n    pop();\n}\n\nfunction rotateGrid(x,y) {\n    angleMode(DEGREES);\n    rotate(30);\n    translate(0,-200);\n    drawTriangleGrid(x,y);\n}\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I wanted my wallpaper to look 3D and look like if the light was shining from the top left side! sketch function setup() { createCanvas(400, 390); background(0); } function draw() { rotateGrid(-50,0); \/\/rotate&#8217;s final grid } function drawTriangleOne(x,y) { \/\/draws Triangle 1 strokeWeight(0.1); fill(150); \/\/Triangle 1 triangle(x, y, x + 50, y, x + 25, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/01\/project-05-wallpaper-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project -05: Wallpaper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":753,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73341"}],"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=73341"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73341\/revisions"}],"predecessor-version":[{"id":73346,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73341\/revisions\/73346"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}