BAVC Digital Pathways: Open Source Software blog. Here you'll find posts about open-source creative coding, lessons in the course, student work, class information, references and inspiration.
Set Fire to the Processing.js rain with this little project made with Processing.js and Popcorn.js. All you have to do is press play on the YouTube link, and when Adele sings the chorus, the raindrops turn to "fire".
Alligator Clip two objects to the MaKey MaKey board. For example, you and an apple.
When you touch the apple, you make a connection, and MaKey MaKey sends the computer a keyboard message. The computer just thinks MaKey MaKey is a regular keyboard (or mouse). Therefore it works with all programs and webpages, because all programs and webpages take keyboard and mouse input.
The back of the board has hookups for 6 keyboard keys, and mouse control. It also has the open hardware logo, a link for help getting started, and an area for using the board in Arduino mode.
This is a GameBoy Color emulator written in JavaScript. This page takes advantage of modern browser
capabilities like HTML5 and JIT engines to provide a desktop emulator experience right inside a webpage
without the use of plugins
You can either select a game from a list, or drag and drop a .gb or .gbc file into the emulator.
The Toolbox. A collection of the best time-saving apps, tools, and widgets from around the web.
For this tutorial, we will be using the Eclipse 4.1.0 SDK (download), and Processing 2 Alpha (download).
Follow this tutorial on on Processing.org that steps you through this process: Processing in Eclipse.
Using Processing from Eclipse gives you access to Processing as a class, allowing you to code in Java and create native Java applications.
Codeable Objects is a library for Processing that enables novice coders, designers and artists to rapidly design, customize and construct an artifact using geometric computation using geometric computation and digital fabrication http://hlt.media.mit.edu/?p=2254
There are many JavaScript frameworks developed for your use. Typically a framework is produced with a specific use-case in mind, so before utilizing one for your own project, it helps to understand the intentions of the framework beforehand as it will make it much easier to integrate into your own work.
To introduce ourselves to functional programming with Javascript, we must first examine what functional programming means. It's another paradigm of programming, just as is Object Oriented Programming. Functional programming means your code is "stateless", and emphasizes that use of functions. Programming in a functional style can also be accomplished in languages that aren't specifically designed for functional programming, just as programming with OOP can be accomplished in languages that aren't built upon OOP concepts. Javascript, for example, is a functional language, but it is possible to execute a sort of quasi-OOP method which mimics how things are done in Java or C/C++.
Although most people are familiar with Javascript as a language native to the web, it can be utilized for many purposes, for web applications, server-side processing, and local, standalone applications.
Javascript is a non-strict, non-typed language, meaning that we don't define strings, characters, ints, and floats as separate variable types. We declare everything as a "var" or a "function".
A good starting point is understanding how functions can be assigned to variables:
var addition = function(num1, num2) {
return num1 + num2;
}
var addMe = addition(50, 20); // addMe gets set to "70"
console.log(addMe); // log to the console to check
Notice how "addition" is defined as a "var", and it is a function. We can use Javascript's built-in "typeof" operator to see what kind of var "addition" is after defining it.
This post will get us familiar with drawing to an HTML Canvas element.
<!DOCTYPE html>
<html>
<body>
<!-- canvas DOM element -->
<canvas id="myCanvas" width="500" height="400"></canvas>
<!-- embedded javascript that comes after the element -->
<script language="javascript">
// get the canvas object from the DOM
var canvas = document.getElementById("myCanvas");
// check to see if the browser supports the canvas context
if (canvas && canvas.getContext){
// get the canvas context and assign it to 'c' for ease of use
var c = canvas.getContext('2d');
// set fill color
c.fillStyle = "#dddddd";
// create a filled rectangle
c.fillRect(0, 0, 500, 400);
// set stroke style
c.strokeStyle = "rgb(150, 0, 255)";
// start path
c.beginPath();
// draw some curves
c.arc(100, 100, 50, 0, Math.PI / 2);
c.arc(200, 200, 50, Math.PI, Math.PI / 2);
// close the path
c.closePath();
// stroke the path
c.stroke();
// circle
c.strokeStyle = "rgb(255, 0, 0)";
// start a new path
c.beginPath();
// draw curve
c.arc(300, 300, 50, 0, Math.PI * 2);
// set fill style
c.fillStyle = "#232323";
// stroke path
c.stroke();
// fill path
c.fill();
// lines
c.beginPath();
c.moveTo(0, 0);
c.lineTo(100, 100);
c.moveTo(30, 40);
c.lineTo(340, 340);
c.stroke();
}
</script>
</body>
</html>
Rafaël Rozendaal is a visual artist who uses the internet as his canvas. His artistic practice consists of websites, installations, drawings, writings and lectures. Spread out over a vast network of domain names, he attracts a large online audience of over 15 million visits per year.
His work researches the screen as a pictorial space, reverse engineering reality into condensed bits, in a space somewhere between animated cartoons and paintings. His installations involve moving light and reflections, taking online works and transforming them into spatial experiences.
Most of his work is done in Flash, but it would be very possible to create similar web art/mini games with HTML Canvas and/or Processing.js
In Firefox 11, there is a new part to the Web Developer tools that allows you visualize a web page DOM tree in 3D. The tool allows you to see all the elements of the page as three dimensional blocks that you can explore. When we view the web page in 3D, we visually see these relationships making it easier to understand how the DOM works.
The DOM stands for Document Object Model, which is represents the objects in markup language, such as HTML. It is also refered to as a document "tree", as elements in HTML are nested inside eachother, creating parent/sibling relationships. Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering itself.
To use the 3D Web Inspector:
1. Open Firefox (we're using version 11 for this tutorial)
2. Go to the URL of your choice.
3. In Firefox, go to Tools > Web Developer > Inspect
4. Click "3D" on the bottom right.
5. ?????
6. Profit!
We can experiment with the 3D inspector in mind. Go to this url http://www.dev-kitchen.com/ff3d/ and enable the 3D inspector to get a Minecraft-esqe blocky landscape.
Video example:
So, how is a web page made?
As we use the 3D web inspector, we can see that a web page is essentially made up of square "elements", all nested inside eachother that have attributes, or styles (written in CSS). These elements are types of HTML Tags that are used for layout. As we browse through the source of web pages on the internet, we see that the majority of layout elements are <DIV> and <SPAN>. They are both considered container elements, meaning you can put content inside them, and they can nest inside eachother, and they (and whatever is inside them) can have their own visual style.
The <div> tag acts as a divider, and is used to block out areas of the website. It is considered a BLOCK element.
The <span> is similar, but it is meant to span sections of text. It is considered an INLINE element.
As an example, let's say you wanted a block filled with content that is placed somewhere specific on your page. You would define the block with a <div>.
<div>
Some text inside the div
</div>
Notice that to create a <div>, we place the content inside, and then end the tag with a forward slash, like </div>.
Next, we can use the <span> element to assign styles to specific areas of text.
<div>
Some <span>text</span> inside the div
</div>
Now, there's no attributes associated with these elements yet, but they might look like this when we add a "style" attribute. Let's make the <div>'s text blue, and the <span> red.
<div style="color:blue">
Some <span style="color:red">red text</span> inside the div
</div>
When we assign style attributes to tags, there are a few things to remember:
1. The attributes must be in the starting tag -- not the ending tag.
2. You can have any number of attributes in a tag.
The "style" attribute can have multiple styles. Styles that are included in the tag as above are written as inline CSS, and there are a huge amount of attributes and rules that apply. If you inspect a website, you can see all the styles listed in the Web Inspector to give you ideas. You can change anything from the color, to the font, to the margin, padding, line height, background image and color, and much much more!
Website Structure
An HTML document structure is written as follows:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="color:blue">
Some <span style="color:red">red text</span> inside the div
</div>
</body>
</html>
We then save this file as .html, and now an HTML document.
Notice the <!DOCTYPE html> at the top of the document. This specifies to the browser that it's HTML. Any elements you add in the <body> tag will be rendered. We use the <head> area to specify things that are not visible to the user, such as javascript and CSS style sheets.
What's next?
As you inspect websites, you will see that they are using embedded CSS in Style Sheets. In order to utilize style sheets, we use another attribute in our elements, such as "classes" and "id"s, which we will get to shortly as we experiment with the DOM.
