Schotter in Processing.js:

Schotter in Processing (now with a little of color):

(using the following code:)

// Constants
int MAX_DISPLACEMENT = 15;
int MAX_ROTATION = 45;
int MARGIN = 30;
 
// Processing Setup
void setup(){  
    smooth();
 
    size(240 + 2*MARGIN,440 + 2*MARGIN);
    background(255);
    noLoop();
    randomSeed(millis());
}
 
// Main drawing function
void draw(){     
    float rand_rot = 0.0;
    int rand_dis = 0;
    int r = 0, g = 0, b = 0;
 
    for (int j=0; j<22; j++){
 
	for (int i=0; i<12; i++){
 
	    // set up rotation and displacement
	    rand_rot = (random(-MAX_ROTATION,MAX_ROTATION))*j/22;
	    rand_dis = floor((random(-MAX_DISPLACEMENT,MAX_DISPLACEMENT))*j/22); 
 	    if ((i == 0 && rand_dis < 0) || (i == 11 && rand_dis > 0)){
		    rand_dis = -rand_dis;
	    }
 
	    // draw rectangle (col=i, row=j)
	    pushMatrix();
	    translate(MARGIN + 20*i + 10 + rand_dis, MARGIN + 20*j + 10 + rand_dis);
	    rotate(rand_rot*PI/180.0);
	    noFill();
            r = floor(random(50,255)*2/(22-j+1));
            g = floor(random(50,255)*2/(22-j+1));
            b = floor(random(50,255)*2/(22-j+1));
            stroke(r,g,b);
	    rect(-10, -10, 20, 20);
	    popMatrix();
 
	}
    }
}

Schotter in OpenFrameworks (with some mouse interaction this time):

Schotter w/Processing.js

Processing w/plain old Processing

//Caitlin Rose Boyle
// January 10
// intart compdesign
//Schotter Reproduction
int squareSize = 30;

void setup()
{
size(((squareSize * 12) +60), ((squareSize * 24) + 60));
background (255, 255, 255);
noLoop();
noFill();
}

void draw()
{
drawSchotter();

}

