{"id":72101,"date":"2022-09-17T19:51:28","date_gmt":"2022-09-17T23:51:28","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72101"},"modified":"2022-09-17T19:51:28","modified_gmt":"2022-09-17T23:51:28","slug":"project-03-dynamic-drawing-section-b","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-section-b\/","title":{"rendered":"Project-03-Dynamic-Drawing: Section B"},"content":{"rendered":"\n

My process for this project was to alter basic shapes and colors to create a kaleidoscope. I used transformations so I could draw the same images many times in different locations. Moving the mouse left and right shrinks, enlarges, and repositions different elements. Crossing the horizontal midpoint reverses the rotation. Vertical motion with the mouse speeds and slows the rotation. Clicking changes colors.<\/p>\n\n\n

\n

\"\" — From my sketchbook.<\/figcaption><\/figure><\/div>\n\n\n
sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Evan Stuhlfire\n\/\/ estuhlfi, section B\n\/\/ Project-03: Dynamic Drawing\n\nvar angle = 0; \/\/ Angle to increment for rotation\nvar angleInc = 2; \/\/ Controls speed of rotation\nvar rotateDir = 1; \/\/ Direction of rotation\nvar centerX; \/\/ Center of original canvas\nvar centerY;\nvar shapeSpace = 30; \/\/ Space between shapes\nvar rectSize = 20;\nvar startSize = 10;\nvar circleStart = 10;\nvar littleCircle = 10;\nvar colorScheme = 1; \/\/ standard = 1, switched = -1\n\nfunction setup() {\n createCanvas(600, 450);\n\n centerX = width\/2;\n centerY = height\/2;\n}\n\nfunction draw() {\n background(50);\n\n \/\/ If the mouse is left of center set rotation counterclockwise\n if(mouseX < centerX){\n rotateDir = -1;\n } else {\n rotateDir = 1; \/\/ Set rotation clockwise\n }\n\n \/\/ Translate the canvas origin to the center\n translate(centerX, centerY);\n\n \/\/ Save the current settings\n push();\n\n \/\/ Rotate the canvas for the shape redraw\n rotate(radians(angle * rotateDir));\n\n \/\/ Draw background circle\n fill(120, 88, 111);\n stroke(120, 88, 111);\n ellipse(0, 0, height, height);\n\n \/\/ Draw center rectangle\n fill(230, 199, 156);\n stroke(230, 199, 156);\n rectMode(CENTER); \/\/ Center rect around (0,0)\n rect(0,0, rectSize, rectSize);\n rect(0, 0, rectSize * mouseX\/15, rectSize * mouseX\/15);\n\n \/\/ Draw center crossing rectangles\n if(colorScheme == 1){\n fill(123, 158, 168); \/\/ grey blue\n stroke(123, 158, 168);\n } else {\n fill(111, 208, 140); \/\/ green\n stroke(111, 208, 140);\n }\n \n rect(0, 0, 25, width * 1.5);\n rect(0,0, width * 1.5, 25);\n\n \/\/ Draw little circle\n fill(120, 88, 111);\n stroke(120, 88, 111);\n ellipse(0, 0, littleCircle * mouseX\/15, littleCircle * mouseX\/15);\n\n \/\/ Draw four spokes of ellipses and diamonds \n \/\/ at 90 degree intervals\n drawEllipse();\n drawRects();\n \n rotate(radians(90));\n drawEllipse();\n drawRects();\n\n rotate(radians(90));\n drawEllipse();\n drawRects();\n\n rotate(radians(90));\n drawEllipse();\n drawRects();\n\n \/\/ Return to saved settings\n pop();\n\n angle = angle + mouseY\/100;\n}\n\nfunction drawEllipse(){\n \/\/ Set color of ellipses\n if(colorScheme == 1){\n fill(111, 208, 140); \/\/ green\n stroke(111, 208, 140);\n } else {\n fill(123, 158, 168); \/\/ grey blue\n stroke(123, 158, 168);\n }\n \n\n var circleSize = circleStart;\n var circleInc = 5;\n\n circleSize = circleSize * (width - mouseX)\/150;\n \n \/\/ Draw a line of ellipses\n ellipse(shapeSpace, shapeSpace, circleSize, circleSize);\n \/\/ Draw first row dots\n var dotSize = 4;\n push(); \/\/ Save settings\n fill(205, 223, 160); \/\/ yellow\n stroke(0);\n rect(shapeSpace, shapeSpace, circleSize\/dotSize, circleSize\/dotSize);\n pop(); \/\/ restore settings\n \n circleSize += circleInc;\n ellipse(2 * shapeSpace, 2 * shapeSpace, circleSize, circleSize);\n \/\/ Draw second row dots\n push(); \/\/ Save settings\n fill(120, 88, 111); \/\/ purple\n rect(2 * shapeSpace, 2 * shapeSpace, circleSize\/dotSize, circleSize\/dotSize);\n pop(); \/\/ restore settings\n\n circleSize += circleInc;\n ellipse(3 * shapeSpace, 3 * shapeSpace, circleSize, circleSize);\n \/\/ Draw third row of dots\n push(); \/\/ Save settings\n fill(205, 223, 160); \/\/ yellow\n stroke(0);\n rect(3 * shapeSpace, 3 * shapeSpace, circleSize\/dotSize, circleSize\/dotSize);\n pop(); \/\/ Restore settings\n\n circleSize += circleInc;\n ellipse(4 * shapeSpace, 4 * shapeSpace, circleSize, circleSize);\n \/\/ Draw fourth row of dots\n push(); \/\/ Save settings\n fill(120, 88, 111); \/\/ purple\n rect(4 * shapeSpace, 4 * shapeSpace, circleSize\/dotSize, circleSize\/dotSize);\n}\n\nfunction drawRects(){\n \/\/ Draws a line of rectangles \n\n \/\/ Set color of rectangles\n fill(205, 223, 160); \/\/ yellow\n stroke(120, 88, 111); \/\/ purple\n\n \/\/ Save current settings\n push();\n\n \/\/ Rotate canvase so rectangles craw as diamonds\n rotate(radians(45));\n\n rectMode(CENTER); \/\/ draw rects from center\n var sqSize = startSize * mouseX\/100;\n var sqInc = 5;\n \/\/ Draw first rectangle\n rect(shapeSpace, shapeSpace, sqSize, sqSize);\n\n \/\/ Draw second rectangle\n sqSize += sqInc;\n rect(shapeSpace + 2 * sqSize, shapeSpace + 2 * sqSize, sqSize, sqSize);\n\n \/\/ Draw third rectangle\n sqSize += sqInc;\n rect(shapeSpace + 3 * sqSize, shapeSpace + 3 * sqSize, sqSize, sqSize);\n\n \/\/ Draw fourth rectangle\n sqSize += sqInc;\n rect(shapeSpace + 4 * sqSize, shapeSpace + 4 * sqSize, sqSize, sqSize);\n\n \/\/ Draw dots\n stroke(0);\n fill(111, 208, 140); \/\/ green\n var dotSize = 3;\n ellipse(shapeSpace + 4 * sqSize, shapeSpace + 4 * sqSize, sqSize\/dotSize, \n sqSize\/dotSize);\n\n \/\/ third row dots\n fill(120, 88, 111); \/\/ purple\n sqSize -= sqInc; \/\/ Set sqSize to third square\n ellipse(shapeSpace + 3 * sqSize, shapeSpace + 3 * sqSize, sqSize\/dotSize, \n sqSize\/dotSize);\n\n \/\/ second row dots\n fill(111, 208, 140); \/\/ green\n sqSize -= sqInc;\n ellipse(shapeSpace + 2 * sqSize, shapeSpace + 2 * sqSize, sqSize\/dotSize, \n sqSize\/dotSize);\n\n \/\/ first row dot\n fill(120, 88, 111); \/\/ purple\n ellipse(shapeSpace, shapeSpace, sqSize\/dotSize, \n sqSize\/dotSize);\n\n \/\/ Return to saved settings\n pop();\n}\n\nfunction mousePressed(){\n colorScheme = -colorScheme;\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My process for this project was to alter basic shapes and colors to create a kaleidoscope. I used transformations so I could draw the same images many times in different locations. Moving the mouse left and right shrinks, enlarges, and repositions different elements. Crossing the horizontal midpoint reverses the rotation. Vertical motion with the mouse … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-section-b\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-03-Dynamic-Drawing: Section B”<\/span><\/a><\/p>\n","protected":false},"author":760,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72101"}],"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=72101"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72101\/revisions"}],"predecessor-version":[{"id":72121,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72101\/revisions\/72121"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}