Author: Erin

Erin Fuller Project-07-Curves

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 07 - Curves

function setup() {
    createCanvas(480, 480);  
}


function draw() {

	background(10);

    var a = map(mouseX, 0, width, 0, 200);
    var b = map(mouseY, 0, height, 0, 200);

    var r = map(mouseX, 0, width, 0, 255);
	var g = map(mouseY, 0, width, 0, 255);

	//var v = createVector( width / 2, height / 2);
    
	beginShape();
	for(var i = 0; i < 300; i ++) {

		noFill();
		stroke(r, g, -r);

		push();

        var t = map(i, 0, 200, 0, 360);
        var n = ceil(map(mouseX, 0, width, 3, 6));

        //http://mathworld.wolfram.com/Astroid.html

	    x = (2 * a * cos(t)) + (b * cos(n * t));
	    y = (2 * a * sin(t)) - (b * sin(n * t));
	    vertex(x + width / 2, y + height / 2);
	   
	    pop();
	}

	endShape();
}

I started this using the curve “Astroid” from Wolfram. The curve did not turn out how I thought it would but it looked better than I thought. In a very unscientific way, I messed around with different variables until I found something that looked nice.

Erin Fuller-LookingOutwards-07

ibm flux, 2017

The digital art and design studio, onformative, was commissioned by IBM to create a permanent installation for the new IBM Watson IoT Headquarters in Munich last year. The result was a data-driven art installation visualizing the different facets of the Internet of Things and cognitive technologies called “ibm flux”.


video of ibm flux

From ribbons of light to responsive gradients, the visual content is data-driven and interactive based on real-time time input of various sensor inputs and weather forecasting and culminates in an upward motion with a pulse and positive momentum. The shape was inspired by the IBM Watson and realized by using thirty-two curved screens span over eight ribbon displays.

Close up of the fabrication

“flux” activates the space and demonstrates the significance of cognitive technologies and A.I. in our present world and future – reflecting the ideation, innovation, growth and creative power of technology.

Installation relating to exterior conditions

LookingOutwards-06-Erin Fuller

I found this Looking Outwards prompt particularly difficult. Maybe it is just how I view life but I find it hard for anything to be authentically “random”. The work I finally settled on was “8-Corner” by Georg Nees, a German scholar who is commonly cited as a pioneer of computer art and generative graphics.

GEORG NEES8-CORNER / GENERATIVE COMPUTER GRAPHIC, 1960s “To produce the graphics, I used a drawing board controlled by a punch tape and a digital computer producing the pilot tape. Each graphic has random parameters. The program for each graphic...
“8-CORNER”, Georg Nees, 1960s

“Rule for 8-corner: Distribute eight dots inside the figure square and connect them with a closed straight edge line.” – Nees

This graphic composition was created using a drawing board controlled by a punch tape and a digital computer producing the pilot tape. How it is random is that, because each graphic repeats a generative fundamental operation, the redundancy produces a random parametric value of the graphic during the repetition.

Erin Fuller-Abstract-Clock

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 06-Abstract Clock

function setup() {
    createCanvas(400, 400);
    noStroke();
}

function draw() {
    background(60);

    var x = width / 2; //ellipse center
    var y = height / 2; //ellipse center
    var d = 350; //ellipse diameter

    fill(90); // background circle
    ellipse(x, y, d, d);

    fill(255, 146, 68, 120); // MINUTE CHORD   
    var m = map(minute() + map(second(), 0, 60, 0, 1), 59, 0, 0, PI); // map minutes to half circle
    arc(x, y, d, d, m - (PI / 4), -(m) - (PI / 4), CHORD); // -pi/4 to shrink diagonally right to left

    fill(252, 123, 129, 120); // HOUR CHORD   
    var h = map(hour() + map(minute(), 0, 60, 0, 1), 23, 0, 0, PI); // map hours to half circle
    arc(x, y, d, d, h + HALF_PI, -(h) + HALF_PI, CHORD); // +pi/2 to shrink bottom to top

    fill(215, 105, 172, 120); // SECONDS CHORD   
    var s = map(second(), 59, 0, 0, PI); // map seconds to half circle
    arc(x, y, d, d, s - (3 * PI / 4), -(s) - (3 * PI / 4), CHORD); // -3pi/4 to shrink diagonally left to right
}

My “clock” is based on three translucent chords. The data for the minutes, seconds, and hours, are mapped along half the circle and reflected. The color and opacity, allowing the colors to overlap and add on each other, were chosen for visual variety along with shifting the start of the chords in different positions along the circle.

Erin Fuller – Wallpaper

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 05 - WallPaper


function setup() {
    createCanvas(600, 400);
    noLoop();
}

function draw() {
    background(255, 206, 233);
    for (var i = -1; i < 6; i++) { //for loop to make grid of "tiles"
        for (var j = -1; j < 4; j++) { 
        rX = i * 100; // tile spacing
        rY = j * 100;// tile spacing
        tile(); //runs "tile" function where all my actual components are
        }
    }
}

function tile() {
    squiggle(); //runs two arc functions to make "squiggle"
    triangles(); //draws 2 triangles offset
    circles(); //draws 2 circles offset
}

function squiggle() {
    strokeWeight(6);
    stroke(0);
    noFill();
    arc(rX + 30, rY, 30, 30, PI, 3 * HALF_PI); // upper curve
    arc(rX + 30, rY + 70, -30, 30, 0, 3 * HALF_PI); // lower curve
}

