{"id":7534,"date":"2016-11-28T04:43:42","date_gmt":"2016-11-28T09:43:42","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?page_id=7534"},"modified":"2021-11-23T11:51:31","modified_gmt":"2021-11-23T16:51:31","slug":"week-13-lab","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/week-13-lab\/","title":{"rendered":"Lab Week 13"},"content":{"rendered":"\n

Learning Objectives<\/h3>\n

Implement a recursive function to draw a Sierpinski triangle.<\/li>\n
Draw a set of nine cubes in three-dimensional space as a 3 X 3 X 3 set of cubes.<\/li>\n
Draw a Rubik’s Cube in three-dimensional space by creating 9 cubes using six faces each of different colors.<\/li>\n<\/ul>
Participation<\/h3>\n
In this lab\/recitation, you will write some p5.js programs that use the techniques you’ve learned in class so far. The goal here is not just to get the programs done as quickly as possible, but also to help your peers if they get stuck and to discuss alternate ways to solve the same problems. You will be put into breakout rooms in Zoom to work on your code and then discuss your answers with each other, or to help each other if you get stuck. Then we will return to discuss the results together as a group.<\/p>\n
For each problem, you will start with a copy of the uncompressed template-p5only.zip<\/a> in a folder named lab-13<\/strong>. Rename the folder as andrewID<\/em>-13-A<\/strong>, andrewID<\/em>-13-B<\/strong>, etc. as appropriate.<\/p>\n\n\n
A. Sierpinski Triangle<\/h3>\n\n\n\n
$\"\"$ <\/p>\n\n\n\n
This is an example of a fractal, an image that is self-similar. When you look at parts of the image, you see the original image. <\/p>\n\n\n\n
One of the most famous fractals is the Sierpinski Triangle<\/a> which is a triangle that is divided up into three triangles which are divided up into three triangles each, which are divided up into… you get the idea.<\/p>\n\n\n\n
To draw this sketch, we start with a large triangle of blue. We then find the midpoints of each of the three sides and draw a triangle between these points in the background color. Finally, we repeat the midpoint process with each of the three remaining blue triangles that are formed when we draw the triangle in the background color. Each of these triangles is “split” into three smaller triangles. This repeats until we reach the number of levels of repetition.<\/p>\n\n\n\n
$\"\"$ \n \n $\"\"$ \n \n $\"\"$ \n \n $\"\"$ \n \n $\"\"$ <\/p>\n\n\n\n
Complete the function splitIntoThree<\/strong> based on the comments to guide you.<\/p>\n\n\n\n
var numLevels = 4;\n\nfunction setup() {\n createCanvas(400, 400);\n frameRate(10);\n noStroke();\n}\n\nfunction draw() {\n background(220);\n fill(0, 0, 255);\n triangle(200, 50, 350, 350, 50, 350);\n splitIntoThree(numLevels, 200, 50, 350, 350, 50, 350);\n noLoop();\n}\n\nfunction splitIntoThree(levels, x0, y0, x1, y1, x2, y2) {\n \/\/ base case: if there are no more levels left to draw, we're done:\n\n\n fill(220); \/\/ background color\n var x01 = midpt(x0, x1); \/\/ midpoint of x between x0 and x1\n var y01 = midpt(y0, y1); \/\/ etc.\n var x12 = midpt(x1, x2);\n var y12 = midpt(y1, y2);\n var x20 = midpt(x2, x0);\n var y20 = midpt(y2, y0);\n\n \/\/ draw a triangle using the midpoints:\n\n\n \/\/ split each of the remaining blue triangles with one less level\n \/\/ (hint: you should have three recursive calls here,\n \/\/ each call will have a list of x and y points for one of the\n \/\/ remaining blue triangles):\n\n\n\n\n}\n\nfunction midpt(a, b) {\n return (a + b)\/2;\n}\n\n<\/pre>\n\n\n\n
B. Cube of Cubes<\/h3>\n\n\n\n
Write a program that creates a 3 X 3 X 3 set of cubes. each of size 100 X 100 X 100 in three dimensional space. Remember that you need to use the WEBGL<\/strong> renderer, and that the camera is initially facing in the -z direction, with x increasing toward the right and y increased downward and the origin (0,0,0) is initially in the center of the canvas. Use the orbitControl<\/strong> function in the draw function to allow you to use the mouse to move around the set of cubes once you’re done to check your work. Here is a picture of the expected result, once the mouse is used to move around in 3D space a little.<\/p>\n\n\n\n
$\"\"$ <\/figure>
You should use the box<\/strong> function to create each cube, remembering that this function will draw the shape centered at the origin, so to draw all nine boxes, you will need to use transformations to move the origin. <\/p>\n\n\n\n
LOOK FOR PATTERNS HERE!<\/strong> Where is the center of each of the 9 cubes? Do you see the pattern? You should be able to use a set of three nested loops to solve this problem, and if so, you will only need to write a call to the box<\/strong> function once.<\/p>\n\n\n\n
C. Rubik’s Cube<\/h3>\n\n\n\nMake a copy of the code for the previous problem and modify the copy so that the 3 X 3 X 3 cube you draw looks like a Rubik’s Cube<\/a> in a solved state (ie. each side is all of one color). <\/p>\n\n\n\n
$\"\"$ <\/figure>
$\"\"$ <\/figure>
$\"\"$ <\/figure>
$\"\"$ <\/figure>
First, add a global variable size<\/strong> that represents the size of the box so that you can use other values other than 100. Update your program to use size instead of 100.<\/p>\n\n\n\n
Now, think about drawing the 9 boxes in color. This is a bit more challenging than it might seem. When you draw each of 9 boxes, you need to color each side a different color,<\/p>\n\n\n\n
Front: white
Back: yellow
Left: red
Right: orange
Top: blue
Bottom: green<\/em><\/p>\n\n\n\n
but the box<\/strong> function won’t let you do this.<\/p>\n\n\n\n
Instead, replace the box<\/strong> call in your draw<\/strong> function with a call to a separate function drawColorBox<\/strong> that you will write. In this helper function, you should draw a box centered at the origin that has 6 faces (but you won’t use the box<\/strong> function anymore). Draw a wire view of a box on a piece of paper and determine the coordinates of the 8 corners. HINT: Let sz2 be half the size<\/strong> variable; your coordinates should all be in terms of sz2.<\/em> To draw each face, you will fill<\/strong> with the appropriate color, and then use beginShape<\/strong>, vertex<\/strong> (4 times) with the appropriate coordinates and endShape<\/strong> to create a square. (You can’t use the square<\/strong> function in 3D space since it doesn’t have a z coordinate parameter.) You will need to draw 6 squares (faces) to make the box. <\/p>\n\n\n\n
Here’s code for the front face to get you started:<\/p>\n\n\n\n
fill(\"white\");\nbeginShape();\nvertex(-sz2, -sz2, sz2);\nvertex(-sz2, sz2, sz2);\nvertex( sz2, sz2, sz2);\nvertex( sz2, -sz2, sz2);\nendShape();<\/code><\/pre>\n\n\n\nYour draw<\/strong> function will then call this drawColorBox<\/strong> function 9 times to create the 9 boxes. When you’re done, you should be able to see something that looks like a Rubik’s Cube. <\/p>\n\n\n\n Change the size to 50 for a smaller cube. Use the mouse to look around the Rubik’s Cube to make sure you correctly programmed all sides. If your mouse has a scroll wheel, scroll in and see what happens when you get too close.<\/p>\n\n\n\nD. Recursive Tree (Optional challenge)<\/h3>\n\n\n\nTry to draw this picture recursively:<\/p>\n\n\n\n<\/figure>Handin<\/h3>\n\n\n\nAt the end of the lab, zip the lab-<\/strong>13 folder (whatever you got done) and submit it to Autolab. Do not worry if you did not complete all of the programming problems but you should have made it through problems A and B, and you should have some attempt at problem C. Problem D is not required, but it is given for those who want a challenge.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"Learning Objectives Implement a recursive function to draw a Sierpinski triangle. Draw a set of nine cubes in three-dimensional space as a 3 X 3 X 3 set of cubes. Draw a Rubik’s Cube in three-dimensional space by creating 9 cubes using six faces each of different colors. Participation In this lab\/recitation, you will write … Continue reading “Lab Week 13”<\/span><\/a><\/p>\n","protected":false},"author":535,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/7534"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/535"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=7534"}],"version-history":[{"count":33,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/7534\/revisions"}],"predecessor-version":[{"id":69206,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/pages\/7534\/revisions\/69206"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=7534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

C. Rubik’s Cube<\/h3>\n\n\n\nMake a copy of the code for the previous problem and modify the copy so that the 3 X 3 X 3 cube you draw looks like a Rubik’s Cube<\/a> in a solved state (ie. each side is all of one color). <\/p>\n\n\n\n<\/figure><\/figure>

D. Recursive Tree (Optional challenge)<\/h3>\n\n\n\nTry to draw this picture recursively:<\/p>\n\n\n\n<\/figure>