Margot Gersing – Project 7 Curves

(click on shapes to activate)

This project I was inspired by some of the shapes shown as examples on the project description. I thought the round shapes were really cute and I could imagine them as a pattern. I made it so that each shape you could manipulate individually by clicking on them. This way there could be more options for what you could create based on the mouse.

>mgersing07

//Margot Gersing - Project 7 - mgersing@andrew.cmu.edu- section E

var oneX = 50; //for mouse press
var oneY = 50;
var act1 = false; //peach shape 'activation'

var twoX = 200; //for mouse press
var twoY = 350;
var act2 = false; //rusty orange shape 'activation'

var threeX = 400; //for mouse press
var threeY = 100;
var act3 = false; //pink shape 'activation'

var fourX = 500; //for mouse press
var fourY = 500;
var act4 = false; //gray shape 'activation'

var nPoints = 100;

function setup() {
    createCanvas(600,600);
    frameRate(10);

}

function draw(){
	background(230, 226, 222);
	noStroke();
	one();
	four();
	two();
	three();

	//filler shapes (static)
	fill(233, 154, 123);
	ellipse(50, 600, 400, 150);
	fill(233, 115, 88);
	ellipse(600, 125, 100, 150);
	fill(95, 44, 39);
	ellipse(150, 150, 25, 25);
	ellipse(175, 175, 20, 20);
	ellipse(135, 180, 25, 25);
	ellipse(185, 135, 25, 25);
	ellipse(155, 115, 20, 20);
	ellipse(500, 500, 20, 20);
	ellipse(490, 535, 25, 25);
	ellipse(600, 275, 25, 25);
	ellipse(575, 250, 25, 25);
	ellipse(560, 285, 20, 20);
	ellipse(60, 480, 25, 25);	

}

function one(){
	//peach shape
	var w1 = 200;
    var h1 = 200;

    //click to activate otherwise static
	if(act1){
		w1 = mouseX * .75;
		h1 = mouseY * .75;
	} else{
		w1 = 200;
		h1 = 200;
	}

	fill(240, 213, 189);
	ellipse(50, 50, w1, h1);
}

function two(){
	//epitrochoid
	var x;
    var y; 
    var a = 80.0;
    var b = a / 2.0;
    var h2 = constrain(100 / 8.0, 0, b);
    var ph2 = 100 / 50.0;

    //click to activate otherwise static
    if(act2){
		h2 = constrain(mouseX / 8.0, 0, b);;
		ph2 = mouseX / 50.0;
	} else{
		h2 = constrain(100 / 8.0, 0, b);
		h1 = 100 / 50.0;
	}
    fill(205, 100, 77);
    beginShape(); //drawing shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h2 * cos(ph2 + t * (a + b) / b);
        y = (a + b) * sin(t) - h2 * sin(ph2 + t * (a + b) / b);
        vertex(x + 200, y + 350);
    }
    endShape(CLOSE);
}

function three(){
	//cranioid
	var x;
    var y;
    var r;
    var a = 40.0;
    var b = 10.0;
    var c = 100.0;
    var p = constrain((width/2), 0.0, 1.0);
    var q = constrain((height/2), 0.0, 1.0);

    //click to activate otherwise static
    if(act3){
    	var p = constrain((mouseX / width), 0.0, 1.0);
        var q = constrain((mouseY / height), 0.0, 1.0);
    } else{
    	var p = constrain((width/2), 0.0, 1.0);
        var q = constrain((height/2), 0.0, 1.0);
    } 
    fill(227, 187, 202);
    beginShape(); //drawing shape 
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r =
            a * sin(t) +
            b * sqrt(1.0 - p * sq(cos(t))) +
            c * sqrt(1.0 - q * sq(cos(t)));
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x + 400, y + 100);
    }
    endShape(CLOSE);
}

function four(){
	//gray shape
	var w4 = 200;
    var h4 = 300;

    //click to activate otherwise static
	if(act4){
		w4 = mouseX;
		h4 = mouseY;
	} else{
		w4 = 200;
		h4 = 300;
	}

	fill(37, 45, 46);
	ellipse(475, 475, w4, h4);
}


function mousePressed(){

	//if clicked within in defined distance then activation state is... 
	   //changed from true to false so the mouseX and mouseY will now take over
	var d = dist(oneX, oneY, mouseX, mouseY);
	if(d < 200){
		act1 = !act1;
	}

	var d2 = dist(twoX, twoY, mouseX, mouseY);
	if(d2 < 100){
		act2 = !act2;
	}

	var d3 = dist(threeX, threeY, mouseX, mouseY);
	if(d3 < 100){
		act3 = !act3;
	}

	var d4 = dist(fourX, fourY, mouseX, mouseY);
	if(d4 < 100){
		act4 = !act4;
	}

}


