arch 430 | networked technologies

Assignment 1: Exercise 2 Scripted Drawing

thomas kearns — Wed, 25 Jan 2012 03:31:11 +0000

Begin with the SetupDraw.pde example. This sketch structure establishes two core functions; the setup function that is called at the startup of the app, and a draw function which will be called in a loop until the app closes. In this example a single variable is used to manage the y position of a line drawn with the line() method. A conditional, if statement, is used to reset the value when it falls outside of the size of the window.

Explore the shape methods such as

2D Primitives
arc()
ellipse()
line()
point()
quad()
rect()
triangle()

Using the above examples as a point of departure, create your own unique scripted drawing. Add a for loop to the sequence to add multiplicity to the drawing. Experiment with conditionals and simple mathematic expressions to add variation.

Blog Fodder: Interactivity + Meaningful Play

thomas kearns — Tue, 24 Jan 2012 20:00:45 +0000

Game and interactivity designers + scholars, Katie Salen and Eric Zimmerman have written a fantastic book called Rules of Play. I highly recommend the book to anybody interested in the topic. While their objective is to interrogate the world of play and games, much of the prose is appropriate for design in general.

As both a catalyst for blog posting and a foundation for thinking about all of your work in this class, please read the following sections.

Unit 1: Section 3, Meaningful Play, pg 31-37

Unit1: Section 4, Design, pg 39-47

Unit1: Section 5, Systems, 49-55

Unit1: Section 6, Interactivity, 57-69

IIT students can access the entire book through, books 24×7 online … Here

Yahoo! + Tronic Studio

kcousar — Tue, 24 Jan 2012 19:53:14 +0000

In order for Yahoo! to develop a new marketing scheme to push its thriving products, they sought the help of tronic studio to help them produce a new interactive experience. When I first came across this video it made me think of processing – how the user has the ability to manipulate the program – but unlike processing you do not have to edit the script via a computer instead it is gestural-based, adapting as the current user makes body movements. It makes me start to think of the possibilities of our final project and how it will be interactive.

It’s also interesting to note tronic studio is a collaborative of architects( started by Jesse Seppi & Vivian Rosenthal, graduates of Colombia School of Architecture), designers and directors who explore creativity and technology through architecture, animation, experiential and interactive design. It’s worth checking out their website as well http://www.tronicstudio.com/

steviebrummer — Tue, 24 Jan 2012 15:14:05 +0000

I have never written code before so after looking through Processing.org, I decided to first use a simple one. The examples that I thought looked the most interesting were the ones that moved with the mouse. So, I looked into the “mouseMoved ()” function and began to understand how it works. Below is an example that I wrote from looking at the language section of the Processing.org website:(Above) I showed several different images of what happens when you roll your mouse over. As you can see from the code, the color, width, height, start, and stop point of the arc changes with to movement of the mouse. (Below) For our first week’s assignment, I played around with an example:

For this exercise, I chose the “follow 3” in which a segmented line follows the mouse. I changed the segment length to “15” and the stroke weight to “1” which made the line thinner and longer.

bouncy bubbles

kcousar — Wed, 18 Jan 2012 17:20:08 +0000

After some time exploring the program “Processing”, I made a few edits to two examples I found interesting. Initially I tried to just make simple edits such as the size or number of the components and then I tried to make a greater impact to the code and get more creative, this was a very hard task to achieve because I do not really understand the language of the code, I took a basic HTML class in high school years ago but that is where my experience ends.

1st example: Reach 2

as you can see in the image above, the original reach 2 example and code. Highlighted are the factors I choose to change…let’s see the results

As you can see several features of the reach have changed, the segment is now doubled in size, the amount of circles within the segment is also doubled and the size of the background area has doubled as well.

2nd example: bouncy bubbles

For this example I tried to push the envelope a little more so, not only editing the number of bouncy balls and the size of the background but I also changed part of the mathematical formula behind the program which I believe controls the movement (direction, frequency, speed) of the bouncy balls.

Original code_bouncy bubbles

Edited Code_bouncy bubbles

From the images it is hard to notice the difference between the two besides the number of balls and size of the background, so I decided to make this video to show the real difference.

Bouncy Bubbles edit from Kareem C on Vimeo.

on processing

timlee — Wed, 18 Jan 2012 16:10:20 +0000

I started to toy with the processing program used for this course. I have a basic understanding of C++ and I immediately recognized the language while sifting through the different examples on the site. One of the most striking characteristic of this program is the simple GUI. I’m always a fan of simplicity and have an appreciation for powerful tools, and I do feel that this will become a favorite of mine. I’m glad that we’re not learning flash in this course, to be honest, because I’m sick of watching it struggle and fail on several of my computers. There are better technologies out there, and I’d much rather learn those languages instead.

