{"id":72795,"date":"2022-09-24T18:00:40","date_gmt":"2022-09-24T22:00:40","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72795"},"modified":"2022-09-24T18:00:40","modified_gmt":"2022-09-24T22:00:40","slug":"project-04-string-art-section-b","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/24\/project-04-string-art-section-b\/","title":{"rendered":"Project-04: String Art-Section B"},"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>All Seeing Eye.<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-353.js\" data-width=\"400\" data-height=\"300\">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=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/*\n* Evan Stuhlfire\n* estuhlfi@andrew.cmu.edu\n* Section B\n*\n* Project-04: String Art\n* This program uses geometric shapes to create\n* string art.\n*\/\n\nfunction setup() {\n    createCanvas(400, 300);\n    background(73, 80, 87); \/\/davys grey from coolors.com\n\n}\n\nfunction draw() {   \n    \/\/ draw the string lines for the frame in light blue\n    stringLeftLower(204, 255, 255, 55);\n    stringLeftUpper(204, 255, 255, 55);\n    stringRightUpper(204, 255, 255, 55);\n    stringRightLower(204, 255, 255, 55);\n\n    \/\/ move origin of canvas to center\n    translate(width\/2, height\/2);\n\n    \/\/ draw the circle design with light blue\n    stringCircle(204, 255, 255); \n    noLoop();\n}\n\n\/* draw the string pattern at the lower left *\/\nfunction stringLeftLower(r, g, b, t) {\n    var numLines = 40;\n    var x1 = 0; \/\/ start at top right\n    var y1 = 0; \/\/ top right\n    var y2 = height;\n    var x2 = xInc = (width\/numLines);\n    var yInc = (height\/numLines);\n\n    stroke(r, g, b, t);\n    \/\/ iterate over each line to draw\n    for (index = 0; index &lt; numLines; index ++) {\n        line(x1, y1, x2, y2);\n        y1 += yInc;\n        x2 += xInc;\n    }\n}\n\n\/* draw the string pattern at the upper left *\/\nfunction stringLeftUpper(r, g, b, t) {\n    \/\/ set vars to start at lower left and draw up\n    var numLines = 40;\n    var x1 = 0;\n    var y1 = height; \/\/ lower left\n    var y2 = 0;\n    var x2 = xInc = width\/numLines;\n    var yInc = height\/ numLines;\n\n    stroke(r, g, b, t);\n    \/\/ iterate over each line to draw\n    for (index = 0; index &lt; numLines; index ++) {\n        line(x1, y1, x2, y2);\n        y1 -= yInc; \/\/ move up the canvas\n        x2 += xInc; \/\/ move across the canvas\n    }\n}\n\n\/* draw the string pattern at the upper right *\/\nfunction stringRightUpper(r, g, b, t) {\n    var numLines = 40;\n    var x1 = xInc = width\/numLines;\n    var x2 = width;\n    var y1 = 0;\n    var y2 = 0;\n    var yInc = height\/ numLines;\n\n    stroke(r, g, b, t);\n    \/\/ iterate over each line to draw\n    for (index = 0; index &lt; numLines; index ++) {\n        line(x1, y1, x2, y2);\n        y2 += yInc; \/\/ move down the canvas\n        x1 += xInc; \/\/ move right across the canvas\n    }\n}\n\n\/* draw the string pattern at the lower right *\/\nfunction stringRightLower(r, g, b, t) {\n    \/\/ set variable\n    var numLines = 40;\n    var x1 = width; \/\/ right side\n    var x2 = 0;\n    var xInc = width\/numLines;;\n    var yInc = height\/numLines;\n    var y1 = height - yInc; \/\/ bottom right\n    var y2 = height;\n\n    stroke(r, g, b, t); \/\/ set color and transparency\n    \/\/ iterate over each line to draw\n    for (index = 0; index &lt; numLines; index ++) {\n        line(x1, y1, x2, y2); \n        y1 -= yInc; \/\/ move up the canvas\n        x2 += xInc; \/\/ move right across the canvase\n    }\n}\n\n\/* draw the center string circle *\/\nfunction stringCircle(r, g, b) {\n    \/\/ 36 spokes on the circle design\n    var circlePoints = 36;\n    var angle = 0;\n    var rotDeg = 0;\n\n    \/\/ iterate over each spoke\n    for (index = 0; index &lt; circlePoints; index++) {\n        \/\/ save settings\n        push();\n\n        \/\/ map the angle to the perimeter of the circle\n        angle = map(index, 0, circlePoints, 0, TWO_PI);\n\n        \/\/ convert angle to x y coordinates\n        var radius = 90;\n        var circleX = radius * cos(angle);\n        var circleY = radius * sin(angle);\n\n        \/\/ move origin to the starting point of the circle\n        translate(circleX, circleY);\n\n        \/\/ rotate each spoke to the origin\n        rotate(radians(rotDeg));\n\n        \/\/ variables for drawing string design\n        var circleX2 = -radius * 2;\n        var circleY2 = 0;\n        var smallCircleDiam = 10;\n        var offset = 15;\n\n        \/\/ draw small circles at end of spokes\n        stroke(r, g, b, 255);\n        circle(0, 0, smallCircleDiam * .2);\n        noFill();\n        circle(0, 0, smallCircleDiam); \/\/ outline\n\n        \/\/ set stroke color and decrease transparency to\n        \/\/ see more detail.\n        stroke(r, g, b, 125); \n\n        \/\/ draw three lines from each perimeter point to\n        \/\/ create spokes\n        line(0, 0, circleX2, circleY2);\n        line(0, 0, circleX2, circleY2 + offset);\n        line(0, 0, circleX2, circleY2 -offset);\n\n        \/\/ extend lines off of spokes\n        stroke(r, g, b, 50);\n        line(0, 0, offset * 8, circleY2);\n        line(0, 0, offset * 8, circleY2 + offset);\n        line(0, 0, offset * 8, circleY2 -offset);\n\n        \/\/ call function to draw the background circles with\n        \/\/ transparancey\n        backgroundCircles(index, offset, r, g, b, 80);\n\n        pop(); \/\/ restore settings \n        rotDeg += 10; \/\/ rotate 10 degrees 36\/360\n    }\n}\n\n\/* draw the background circles with design *\/\nfunction backgroundCircles(index, offset, r, g, b, t) {\n    \/\/ save settings\n    push();\n    stroke(r, g, b, t); \/\/ light blue with transparency\n    \/\/ rest origin, space circles out\n    translate(25, 0);\n\n    \/\/ draw small inner circle on even spoke\n    if (index % 2 == 0) {           \n        circle(0, 0, 20);\n        circle(110, 0, 70);\n    } else {\n        var diam = offset * 4; \/\/ set diameter\n        \/\/ draw bigger circle on odd spoke\n        circle(offset * 3, 0, diam);\n\n        \/\/ string design of four circles inside each \n        \/\/ bigger circle\n        var shiftValue = 10;\n        circle(offset * 3, -shiftValue, diam\/2);\n        circle(offset * 3, shiftValue, diam\/2);\n        circle(offset * 3 + shiftValue, 0, diam\/2);\n        circle(offset * 3 - shiftValue, 0, diam\/2);\n    }\n    pop();\/\/ restores settings\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>All Seeing Eye.<\/p>\n","protected":false},"author":760,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[101,102,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72795"}],"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\/760"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72795"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72795\/revisions"}],"predecessor-version":[{"id":72814,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72795\/revisions\/72814"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}