Margot Gersing- Looking Outwards-06

Fish or Bird?

For this week I found this really fun project done by a man named Larry Cotton. He was is a power-tool designer and part-time community college math instructor. He was inspired by an article written by Charles Platt and Aaron Logue about a how to make a random number generator out of simple hardware that creates an unlimited amount of generated noises that could then be converted to high and low digital states. Larry Cotton, was inspired by this project and decided to use it to create abstract art. He took the RNG and made a drawing machine that used two motors to randomly control a pen.

Drawing machine with pen hooked up.
drawing machine

I love this project because of the hybrid digital and physical nature. It is so cool that the project came from a digital RGN, to physical hardware, to another machine (drawing robot) which makes physical mark making. In the final images, he also scanned them in digitally again to color and finish.

More drawings from Larry Cottons project
scanned in and colored

The other great part about this project is Larry lays out all the steps he did in an article so others can also do it.

Margot Gersing – Abstract Clock

mgersing-06

//Margot Gersing - Project 06 - mgersing@andrew.cmu.edu - Section E

function setup(){
    createCanvas(480, 480);
    angleMode(DEGREES);

}

function draw() {
    background(255, 237, 233);
    translate(width/1000, height); 
    rotate(270); // to start at top of screen

    //time variables
    var s = second();
    var m = minute();
    var h = hour() % 12;

    //outline of ellipse - mapped to reflect time
    var ah = map(h, 0, 12, 0, 360);
	var am = map(m, 0, 60, 0, 360);
	var as = map(s, 0, 60, 0, 360);

	//ellipse size - mapped to reflect time
    var eh = map(h, 0, 12, 300, 400);
	var em = map(m, 0, 60, 150, 250);
	var es = map(s, 0, 60, 10, 100);

	// ellipse - radius increase to reflect time
	noStroke();
	fill(255, 192, 44); //hour circle
    ellipse(width/2, height/2, eh, eh);
	fill(111, 163, 118); //minute circle
    ellipse(width/2, height/2, em, em);
    fill(246, 195, 203); //second circle
    ellipse(width/2, height/2, es, es);

    //outlines
    //seconds
    noFill();
    stroke(229, 56, 26);
    strokeWeight(5);
    arc(width/2, height/2, es, es, 0, as); //outline to reflect seconds passing
    
    //minutes
    noFill();
    stroke(14, 94, 67);
    strokeWeight(10);
    arc(width/2, height/2, em, em, 0, am); //outline to reflect minutes passing

    //hours
    noFill();
    stroke(255, 233, 105);
    strokeWeight(15);
    arc(width/2, height/2, eh, eh, 0, ah); //outline to reflect hour passing
    


}

For this project I wanted to create a bullseye shape that reflected the time in two ways, the outline and the size. I tried to make each circle proportionally sized so that the hour is largest, and second is the smallest. The outline is a more obvious way of showing the time and the size of the circle is much more subtle especially when it comes to the minute and hours.

Margot Gersing – Looking Outwards 05

This week I was inspired by the work of Zeitguised Studios. They are art studio that creates playful and quirky works using a lot of 3d computer graphics. It was founded by Jamie Raap and Henrik Mauler in Chicago and now is based in Berlin.

Birds by Zeitguised Studio

The project I really liked in particular is called birds. It is described as a “lighthearted essay on contextualized characters.” It is essentially representations of birds but only made from things associated with birds, like eggs. It is a playful animation and beautiful imagery.

I think the idea of representing a bird out of everything except for a bird is so cool and I love the playful way they went about it.

Margot Gersing – Project 05 – Wallpaper

mgersing-project5

// Margot Gersing - Project 5 - Section E - mgersing@andrew.cmu.edu

function setup() {
    createCanvas(600,600);

}

