The video shows how the program should work – words said include “wind” “phone” “black” “yellow” “sock” “shoe” “roof” “ceiling” “cold” “warm” “wind” “water”.

I was trying to create some kind of fuzzy text or spoken word visualizer/analyzer, in a compositional landscape, using the p5.Speech library.
The width of the grayscale boxes is according to the letter of the word.
The morse code is a translation of the letters.
The text is a fuzzy recognition of the words, stretches according to the amplitude.
The ellipses are a representation of amplitude.
The voice recognition does not work too well, but overall I’m satisfied with the effect.

The project requires a local server to run due to the microphone components.
Instructions:
1. Download and extract FINAL PROJECT
2. Install node js
3. type npm install -g http-server into node terminal and enter
4. cd the extracted folder and enter
5. type http-server -c-1 and enter
6. node terminal will give you links
7. enter the link into a browser
8. file should run!

For the final project, I want to create something that involves both generative and interactive components. I’m interested in creating generative motion graphics that involve typography, fill, and some 3D component. It will be generative either based on a set of data consisting of words (like a wikipedia page). It will also be dependent on also the mouse activity laid on the canvas. The shapes and lines will change according to interactivity, but type depends on the data fed in. The text interacts with the 3D shape by going around and behind it as well. I will be reading up on 3D super shapes and Dan Shiffman’s tutorials on them. Hopefully the type and the the shapes create a sense of aesthetically pleasant landscape that represents a set of data. I’m trying to create a piece of generative art that is not obviously showing a set of data, but looks like compositional, time based, motion graphics.

above is an image of a potential landscape composition

My proposed project has to do randomness that generates relationships between lines, fills, and typography. The first project I was inspired by was Matthias Dörfelt’s Marcel’s Fountains. Simply, it is a series of Marcel Duchamp’s famous fountain, but the interesting part is that the slight variety computer generated. The work is simple but cute and calm to observe the subtle differences between each drawing. The subject selected for the drawing is also eye catching. I imagine the process is similar to the variable face project a while back. The work doesn’t have any interactivity, probably purposefully so, as it is presented with ink on paper.

Marcel’s Fountains – showing one drawing

Marcel’s Fountains – computer generated series of drawings

src: http://www.mokafolio.com/

Another piece I’m inspired by are posters by KAZUHIRO AIHARA or “SHUNTO-SHA”. Japanese graphic artists tend to create custom typeface for their work (Japanese typefaces are difficult to create and there aren’t many off the shelf), and his work exemplifies this point. There is a sense of randomness and flow of type between the lines and fills in his compositions. Again, his work is static and non interactive. For both of these, I think exploring interactivity and motion would be worthwhile.

Examples of Shunto’s work

src: http://shunto-sha.com/

Circuli in action

Circuli is a generative musical instrument conceptualized and developed by Batuhan Bozkurt in 2012, and is now an IOS app. The circles on the interface grow at a constant rate, and do not overlap. Bigger circles push and shrink smaller circles when in contact. A circle pops and makes noise when its boundary intersects the center of another circle. The pitch is decided by the position of the circle on the background. The bigger the hole is, the higher the pitch. The envelope of the produced sound seems to be determined by a number of parameters including the final circle size and the time of interaction between two involved circles. This project to me seems to make sense visually and is coherent to its audio component. It creates a multi-sense concert in a way.

source : https://earslap.com/page/circuli.html

project11

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-11

//variables for shape change
var addCai = 0
var addDe = 0
var addFu = 0
var addXi = 0
var addAi = 0
var c = 10
var jitter;

//for differnt turtles
var pX = 40 
var pY = 0
var pYMove = 1

var fX = 130
var fY = 100
var fYMove = 1

var tX = 225
var tY = 0
var tYMove = 1

var cX = 310
var cY = 100
var cYMove = 1

var dX = 405
var dY = 0
var dYMove = 1

//loading Chinese character images
function preload(){

	aiPic = loadImage("https://i.imgur.com/o5xIMAW.png")
	fuPic = loadImage("https://i.imgur.com/GA5Rnem.png")
	xiPic = loadImage("https://i.imgur.com/5sx0vnR.png")
	caiPic = loadImage("https://i.imgur.com/LJIdHCA.png")
	dePic = loadImage("https://i.imgur.com/iuYqMLD.png")

}

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

