MADT201 diary

Timeline

Sept 9 - Introductions to the course. Exercise 1 starts.

Sept 16 - Vizzie Assignment Due, Presentations. Lab tutorial for Project 1: Max Sound Composition/Improvisation.

Sept 23 - Lab tutorial (Max).

Sept 30 - Project 1 Due. Crits.

Oct 7 - Lab tutorial for Project 2: HTML 1 - Basics - 20%

Oct 14 - Holiday. No classes.

Oct 21 – Lab for Project 2 continued.

Oct 28 - Project 2 Due. Presentations.

Nov 4 - Lab tutorial for Project 3: HTML 2 - Canvas/Webkit Animation.

Nov 11 - Remembrance Day. No classes.

Nov 18 - Project 3 due via Mosaic blog post.

Nov 25 - Project 4: Processing.

Dec 02 - Lab for Project 4: Processing.

Dec 09 - Project 4 Due. Presentations.

Class Software:

Cycling 74's Max (formerly known as Max/MSP) - Max connects objects with virtual patch cords to create interactive sounds, graphics, and custom effects.
Processing - is an open-source graphical library and integrated development environment (IDE) / playground built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context.
HTML/CSS/Canvas/Webkit for animation - We will use these types of programming languages for browser based experimentation, deconstruction and hacking of code.
Text Editor - TextWrangler (Mac) or Notepad++ (PC)

Exercise 1 Max Vizzie Intro: video Imaging Tools

Using 'vizzie objects' Max, create and record a performance that utilizes technology as a means of not only supporting your conceptual ideas, but also as a way of generating and altering the content itself.

Create your own videos and find some additional content to mix over the next week.

You can find some clips here (download as mpeg4 / *.MP4, if possible)

Download & Streaming : Moving Image Archive : Internet Archive

More on VIZZIE and some guides to follow for setting up your first VIZZIE patch.

You can check out the work 'Three Transitions' by artist Peter Campus here.

Project 1: Max Sound Improvisational Sound Performance

Over the course of this unit we will be investigating relationships of sound synthesis, considering the fundamental principles of basic waveforms, ways of manipulating these through adjustment of amplitude, frequency adjustment and modulation. We will also explore ways in which we can record and playback sounds through a process of sampling, adding further possibilities in our sonic explorations. The elements of this experimentation will become part of the building blocks that we use to create our own compositions through the use of software and external processing of sound via physical manipulation through the typing keyboard, the musical keyboards in 439 and the USB game controllers provided from the instructor.

Project 2: HTML 1 - Basics (Net.Art Investigations)

In our class discussions we have examined a number of different ways in which warying topic and ideologies can fit into categories of Net.Art. Reflecting on these discussions and your own investigations, create a website that applies the conceptual elements of these discussions to a technical process of investigation and exploration.

Some of you choices might include the following:

interactivity/Experiental Navigation (challenging conventions of (i.e. Jodi.org, et al..))
animation/Net based 'Paintings/Drawings' (i.e. Rafael Rozendaal)
Low Resolution Graphics/The Animated Gif
Social Media and Privacy
The Avatar and the 'Virtual self'
Blogging/Journal Practices (as an extension of self)
Curatorial/Copyright practices of Net.Art (financial implications of selling net art, ownership of appropriated content..et al. ie. Gif Market 2011)
Content Remixing/Mash-ups
Temporality of Internet Content
Appropriation/Content Sharing
'Glitch' Practices/Datamoshing

What is Net.Art

Geocities Archives

HTML tutorials

CelebArt: Where Soho Meets Hollywood (geocities fan page)URL Not completed: CelebArt: Where Soho Meets Hollywood (geocities fan page)

Net art anthology

Interactive Fiction
Mailing List Interview with Jodi.Org
A Suitably Bizarre Interview With The Early Web Provocateurs at Jodi.Org
Eva and Franco Mattes Wiki
Vuk Cosic's ASCII History of Moving Images (1998)
Artport: Whitney Museum's Portal to Internet art and an Online Gallery Space
Rhizome: ArtBase
Catalog of Internet Artist Clubs by Paul Slocum, March 2016

WEBSITE HELP

CSS Properties for HTML tags
W3Schools
Mozilla Web Tutorials
Introduction to HTML Coding
Carl's Web Tricks
Codepen.io: Coding Playground

Project 3: CSS Animation
Drawing inspiration from abstraction (Non-Objective Art, Kandinsky, Robert Delaunay, Mondrian...etc), create your own abstract geometric 'painting' within the browser. Consider how the use of such technology can breathe new life into the 'static' image. How do the various aspects of 'shape animation' work to create a different experience from the above references to the past? How do these programming languages as a technical process work to challenge ways in which we can recontextualize the use of the browser.

CSS: Animation on Lynda.com - *COMPLETE THIS TUTORIAL FOR NEXT WEEK*

CSS Animation Position: Carl's infinitely moving Gizmo

CSS TWO IMAGES MOVING AT THE SAME TIME

CSS Transparent animated gif made in photoshop, moving

CSS embedded background image

CSS 2D Transforms - W3Schools

CSS 3D Transforms - W3Schools

CSS Transitions - W3Schools

CSS Animations - W3Schools

Kirupa: Learn Web Animation

Mozilla: Using CSS animations

Mozilla: Animation Syntax and Definition from the Firefox Browser 'API'

CSS Tricks: Animation (great examples of creating and moving shapes here)

***BENJI & BOB ANIMATION EXAMPLE ***

Generating Objects in Canvas

Shape, Colour, Orientation:

A single square
a square in four corners of canvas
a solid circle
Stylized work flow for circle
many shapes
Drawing Circles on a Canvas (kirupa.com)
Draw continuously until 'Click' event, resets X & Y start points
**** Revised Version of Click Event, for resetting the clearRect function, adapt it as needed***
How to OVERLAY TWO OR MORE CANVAS WINDOWS (scroll down to green checkbox for correct answer, via stackoverflow.com)

LETS ANIMATE: Simple Javascript Animation:

HERE IS WHAT THIS ANIMATION LOOKS LIKE AS ITS OWN WEB PAGE (View my source code, CSS & Javascript files)

LARGE CANVAS EXAMPLE FILLING ENTIRE BROWSER (View my source code, CSS & Javascript files)

VARIATIONS ON AN INTRO TO CANVAS:

Canvas Resources

Basics --->> Graphics and Animation with HTML5 Canvas and Javascript

Creating a Simple HTML5 Canvas Animation (Kirupa)

Animating In Code Using JavaScript (Kirupa)

Basic Animations (Mozilla)

Advanced Animations (Mozilla) Add a trail effect on a ball (or other shape)

Animation with HTML5 Canvas - Useful example demonstrating functions() and IF statements

Project 4: Processing (language) - Interactive 'Game'
Expanding upon your previous experiences with canvas & javascript, develop a patch that utilizes keyboard and/or mouse inputs to affect graphical outputs within the processing application. Our final goal will be to embed our patch in the browser so that others can interact with it online.

in this assignment I ask you to consider the following:

What are the typical experiences we associate with the interactive web-based content? (clicking, typing..etc). Does Processing differ in any way? Does it facilitate any alternative methods of exploration outside of traditional web programming? what are the 'creative applications' of a Processing sketch? in its most basic form we can consider Processing as an illustration/drawing tool, but what else can it become (beyond a simple 'etch-a-sketch')? How can existing applications/examples be adapted and combined with your own patches? This is an important stepping stone for all of our explorations with this program. Experiment with some existing examples and modify them to your needs.

THE PROCESSING PROGRAMMING LANGUAGE

Processing.org