week01 01 creative coding basics drawing - UX-UI-Design-Lab/DesignAesthetics3 GitHub Wiki
agenda:
- about the course/ classmates/ TA/ instructor
- about creative coding, p5.js
- activity: drawing by hand
- drawing by code
- how to save, share, submit the work
We have about 20 students (per session). we will meet twice a week for about three hours each for seven weeks. There will be four main assignments and one final presentation. During classtime, 1) we will do some hands-on activities either individually or as a group and discuss/share what we learned from the activity; 2) we will do some internet search to find examples and analyze the visual elements so we can learn how to design from previous works; 3) we will write, experiment, debug, and criticize with the codes how to design visuals on screen.
This course is about creative coding for the foundations in communication design. We will learn how to use computational tools (code, program) to create design. As other artistic medium may go, learning how to use the tool is helpful for your ultimate mastery in design/artistic skill especially in terms of efficiency, but it won't guarantee that your work would be the great design/art or you will magically turn to a great designer/artist. It is not. It may help you to do more, to see more, to think more, and to share the work easier than ever to iterate the fast rounds of revisions toward perfection, BUT it may make you feel frustrated, limited, passive, dependent, and/or vulnerable. We will explore the exciting possibilities with computational methods in design (and a creative process) in a way that to better understand the great minds before us and we will try our best to see like them - and hopefully I want you to feel like making something like them.
p5.js is a javascript library, very user-friendly and easy to use. It uses <canvas> API in html and javascript to draw something through web-browser. Of course, there are other many solutions similar to p5 (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) but what p5 makes special is its mother project "processing" has been successful to create a community of artists who uses computational methods for their creative medium. (cf. the original processing is based on JAVA, which is more like C/C++, totally different from javascript, and processing has other language versions like python; the second note, it turned 20years old!).
You can check what you can do with p5 -- https://p5js.org/reference/
The main space we will hang out is p5 web editor -- https://editor.p5js.org/ I want you to visit and sign-in (to save your works).
Let's draw something! But before we do it by code, I want you to sketch it by hand.
Grab any paper around you, use any pen/pencil/brush, draw a rectangle.
If you can't find the physical objects around you, open any digital tool you feel comfortable with -- illustrator, photoshop, invision, figma, framer, paint, ... it doesn't need to be fancy. Just draw a simple rectangle.
Take a picture of the drawing or screen capture it (in MAC, cmd+sht+3 or 4+drag&drop the window you drew the rectangle) - you need to have it for your participation credit. This is step1.
The next step is to see how you can transfer the rectangle into code. What do you think you need to know to explain to the computer that you want to draw a rectangle? HINT: Are you sure the computer knows "rectangle" as "rectangle"? Let's check.
In p5.js reference (= this reference is like a dictionary, you may want to be close to it), find "rectangle" or similar. What can you see?
Once you find the way how to tell p5.js about "rectangle", what other things you need to tell the computer? (HINT: the p5.js reference is your fiend).
I will demonstrate the coding process how you draw the sketched rectangle onto the web editor viewer.
Five steps of sketch for drawing by code
- step1: draw a shape (by hand - it is always helpful to have a visual example or prototype)
- step2: find the name to call it from the tool's point of view
- step3: find a size or dimensions (it can be relative (proportional) to the background canvas size), write the numbers
- step4: find a position (on the canvas), write the numbers
- step5: make it visible (by border/fill size, color), write the numbers
If you have such a detailed sketch, you can draw it by code. And show what you drew. Screen capture what you have for the outcome of the drawing (including the whole canvas).
Before you exit the class meeting, I want you to save your work (make sure the sign-in) - and share (file > share, "select present", and copy the link) to submit.
Create a simple composition on the canvas sized 600px by 600px, with lines and circles - up to five shapes in total. Must include one line (or line segment) and one circle.
You may experiment with various thickness, length, size, and colors but the total number of shapes should be less than five including one line and one circle. for example:
- acceptable: one line + one circle, two lines + one circle, one lines + two circles, four lines + one circle
- NOT acceptable: five lines only, five circles only, ten lines and one circle, five circles and one line.