function draw(){
    frameRate(40);
    var backC = 255
    //creating "drag" effect with transaparent bg
    background(backC,60);

	noFill();
	stroke(255,0,0);
	strokeWeight(3)
    rect(0,0,width,height,30)

    noStroke();

////////////AI//////////////

var turtlec = new Turtle(pX + 23, pY - 19);

	//drawing the shape
    for(var i = 0; i < 20; i ++){
    turtlec.penUp();
    turtlec.forward(5)
    turtlec.penDown();
    turtlec.setColor(color(255,0,0,10));
    turtlec.setWeight(2);
    turtlec.forward(c);
    turtlec.right(30+addAi);
    turtlec.forward(c);
    turtlec.right(30+addAi);
    turtlec.forward(c)
    turtlec.right(30+addAi);
    turtlec.forward(c);
    turtlec.left(30+addAi);

    c = random(10,11)
    
    //changing the shape when mouse is pressed
    if (mouseIsPressed){
	addAi = addAi += 1
	}

	if (addAi == 20){
		addAi = 0
	}
}

//inserting the image of character, adding jitter, and reverse motion when it hits walls
image(aiPic, pX+jitter, pY+jitter)
tint(255, 127);    

    pY = pY += pYMove
    jitter = random(1,3)

    if(pY > height-50){
    	pYMove = -1
    } else if (pY < 20){
    	pYMove = 1
    }

// above comments can be used for all following characters

////////////XI//////////////

var turtlec2 = new Turtle(tX + 23, tY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec2.penUp();
    turtlec2.forward(5)
    turtlec2.penDown();
    turtlec2.setColor(color(255,0,0,10));
    turtlec2.setWeight(2);
    turtlec2.forward(c);
    turtlec2.right(30+addXi);
    turtlec2.forward(c);
    turtlec2.right(30+addXi);
    turtlec2.forward(c)
    turtlec2.right(30+addXi);
    turtlec2.forward(c);
    turtlec2.left(30+addXi);

    c = random(10,11)
    if (mouseIsPressed){
	addXi = addXi += 1
	}

	if (addXi == 20){
		addXi = 0
	}

}


image(xiPic, tX+jitter, tY+jitter)
tint(255, 127);

    tY = tY += tYMove

    jitter = random(1,3)


    if(tY > height-50){
    	tYMove = -1
    } else if (tY < 20){
    	tYMove = 1
    }


///////////FU//////////

var turtlec3 = new Turtle(fX + 28, fY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec3.penUp();
    turtlec3.forward(5)
    turtlec3.penDown();
    turtlec3.setColor(color(255,0,0,10));
    turtlec3.setWeight(2);
    turtlec3.forward(c);
    turtlec3.right(30+addFu);
    turtlec3.forward(c);
    turtlec3.right(30+addFu);
    turtlec3.forward(c)
    turtlec3.right(30+addFu);
    turtlec3.forward(c);
    turtlec3.left(30+addFu);

    c = random(10,11)
  
  if (mouseIsPressed){
	addFu = addFu += 1
	}

	if (addFu == 20){
		addFu = 0
	}

}


image(fuPic, fX+jitter, fY+jitter)
tint(255, 127);

    fY = fY += fYMove



    jitter = random(1,3)


    if(fY > height-50){
    	fYMove = -1
    } else if (fY < 25){
    	fYMove = 1
    }




///////////CAI//////////

var turtlec4 = new Turtle(cX + 28, cY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec4.penUp();
    turtlec4.forward(5)
    turtlec4.penDown();
    turtlec4.setColor(color(255,0,0,10));
    turtlec4.setWeight(2);
    turtlec4.forward(c);
    turtlec4.right(30+addCai);
    turtlec4.forward(c);
    turtlec4.right(30+addCai);
    turtlec4.forward(c)
    turtlec4.right(30+addCai);
    turtlec4.forward(c);
    turtlec4.left(30+addCai);

    c = random(10,11)
  
  if (mouseIsPressed){
	addCai = addCai += 1
	}

	if (addCai == 20){
		addCai = 0
	}

}




image(caiPic, cX+jitter, cY+jitter)
tint(255, 127);

    cY = cY += cYMove

    jitter = random(1,3)


    if(cY > height-50){
    	cYMove = -1
    } else if (cY < 25){
    	cYMove = 1
    }

///////////DE//////////

var turtlec5 = new Turtle(dX + 28, dY - 19);

    for(var i = 0; i < 20; i ++){
    turtlec5.penUp();
    turtlec5.forward(5)
    turtlec5.penDown();
    turtlec5.setColor(color(255,0,0,10));
    turtlec5.setWeight(2);
    turtlec5.forward(c);
    turtlec5.right(30+addDe);
    turtlec5.forward(c);
    turtlec5.right(30+addDe);
    turtlec5.forward(c)
    turtlec5.right(30+addDe);
    turtlec5.forward(c);
    turtlec5.left(30+addDe);

    c = random(10,11)

  if (mouseIsPressed){
	addDe = addDe += 1
	}

	if (addDe == 20){
		addDe = 0
	}


}




image(dePic, dX+jitter, dY+jitter)
tint(255, 127);

    dY = dY += dYMove

    jitter = random(1,3)


    if(dY > height-50){
    	dYMove = -1
    } else if (dY < 20){
    	dYMove = 1
    }




}



