function setup() {\n createCanvas(600, 400);\n noStroke();\n}\n\nfunction draw() {\n background(0);\n drawGrid();\n noLoop(); \n}\nfunction drawGrid() {\n for (var y = 50; y < height + 50; y += 100) {\n for (var x = 50; x < width + 50; x += 100) {\n \/\/color gradient needs to be implemented\n ellipse(x, y, 100, 100);\n }\n }\n}<\/pre>\n
In the image, the RED component of the RGB color increases vertically from about 0 to about 255 (e.g. 10 to 250 in steps of 80). The GREEN component increases horizontally from about 0 to about 255. (For example, you might increase the green component from left to right from 10 to 250 as well, but the increase for each column would not be 80; what would it be?).<\/p>\n
Modify the “starter” program to produce the image above. Use only multiplication, division and\/or addition to compute color values from x and y.<\/p>\n
C. Generalizing gradient<\/h2>\n
Make a copy of your answer to exercise B into a new folder andrewID<\/strong><\/em>-05-C<\/strong>. Modify your program to make the following starting image (circle diameter and spacing is 10). Challenge: Define a global variable (var size = 10; ) and see if you can remove all “magic numbers” (i.e. numbers that are tied to a specific spacing only) so that changing size<\/strong> will change the circle size and spacing.<\/p>\n
$\"\"$ <\/p>\n
Once you have this programmed, replace “noLoop();” with “size = mouseX \/ 10 + 10;” and see if it works! If you’ve removed all of the “magic numbers”, then the grid of circles will scale larger or smaller as your mouse moves left and right with the color gradient adjusting to the number of circles drawn.<\/p>\n
D. Challenge Problem: using maps<\/h2>\n
Highly recommended if you are comfortable with creating “mappings” or transformations from loop variable values to coordinates, colors, and sizes by scaling (multiplication) and shifting (addition\/subtraction).<\/b><\/p>\n
Make a copy of your answer to exercise C<\/strong> into a new folder andrewID<\/strong><\/em>-05-D<\/strong>. Rewrite the nested loop program (the original color grid) using the map<\/strong> function to help with choosing the correct color value.<\/p>\n
ALSO: You can try to write a separate function to draw something other than a circle (but the same general size) and then have draw call this to draw each shape in the appropriate color.<\/p>\n
Handin<\/span><\/p>\n
\n
At the end of the lab, zip the lab-05<\/strong> 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.<\/p>\n<\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
Color Grids and Gradients Learning Objectives Practice using nested loops. Practice making image properties (location, color) depend on loop variables. Participation 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, … Continue reading “Lab Week 5”<\/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\/f2022\/wp-json\/wp\/v2\/pages\/14168"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/535"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=14168"}],"version-history":[{"count":15,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages\/14168\/revisions"}],"predecessor-version":[{"id":73179,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages\/14168\/revisions\/73179"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=14168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Color Grids and Gradients<\/h2>\n