Wed, Nov 24
Computational Art
Today's objectives
- Program structure (setup and draw loops)
- Variables
- Simple graphics
- Loops
- Randomness
- Mouse input
- Simple animation
- Libraries
Resources
Presentation
Handout
Handout: Processing PDF
Basic Processing Template
Loop example
Random values example
Mouse input example
Computational art with Processing
Resources and links
- Getting started
- https://processing.org/tutorials/gettingstarted
- Reference
- https://processing.org/reference
- Drawing shapes
- https://processing.org/tutorials/coordinatesystemandshapes
- Using colour
- https://processing.org/tutorials/color
- Interactivity
- https://processing.org/tutorials/interactivity
Processing: Start Here. Downloads, tutorials, references.
Handout: Processing PDF
What can processing do? Here are lots of examples. Processing exhibition
Digital art museum: A collection of digital art works, covering the early eras especially well
Reactable: Making music with touch
Videos
- http://reinoudvanlaar.nl/project/leavespattern/: Generative pattern design
- MIT Media Lab Identity: Generative logo design
- PixelRoller: A digital "paint roller"
- 3D printing -- with sugar!: Apparently it smells wonderful
- 3D Printing: Powder Printing
- 3D Printing: Extrusion Printing
- Laser Cutting from 2d vectors
Physical computing
Resources and links
Arduino: The most popular microcontroller for artists and designers
Arduino tutorial: A good starting point
Wearable computing: the Arduino LilyPad: Incorporating microcontrollers into garments
Arduino Notebook: Another good starting point
Videos
inFORM - Interacting With a Dynamic Shape Display from Tangible Media Group on Vimeo.
- Aqua•litative: Visualizing rainfall with physical computing
- Writing with light: Persistence of vision+microcontrollers+dog.
- One Hundred and Eight: Arduino and Processing: Digitally controlled sculptures
- http://www.bakertweet.com/: A whimsical microcontroller-based device
- maeve: A hard-to-explain information visualization project
Mæve installation @ Venice Biennale 2008 from Maeve installation on Vimeo.
- Oasis: Simulating life in a digital pond
- What It Is Without the Hand That Wields It: Blood!
- Stepper Motor Super Mario It's a stepper motor.
- Safety scarf
Examples
- Processing Examples
- Open Processing
- Arduino Example Projects
- Microcontroller resources for students and teachers
Many examples found at the Arduino Playground.
Processing assignment
Using Processing, create a simple program of your own design that demonstrates some of the techniques we learned in class.
Mouse input, loops, random number generation, colour and drawing are all topics to explore.
Points to keep in mind:
- All code must be your own. Include your name in a
//commmentat the top of your sketch. Include a credit and source for any code you have used as a reference or model, and include your name and the assignment date. Use a comment at the beginning of your sketch to do this. - Test carefully
- Use the Processing "Archive Sketch" function (in the "Tools" menu") to create a .zip file of your sketch - submit that zip file.
- Use the "Reference" function in the "Tools" menu to learn more about additional functions.
Upload to Brightspace by 6 pm, Tue, Nov 30.
Name your file YOURLASTNAME_Assignment_12.zip
Simple game mechanism
Preparation
- Have Processing open and ready to go.
- For home use: Download, install and test Processing. Note: we will stick with Processing version 3.5.4 - scroll down the page to find the download link.
Quiz 2
Quiz: Dec 01Quiz preparation
The quiz covers all topics dealt with from Wed, Oct 06 to today. Review all handouts, videos, presentations and other materials.
This includes:- Illustrator: Techniques and tools
- Vector concepts
- HTML and CSS concepts: Note: While structure and concepts are important, you will not be expected to write code from memory.
- InDesign: Tools and techniques
- Basic typography
Formatting for Usability Assignment
Needs to be done in InDesign.
Margins a minimum of 1 inch left and right.
Use a leading value of twice your body text point size.
Title page: Title of essay, your name, your student number, instructor's name, course name and number, due date.
Pages need to be numbered, starting with the first page of your essay (not the title page). Use a header with the title of the essay in it, and your name. Use master pages.
You must use paragraph styles for all content.
Cite the name of the web site on a separate page titled "Works Cited."
Getting your page numbers to start on the first text page (not the cover page) can be tricky. You need to define a section and then remove the extra automatic page number from the cover page. Refer to: Page numbers and sections
Use the MLA format for the citation of the web site on the "Works Cited". List any other references in the "Works Cited" page. Follow the MLA style exactly; you must also include the URL for any web sites. (URLs are optional in MLA style, but I am requiring you to include them. ZoteroBib is a good resource for generating references.Include the usability test with your participant as a "personal interview" in your Works Cited - find out how to format that here.
Upload both the InDesign file (does not need to be packaged) and a PDF.
Upload to Brightspace by 6 pm, Tue, Dec 07
Name your files YOURLASTNAME_Review.pdf and YOURLASTNAME_Review.indd.Remember that this is the date for the final version - you still need to submit a rough draft beforehand.
Quick topics
Intellectual Property
Michael Geist's web site is the best starting pointing for news on intellectual property in Canada.
A primer on Canadian Copyright Law.
Open source concepts
A good definition of open source
Creative Commons: an "open source" license for creative works
Industrial design
The Graphical User Interface gallery
Using Processing on the Web.
While Processing sketches can be run within the Processing IDE, or exported as applications for Windows, Linux or MacOS, you can also insert them in web pages. Processing uses Processing.js. To do this, you need to do several things:
- First, you need to enable JavaScript mode. Choose "JavaScript" from the mode menu at the top right of the Processing IDE window.
- If you don't see JavaScript mode as an option, choose "Add Mode..." and install it.
- Switch into JavaScript mode and choose "Export" from the file menu. This should create a "web-export" folder and open it.
- Within this folder you will find the "processing.js" library, the ".pde" file which is your sketch, and an HTML file that allows you to preview the sketch. You can look the the HTML to see how the sketch is shown on a web page, and insert that code into your own page.
- Note that some older browsers will have problems displaying Processing files, and some sketches may need changes to work properly in JavaScript mode.
- A good tutorial on how to do this is here.