//=======================================================
// TURTLE GRAPHICS IMPLEMENTATION

function Turtle(x, y) {
  this.x = x;
  this.y = y;
  this.angle = 0.0;
  this.penIsDown = true;
  this.color = color(128);
  this.weight = 1;
 
  this.left = function(d) {
    this.angle -= d;
  };
  this.right = function(d) {
    this.angle += d;
  };
  this.forward = function(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
  };
  this.back = function(p) {
    this.forward(-p);
  };
  this.penDown = function() {
    this.penIsDown = true;
  };
  this.penUp = function() {
    this.penIsDown = false;
  };
  this.goto = function(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
  };
  this.distanceTo = function(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
  };
  this.angleTo = function(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 160) % 160.0;
    return angle;
  };
  this.turnToward = function(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
      this.angle += d;
    } else {
      this.angle -= d;
    }
  };
  this.setColor = function(c) {
    this.color = c;
  };
  this.setWeight = function(w) {
    this.weight = w;
  };
  this.face = function(angle) {
    this.angle = angle;
  }
}

The shape that turtle graphics can make really reminded me of the stamps of lucky red Chinese stamps (they’re flower-like radial compositions). I tried to replicate that in this project, having these stamps bounce in a banner type organization and taking advantage of turtle graphics in loop, have it change shape slightly when the mouse is pressed.

normal state of shape

changed state of shape when mouse is pressed

project10

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-10

var plates = [];
var plates2 = [];
var plates3 = [];

var sushi = [];
var sushi2 = [];
var sushi3 = [];

var salmon;
var roe;
var egg;
var seaweed;

//preload all images of sushi and gradients
function preload(){
	var bgLink = "https://i.imgur.com/alDAyjZ.jpg"
	var bar1Link = "https://i.imgur.com/60amesK.png"
	var bar2Link = "https://i.imgur.com/fghTsKQ.png"
	var bar3Link = "https://i.imgur.com/SCIYqYe.png"

	var salmonLink = "https://i.imgur.com/Cb4N5Lb.png"
	var roeLink = "https://i.imgur.com/rJjcqJo.png"
	var eggLink = "https://i.imgur.com/FMF2QvN.png"
	var seaweedLink = "https://i.imgur.com/QbnIWmr.png"

	salmon = loadImage(salmonLink)
	roe = loadImage(roeLink)
	egg = loadImage(eggLink)
	seaweed = loadImage(seaweedLink)

	bg = loadImage(bgLink)
	bar1 = loadImage(bar1Link)
	bar2 = loadImage(bar2Link)
	bar3 = loadImage(bar3Link)
}


function setup() {

	createCanvas(480, 360)
		
	}

//make new plates for first belt
function makenewPlates(){
	//even-ish chance of getting different types of sushi
	if(random(0,2)<0.0025 & random(0,2)> 0.000){
		plates.push(new makePlates(width,60, -6, 3.5));
		sushi.push(new makeSushi(width-30, 40, -6, 3.5, salmon))

	} else if(random(0,2)<0.005 & random(0,2)> 0.0025) {
		plates.push(new makePlates(width,60, -6, 3.5));
		sushi.push(new makeSushi(width-30, 40, -6, 3.5, egg))

	} else if(random(0,2)<0.0075 & random(0,2)> 0.005) {
		plates.push(new makePlates(width,60, -6, 3.5));
		sushi.push(new makeSushi(width-30, 40, -6, 3.5, roe))

 	} else if(random(0,2)<0.01 & random(0,2)> 0.075) {
		plates.push(new makePlates(width,60, -6, 3.5));
		sushi.push(new makeSushi(width-30, 40, -6, 3.5, seaweed))
 
	}
}

//make new plates for second belt
function makenewPlates2(){

	if(random(0,2)<0.0025 & random(0,2)> 0.000){
		plates2.push(new makePlates(93,0, 5, 3));
		sushi2.push(new makeSushi(63, -25, 5, 3, salmon))

	} else if(random(0,2)<0.005 & random(0,2)> 0.0025) {
		plates2.push(new makePlates(93,0, 5, 3));
		sushi2.push(new makeSushi(63, -25, 5, 3, egg))

	} else if(random(0,2)<0.0075 & random(0,2)> 0.005) {
		plates2.push(new makePlates(93,0, 5, 3));
		sushi2.push(new makeSushi(63, -25, 5, 3, roe))

 	} else if(random(0,2)<0.01 & random(0,2)> 0.075) {
		plates2.push(new makePlates(93,0, 5, 3));
		sushi2.push(new makeSushi(63, -25, 5, 3, seaweed))
 
	}
}


