- \n
- Provide links to the 20 sketches at the online p5.js web editor.<\/li>\n
- Provide a screenshot of each program, or an animated GIF if you prefer.<\/li>\n
- Unless you have other goals, make all of your sketches 600×600.<\/li>\n
- Categorize your blog post, 04-Exercises<\/em><\/li>\n
- Title your blog post, nickname-Exercises<\/em><\/li>\n<\/ul>\n
Exercises<\/h2>\n
01. One with Everything<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/one_with_everything.png\")
<\/a><\/p>\nSeriously take 5 minutes to browse the p5.js Reference<\/a>. Explore your graphics toolset by drawing one of each type of primitive it provides. For example: draw a rectangle, rounded-rectangle, ellipse, arc, line segment, B\u00e9zier curve, polyline, and multi-sided polygon. Experiment with their rendering options and parameters, such as fill color, stroke weight, closed or open, etc. Using push<\/a>(), rotate<\/a>(), translate<\/a>(), and pop<\/a>(), draw one shape rotated by 30\u00b0.<\/p>\n
02. Quadrilateral Zoo<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/quadrilateral_zoo.png\")
<\/a><\/p>\nWrite commands to plot the vertices of a family of quadrilaterals: square, rectangle, parallelogram, rhombus, trapezoid, dart, and kite. You’re not permitted to use the rect() command. (Can you add a control parameter to them, that links their form to the position of the cursor?)<\/p>\n
03. Spiral<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/spiral.png\")
<\/a><\/p>\nWrite a program that draws a spiral. Before you begin, check into different types of spirals, such as Archimedes\u2019s spiral<\/a> (the radius of which grows arithmetically) and the logarithmic or equiangular spiral<\/a> (whose radius grows geometrically). Consider different implementations, such as explicitly plotting your spiral using polar equations, implicitly rendering it by summing small differences (e.g. go forward, turn slightly, repeat), or approximating it piecewise with circular arcs.<\/p>\n
04. Transitioning Rectangles<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/transitioning_rectangles.png\")
<\/a><\/p>\nRecall that any <\/i>visual property can be linked to a loop variable, not just position. Use iteration to generate a series of rectangles. Your code should simultaneously control several of the rectangles\u2019 visual properties, including their position, height, and fill color. (Are you able to use a shaping function to make the transition non-linear?) Consider using the map<\/a>(), lerp<\/a>(), and lerpColor<\/a>() commands.<\/p>\n
05. Iteration with Functions<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/iteration_with_functions.png\")
<\/a><\/p>\nWrite a function<\/a> that encapsulates the code to render a simple visual element (a leaf, face, etc.). Give your function arguments that determine where the element will be positioned. Using iteration, call your function to display a grid of these elements.<\/p>\n
06. Random Splat<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/random_splat.png\")
<\/a><\/p>\nPlot the vertices of a many-sided polygon, using the functions sin() <\/span>and cos() <\/span>in the same way that you might generate a circle, but compute the position of each point with a radius that is slightly randomized. How closely can you make the result resemble a drop of ink? Consider using the beginShape<\/a>(), vertex(), and endShape() commands.<\/p>\n
07. Stochastic Elements<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/stochastic_elements-1.png\")
<\/a><\/p>\nCreate an evocative composition in which an iterative loop deposits small elements in random locations around the canvas. These elements might look like craters, potholes, pimples, ants, chocolate chips, holes in Swiss cheese…<\/p>\n
08. Recoding Schotter<\/i><\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/bild.jpg\")
<\/a><\/p>\nSchotter <\/i><\/a>by Georg Nees (1968) is a classic algorithmic computer artwork, now more than 50 years old, that depicts a gradient from order to chaos across a 12×22 grid of squares. In it, the squares\u2019 orientations become increasingly randomized towards the bottom of the page. Re-code this work, paying attention to detail.<\/p>\n
09. Billiard Ball<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/bouncing_ball.png\")
<\/a><\/p>\nCreate a sketch with a moving ball that bounces off the edges of the canvas. Take care that the ball never<\/em> appears to overlap the edge of the canvas. Suggestion: give the ball position and velocity variables; flip the sign of the velocity variables when the ball encounters the edge of the canvas.<\/p>\n
10. One-Person Pong<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/one_person_pong.png\")
<\/a><\/p>\nCreate a sketch that recreates the game of Pong for a single user. Can you add a scoring system?<\/p>\n
11. Hitomezashi Sashiko Stitching<\/strong><\/p>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/09\/hitomezashi_sashiko.png\")
<\/a><\/p>\nRandomly label the columns and rows of a grid with 0<\/span>s and 1<\/span>s. For each column, draw a vertical sequence of alternating dashes and gaps, beginning with a dash (for columns labeled 1<\/span>) or a gap (for columns labeled 0<\/span>). Similarly, draw horizontal sequences of dashes and gaps for the rows. Observe the resulting patterns.<\/p>\n
\n
As promised, here is @maths_kath<\/a>\u2019s #mathartchallenge<\/a>! <\/p>\n
Based on traditional Japanese stitching, this is a riff on hitomezashi patterns. Using grid paper, give each line (vertical & horizontal) a 0 or 1. (See pictures below, too,) \u201cStitch\u201d each line accordingly. #mtbos<\/a> #mathart<\/a> pic.twitter.com\/6i0zYx2rI4<\/a><\/p>\n
— Annie Perkins (@anniek_p) March 29, 2020<\/a><\/p><\/blockquote>\n
- Title your blog post, nickname-Exercises<\/em><\/li>\n<\/ul>\n