function triangles() {
    noStroke();
    fill(0); // background triangle always black
    triangle(rX + 80, rY + 5, rX + 35, rY + 55, rX + 80, rY + 55);

    fill(random(255), random(255), random(255)); // makes front triangle fun colors!
    triangle(rX + 85, rY + 10, rX + 40, rY + 60, rX + 85, rY + 60);
}

function circles() {
    noStroke();
    fill(0); //background circle always black
    ellipse(rX + 30, rY + 25, 15, 15);

    fill(random(255), random(255), random(255)); //makes front circle fun colors!
    ellipse(rX + 25, rY + 20, 15, 15);
}

My inspiration was that I wanted my wallpaper to look like a fun 90s pattern. I made the objects in separate functions and tiled them using a for-loop. A neat thing is the triangle and circles are random fills so everytime you refresh it is a color!

Erin Fuller-Looking Outwards-05

Scale of ANIMAS

The Berlin-based studio Onformative created an interactive art installation called “ANIMAS” (2015). Physically the installation is a giant glowing sphere measuring two meters in diameter, on the interior is a powerful wide-angle projector and fisheye lens, producing images in a full 360-degree directional beam onto the sphere.

The orb, which can be seen from all angles, is constantly moving, producing a dynamic “texture” that is computer generated. Modulating frequencies audible in the installation respond to those in the installation space as sound is picked up and resonated back. While the project is not necessary “groundbreaking” in technologies, it was certainly executed well and a beautiful art piece.

Video of Animas in Action

 

Erin Fuller Project-04-String-Art


//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 04

// please view on safari, does not work on chrome

var x; //mouseX global
var y; //mosueY global

var control; // laser position based on for loop increments

function setup() {
    createCanvas(400, 300);
}

function draw() {
    background(0);

    var x = mouseX * (255 / width); // changes g value relative to width
    var y = mouseY * (255 / height); // changes b value relative to width

    stroke(255, x, y); //g and b values changed 
    strokeWeight(.005); // very thin lines to look like lasers

    for (var i = 0; i < 100; i++) {
        var control = (i * mouseX) / 75; //control increases based on mouseX postion
        
        line(0, 0, control, height);//top left "laser" pointing down
        line(0, 0, width, control);//top left "laser" pointing right
   
        line(width, height, control, 0);//bottom right "laser" fanning left and up
        line(0, control, width, height);//bottom right "laser" fanning left and down
    }
}

I wanted my “String Art” to be reminiscent of a laser light show like what you see at concerts. So as you move your mouse you change how wide the “lasers” fan out and their color.

Erin Fuller-LookingOutwards-04

The project “Green Music”, by John Lifton, a London based artist, was part of the documentary called “The Secret Life of Plants” (1979). Lifton produced music based on the bio-electronic sensing of plants to record the “stress” of their physical environment, such as light, temperature, the presence of guests, etc. In this project, the computers are constantly receiving information from the sensors attached to the plants, and converting the data into music. In this work it makes both the plants and humans creators in that they are both acting on each other to produce this sound; although there is no tangible interaction with the artwork, guests presence alone can be enough for the plants to react and create different music. I think that’s beautiful.

    Documentary Clip of “Green Music”, 1979

I think this project is admirable just because it was created so long ago. It is easy to think the computational design is something of this decade or even just this millennium, but this project has shown me that people have been working on and progressing the field of computational design for much longer than I previously thought.

P03: Dynamic Drawing – Erin Fuller

I based my initial design off of the idea of the rotational translation we learned in our lab session. Using the mouse position you can change: the background color, sizes of the level one and level two circles, the distance of circles from the center, and the rotation of the level two circles around the level one circles.

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 03

function setup() {
    createCanvas(640, 460);
    rectMode(CENTER);
}

function draw(){
    colorMode(HSB);
	backH = mouseX/width*360; // background hue change depending on mouseX
	backS = mouseY/width*360; // background saturation change depending on mouseY
    var c = color(backH, backS, 70); 
    background(c);

	var eS = mouseX/10 // inner circle size change depending on mouseX
	var eO = mouseX/45 // outer circle size change depending on mouseX

	translate(width/2, height/2);
	for (var num = 0; num < 8; num++) {
		push();
		rotate(TWO_PI * num / 6);
		translate(mouseX/2, 0); // pushes larger circles out based on X postion
		ellipse(0, 0, eS, eS); // inner circles
		for (var j = 0; j < 15; j++) {
			push();
			var spin = mouseX/width * TWO_PI // causes smaller circles to go around the big circle
			rotate(spin * j / 9); 
			ellipse(40, 0, eO, eO); // outer circles
			pop();
		}		
		translate()
		pop();
	}
}

Erin Fuller LookingOutwards-03

Image result for ICD/ITKE Research Pavilion 2013/14 at the Design Society
ICD ITKE Research Pavilion 2013-14

This Research Pavilion, 2013 – 14, was created by the Institute for Computational Design (ICD) and the Institute of Building Structures and Structural Design (ITKE) of the University of Stuttgart. The main goal of this structure was to continue to investigate in bionic research. The design of the structure was generated by algorithms meant to mimic the natural strength of the fiber composition of shells and exoskeletons. The students and researchers translated this to human scale installation by using lightweight fiberglass strings, taking place of natural fibers in cytoskeletons, wound around a steel frame.

I like this project because it is not only beautiful, but it shows a new path for architectural construction –  by bringing nature back into the design rather than creating the orthogonal structures we live in every day.