Using primitive drawing functions such as line(), point(), and rect(), develop a system that makes its own drawings, and which—optionally—interacts with the viewer through some kind of input (e.g. mouse, keyboard, touch). Utilize concepts such as conditional logic, loops, custom objects (via class), and arrays as necessary. You will be using controlled randomness (w/ if/else and random()), and more to provide your drawing system with a degree of “choice.”
I use the work “system” above in an attempt to frame your efforts and how you think about what it is you are making. As you work, try to think less about the precise drawing you hope will appear and more about the method by which that drawing is made. Your task really thus has two parts: 1) create a method or set of methods by which pixels get drawn to the screen over time, and 2) once you have something to work with, iterate on that code until it creates something of interest.
What might make your system—and the drawing it produces—interesting? This is one of your challenges to determine. Could a system that draws and animates a single rect on the screen be “something of interest?” Perhaps. Consider a bouncing rect like ones we’ve made in class, going back and forth in the x direction, hitting an edge every second or two. Is that interesting? Maybe not. But what if that rect is moving so slowly over time that its movement is only perceptible with careful observation? That might be the start of something.
You have several paths you could follow in terms of construction. For example, you might setup a big if/else logic structure that governs activity based on probabilities through controlled randomness (e.g. if the viewer clicks in the top left, then if they also click in the bottom right within 100 frames, then 50% of the time drawing action X will happen, otherwise Y, etc, etc…). Alternatively, you might create a custom object using class and give it what you think of as behaviors. Then you can assemble a method for how those objects get created (and possibly, destroyed).
Whatever you construct, you also need to think about how your system changes over time. Will it create a perfect loop, seamlessly moving from end to start and start to end, asking the viewer to get lost in the repetition? Or will it avoid quick predictability, inviting the viewer to watch because they don’t know what will happen next? Or?
Versions:
You will have to create two different systems based on the above. These can be based on similar code, but should be different (e.g. some kind of different behavior over time, not just a color tweak).
Optional:
You can add optionally add user interaction via mouse/keyboard/touch input that affects the drawing process. Perhaps that input will be directional, or maybe it will be disruptive? Whatever you choose, how that interaction works—and why—is up to you.
Requirements:
While there are no specific code requirements, you will be expected to utilize functions and techniques we’ve already used in class (see ‘essential concepts’ below). In other words, a successful assignment is very likely to utilize loops, conditional logic, arrays, variables, custom objects, etc. Further, don’t go to Google to find something fancy to adapt/tweak. The goal here isn’t to write the most advanced program in the world, but to work within the above constraints to create something compelling in terms of aesthetics and interaction, while also being a program that is your original work which you fully understand. In other words, the code you submit must be code you can explain! And while the number of lines of code is also not specified, the complexity of your project should be commensurate with the time allotted (both in class and outside of class).
Essential functions, variables, keywords:
let, class, this, function, etc.
line(), rect(), point(), ellipse(), etc.
rectMode(), ellipseMode(), angleMode(), colorMode()
fill(), stroke(), noStroke()
for()
if() / else()
mouseX, mouseY, pmouseX, pmouseY
mouseButton, mousePressed
mousePressed(), mouseReleased(), mouseMoved(), mouseDragged()
random()
`beginShape(), endShape(), vertex()
translate(), rotate(), push(), pop()
map()
select(), value(), changed()
Essential Concepts:
variables
loops
conditionals
simple debugging
controlled randomness
algorithms
mouse interaction
arrays
objects / classses
Examples:
See our examples page for plenty of ideas.
Timeline:
3 weeks (for versions 1 and 2)