Skip to content

Latest commit

 

History

History

Week01_DrawingBasics

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

A grid of images of some vintage and modern robots

ROBOT DRAWINGS

TLDR

  • 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!

ASSIGNMENT

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!


CODE EXAMPLES/VIDEOS/TEMPLATE

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:


DELIVERABLES

  • 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 the P5JS 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!)


STRETCH GOALS

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 and height instead of set x/y positions; even better: add the windowResized() function so your sketch dynamically changes size with the browser
  • Try adding shading to your robot and/or drawing in perspective!

INSPIRATION

Many of the examples we'll look at each week are in the Images folder!


BONUS

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!

Image of a large Polaroid camera connected to an oscilloscope