‘Axioma’ – 3D projection mapping at LLUM BCN Festival 2016 in Barcelona by Onionlab
Session 1: This class is an introduction to creative coding and how these techniques are used by artists and developers to produce projects that engage audiences in magical experiences. These might be installations, projections, data visualizations, sound art, games, or entertainment.
Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional. It is used to create live visuals and for VJing, as well as creating visual art and design, entertainment, art installations, projections and projection mapping, sound art, advertising, product prototypes, and much more. – Wikipedia
Creative Coding has its roots in the demoscene which began in the 1980s and continues to this day. The Demoscene has often been described as “digital graffiti” and differres from video game demos because the demos were originally created by hackers and crackers who made them as intros to hacked versions of video games with the copy protection removed. In our first lab we’ll discuss the documentary embedded below about the Demoscene to help put the history of Creative Coding into context. Note: an archive of demos associated with demoscene collectives can be found on pouet.net.
Please prepare for the discussion by answering the following questions:
1. What three things about the Demoscene surprised you in the film?
2. After seeing the film what do you find exciting about Creating Coding?
3. Identify two techniques you saw in the film that you’d like to know more about.
The 80s and 90s Demoscene: The Art Of The Algorithms
Session 2: Creative coders believe that computer programming can be used as a medium, like clay is to sculpture, or pigments are to canvases. Let’s look at a few examples of creative coders who focus on using code to create visual work. Chrome Experiments focuses on projects that demonstrate the capabilities of the Chrome browser. These projects are coded in JavaScript and often make use of Open Source libraries. The code is generally available to browse so we can learn from it or fork the code to make a similar or entirely different project.
Dutch artist Rafaël Rozendaal, who founded BYOB (bring your own beamer), takes the idea of creating “…something expressive instead of something functional” to an extreme. Essentially he uses the web as a canvas for “paintings” that employ interaction, motion, and sound elements. Here are a few examples of his website art:
www.yesnoif.com
www.eggalone.com
www.thisemptyroom.com
www.floatbounce.com
www.neogeocity.com
www.openthatwindow.com
www.innerinterior.com
NOTE: Why JavaScript? 1) JavaScript is easy to learn yet it can still be used for advanced software development. 2) JavaScript can run almost anywhere including mobile devices, tablets, laptops, desktops, and web servers. 3) JavaScript is an open standard based on ECMAScript that’s been around for 25 years with a vast community and available resources. 4) JavaScript has been extended through many libraries and frameworks that make it easier to perform tasks like web audio, animation, front-end development, user interface design, and much more.
Relevant Resources:
MDN JavaScript Reference
MDN JavaScript Basics
MDN JavaScript Guide Intro
Lab: Today we will cover the basics of JavaScript. Using the resources above from the Mozilla Developer Network we will work our way through a basic understanding of the JavaScript language and demonstrate the techniques required for Problem Set 1: (Simple Calculator).
Problem Set 1: (Simple Calculator)
Due: Week 2, Lab 1 (3 points)
Create a simple calculator using JavaScript and HTML forms. The calculator will be capable of addition, subtraction, multiplication, division, and three more operations of your choice (square root, exponents, random number generator, sine, cosine, tangent, logarithms, etc.). Earn one point for a working calculator and two points for expanding the functions. Note: do not use the eval() function!
1. All problems sets are due by the beginning of the lab following when they were assigned.
2. Submit answers on Canvas uploaded as HTML, JavaScript, CSS, .zip or otherwise as noted.
3. Solutions to each problem set will be given during demos on the day that they are due.