Processing is rather simple. Script, save, play. If something breaks, or code miswritten, the program alerts you rather than crashing everything in sight. I chose the “animator” example because I like interaction. I made this grid system using moving dots, and it was actually pretty fun to watch.

The code wasn’t that complicated either. A copy of the script can be found here if you want to try it out.

Welcome Back

thomas kearns — Tue, 10 Jan 2012 23:38:45 +0000

Welcome to the class blog for Professor Kearns‘ Networked Technologies seminar in the College of Architecture, at the Illinois Institute of Technology. Here you will find the resources, assignments, references, and basic administration of course information. Together with student posts and course information the blog will grow as a resource for the college at large.

If you are a student in the course please subscribe to the blog by email or rss feed linked at the bottom of the page. This will let you stay up to date with the happenings of the class and important information.

Project 1: Actions

thomas kearns — Tue, 10 Jan 2012 03:35:26 +0000

action

interaction
transaction
reaction

networks are measured by the actions they enable

the first project takes aim at a singular action through a series of distinct exercises aimed at providing the skillset to construct a simple interactive mechanic using the processing programming language.

to frame the resulting product and the iterative exercises you are asked to identify. first a network from some aspect of our world, then particular point(s) of action (inter, trans, or re-active) within that network. Use simple procedural drawing and/or parametric modulation of graphic elements with interactive functionality and/or data driven dynamics to demonstrate the qualities of the action(s) you have selected.

deliverables for final presentation

working processing executable presented at a size of your choosing
properly documented source code submission

Schedule

Exercise 1 due – 1.18.12
Exercise 2 due – 1.25.12
Exercise 3 due – 2.1.12
Exercise 4 due – 2.8.12
Final presentation – 2.22.12

Assignment 1: Exercise 1 Getting Started

thomas kearns — Sun, 08 Jan 2012 18:19:45 +0000

demonstrate that you can operate at the simplest level, the core technologies needed to participate in the class. this will amount to downloading processing, running some of the samples to get a feel for things, and then tweaking some values in the samples to demonstrate their affect on the operation of the program, and then setting up your user and creating a blog post which documents the modifications you made.

you can find everything you need at www.processing.org and www.wordpress.com

Anatomy of a Blog Post

thomas kearns — Sun, 08 Jan 2012 18:17:51 +0000

How do you define a succesful blog post??? You can browse through this very website and see countless examples of bad posts. You know the ones, some image stolen from some place and not attributed, with a couple poorly written sentences that basically say … how cool is this? Might as well just have been a link shared on del.icio.us would have been more effective.

do a quick search on google for “anatomy of a blog post” and you will find a number of people, most who are probably more legitimate bloggers than myself, giving you there [N] tenants of what constitutes an [enter adjective here] blog post. You should look at these, create your ruleset, and use it. Here I will break down not a complete spec for how to do a post, but instead a few key do’s and don’ts.

#1 Attribution

You must attribute anything and everything you reference as thoroughly possible. This ecosystem that we are trying to participate in is heavily dependent on attribution, its currency and Karma is a bit

#2 Have something to say

Especially in the context of a course such as this where the focus is on critically exploring these technologies, your posts are more or less meaningless with saying something unique, something personal. Blogs are quite editorial in nature, take advantage of this reality. Nobody wants to hear that something is cool, they want to hear about what actually makes it cool. Make some comparisons, put it in perspective, establish a context.

#3 engage the reader

Many bloggers seem to agree that ending with or at least embodying a certain amount of questioning back to the reader is a great way to engage them in the post. Perhaps to comment and explicitly participate in the dialog. Its generally the case that the big powerhouse blogs, the blogs with engaging and interesting content, and those that have things to say are generally the blogs/posts with huge collections of comments and dialog and debates following them.

#4 Use media

In most cases you are going to be referencing something someone else has already blogged about or something you saw in the wild. Link to the content, reference the images (with attribution and a link of course), embed the youtube clip, make the diagram, bottom line, get multimedia content into your blog post to get the reader to stay and to help the reader understand.

#5 USE the cms

For this class, any post that is published without proper categorization and tagging of the content of the post, will be discredited. The usefulness of the blog as a catalog of research and investigation is dependent on a good system of browsing. Tagging content with topical tags enables us to quickly and powerfully filter and target the types of content we are most interested in. Furthermore, all options and aspects that are possible for you to contribute within the content management system(cms) the richer the potential experience will be.