Programming for Designers
We acknowledge the Gadigal people, traditional owners of the unceded land on which this campus sits.
But why do I, a designer , need to code?



We are all unicorns
Designers surveyed in the Design In Tech Report (John Maeda, 2015) found that 1/2 of all design professionals can code to some degree and that 93.5% of designers say that coding is essential or valuable.

Be a designer who codes
Using code as a prototyping tool you can test almost any of your ideas, from a single page website to an interactive web app. You can take a design from nothing to something all by yourself.

Code as art
Generative design is art that, at least in part, makes itself.
We call these algorithmic processes and they can assist in the creation of designs that are difficult to illustrate or even conceive. We can also use these algorithims to create simple animations or iterations of a design as we search for something we like.
Lady Lovelace's Objection
"The Analytical Engine has no pretensions to originate anything. It can do whatever we know how to order it to perform." -- Ada Lovelace, 1842.

Lady Lovelace's Objection
"The Analytical Engine has no pretensions to originate anything. It can do whatever we know how to order it to perform." -- Ada Lovelace, 1842.
"Machines take me by surprise with great frequency." -- Alan Turing, 1950.

Harold Cohen and Aaron
Artists have been exploring code as a tool to make art for a long time. Pictured on the left is a painting called Meeting On Gauguin's Beach, 1988 by Harold Cohen and Aaron.

Aaron is a robot
Harold Cohen initially developed Aaron to create outlines of artworks that he would color and finish. Later iterations of Aaron were able to choose colors on their own and form human figures. As this system became more sophisticated Aaron transitioned from a tool to a creative partner for Harold.
More details on Aaron
Aaron
This system he built was able to make a distinction between foreground, background, human figure, and facial expression. With this ability, Aaron was tasked with making key visual composition choices in each artwork. Note that the most complex artworks were generated in the early 1990s far ahead of its time and shocking that it was drawn primarily by a robot.

Aaron
We will be taking inspiration from historical examples of computer based art and using them to better understand how to program.

Modern Examples of Art and Code
Algorithmic design can be found everywhere, here are few modern examples of how "creative coding" has lead to new and amazing works of art and design.

JavaScript via P5.js
JavaScript is a scripting language that drives the internet. We are going to be learning this through the lens of P5.js over the next 13 weeks.
P5.js is a creative coding library which allows beginner programmers to quickly draw shapes to screen. It's what were going to use as a starting point for programming.
P5.js site
What you need on your computer and what tabs you need open for this class
Google Chrome This unit has been designed to work for this browser.
P5.js Reference The dictionary. This is what you will use everytime you code.
P5.js online editor Easiest editor to get started with, create an account so you can save your work.
Slack Information, announcements and assistance from tutors. The link for this will be on your canvas page.
Slack

Slack is our preferred point of contact. It's a great place to ask any of the tutors or your peers coding questions. Post to the general channel if you feel that your question will help anybody else in the course. We will run through some best practices in the coming weeks.
Download SlackThe P5.js reference
P5.js has a plethora of functions designed to make things easier
from drawing an ellipse to helpful mathematical calculations such as
dist for finding the distance between two points.
When in doubt always check the reference first
https://p5js.org/reference/#/p5/background- Examples - Shows applications of this function and usually shows it relationship the rest the canvas.
- Description - Outline general information about the function and reference other functions that are directly related.
- Syntax - This shows the parameters that it can take and all the ways that it can be structured.
- Parameters - Specific information about the specific role of all these numbers.

