Month: November 2017

Petri Dish

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// Petri Dish

// Create Node
function makeTurtle(tx, ty) {
	var turtle = {
		x: tx,
		y: ty,
		life_index: random(-.5, .5) //random seem for bug bheavior
	};
	return turtle;
}

var time = 1; // Time variable
var w = 480;
var h = 480;
var turtles = []

function setup() {
	createCanvas(w, h);
	background(255);
	num_node = 15;
	for (i = 0; i < num_node; i++) {
		t = makeTurtle(random(0, w), random(0, h));
		turtles.push(t);
	}
}

// Ease turtles towards mouse
function turtle_move() {
	speed = .045;
	for (i in turtles) {
		if (turtles[i].x < mouseX) {
			dx = abs(turtles[i].x - mouseX)
			turtles[i].x += dx * speed
		} else {
			dx = abs(turtles[i].x - mouseX)
			turtles[i].x -= dx * speed
		}
		if (turtles[i].y < mouseY) {
			dy = abs(turtles[i].y - mouseY)
			turtles[i].y += dy * speed
		} else {
			dy = abs(turtles[i].y - mouseY)
			turtles[i].y -= dy * speed
		}
	}
}

// Add Perlin noise to movement of turtle
function add_life() {
	if (mouseIsPressed == false) {
		SIZE = 10; //magnitude of noise movement add
	} else {
		SIZE = 30;
	}
	for (i in turtles) {
		life = turtles[i].life_index
		turtles[i].x += (noise(time * life) - .5) * SIZE;
		turtles[i].y += (noise(time * life / 2) - .5) * SIZE;
	}
}

// Draws membrane of turtles
function membrane() {
	strokeWeight(1);
	fill(0, 0, 0, 255 * .1);
	beginShape(TRIANGLE_STRIP);
	for (i in turtles) {
		x = turtles[i].x
		y = turtles[i].y
		curveVertex(x, y);
	}
	endShape(CLOSE);
}

// Connect lines
function connect_lines() {
	stroke(0, 0, 0, 255 * .25)
	for (i in turtles) {
		x_0 = turtles[i].x
		y_0 = turtles[i].y
		for (i in turtles) {
			x_1 = turtles[i].x
			y_1 = turtles[i].y
			line(x_0, y_0, x_1, y_1);
		}
	}
}

function draw() {
	time += .1;
	background(255, 255, 255, 255 * .75);
	turtle_move();
	add_life()
	for (i in turtles) {
		fill(0, 0, 0, 255 * .75);
		ellipse(turtles[i].x, turtles[i].y, 10, 10)
	}
	membrane();
	connect_lines();
}

This is my first time playing with the noise() function and I absolutely love it! Try clicking and moving your mouse around the canvas. I wanted to create a digital petri dish inspired by seeing Euglena protist under the microscope:

SaveSave

SaveSave

sketch

//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//Turtle Graphics


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;
}

var t1;

function setup() {
    createCanvas(400,400);
    background(0);
    t1 = makeTurtle(200, 200);
    t1.setColor(255);
    t1.setWeight(1);
    t1.penDown();

    var sideLength = 20;
    for(var i = 0; i < 100; i++) {
        t1.penDown();
        sideLength = sideLength - 20;
        t1.right(2);
        makeSquare(sideLength);

    }
  }

function makeSquare(sideLength)
    {t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);
    t1.forward(sideLength);
    t1.right(90);

    ellipse(t1.x,t1.y,10,10)
    t1.penUp();
    t1.right(90);
    t1.forward(sideLength)
    t1.right(90);
    t1.forward(sideLength)

    ellipse(t1.x,t1.y,10,10)
}

Inspired by my struggles with the lab this week, I wanted to dive a bit further into the mechanism of iterated rotation. Here’s a simple transformation I thought looked really lovely.

sketch

var myTurtle;
var startFrame;
function setup() {
    createCanvas(400, 400);
    background(220);
    myTurtle=makeTurtle(width/2,height/2);
    myTurtle.setColor(color(0))
    myTurtle.setWeight(2);
    myTurtle.penDown();
    myTurtle.left(90);
    myTurtle.forward(10);

}
function draw() {
	var rand = random(0,10);
	if(rand>5){
		myTurtle.left(45);
		myTurtle.forward(5);
		//myTurtle.penUp();
	} else if (rand<5){
		myTurtle.right(45);
		myTurtle.forward(5);
		//myTurtle.penUp();
	}
}


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;}

This is a project that didn’t come out as planned, yet looked very interesting in the end. I originally tried to make the turtle generate structures that looked similar to trees or tree roots using arrays. I was planning to find a way to make the program create a turtle using a For loop and push that turtle into the array on command. Although, I admit that I wasn’t sure where to start when thinking about this, I still tried my best to do what I wanted to do and got started. I was working on the code and wanted to give the program a test run. When I ran the program, it generated these octagonal structures and lines all over the canvas. That is when I realized that this structure was more interesting than the tree structure I had in mind.