function draw(){
	background(249, 209, 99);

	// blue
	for (var y = height/24; y < height; y += height/6) {
        for (var x = width/24; x < width; x += width/6) {
            fill(61, 93, 112);
            noStroke();
            rect(x + 17.5, y, 15, 50);
            rect(x, y + 17.5, 50, 15);
        }
    }

    // red +
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = 0; x < width + width/6; x += width/6) {
            fill(213, 85, 39);
            noStroke();
            rect(x - 7.5, y, 15, 50);
            rect(x - 25, y + 17.5, 50, 15);
        }
    }

    // green shape
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = 25; x < width + width/6; x += width/6) {
            fill(139, 163, 126);
            noStroke();
            rect(x, y - 25, 5, 25);
            rect(x, y, 25, 5);
        }
    }

    // gray shape
    for (var y = 75; y < height + height/6; y += height/6) {
        for (var x = 75; x < width + width/6; x += width/6) {
            fill(50);
            noStroke();
            rect(x, y, 5, 25);
            rect(x, y, 25, 5);
        }
    }

    // white horizontal dots
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = width/12; x < width + width/6; x += width/6) {
            fill(255);
            ellipse(x, y + 15, 5, 5);
            ellipse(x - 15, y + 15, 5, 5);
            ellipse(x + 15, y + 15, 5, 5);
          
        }
    }

    // white vertical dots
    for (var y = height/12; y < height + height/6; y += height/6) {
        for (var x = 0; x < width + width/6; x += width/6) {
            ellipse(x + 15, y, 5, 5);
            ellipse(x + 15, y + 15, 5, 5);
            ellipse(x + 15, y + 30, 5, 5);
            
          
        }
    }

}

For this project I wanted to create a geometric pattern. I also wanted to use festive colors. It was fun to make a playful pattern from simple shapes.

Margot Gersing – Project 04 – String Art

mgersing-sketch

// Margot Gersing - Project 04 String Art - Section E - mgersing@andrew.cmu.edu

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

function draw(){
	background(0);

	// tight lines less wide
	for (i = 0; i < 200; i += 5) {	
		stroke(i, 208, 247); //blue and purple
		line(100, 450 + i, i, 10 - i); //'curve 1'
		line(100, 450 + i, mouseX * 10, 10 - i); //'curve 1' with interaction
	}
	// tight lines
	for (i = 0; i < 600; i += 5) {	
		stroke(i, 235, 225, i); //green to peach
		line(0, i - 100, i, 400); //'curve 2'
		line(0, i - 100, mouseX, mouseY); //'curve 2' with interaction
	}

	// wider lines
	for (i = 0; i < 600; i += 15) {
		stroke(230, 202, i); //purple to ochre
		line(0, 100 - i, 400, 200 + i); //'curve 3'
		line(0, mouseY / 5, 400, 200 + i); //'curve 3' with interaction

		// curve 4
		stroke(252, 186, i, i); //yellow to magenta
		line(400, 200 - i, i - 400, i); //'curve 4'
		line(400, mouseY - i, i - 400, i); //'curve 4' with interaction	
	}
}

I enjoyed making this project. I decided that I wanted to incorporate my ‘i’ variable into more than just the creation of the lines. I experimented with replacing rgb values with ‘i’ and it created really interesting color shifts. I also decided to make a copy of each of the curves I made and make one of them interactive with mouseX and mouseY.

Margot Gersing – Looking Outwards – 04

The sound art I was inspired by this week is a project called Apparatum by panGenerator Collective.

Video of the Apparatum project

This project is a machine with an interactive digital interface that only makes analog sounds. It is inspired by Polish Radio Experimental Studio which created the first electroacoustic music. The musical inspiration is from Symphony – Electronic Music composed by Boguslaw Schaeffer.

graphic score

My favorite part about this project is the combination of a graphic image, sound and a digital interface. I also really liked the interactive component of the project. The machine is based on magnetic tape and optical components that are controlled by a graphic score which was made on the digital interface. The software used to create the interface is electron (node.js) and teensy 3.2. 

Interface for machine
machine and speakers

Article 1, panGenerator

Margot Gersing – Project 03 – Dynamic Drawing

I really enjoyed combining different skill we have learned so far into this project. I started off using radial rotation which was fun to experiment with. I also utilized ‘easing’ which I think adds another level of interest to it.

Margot-dynamicdrawing

// Margot Gersing - Project 03 - Section E - mgersing@andrew.cmu.edu

// easing circle variables 
var cx = 100;
var cy = 100;
var diffx = 0;
var diffy = 0;
var targetX = 100;
var targetY = 100;

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

