- Due September 20
- Make a drawing of a robot using only code!
- Sketch should be
600x600px
or resize with the browser - Upload link to
p5.js
code to Canvas - See the code examples linked below and the video playlist for this week
- Email or drop into my student hours if you need help!
Today, we have amazingly complex programs for making art using computers like Photoshop and Maya. But the concepts behind these tools are the same as they were in the earliest days of computer graphics: basic shapes, a coordinate system, pixels and colors on a screen. This week, we'll explore these as our foundational toolset, get more familiar thinking about images as numbers and positions, and making things with code.
Building on the code examples we saw this week, your assignment is to generate a drawing of a robot using only code. Use any combination of shapes, color, stroke, transparency, etc to make your robots as detailed as possible. Your robot can be any style you like and doesn't have to be based on an existing one. This project is about practicing code and making something that looks really great!
If you already have some coding experience, please try to just use the methods we learned this week – adding fancy code and leveraging what you know will be encouraged later, but for now I'd like you to get used to the coordinate system and the p5.js
drawing commands. Think about how to leverage these simple tools (gradients drawn with lots of shapes of varying color, for example). Making variables and functions to clean up your code is ok, but no for-loops, interactivity, or animation please!
Bonus: give your robot an appropriate name so we know what to call it during the critique!
Each week, we'll go over code tutorials together in class but they will also be posted as a YouTube playlist and a collection of code examples in the p5.js
editor as well:
- Drawing of a robot (as detailed as possible) using only code
- Sketch should be
600x600px
or resizes to fit the browser window - Upload link to your code in the
p5.js
editor to Canvas by the start of class on the due date (if you're working with an external editor, just copy/paste the code into theP5JS
editor)
(If you have any technical issues with the p5.js
Editor, Canvas, etc don't wait until the last minute! Please email me right away or pop into student hours. Technical difficulties are not an excuse for late work, plus then you don't figure out what went wrong!)
Want to make your robot really awesome? Try these challenges:
- Show your robot from multiple angles, either as separate sketches or all in the same one!
- Make your image resizable using
width
andheight
instead of setx/y
positions; even better: add thewindowResized()
function so your sketch dynamically changes size with the browser - Try adding shading to your robot and/or drawing in perspective!
Many of the examples we'll look at each week are in the Images
folder!
- The collages of Henri Matisse, who used simple shapes to create beautiful and dynamic drawings
- Osamu Sato's book The Art of Computer Designing: A Black and White Approach
- Illustrators who use simple shapes to great effect:
- WIRED's list of The 50 Best Robots Ever
- The very sad Ketchup bot
- Some amazing robot art (which connects creative programming to a ton of other rad disciplines!) by Ian Ingram, Dan Chen, and Sougwen Chung
An example of how people used to "export" images from code in the early days of computer graphics: taking a photo of an oscilloscope screen!