sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Assignment-07a-Bar Chart

/////////////////////////////////
// INIT VARIABLES
/////////////////////////////////
//canvas vars
var canvasWidth, canvasHeight;

//INPUT IMAGE
//option 1:
//var imgUrl = "http://i.imgur.com/b24JQcX.jpg?1"; // url for the input image
//option 2:
var imgUrl = "http://i.imgur.com/koPvfoe.jpg"; // url for the input image

var img; //the input image object

//2d list of booleans tracking which pixels have been visited
//visited = true; not visited = false
var visitedPixels = [];

//
var turtles = []; //store all turtle instances in list
var newTurtles = []; //store turtles to add on next frame
var deadTurtles = []; //store turtles to remove on next frame
var colorTurtle, colorBackground;

//
var darknessThreshold, brightnessThreshold;
var maxNumberOfTurtles;

/////////////////////////////////
// RUN!
/////////////////////////////////
function preload() {
	img = loadImage(imgUrl);
}

function setup() {
	// INIT VARS
	//set canvas size based on imput image
	canvasWidth = 800;
	canvasHeight = 800;
	//set control variables
	darknessThreshold = 50;
	brightnessThreshold = 70;
	maxNumberOfTurtles = 25;
	//set colors
	colorTurtle = color(255);
	colorBackground = color(0);

	//populate visited pixels list such that it is a 2d list of booleans
	//representing each pixel in the canvas. false means that the pixel
	//has not been visited by turtles yet.
	for (var y = 0; y < canvasHeight; y++) {
		//create list to store row of values
		var row = [];
		//populate row list with all falses for n columns
		for (var x = 0; x < canvasWidth; x++) {
			row.push(false);
		}
		//add row list to 2d visitedPixels array
		visitedPixels.push(row);
	}

	// CANVAS SETUP
    createCanvas(canvasWidth, canvasHeight);
    background(colorBackground);
}

function draw() {
	//if program termination condition hasn't been met...
	if (fin() != true) {
		//for each turtle in list of active turtles...
		for (var i=0; i<turtles.length; i++) {
			//get turtle object
			var turtle = turtles[i];
			//walk
			walkTurtle(turtle);
		}
	}
	//add new turtles to list of all turtles for next generation
	updateTurtlesList();
}

/////////////////////////////////
// HELPER FNS
/////////////////////////////////
function walkTurtle(turtle) {
	//start drawing
	turtle.penDown();
	//move forward 1 pixel
	turtle.forward(1);
	//check if pixel visited already, continue if unvisited
	if (isValidStep(turtle)) {
		var x = int(turtle.x); //sometimes these values become floats...
		var y = int(turtle.y); //so use int() to ensure integer value
		//determine turtle's fate based on pixel brightness:
		var pix = img.get(x,y);

		//if pixel too dark, turtle dies
		if (brightness(pix) > darknessThreshold) {
			// println("Turtle die!");
			killTurtle(turtle);
		}
		//else if pixel bright enough, spawn children turtles at location
		else if (brightness(pix) > brightnessThreshold) {
			println("Spawn!")
			spawnTurtle(x, y, 90); //spawn turtle to left
			spawnTurtle(x, y, -90); //spawn turtle to right
		}
		else {
		}
	}
	//else, if pixel is visited already, erase. Then, respawn elsewhere
	else {
		// println("Respanw!");
		//move backward 1 pixel
		turtle.back(1);
		//respawn somewhere else
		respawnTurtle(turtle);
	}
}

function isValidStep(turtle) {
	//get x and y pixel position of turtle
	var x = int(turtle.x); //sometimes these values become floats...
	var y = int(turtle.y); //so use int() to ensure integer value
	//if turtle off of canvas
	if ((x <= 0) || (x >= canvasWidth) || (y <= 0) || (y >= canvasHeight)) {
		return false;
	}
	//if pixel already visited, step is not valid. return false
	else if (visitedPixels[x][y] == true) {return false;}
	//if pixel not visited, step is valid. return true
	else {
		//update visited pixels
		visitedPixels[x][y] = true;
		return true;
	}
}

function spawnTurtle(x,y,dir) {
	if (turtles.length < maxNumberOfTurtles) {
		//create new turtle instance
		var turtle = makeTurtle(x,y);
		//rotate turtle based on input dir
		turtle.left(dir);
		//set turtle color
		turtle.color = colorTurtle;
		//store turtle in list of turtles to be added to master list
		newTurtles.push(turtle);
	}
}

