Workshop: Introduction to Creative Coding
During this workshop we introduce programming concepts using the web based creative coding library p5.js (https://p5js.org), which is built using JavaScript.
Systems in art & design
Week 1 - Coordinates, shapes and colour
Week 2 - Animation, conditionals & random numbers
Week 3 - Iteration, arrays, objects and pixel arrays
Week 4 - Other inputs and APIs Systems in art & design
Paul Rand
Paul-Rand.jpg Eye-Bee-M-Poster.jpg
Image not found or type unknown Image not found or type unknown
Another kind of definition is that design is a system of relationships between “all of the aspects of the problem, which means the relationship between you and the piece of canvas, you and the eraser, you and the pen. The relationship between the elements proportions, which mean the relationship of sizes. I can go on all day. Paul Rand
Bauhaus
Obj.Id_74621_web_hoch.jpg Bauhaus-Anni+Albers,+Tapestry,+1926-1964.jpg
Image not found or type unknown Image not found or type unknown
josef-albers-never-before-f.jpg joseph-albers-homage-to-square-2.jpg
Image not found or type unknown Image not found or type unknown Joseph Albers Joseph Albers
Swiss Style
Swiss 1 Swiss 2
Image not found or type unknown Image not found or type unknown
Linear Perspective
15th century experiments in Linear Perspective. linear-perspective-header_0328p_duomo6_b.jpgEntrega_de_las_llaves_a_San_Pedro_(Perugino).jpgvase-in-perspective.jpg
Image not found or type unknown Image not found or type unknown Image not found or type unknown
Sol Lewitt - Instructions for making art
In conceptual art the idea or concept is the most important aspect of the work. “When an artist uses a conceptual form of art, it means that all of the planning and decisions are made beforehand and the execution is a perfunctory affair. The idea becomes a machine that makes the art. Sol LeWitt
Variations of Incomplete Open Cubes sol-lewitt-instructions-1972.jpg
Image not found or type unknown Image not found or type unknown
John Cage - Music of Changes and Chance
Music-of-changes-4-1.gif 34e9e9a994e5cda59d9940d6d0ce0d6c.png
Image not found or type unknown Image not found or type unknown
Kerry Strand - California Computer Products Inc
nt6-cd7b343bfb9b34d15d9352474098e622_large.jpg stand01.jpg
Image not found or type unknown Image not found or type unknown
John Albers - The Responsive Eye (1965) & Michael Noll
re2-c916bff9ad2a52de3c87bba89eee02eb_large.jpg Noll_Fig72.jpg
Image not found or type unknown Image not found or type unknown
an intellectual and active creative partner that, when fully exploited, could be “used to produce wholly new forms and possible new aesthetic experiences
Cybernetic Serendipity - Institute of Contemporary Art (1968)
cybernetic-serendipity-poster-web.jpg
Image not found or type unknown
bild.jpg
Image not found or type unknown Gordon Pasque - Colloquy of Mobiles
1. Catalogue
2. Critique
Exemplary for the appeal of the great promises made early in the computer “age, Cybernetic Serendipity epitomizes the dilemma much of media art faces today: its complicated relationship with the socio-economic environment, the difficulty of engaging with its own historicity and transcending mere techno- fetishism, and the all-too-familiar sense of a naïve, unbridled optimism with its inevitable pitfalls and false dawns. link
The utilization of scientific know-how, however, did not simply lead to a re- “valorization of the art object and the materials that could be made of it. On the contrary, the integration of technology engendered a growing interest that went beyond a strictly object-oriented approach toward practices that focus on process, ideas and (inter-) actions. Concomitant with experiments in participation and interaction, with happenings, performances, land art and conceptual art, media art is often regarded as a conclusion of the de- materialization of the art object. link
Digital Culture by Charlie Gere
Section on Art and Cybernetics from 1950s in Europe and the US.
Project Cybersyn 141013_r25584_rd.jpg
Image not found or type unknown
The Planning Machine
Jack Burnham - System Esthetics
Software-s.jpg
Image not found or type unknown
Art that is transactional in that they deal with underlying structures of “communication and energy exchange
1. http://www.tate.org.uk/research/publications/tate-papers/05/all-systems-go-recovering- jack-burnhams-systems-aesthetics 2. https://monoskop.org/images/0/03/Burnham_Jack_1968_Systems_Esthetics_Artforum.pdf 3. http://www.tate.org.uk/whats-on/tate-modern/exhibition/open-systems Week 1 - Coordinates, shapes and colour
Outcomes
Set up development environment Understand the principles of locating points on screen Drawing shapes Understanding additive colour and using RGB colour space Use browser-based tools for debugging and logging Animate shape or colour using variables
What is p5.js?
During this series of workshops you will be using a library called p5.js to learn the fundamentals of programming. The p5.js project is the most recent part of a complex history of open-source, creative coding libraries going back to the early 2000s. It is supported by the Processing
Foundation, which is a not-for-profit organisation that emerged from the creative coding library
Processing.
From a technical perspective, p5.js is simply a JavaScript library. A library is a collection of code put together to simplify a task or a collection of tasks. In this case p5.js provides a lot of functionality that makes it easy to draw shapes, colours and handle user interaction within a web page.
This video from Daniel Shiffman is a good introduction to p5.js and the creative coding platforms that preceded it:
Supporting code
The code for this workshop is hosted on Github, which is a web-based repository for hosting and versioning code.
Download the code and unzip it on your desktop.
The code is also available to view directly on Github's website.
A p5.js project
In this exercise you will set up a p5.js project using the Atom text editor, then examine the different files and run the code in a browser. The code to support this section is located in the following directory and is available to view on Github:
/00_empty_project/
Topics
p5.js project structure What is a sketch? What do the setup() and draw() functions do? Adding your project to Atom Using the browser debugging tools
A p5.js project
Below is the structure of a p5.js project, which is essentially a web project made up of HTML and JavaScript files.
/00_empty_project/
├── index.html
├── libraries
│ └── p5
│ └── p5.min.js
└── sketch.js index.html p5.js is a JavaScript library designed for drawing to a web page. For JavaScript code to run in a browser it needs to be included in a HTML file. The index.html file is the 'entry point' for the browser to access our project code. Note the use of the