SAIC | ATS 2101 | Art and Technology Practices

Week 6 : Project 1

Homework

Tutorial

Project 1: Vera Molnar remix

Create a remix of Vera Molnar's series des(ordnes). You will use p5*js to generate a grid-based composition using randomness to create variation in the piece.

Your piece will be drawn using a pen plotter on a ~12inch x 12inch piece of white paper with black pen ink. For this reason, do not use any color, fill, or strokeWeight as it will not be reflected in the final result.

requirements

  1. nested for loops to move the computer's drawing position from left to right, top to bottom.
  2. a third for loop nesting inside which draws several shapes on top each other at the drawing position
  3. the arithmatic and variables used in combination with random() in order to create variation in how each shape is drawn.

tips

  1. Use the tutorial code as a framework for making something of your own. Let's have some fun with it! Make sure you've saved your first copy, and then duplicate your sketch. Now, how can you use this nested for loop concept to create your own work? What other features (color, stroke, stroke weight, etc.) can you use to change the look and feel of this piece? If you've added randomness in the bonus section: how can randomness make a return and enliven the feel?
  2. Don't try to do everything at once. Break things down. Follow these steps below if it is helpful.
  3. Before you get started, open your p5 editor and the "Getting Started" text. Work through Chapter 4, example by example. This seems tedious, but it will build up comprehension.
  4. When you're ready to begin the code sketch: First, draw a single shape. Familiarize yourself with what arguments do what. Will you draw a square, a circle, or a different 2d primitive shape? What argument will you need to use? How many arguments do you need? What does what (position, size, etc.)?
  5. Now, create a row of shapes with a for loop inside your draw loop. Insert your shape code into the for loop and use the loop's variable (i or s or whatever you choose) to multiply the x value and push it to the right.
  6. Not sure what this means? Check the reference for for loop. Watch the videos below. Read the section in the book on for loop again -- you'll see this in action!
  7. Then, put that for loop inside a new for loop. Make sure the new loop has a different variable than the first. Use this variable to alter the y position of the shape (use multiplication again), and hence to draw consecutive rows at different heights in the Canvas. Get this working before you move on!
  8. Still stuck? Email your prof and ask for a quick appointment to talk through the issue. Check the reference and other materials. Phone a friend in your group and see if they are stuck too.
  9. You'll need to use the random() function to introduce variation to the code. What elements are randomized? What is the range of randomization? How will you use arithmetic to integrate the random number into your shape's coordinates? Now is a good time to insert noLoop() into your code so that you are only getting one drawing per "play".

Examples

Other Materials

Key Concepts: