Software Studies for Media Designers

Although links to all exercises can be found at the end of the respective exercise post, here is a convenient link to the directory with all the HTML5/JS exercises:
http://mlab.taik.fi/mediacode/coursefiles/course_2011_10/

As mentioned yesterday, I’d like to give you a simple hit test example. This exercise combines two previous ones, so I won’t go through the “old” parts of the code. Basically, it adds code to our “Drag square” exercise, mostly from the “Trail” exercise, and also a simple collision test.
Continue reading →

For the next two (brief) exercises, we basically ran two Paper.js tutorials, so I will point to those resources:

• Line tool example (we named it “draw lines with mouse”)
• Minimum distance (we named it “draw blobs”)

Continue reading →

In the first exercise of today, we saw how we could replicate our earlier JavaScript “paths” exercise of drawing a smiley using Paper.js. This allowed us to see the similarities and differences between both approaches. We also added a resize functionality. More info is available at the Paper.js tutorials “Getting Started” and “Paths“, and checking Paper.js Path reference is very useful. This is the code for the exercise: Continue reading →

Paper.js is “an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.”
http://paperjs.org/

The documentation is well organized, the website is well designed, and the examples and tutorials are very helpful.

The idea of introducing Paper.js in the course is not to teach the whole library per se (far from it, as we only had one morning for Paper.js), but to exemplify how the use of a library can be useful, and save much work. Particularly a well designed and documented one, such as Paper.js.

In the second exercise of today, we explored two topics – placing image files on the canvas, and canvas resizing to fit the browser window size. The objective is to line up a series of “clones” of the same image across the browser window, and make this line stay consistent independent of window size. The result was an alignment of stars, with an outlier rebel star thrown in. This is the whole code: Continue reading →

In the first exercise of today, we explored how to create a drag and drop functionality. The aim was to enable dragging a square around the screen, with the option of leaving a trail or not.

This is the code for the exercise:
Continue reading →

In the second half of today’s class, we looked into arrays, text display and keyboard input, and mixed all of this into one exercise. The aim of the exercise is to juxtapose successive random quotes on the canvas.

This is the resulting code:
Continue reading →

The first exercise of today aimed to demonstrate the usefulness of “for loops” to execute repetitive tasks. The objective of the exercise is to create a gradient out of dozens of uniformly colored squares, which change color depending on cursor position. This is the code for the exercise:
Continue reading →

The Document Object Model is “an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated” (from W3C).

Wikipedia adds some useful JavaScript-related insights:

• “A Web browser is not obliged to use DOM in order to render an HTML document. However, the DOM is required by JavaScript scripts that wish to inspect or modify a Web page dynamically. In other words, the Document Object Model is the way JavaScript sees its containing HTML page and browser state.”
• “An HTML page is rendered in a browser. The browser assembles all the elements(objects) that are contained in the HTML page, downloaded from web-server in its memory. Once done the browser then renders these objects in the browser window. Once the HTML page is rendered in web-browser window, the browser can no longer recognize individual HTML elements(Objects).”
• “Since the JavaScript enabled browser uses the Document Object Model (DOM), after the page has been rendered, JavaScript enabled browsers are capable of recognizing individual objects in an HTML page.”
• “The HTML objects, which belong to the DOM, have descending relationship with each other.”
• “The topmost object in DOM is Navigator (i.e. Browser) itself. The next level in DOM is browser’s Window. And next is Documents displayed in Browser’s Window.”

The image exemplifying the DOM is also from Wikipedia.

The whole specification from W3C of DOM Level 3, the current release of DOM: http://www.w3.org/TR/DOM-Level-3-Core/