function respawnTurtle(turtle) {
	//get random x and y pixel coordinates
	var x = int(random(canvasWidth));
	var y = int(random(canvasHeight));
	var theta = 90*(int(random(4)));
	//move turtle to new pixel
	turtle.penUp();
	turtle.goto(x,y);
	turtle.penDown();
	//turn turtle
	turtle.left(theta);
	//if move is to a cell that hasn't been visit, continue
	if (isValidStep(turtle)) {
		//update visited pixels
		visitedPixels[x][y] = true;
		//exit function
		return;
	}
	//if move is to cell that has already been visited, try again
	else {respawnTurtle(turtle);}
}

//function to remove turtle from list of active turtles
function killTurtle(turtle) {
	deadTurtles.push(turtle);
	// //new list to store all active turtles
	// var newTurtlesList = [];
	// //get index of turtle to remove from list of turtles
	// var indexOfTurtleToRemove = turtles.indexOf(turtle);
	// println(indexOfTurtleToRemove ==
	// //loop over list of turtles, build new list, excluding newly dead turtle
	// for (var i=0; i<turtles.length; i++) {
	// 	//if turtle is not the one we are killing, add it to the list
	// 	if (i != indexOfTurtleToRemove) {newTurtlesList.push(turtles[i]);}
	// }
	// //update turtles list
	// turtles = newTurtlesList;
}

//function for adding newly spawned turned to list of active turtles
function updateTurtlesList(){
	var newTurtlesList = [];
	for (var i=0; i<turtles.length; i++) {
		if ((deadTurtles.indexOf(turtles[i])) == -1) {
			newTurtlesList.push(turtles[i]);
		}
	}
	//for each new turtle spawned in past generation...
	for (var j=0; j<newTurtles.length; j++) {
		//add new turtle to list of active turtles
		newTurtlesList.push(newTurtles[j]);
	}
	turtles = newTurtlesList;
}

// function for ending the program if all cells have been visited
function fin() {
	//check if cells have been visited or not
	for (var x=0; x<visitedPixels.length; x++) {
		for (var y=0; y<visitedPixels[0].length; y++) {
			//if any cell is found unvisited, return false to continue program
			if (visitedPixels[x][y] == false) {
				return false;
			}
		}
	}
	//if get through all cells and all have been visited, finish
	return true;
}

/////////////////////////////////
// EVENTS
/////////////////////////////////
function mousePressed() {
	//spawn new turtle at mouse x and y with random N/S/E/W direction
	spawnTurtle(int(mouseX),int(mouseY),90*(int(random(4))));
}

/////////////////////////////////
// TURTLE CLASS
/////////////////////////////////
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

In this sketch, I was trying to have a series of turtles walk about an image and respond based on the brightness of the pixels. The rules I was attempting to employ:

1. When a turtle reaches a pixel that is brighter than a certain value, spawn two child turtles to the left and to the right.
2. When a turtle reaches a pixel that is darker than a certain value, that turtle “dies”.
3. If a turtle reaches a pixel that has already been visited by another turtle, or if the turtle runs off the canvas, that turtle respawns to another random location.

What I was able to achieve creates an interesting composition; however, I don’t think it is reacting to the image as I intended.

 

The Counter Pointer Overview,

credit to thecounterpointer.com

 

http://www.luisaph.com/info.html

Luisa Perira is an artist and programmer who is based in New York and has worked for companies like Samsung and Google. I admire her, however, for her work on a number of audiovisual systems and machines, such as “The Well-Tempered Synthesizer”- a Moog analog synthesizer which was programmed to play a number of classical pieces from the Baroque period, as well as the electronic sounds that it is known for. I admire both her passion for mixing the cutting-edge and the obsolete and that she has found a way to pursue her interests in music, design and computer science. She has been featured in Wired, Gizmoto and Creative applications, and is currently displaying her work in Brazil.

 

“The Well-Sequenced-Synthesizer”, Luisa Perira, 2014

http://www.thewellsequencedsynthesizer.com/

 

Camille Utterback, Entangled 2015

video of Utterback’s piece Entangled

http://camilleutterback.com/projects/entangled/

I was first drawn to choose Camille Utterback because of her works focusing on permanent public art and installations. I enjoy Utterback’s fascination with the correspondence between linking computational systems to human movement. Utterback’s concentration of interaction between humans and computers led me to choose her piece “Entanglement”. This piece is made up of three layers of fabric that has projected images on them. These images are interactive – throughout the piece, “tangles” of cords will appear that are able to be moved by motions by the viewer. Also, as the viewer walks around the piece, their profile is cast onto the fabric. On the other side of the fabric, their form becomes merely a murky figure. Utterback describes this overlapping imagery as a “mutually negotiated space”. Utterback is an Assistant Professor in Art at Stanford University. She holds a BA in Art from Williams College. She currently lives and works in San Francisco, California.

 