//make new plates for third belt
function makenewPlates3(){

	if(random(0,2)<0.0025 & random(0,2)> 0.000){
		plates3.push(new makePlates(0, 170, 6, -3.5));
		sushi3.push(new makeSushi(-30, 150, 6, -3.5, salmon))

	} else if(random(0,2)<0.005 & random(0,2)> 0.0025) {
		plates3.push(new makePlates(0, 170, 6, -3.5));
		sushi3.push(new makeSushi(-30, 150, 6, -3.5, egg))

	} else if(random(0,2)<0.0075 & random(0,2)> 0.005) {
		plates3.push(new makePlates(0, 170, 6, -3.5));
		sushi3.push(new makeSushi(-30, 150, 6, -3.5, roe))

 	} else if(random(0,2)<0.01 & random(0,2)> 0.075) {
		plates3.push(new makePlates(0, 170, 6, -3.5));
		sushi3.push(new makeSushi(-30, 150, 6, -3.5, seaweed))
 
	}
}


function draw(){

	// sushi travels slowly
	frameRate(25)

	//background image
	image(bg, 0,0)

	//call to push plates into array
	makenewPlates();
	makenewPlates2();
	makenewPlates3();

	//conveyor belt 1
	image(bar1, 0,0)

	//move and display sushi and plates in first set of array
	for (var i = 0; i < plates.length; i++){
		plates[i].move();
		plates[i].display();
		sushi[i].move();
		sushi[i].display();
	}

	//conveyor belt 2
	image(bar2, 0,0)

	//move and display sushi and plates in second set of array
	for (var i = 0; i < plates2.length; i++){
		plates2[i].move();
		plates2[i].display();
		sushi2[i].move();
		sushi2[i].display();
		}

	//conveyor belt 3
	image(bar3, 0,0)

	//move and display sushi and plates in third set of array
	for (var i = 0; i < plates3.length; i++){
		plates3[i].move();
		plates3[i].display();
		sushi3[i].move();
		sushi3[i].display();		
		}
	}
	

// constructing the plates and their behavior
function makePlates(makeX, makeY, speedX, speedY){

	this.x = makeX
	this.y = makeY


	this.Xspeed = speedX
	this.Yspeed = speedY

	this.color = color(255,0,0)

	this.move = function() {

	this.x += this.Xspeed
	this.y += this.Yspeed
	
	}
	this.display = function(){
		noStroke();
		fill(170, 170, 170);
		ellipse(this.x-5, this.y+12, 102, 57)		
		fill(199, 222, 202)
		ellipse(this.x, this.y+2, 113,66)
		fill(240, 249, 250)
		ellipse(this.x, this.y, 113, 66)
		fill(203,233,230)
		ellipse(this.x, this.y, 95, 56)
		fill(240, 249, 250)
		ellipse(this.x, this.y+3, 89, 51)
	}
}

// constructing the different sushis and their behavior
function makeSushi(makeX, makeY, speedX, speedY, top){

	this.x = makeX
	this.y = makeY

	this.fish = top

	this.Xspeed = speedX
	this.Yspeed = speedY

	this.color = color(255,0,0)

	this.move = function() {

	this.x += this.Xspeed
	this.y += this.Yspeed
	}

	this.display = function(){

		image(this.fish,this.x, this.y)
	}
}

initial sketches

I didn’t really want a traditional landscape, so I thought about representing either faces or food. The phrase “stuff passing by” really reminded me of a sushi conveyor belt, so I decided to use that as my landscape. Having one felt like the conveyor belt was more an object, therefore I made three in order to make the piece a bit more spatial and landscape-y. I started by drawing the bars and sushi itself with code, but it wasn’t too efficient and I couldn’t get to the level of detail I wanted. I ended up drawing it somewhere else and animating it with p5. The result is some abstract land with some sushi flying around on colorful carousels.

Rainbow Sound Collision from evsc on Vimeo.

Demonstration of the application, using the track ‘Singing under the Rainbow’ by World’s End Girlfriend.

Hollow sound sculptures made from ABS.