void drawSchotter()
{

rectMode(CENTER);
int Counter = 0;
//loop rows
for (int y = 0; y < 24; y++){ //draw one row for (int x = 0; x < 12; x++) { //draw one square pushMatrix(); translate(squareSize*x + random(Counter++)/100 + 30 , squareSize*y + random(Counter)/100 + 30); rotate(PI*random(-Counter, Counter) / 1000); rect(15, 15, squareSize, squareSize); popMatrix(); } } } Schotter in openFrameworks [youtube clip_id="5WgBodZN8Qo" width=”635" height="501"] //Caitlin Rose Boyle // January 11 // intart compdesign //Schotter Reproduction OF int squareSize; int square_counter; int translatex; int translatey; int rot; //-------------------------------------------------------------- void testApp::setup(){ square_counter = 0; squareSize = 30; ofBackground(255,255,255); ofSetWindowTitle("Schotter Boyle"); ofNoFill(); ofSetColor(0x000000); ofSetRectMode(OF_RECTMODE_CENTER); ofEnableSmoothing(); ofSetFrameRate(60); } //-------------------------------------------------------------- void testApp::update(){ ofSeedRandom(1347); square_counter = 0; } //-------------------------------------------------------------- void testApp::draw(){ // Loop over all columns for (int y = 0; y < 24; y++) { // Loop over all rows for (int x = 0; x < 12; x++) { ofPushMatrix(); // translate: offset random jitter border ofTranslate(squareSize*x + ofRandom(0, square_counter)/10 + 30 , squareSize*y + ofRandom(0, square_counter)/10 + 30); ofRotate(PI * ofRandom(-square_counter, square_counter)/30); // Draw the square ofRect(squareSize/2, squareSize/2, squareSize, squareSize); ofPopMatrix(); square_counter++; } } }

Dirk van der Kooij is a recent graduate from the Design Academy of Eindhoven where he began to investigate the potential for robotic fabrication and 3d printing to be coupled and to produce full scale furniture. Unlike much of the work done on these machines, this hints at an extremely fertile territory of design, interaction, and process. Currently, 3d printers are limited in scale because of the technologies and cost. They also take quite a bit of time even to produce desktop size objects. As this research hints, we may soon be able to download a file and print our own furniture and objects. I beleive this area of research is extremely important because automated manufacturing is becoming more viable as it leaves the manufacturing lines and enters our schools and even homes. The next step is to take a critical stance as to what these tools will be making and how we as designers may go about creating design process’ that incorporate these new tools and a new design philosophy that comes along with it.

The .JS version:

the Jar version:

the OpenFrameworks version:

code:

public final int width = 20;
public final int height = 20;

public void setup() {
size(400,500);
background(0xffffff);
noFill();
noLoop();
}
public void draw() {
for(int x = 0; x < 12; x++) { for(int y = 0; y < 20; y++) { translate(x*width,y*height); float random = random((float)y/5); rotate((random(2f)-1f)*random*random); rect(0,0,width,height); resetMatrix(); } } }

Philip Beesley is an architect that produces sculptures that blur the line between biology and architecture. They are responsive, kinetic, and offer unique interactions with the users of the space. Endothelium is a project that is designed to be deployed across a landscape and it burrows itself in by collecting energy from the wind and then charging organic batteries that turn small vibrators. The feet of the tripods begin to go deeper into the soil and the entire geotextile starts to merge with the earth below.

Projects like this become very interesting when you begin to discuss the potential for highly adaptable software to couple this responsive hardware. New landscapes and architecture become possible when our static spaces are left behind and replaced with ones like Beesley imagines. After all, why should we be designing static environments for our dynamic bodies and lifestyles?

find out more about the work of Philip Beesley here

http://soytuaire.labuat.com/

This is a simple website that lets you “paint” the music video to the song “soy tu aire.” Over all, its functions are fairly limited “spontatenous” imagery arises from your cursor controlled paintbrush at predetermined intervals in a predetermined sequence. Though this piece is supposed to be interactive (and it is), it is not particularly generative. I find it very effective, nevertheless, because of it’s high level of refinement. The creators carefully chose and created their images, and their curation lets the viewer experience and “make” a painting with a high caliber of finish. This resonates with me because I find that I have a hard time with the intersection of letting code create something wonderful, and then stepping in as a designer to tweak things, or mold this outcome.

http://www.temporary.cc/

temporary.cc is a website that deletes itself as visitors visit the url.

When I first found out about this website over a year ago, I used to visit it with some frequency for several months. The original website itself was beautiful, as well as the subsequent versions of it, created as a single character was randomly removed from the html/css on each visit. Because this website is ever-changing, it invites its viewers to return over a long period of time to see how it has degenerated. Whenever I used to visit it I felt two feels – one of not-so-secret hope that my visit would be the one to “radically” change the website from the last time I viewed it, and another of greed – I felt bad every time I refreshed, because I shortening the magic, and robbing others of the experience of seeing the website disappear.

Overall, I think the website is fairly successful. It’s a beautiful degeneration. Of course, by now, the html is so mangled that it’s a non-readable mess of halves of divs and “s and >s that don’t do anything. And while that is certainly part of the process, I would hope that somewhere there is a complete record of the degeneration, because it’s current state does not reflect it’s previous beauty. Perhaps, however, that is the point of these things. If you missed out, you missed out, and this piece of the internet is not forever.

Just Landed – Jer Thorp

Just Landed mapped the travels of twitter users, by searching for the words “Just landed in” in tweets, and comparing the location to that of the user’s listed hometown.
I was first attracted to this piece because of it’s simply beauty. It very, very well excuted, which really allows the viewer to see the information, as opposed to looking and a table of information and disregarding it. This piece struck me for two reasons. First, it makes me very very aware of how public the internet is. Even though I may only have 30odd followers on twitter does not meant that my tweets are invisible to everyone. Sharing flight and vacation information in such a public way makes me worry about this ala pleaserobme. This point, however, is general internet unnecessary panic. More interesting to me was simply how USA/English centric the project was, undoubtedly because the program only searched for the English phrase. Seeing this literally mapped out for me made me wonder about what this map would look like for another language, and indeed, how much of the internet I do not access because I only proficiently speak English.

Schotter

LibCinder Implementation

Processing/Processing.js Implementation

Text Rain

#include "cinder/app/AppBasic.h"
#include "cinder/gl/gl.h"
#include "cinder/Text.h"
#include "cinder/gl/GlslProg.h"
#include "cinder/gl/Texture.h"
#include "cinder/Rand.h"
#include "cinder/Capture.h"
 
#include "Kinect.h"
 
using namespace ci;
using namespace ci::app;
using namespace std;
 
/***************************
 Messy, but -probably- works
****************************/
 
class Letter {
public:
    static std::map<char, gl::Texture> textureForCharacter;
    static std::map<char, float> baselineOffsetForCharacter;
    static float fontSize;
    static bool texturesGenerated;
 
    Vec2f mPosition;
    Vec2f mVelocity;
    Vec2f mAcceleration;
    char mLetter;
 
    Letter(char letter, Vec2f position) {
 
        mAcceleration = Vec2f(0, 0.01);
        mPosition = position;
        mVelocity = Vec2f(0, 0);
 
        mLetter = letter;
 
        if (!texturesGenerated) {
            for(char character = 'A'; character < 'Z'; character++) {
                float baselineOffset = 0;
                std::string str(1, character);
                textureForCharacter[character] = gl::Texture( renderString( str, Font("Arial", fontSize), Color::white(), &baselineOffset ) );
                baselineOffsetForCharacter[character] = baselineOffset;
            }
            texturesGenerated = true;
        }
    }
 
    void update() {
        mVelocity += mAcceleration;
        mPosition += mVelocity;
    }
 
    void draw() {
        float brightness = 1 - (mPosition.y / getWindowHeight());
        gl::color(Color(1, brightness, brightness ));
        gl::draw( textureForCharacter[mLetter], mPosition - Vec2f( 0, baselineOffsetForCharacter[mLetter] ) );
    }
 
    Area frame() {
        return Area(mPosition + Vec2f(0, baselineOffsetForCharacter[mLetter]), textureForCharacter[mLetter].getSize());
    }
 
    void detectCollisions(const Surface8u &background) {
        const Area clippedFrame( frame().getClipBy( background.getBounds() ) );
 
        if (clippedFrame.getWidth() <= 0 || clippedFrame.getHeight() <= 0) return;
 
        float sum = 0; // probably bad. hm.
 
        uint8_t inc = background.getPixelInc();
 
        const uint8_t *line = background.getData( clippedFrame.getUL() );
 
        for( int32_t y = clippedFrame.y1; y < clippedFrame.y2; ++y ) {
 
            const uint8_t *pixel = line;
 
            for( int32_t x = clippedFrame.x1; x < clippedFrame.x2; ++x ) {
                if(*pixel > 150) {
                    sum++;
                }
                pixel += inc;
            }
 
            line += background.getRowBytes();
        }
 
        if (sum > 10 && mVelocity.y > 0) {
            mVelocity.y = 0;
        }
        if(sum > 20) {
            mVelocity.y -= sum * 0.0004;
        }
 
//        mVelocity -= percent * 5;
    }
 
 
};
bool Letter::texturesGenerated = false;
std::map<char, float> Letter::baselineOffsetForCharacter;
std::map<char, gl::Texture> Letter::textureForCharacter;
float Letter::fontSize = 18;
 
class TextRainApp : public AppBasic {
public:
	void setup();
	void mouseDown( MouseEvent event );	
	void update();
	void draw();
private:
    std::vector<Letter> letters;
    void emitRandomLetter();
    float mLastEmitTime;
    float mEmitInterval;
 
    float lastEmitLocation;
    int lastEmitCharacterIndex;
 
    Kinect				mKinect;
	gl::Texture			mColorTexture, mDepthTexture;
    Surface8u mDepthSurface;
 
};
 
void TextRainApp::setup()
{
    setFrameRate(30);
    mEmitInterval = 1;
    mLastEmitTime = -mEmitInterval;
 
    lastEmitCharacterIndex = 0;
    lastEmitLocation = 0;
 
    mKinect = Kinect( Kinect::Device() ); // the default Device implies the first Kinect connected
 
    gl::enableAdditiveBlending();
}
 
void TextRainApp::mouseDown( MouseEvent event )
{
}
 
void TextRainApp::emitRandomLetter() {
    //    char character = (char) Rand::randInt(97, 122);
    string poem = ("A ONE THAT IS NOT COLD IS SCARECLY A ONE AT ALL");
    lastEmitCharacterIndex += Rand::randInt(poem.length());
    char character = poem[lastEmitCharacterIndex % poem.length()];
 
    if(character == ' ') return;
 
    float horizontalEmitLocation = ((float)(lastEmitCharacterIndex % poem.length()) / poem.length()) * getWindowWidth();
    Vec2f startPosition = Vec2f(horizontalEmitLocation, -18);
    lastEmitLocation = horizontalEmitLocation;
 
    Letter letter(character, startPosition);
    letters.push_back(letter);
}
 
void TextRainApp::update()
{
    if ((getElapsedSeconds() - mLastEmitTime) > mEmitInterval) {
        emitRandomLetter();
        mLastEmitTime = getElapsedSeconds();
    }
 
	if( mKinect.checkNewDepthFrame() ) {
		mDepthTexture = mKinect.getDepthImage();
        mDepthSurface = Surface8u( mKinect.getDepthImage() );
    }
 
	if( mKinect.checkNewColorFrame() )
		mColorTexture = mKinect.getColorImage();
}
 
void TextRainApp::draw()
{
	// clear out the window with black
	gl::clear( Color( 0, 0, 0 ) ); 
 
    gl::color(Color::white());
 
    if (mColorTexture) {
        gl::draw(mColorTexture);
    }
 
    for (vector<Letter>::iterator iter = letters.begin(); iter != letters.end();) {
 
        iter->update();
        iter->draw();
 
        if (mDepthSurface) {
            iter->detectCollisions(mDepthSurface);
        }
 
        if (iter->mPosition.y > getWindowHeight() || iter->mPosition.y < -1000) {
            iter = letters.erase(iter);
        } else {
            iter = ++iter;
        }
 
    }
}
 
 
CINDER_APP_BASIC( TextRainApp, RendererGl )

Made with openFrameworks. The letters land on places that are darker than a certain threshold. Its kind of slow here but its much faster, I promise, when video is not recording.

Ward Penney – Schotter, Processing.js Active Object

Ward Penney – Schotter, Processing Applet

Ward Penney – Schotter, Code

/*
Interactive Art & Computational Design / Spring 2011
Carnegie Mellon University

// print rows
for (int ir = 1 ; ir < rows ; ir ++) { // print columns for (int ic = 1 ; ic < columns ; ic ++) { // translate translate(margin + ic*sideLength + sideLength/2, margin + ir*sideLength + sideLength/2); // get proportional counter / count amount of rotaion, over a degree range float absRotationDegs = (map(squareCount, 0, rows * columns - 1, 0, 360) * factor)/2; float randomRotationRadians = radians(random(-absRotationDegs, absRotationDegs)); rotate(randomRotationRadians); // get random offsets, halved for negtive possibility float absOffsetX = (map(squareCount, 0, rows * columns - 1, 0, sideLength/2) * factor)/2; float absOffsetY = (map(squareCount, 0, rows * columns - 1, 0, sideLength*2) * factor)/2; float randomOffsetX = random(-absOffsetX, absOffsetX); float randomOffsetY = random(-absOffsetY, absOffsetY); // draw rectangle rectMode(CENTER); rect(randomOffsetX, randomOffsetY, sideLength, sideLength); // rotate back rotate(-randomRotationRadians); // translate back translate(-1*(margin + ic*sideLength + sideLength/2), -1*(margin + ir*sideLength + sideLength/2)); // increment square count squareCount += 1; } } }

Ward Penney - Schotter video demo in OpenFrameworks

Green Cloud is a project by Nuage Vert and is is designed to bring an awareness to the community of Ruoholahti, Helsinki. A series of high power green lasers were used in conjunction with heat tracking cameras and software to highlight and trace the smoke/pollution coming from a local smoke stack. The project is surprisingly powerful in its ability to take something anyone who has lived in a city has taken for granted. They call out something that is generally lost in the chaos of a metropolis in a technologically clever way. The end result is a kinetic projection of the city’s own consumption of power.

“This is the effect of 4,000 residents and 5 large scale companies in Ruoholahti participating the Unplug event. Since Salmisaari substation also measures energy consumed also by those living in Lauttasaari, which includes over 30,000 residents, this is a very successful result! ”

find more about this project here

size(300,400);
smooth();
background(0);
noStroke();
fill(242,204,47,90);
rectMode(CENTER);

int x = 28;
int y = 44;
int rndm = 0;
int step = 90/y;
int w = width/x;
int h = height/y;

for (int j = 2;j < y;j++){
rndm += step;
fill(242,204,j * 20,j + 90);

for (int i = 2;i < x;i++) {
pushMatrix();
float z = random(-rndm/2, rndm/2);
translate(i*w – w/2 + z/3,j*h – h/2 + z/3);
rotate(radians(z));
rect(0,0,w,h);
popMatrix();
}
}

Niklas Roy’s My little piece of privacy

Niklas Roy is a Berlin artist who has a workshop with a street-facing window. Apparently tired of all the nosy passersby, he set up a robotic curtain and camera that detects people on the street as they walk past. The curtain travels with them, aggressively preventing them from having a proper look into Roy’s workshop.

I like how this project engages people in a very unexpected way. People walking around in city streets never expect buildings and other static surroundings to recognize and react to them. They often break out of their routine to take a second look and have a little fun in the middle of their walk.

Some things that I’m not sure about: interestingly, the curtain takes on a certain personality, but the personality reminds me of a very manic and paranoid hermit; also, the artist likes to be very coy and say that he made this to keep people away, but obviously it is more useful at getting attention.

If you move your mouse slowly from the top of the grid to the bottom you will see the chaos ensue. This is the processing.js version above and below is the same code embedded in a jar applet.

This is the same Schotter interaction in c++ with the openFrameworks library.

Processing code below

// shawn sims