sketch

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project 10
var seaweed = [];
var speed = .5;
var fishes = [];
function setup() {
  createCanvas(600, 400);
  //creating random occurrences of seaweed placement
  for (var i = 0; i < 50; i++){
  var rx = random(width);
  var ry = random(height);
  seaweed[i] = makeSeaweed(rx);
  fishes[i] = makeFishes(rx, ry);
  }
  frameRate(5);
  }

function draw() {
  background(color(10, 75, 88));
  //draw sand
  sand();
  //draw and update seaweed
  showUpdateSeaweed();
  removeOldSeaweed();
  addSeaweed();
  //draw fishes
  showUpdateFishes();
  removeOldFishes();
  addFishes();
}
//creates new seaweeds at beginning of image
function showUpdateSeaweed(){
  for (var i = 0; i < seaweed.length; i++){
  seaweed[i].move();
  seaweed[i].display();
  }
  }
//creates new fishes at beginning of image
function showUpdateFishes(){
  for (var i = 0; i < fishes.length; i++){
  fishes[i].move();
  fishes[i].display();
  }
  }
//removes seaweed when seaweed goes past canvas
function removeOldSeaweed(){
  var keepSeaweed = [];
  for (var i = 0; i < seaweed.length; i++){
  if (seaweed[i].x + seaweed[i].breadth > 0) {
      keepSeaweed.push(seaweed[i]);
    }
    }
  seaweed = keepSeaweed;
  }
//removes fishes once out of canvas
function removeOldFishes(){
    var keepfishes = [];
    for (var i = 0; i < fishes.length; i++){
    if (fishes[i].x > 0) {
      keepfishes.push(fishes[i]);
      }
      }
    fishes = keepfishes;
    }
function addSeaweed(){
  //will create seaweed 50% of the time
  var newSeaweed = 0.5;
  if (random(0,1) < newSeaweed){
     seaweed.push(makeSeaweed(width));
  }
  }
function addFishes(){
  var newFishes= 0.5;
  if (random(0,1) < newFishes){
       fishes.push(makeFishes(width, random(5, 10)));
  }
  }
//allows for seaweed to move offscreen
function moveSeaweed(){
  this.x += this.speed;
  }
function moveFishes(){
  this.x += this.speed;
  this.y += this.speed;
  }
function showSeaweed(){
  //places seaweed at proper place in sand
  var sandHeight = 5;
  var offset = 15;
  //created randomized height of seaweed
  var weedHeight = this.nGrowth * sandHeight;
  strokeWeight(1);
  push();
  translate(this.x, height - offset);
  fill("Green");
  rect(0, -weedHeight, this.breadth, weedHeight);
  stroke(50);
  var bubbleLen = 3;
  var bubblestart = 5;
  var bubbleend = 10;
  //creates bubbles flowing out of seaweed
  for (var i = 0; i < this.nGrowth; i++) {
  fill("lightBlue");
  noStroke();
  ellipse(bubblestart, -bubbleend - (i * weedHeight), bubbleLen, bubbleLen);
}
  pop();
}
//draws fishes
function showFishes(){
  push();
  translate(this.x, this.y);
  noStroke();
  fill("Salmon");
  //fish body
  ellipse(0, 0, 15, 10);
  //fishtail
  triangle(5, 0, 14, 10, 14, -5);
  //fisheye
  ellipse (2, 2, 2, 2);
  pop();
}
function makeSeaweed(LocationX) {
    var sweed = {x: LocationX,
                breadth: 5,
                speed: -10,
                nGrowth: round(random(2,20)),
                move: moveSeaweed,
                display: showSeaweed}
    return sweed;
  }
function makeFishes(LocationX, LocationY) {
      var fishes = {x: LocationX,
                  y : LocationY,
                  breadth: 10,
                  speed: -random(1, 10),
                  move: moveFishes,
                  display: showFishes}
      return fishes;
    }
function sand(){
  strokeWeight(5);
  for (var i = 0; i < width; i++) {
  //creates randomized terrain
  var gradient = noise(i * .004 + millis() * speed)
  var s = height - .20 * height * gradient;
  stroke(color(240, 229, 144));
  line(i, height, i, s);
}
}

For this assignment, I wanted to create an underwater scene which featured a school of fish passing by. Being hesitant with objects, I started to begin simply with them by creating the seaweed. I then added the bubbles coming out of the seaweed. Then, I added the fishes as objects, in attempts to further understand how objects work. With every new element in the animation, I grew to be more comfortable with objects and how they interact – both to each other and to surrounding code. I’m looking forward to being able to create more animations with ease now using objects. Prior to this assignment I was confused by the uses of “this” and how helper functions were used. After this assignment, I am more comfortable with objects.