Kontakt  –  Aktuelles  –   Drucken

Zurück zur Übersicht

The Browser is the Canvas: The Internet is the Medium - Sarah Sole (Ferguson)

Saturday, 20 October, and Sunday, 21 October, 2018, 10-4pm                   Registration deadline: Tue, October 16, 2018                                              
bbk-bildungswerk, Köthener Str. 44, 10963 Berlin                                    (3. Etage, Seminarraum, Fahrstuhl)
70 €

2 / 6

This course is designed for all artists interested in using the Internet for conceptual and creative production. Artists interested in web-based projects involving animation, interactivity, and generative art, will learn how to render their content and deploy it full-screen and responsive on any device (phone, tablet, laptop). They will also learn how to publish and integrate their work into an existing webpage. The engine behind all of this is WebGL, the new standard for rendering rich graphics and multimedia on the web using HTML5.

WebGL, short for “Web Graphics Library”, is a collection of JavaScript methods and procedures for rendering 2D and 3D interactive content inside a web browser. It is supported by all major browsers and runs on both desktop and mobile phones/tablets. Content is scripted directly into the HTML5 Canvas element, which can then be integrated into any web page.

With the use of JavaScript libraries, implementing WebGL is not as daunting as it may sound. In fact it’s possible to create rich compositions and interactive experiences without knowing much JavaScript at all. Since artists have always been able to exploit latent possibilities within emerging technologies, more and more artists are embracing WebGL because of the simplicity, as well as, inherent possibilities in using a robust, open-sourced graphics library.

In this course we will develop basic proficiency in three libraries: Pixi.js, GSAP and P5.js.



Further Reading

Pixi.js is the fastest 2D graphics renderer for WebGL. It’s API is designed to simplify the process of loading resources, converting to textures, arranging the stage and adding rules for interactivity. Artists are able to dynamically create paths and masks, layer content and apply blend modes and adjustment filters, as is done in Photoshop. Indeed, artists can create compositions within Photoshop, import those layers into Pixi.js to be arranged and animated for the most performant animation possible. This makes Pixi.js a powerful alternative for publishing animated works. In other words, instead of exporting a large file (gif, mp4) one can upload an HTML file, with a linked JS file, to the root directory of a web page and run the animation in the browser using the GPU of the graphics card, instead of the CPU of the computer.

The library GSAP is the only JavaScript library with a built-in timeline in which to sequence scenes and synchronise audio, akin to composing within Adobe After Effects. It works seamlessly with Pixi.js and can animate any image and play any audio loaded into the Pixi stage. It is highly performant and offers an intuitive interface where one can configure complex motion, including animation along a path or Bézier curve, without any coding at all. Using basic JavaScript functionality, scenes can be scripted in separate blocks and then arranged on a master timeline, providing a clean way to control timing and sequencing in a longer animation. One of the advantages of using GSAP with Pixi.js is that no CSS is required since Pixi.js handles both the styling and geometry of the elements. Another advantage is that one can simulate 3D by using GSAP’s perspective plugin which sets a z-depth on arranged layers.

P5.js is a JavaScript library specifically geared for artists interested in creating generative 2D art. Recently WebGL functionality was added to the library so that drawings to the screen are super fast (hardware accelerated.) It has the simplest structure, only two functions need to be called in order to run the animation - setup() and draw(). The language for primitives -lines, ellipses, rectangles, is simple and intuitive, as is the seamless integration with mathematics, via randomness, noise filters, and matrix transforms. P5 is a sophisticated tool to create generative 2D work and also the easiest to learn and implement.



Coding Environment

In this course we will be writing code to manipulate imagery and create algorithms that draw directly in the browser. For this we will need a code editor and a dedicated browser to display our results in realtime. For the code editor I recommend, and will use myself, “Visual Studio Code”, because it has JavaScript suggestions and auto-complete functionality for the libraries we will be using. This means less typing and less need to remember exact syntax.

I will be using Chrome as my testing browser. I recommend using Chrome or Firefox. 


“Visual Studio Code”  https://tinyurl.com/ycovjc67  

Chrome -  https://www.google.com/chrome/ 

Firefox -  https://www.mozilla.org/en-US/firefox/new/

Once “Visual Studio Code” is installed, the extension called “Live Server” will also need to be installed. This can be done within “Visual Studio Code” under the menu item View —> Extensions. Search “Live Server” and follow the instructions to install.


4 applications needed

This program is supported by funds of the European Social Fund (ESF)
These subsidies are the basis for low participation fees and for the lecturers’ fees.
Therefore, prior to the event each participant must provide
some personal information, confirmed with a signature.
A multiple-choice test is an integral part for the ESF-evaluation purposes.
All your data are subject to data protection and passed on depersonalised to the
responsible ESF administration in order to fulfil the evaluation and reporting obligations.


bildungswerk des bbk berlin GmbH
Köthener Straße 44
10963 Berlin

Prof. Dr. Frieder Schnock – Geschäftsführung (Bildungsprogramme)
tel 030 230 899-10

Florian Schöttle – Geschäftsführung (Vermögensverwaltung)

Michael Nittel – Veranstaltungskonzeption
tel 030 230 899-49

Kerstin Karge – Veranstaltungsorganisation
tel 030 230 899-40

Lucy Teasdale – Veranstaltungsorganisation
tel 030 230 899-43