function draw(){
	background(1, 58, 111);

	// BACK RECTANGLES
	// rectangle's y position follows mouseY
	fill(186, 216, 227); //light blue
	rect(width / 2, mouseY, width, 300);

	// rectangle's x position follows mouseX
	fill(253, 145, 83); //orange
	rect(mouseX, height / 2, 100, height);

	// CIRCLE
	noFill();
	stroke(255);
	strokeWeight(10);

	// circle follows mouse with an ease of 0.1
	diffx = mouseX - cx;
    diffy = mouseY - cy;
    cx = cx + 0.1 * diffx;
    cy = cy + 0.1 * diffy;
    ellipse(cx, cy, 250, 250);

	noStroke();

	// if mouse is on the left side of screen fill outer rectangles with yellow
	if (mouseX < width / 2) {
		fill(255, 185, 65); //yellow
	}

	// if mouse is on the right side of screen fill outer rectangles with dark green
	if (mouseX > width / 2) {
		fill(22, 88, 51); //dark green
	}

	// OUTER RECTANGLES
	// six rectangles evenly rotated around center on circle with radius of 180
	// size controlled by mouseX / 2 and mouseY / 2

	translate(width/2, height/2);
	for (var i = 0; i < 6; i++) {
		push();
		rotate(TWO_PI * i / 6);
		rect(180, 0, mouseX / 2, mouseY / 2);
		pop();
	}

	// if mouse is in the bottom part of screen fill inner rectangles with purple

	if (mouseY < height / 2) {
		fill(150, 71, 98); //purple
	}
	
	// if mouse is in the top part of screen fill inner rectangles with red
	if (mouseY > height / 2) {
		fill(255, 104, 62); //red
	}

	// INNER RECTANGLES
	// six rectangles evenly rotated around center on circle with radius of 50
	// size controlled by mouseX / 3 and mouseY / 3

	for (var i = 0; i < 6; i++) {
		push();
		rotate(TWO_PI * i / 6);
		rect(50, 0, mouseX / 3, mouseY / 3);
		pop();
	}
}

Margot Gersing – Looking Outwards – 03

sound vibration printed clay pot

This week the project that I was really interested in was a collaboration between Olivier Van Herpt and Ricky Van Broekhoven Solid Vibration project (2005). I actually saw this a long time ago and it has stuck with me because I found it so interesting.

Video of the pots being printed.
Morie pattern (Wikipedia)

Van Herpt began by using a 3D printer to make pottery but noticed that the sounds and vibrations from the machinery was creating moiré patterns. Van Herpt wanted to embrace this so he enlisted Broekhoven, a sound designer’s, help. These patterns were an error but they inspired the pair to make art from the sound waves.

They did this by printing the pot onto a surface that was sitting on a speaker. As the speaker moved with the vibrations, this translated into the clay.

Close up of moiré patterns from the vibrations
More printed pots in gallery showing

Olivier Van Herpt Site (source of images and video)

Note: I am unsure of what specific algorithms were used to print.

Margot Gersing – Project 02 – Variable Face

I enjoyed taking my self portrait and adapting it for this project. I did make some changes but I tried to keep the same style. It was also super helpful to learn how to use the curveVector(). It took me a while to figure it out but now that I know how to use it, I know it will come in really handy.

margot-project-02


// Margot Gersing - Project 02 - mgersing@andrew.cmu.edu - Section E
var eyeWidth = 30;
var eyeHeight = 30;
var faceWidth = 300;
var faceHeight = 300;
var noseHeight = 200;
var faceColor = 162;
var noseColor = 178;
var eyeColor = 66;
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(202, 211, 227);

    // face
    fill(246, faceColor, 136);
    noStroke();
    ellipse(240, 300, faceWidth,  faceHeight);

    // eyes
    // lids
    noFill();
    strokeWeight(4);
    strokeJoin(ROUND);
    stroke(243, 103, 71);
    beginShape();
    curveVertex(130, 270);
    curveVertex(130, 270);
    curveVertex(150, 250);
    curveVertex(180, 250);
    curveVertex(200, 270);
    curveVertex(200, 270);
    endShape();

    beginShape();
    curveVertex(280, 270);
    curveVertex(280, 270);
    curveVertex(300, 250);
    curveVertex(330, 250);
    curveVertex(350, 270);
    curveVertex(350, 270);
    endShape();

    // eyelash
    strokeWeight(4);
    line(130, 270, 123, 267);
    line(135, 260, 128, 256);
    line(350, 270, 357, 267);
    line(345, 260, 352, 256);

    // iris
    fill(29, eyeColor, 163);
    noStroke();
    ellipse(165, 265, eyeWidth, eyeHeight);
    ellipse(315, 265, eyeWidth, eyeHeight);

    // nose
    fill(255, noseColor, 55);
    triangle(240, noseHeight, 220, 330, 260, 330);

    // mouth
    noFill();
    strokeWeight(6);
    strokeJoin(ROUND);
    stroke(243, 103, 71);
    line(210, 390, 270, 390);
    beginShape();
    curveVertex(210, 390);
    curveVertex(210, 390);
    curveVertex(230, 375);
    curveVertex(250, 375);
    curveVertex(270, 390);
    curveVertex(270, 390);
    endShape();
}
 
function mousePressed() {
    faceWidth = random(270, 450);
    faceHeight = random(250, 450);
    eyeWidth = random(20, 40);
    eyeHeight = random(20, 40);
    noseHeight = random(200, 300);
    faceColor = random(120, 200);
    noseColor = random(160, 200);
    eyeColor = random(30, 110);
    
}