This project by Eva Schindling is called Liquid Sound Collision, created in 2009. It uses two opposite words as vibration source that feeds into a fluid simulation. The waves created by the sound files run towards each other, collide and interfere with each others patterns. A frozen moment of this event is then translated into a 3D sculpture. The quantifying of seemingly unquantifiable concepts and objects is interesting in this project. It also produces aesthetically pleasing forms that have a whole lot of data involved. Schindling received a MSc. in Art and Technology from Chalmers University in Sweden and a degree in Interaction and Media Design from FH Joanneum in Austria. Currently she works as a creative technologist at Daily tous les jours in Montreal. Her work ranges from embodied evolutionary robotics, algorithmic pattern formation to the visualization of otherwise invisible sound waves.

project9

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-09

//preloading two hugh faces into varialbes
function preload() {
    var hughFronturl = "https://i.imgur.com/fKUjDi7.jpg";
    var hughSideurl = "https://i.imgur.com/vNGpU0e.jpg";    
    hughFrontImage = loadImage(hughFronturl);
    hughSideImage = loadImage(hughSideurl);
    }

//load pixels from the two pictures of hugh's faces
function setup() {
    createCanvas(200, 267);
    hughFrontImage.loadPixels();
    hughSideImage.loadPixels();
    
    }

function draw() {

    frameRate(300);

    //setting background color
    background(255,0,255);
    noStroke();

    //drawing the two green rectangles
    fill(0, 255,0)
    rect(0, 0, 130, 70)
    rect(188, width/2, 12, 167)


    //creating a grid for image sampling
    for (x = 0; x < width/6; x++) {
        for(y = 0; y < height/6; y++){

            //the sample grid interacts with mouse horizontal movement
            var pixelX = x * 6 + mouseX - width/2;
            var pixelY = y * 6

            //getting pixels of the images according to sample grid, and also their brightness
            var theColorAtLocationXY = hughFrontImage.get(pixelX, pixelY);
            var pixelBrightness = brightness(theColorAtLocationXY);

            var theColorAtLocationXY2 = hughSideImage.get(pixelX, pixelY);
            var pixelBrightness2 = brightness(theColorAtLocationXY2);


            //draws the front face if mouse is on left-ish side of the frame
            if (mouseX < (5/8)*width){

                //maps pixel brightness for the width of rectangles created
                var rWidth = map(-pixelBrightness, -255, 0, -4, 7)
                var rHeight = 10;
                //maps pixel brightness to the darkness of the rectangles
                G = map(pixelBrightness, 0, 200, 255, 0)
                fill(255, G, 255)
                
                rect (pixelX,pixelY, rWidth, rHeight)
                
                }

            //draws the "turn"
            //draws the side face if mouse is on right-ish side of the frame
            if (mouseX > (5/8)*width){

                var rWidth = map(-pixelBrightness2, -255, 0, -4, 7)
                var rHeight = 10;
                G = map(pixelBrightness2, 0, 200, 255, 0)
                fill(255, G, 255)

                rect (pixelX,pixelY, rWidth, rHeight)
                
                }

        }
    }

}

I created a portrait of Hugh and wanted to emphasize horizontality, especially with the turning of the face when you move the mouse. The code was really slow so I tried making the images even smaller, but it is still slow. I don’t know what to do.

front face

turned face

Nervous Structure (field) (2012) by Annica Cuppetelli and Cristobal Mendoza

For week 2, Shariwa posted about an interactive installation called Notional Field created by Annica Cuppetelli and Cristobal Mendoza by 2012. It is hard to tell whether the project is a projected, surface based object, or if it actually has a 3 dimensional quality. The project itself is confusing in a great way – blurring the line between surface, object, and movement. I agree with most of the blog post, and found the last piece of information discussing the different relationships articulated in the project especially interesting. The artists paid a lot of attention to the details of the project that makes in not only believable (like she mentioned), but also makes the whole project much more human like.

Original blog post

Jer Thorp – Eyeo Festival 2011 from Eyeo Festival // INSTINT on Vimeo.

Jer Thorp is an artist and educator from Vancouver, Canada. He has a background in genetics, and his art practice explores boundaries between science, data, art, and culture. He curates large scale data into elegant information analytics, some real time. He has collaborated with important institutes like the New York Times, NASA, and the 9/11 Memorial. His work takes large scale data that is hard to imagine and represent simply for a quick experience. He is able to break down large data into a part to whole relationship, then builds up an analytic that uses that logic. He uses many simple, iterative, and aesthetically pleasing diagrams that are easy to understand and remember in the moment. The graphic style and references are also consistent throughout the presentation (or at least the presentation of one project). These simple diagrams then build up to a much more complex and large scale analytic that is easily understandable.

link to his website