sketch

var angle = 0; //tree branch angle
var mic; //internal microphone
var forest = []; //holds trees
var iInc; //branch incriment
var ns = 10; //stars
var p; //moon curve variable
var q; //moon curve variable
var curveSize; //moon curve constraint

function setup() {
	createCanvas(480, 280);
	background(51);

	mic = new p5.AudioIn(); //create mic
	mic.start(); //activate mic

	//push 3 trees into array
	var tree1 = new Branch(87,10);
	forest.push(tree1);
	var tree2 = new Branch(70,70);
	forest.push(tree2);
	var tree3 = new Branch(40, 300);
	forest.push(tree3);

	flock = new Flock();

	//creating and pushing stars into an array
	for (var i = 0; i < ns; i++) {
		var p = makeStar(-10, -10,random(-50, 50), random(-50, 50));
		stars.push(p);
	}

	frameRate(10);

}

function draw() {
	background(51, 7.5);
	stroke(255,5);

	//get volume from mic (trees, stars, moon)
	var micLevel = mic.getLevel()*200;
	angle = micLevel/40;
	
	//call the function
	flock.run();

	//get volume from mic (flowy energy)
	var vol = mic.getLevel()*15;

		//if the volume is above a certain threshold, add a new flock of boids to the scene
		if (vol > 2) {
		flock.addBoid(new Boid(0, height/2)); 
		}
   
	pop(); 
	background(51,51,51,255*.2); //redrawing the background to give ghostly layering effect

		//Trees
		for(var i = 0; i < forest.length; i++){ //create multiple trees
			push();
			var xPos = forest[i].x;
			translate(xPos, height);
			forest[i].display();
			pop();
		}

		//Stars
		//if the volume exceeds a certain threshold, new stars are drawn
		if (micLevel > 10) {
			var newS = makeStar(random(10, width), random(10, height/3*2), random(-0.5, 0.5), random(-0.5, 0.5));
			stars.push(newS);
		}

		//store newly created stars
	 	newStars = []; 
		for (var i = 0; i < stars.length; i++) {
			var p = stars[i];
			p.draw();
			
			if (p.age < 200) {
				newStars.push(p);
			}
		}
   
	stars = newStars;

	//Moon
   
   	//map volume threshold to moon curve formula
	p = map (micLevel, 0, 100, 0, 100); 
	q = map (micLevel, 0, 100, 0, 130);

	curveSize = map (micLevel, 0, width, 20, 20);

	//curve formula 
	var k = p/q;
	push();
	translate (380, 70);
	iInc = map (micLevel, 0, height, 0.05, 1.5); 

		for (var i = 0; i < TWO_PI * q ; i+= iInc*1.2) {
		var r = curveSize * cos (k*i);
		var x = r * cos(i);
		var y = r * sin(i);
		fill(189, 207 , 253, 10);
		strokeWeight(iInc*5);
		point (x, y);
		fill(255);
	}  
}

//Completing the tree objects
function Branch(len, xTrans){
	this.originalTall = len;
	this.x = xTrans;
	
	this.display = function(){
		push();
		translate(50);
		branching(this.originalTall);
		pop();
	}
	
}

//Making the recursive tree
function branching(len){
	line(0,0,0,-len);
	translate(0,-len);
	stroke(255);
	if(len > 4) {
		push();
		rotate(angle);
		branching(len * 0.67);
		pop();

		push();
		rotate(-angle);
		branching(len * 0.67);
		pop();
	}
}

//Making the stars
function starDraw() {
	fill(255);
	point(this.x + random (0.1, -0.1), this.y + random(-0.1, 0.1));
}

//create the star
function makeStar(sx, sy) {
	p = {x: sx +random(-0.1, 0.1), y: sy + (-0.1, 0.1),
		 age: 0,
		 draw: starDraw
		}
	return p;
}

var stars = [];

// Starting here:
// Flocking Behavior algorithm sampled from Daniel Shiffman, "The Nature of Code" 
// http://natureofcode.com

function Flock() {
  // An array for all the boids
  this.boids = []; // Initialize boids array
}

Flock.prototype.run = function() {
  for (var i = 0; i < this.boids.length; i++) {
	this.boids[i].run(this.boids);  // Passing the entire list of boids to each boid individually
  }
}

Flock.prototype.addBoid = function(b) {
  this.boids.push(b); //
}

// Separation, Cohesion, and Alignment forces added

//defining the boid object
function Boid(x,y) {
  this.acceleration = createVector(0,0);
  this.velocity = createVector(random(-1,1),random(-1,1));
  this.position = createVector(x,y);
  this.r = 3.0; //radius of boid
  this.maxspeed = 2;    // Maximum speed
  this.maxforce = 0.05; // Maximum steering force

// Starting here:
// Our own original code

  var rr = random(70, 90); 
  var gg = random(70, 90); 
  var bb = random(80, 100); 
  this.rcolor = rr; 
  this.gcolor = gg; 
  this.bcolor = bb; 

  // Keep track of old x y coordinates of boid
  this.history = []; 
}

// Our own original code
// Ending here:

// Continuing here:
// Flocking Behavior algorithm sampled from Daniel Shiffman, "The Nature of Code" 
// http://natureofcode.com

Boid.prototype.run = function(boids) {
  this.flock(boids);
  this.update();
  this.borders();
  this.render();
}

Boid.prototype.applyForce = function(force) {
  this.acceleration.add(force);
}

// We accumulate a new acceleration each time based on three rules
Boid.prototype.flock = function(boids) {
  var sep = this.separate(boids);   // Separation
  var ali = this.align(boids);      // Alignment
  var coh = this.cohesion(boids);   // Cohesion

  // Arbitrarily weight these forces
  sep.mult(1.5);
  ali.mult(1.0);
  coh.mult(1.0);
  
  // Add the force vectors to acceleration
  this.applyForce(sep);
  this.applyForce(ali);
  this.applyForce(coh);
}

// Method to update location
Boid.prototype.update = function() {
  // Update velocity
  this.velocity.add(this.acceleration);
  // Limit speed
  this.velocity.limit(this.maxspeed);
  this.position.add(this.velocity);

  // update the property that stores old positions
  var v = [this.position.x, this.position.y]; //AG
  this.history.push(v); //AG

  // Reset accelertion to 0 each cycle
  this.acceleration.mult(0);
}

// A method that calculates and applies a steering force towards a target
// STEER = DESIRED MINUS VELOCITY
Boid.prototype.seek = function(target) {
  var desired = p5.Vector.sub(target,this.position);  // A vector pointing from the location to the target
  // Normalize desired and scale to maximum speed
  desired.normalize();
  desired.mult(this.maxspeed);
  // Steering = Desired minus Velocity
  var steer = p5.Vector.sub(desired,this.velocity);
  steer.limit(this.maxforce);  // Limit to maximum steering force
  return steer;
}

//Starting Here:
//Heavily modified perameters by us

Boid.prototype.render = function() {
  // Draw a triangle rotated in the direction of velocity
  var theta = this.velocity.heading() + radians(90);
  noFill();
  noStroke();
  push();
  translate(this.position.x,this.position.y);
  rotate(theta);
  beginShape();
  vertex(0, -this.r);
  vertex(-this.r, this.r*6); //boid size
  vertex(this.r, this.r*6); //boid size
  endShape(CLOSE);
  pop();

// Starting here:
// Our own original code

	// Displays path of old locations
	for (var i = 0; i < this.history.length; i++) { 
	  var posx = this.history[i][0]; 
	  var posy = this.history[i][1];
	  fill(this.rcolor, this.gcolor, this.bcolor, 90); 
	  ellipse(posx, posy, 5, 5);
	}
}
// Our own original code
// Ending here:

// Starting here:
// Separation, Alignment and Cohesion force algorithms sampled from Daniel Shiffman, "The Nature of Code" 
// http://natureofcode.com

// Border Constraints
Boid.prototype.borders = function() { 
  if (this.position.x < 0) {
	  this.velocity.x = -this.velocity.x; 
  }
  if (this.position.y > height) { 
	  this.velocity.y = -this.velocity.y;
  }
  if (this.history.length > 10) { 
	  this.history.shift(); 
  }
}

// Separation
// Method checks for nearby boids and steers away
Boid.prototype.separate = function(boids) {
  var desiredseparation = 25.0;
  var steer = createVector(0,0);
  var count = 0;

  // For every boid in the system, check if it's too close
  for (var i = 0; i < boids.length; i++) {
	var d = p5.Vector.dist(this.position,boids[i].position);

	// If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
	if ((d > 0) & (d < desiredseparation)) {
	  // Calculate vector pointing away from neighbor
	  var diff = p5.Vector.sub(this.position,boids[i].position);
	  diff.normalize();
	  diff.div(d); // Weight by distance
	  steer.add(diff);
	  count++; // Keep track of how many
	}
  }

  // Average -- divide by how many
  if (count > 0) {
	steer.div(count);
  }

  // As long as the vector is greater than 0
  if (steer.mag() > 0) {

	// Implement Reynolds: Steering = Desired - Velocity
	steer.normalize();
	steer.mult(this.maxspeed);
	steer.sub(this.velocity);
	steer.limit(this.maxforce);
  }
  return steer;
}

// Alignment
// For every nearby boid in the system, calculate the average velocity
Boid.prototype.align = function(boids) {
  var neighbordist = 50;
  var sum = createVector(0,0);
  var count = 0;
  for (var i = 0; i < boids.length; i++) {
	var d = p5.Vector.dist(this.position,boids[i].position);
	if ((d > 0) & (d < neighbordist)) {
	  sum.add(boids[i].velocity);
	  count++;
	}
  }
  if (count > 0) {
	sum.div(count);
	sum.normalize();
	sum.mult(this.maxspeed);
	var steer = p5.Vector.sub(sum,this.velocity);
	steer.limit(this.maxforce);
	return steer;
  } else {
	return createVector(0,0);
  }
}

// Cohesion
// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
Boid.prototype.cohesion = function(boids) {
  var neighbordist = 50;
  var sum = createVector(0,0);   // Start with empty vector to accumulate all locations
  var count = 0;
  for (var i = 0; i < boids.length; i++) {
	var d = p5.Vector.dist(this.position,boids[i].position);
	if ((d > 0) & (d < neighbordist)) {
	  sum.add(boids[i].position); // Add location
	  count++;
	}
  }
  if (count > 0) {
	sum.div(count);
	return this.seek(sum);  // Steer towards the location
  } else {
	return createVector(0,0);
  }
}

Anna Gusman and I created a therapeutic garden landscape that grows when it’s sung to. We chose to collaborate on this project because we were both super eager to explore p5’s comprehensive and lauded sound library. We thought that sonic interactions and audiovisual expressions would be great domains to explore by utilizing this tool.

Initially, we brainstormed ways by which people could see themselves “reflected” in a dynamic digital environment. By activating and scaling properties of the internal mic, we could poise the voice of an audience as the actuator of a captivating and therapeutic experience. The scene we designed contains four dynamic elements: recursion, flocking behavior, algorithmic curves and a particle system. Respectively, these would inform the emergence of natural objects like trees, wind, the moon and stars. Each of these dynamic elements are initiated by a singing voice and continue to grow as the viewer continues to sing! While some elements with more exposure to sound multiply, others express continued metamorphosis within themselves.

adev_project_11

// Aisha Dev
// adev@andrew.cmu.edu
// Project - 11
// Section E


//TURTLE API
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;
}

// global variables for the turtles
var turtleOne;
var turtleTwo;
var turtleThree;
var turtleFour;
var turtleFive;
var turtleSix;
var turtleSeven;
var turtleEight;



function setup() {
    createCanvas(420, 420);
    background(40, 60, 40);

// turtleOne details
    turtleOne = makeTurtle(10, 0);
    turtleOne.penDown();
    turtleOne.setColor(255,0,0);
    turtleOne.setWeight(0.3);

//turtleTwo details
    turtleTwo = makeTurtle(60, 0);
    turtleTwo.penDown();
     turtleTwo.setColor(255,0,0);
    turtleTwo.setWeight(0.3);

//turtleThree details
    turtleThree = makeTurtle(110, 0);
    turtleThree.penDown();
     turtleThree.setColor(255,0,0);
    turtleThree.setWeight(0.3);

//turtleFour details
    turtleFour = makeTurtle(160, 0);
    turtleFour.penDown();
     turtleFour.setColor(255,0,0);
    turtleFour.setWeight(0.3);

//turtleFive details
     turtleFive = makeTurtle(210, 420);
    turtleFive.penDown();
     turtleFive.setColor(255,0,0);
    turtleFive.setWeight(0.3);

//turtleSix details
     turtleSix = makeTurtle(260, 420);
    turtleSix.penDown();
     turtleSix.setColor(255,0,0);
    turtleSix.setWeight(0.3);

//turtleSeven details
     turtleSeven = makeTurtle(310, 420);
    turtleSeven.penDown();
     turtleSeven.setColor(255,0,0);
    turtleSeven.setWeight(0.3);

//turtleEight details
     turtleEight = makeTurtle(360, 420);
    turtleEight.penDown();
     turtleEight.setColor(255,0,0);
    turtleEight.setWeight(0.3);
}



function draw() {

  // the movement for each turtle


	turtleOne.right(100);
    turtleOne.forward(80);
    turtleOne.turnToward(90, mouseX, mouseY);

    turtleTwo.right(110);
    turtleTwo.forward(80);
    turtleTwo.turnToward(90, mouseX, mouseY);
  
  	turtleThree.right(170);
    turtleThree.forward(70);
    turtleThree.turnToward(90, mouseX, mouseY);
  
  	turtleFour.right(100);
    turtleFour.forward(100);
    turtleFour.turnToward(90, mouseX, mouseY);

    turtleFive.right(100);
    turtleFive.forward(100);
    turtleFive.turnToward(90, mouseX, mouseY);

    turtleSix.right(100);
    turtleSix.forward(100);
    turtleSix.turnToward(90, mouseX, mouseY);

    turtleSeven.right(100);
    turtleSeven.forward(100);
    turtleSeven.turnToward(90, mouseX, mouseY);

    turtleEight.right(100);
    turtleEight.forward(100);
    turtleEight.turnToward(90, mouseX, mouseY);
}

This project was good for experimenting with turtle graphics and just being free to learn it. I liked how this one iteration meanders across the canvas. It initially reminds me of a map with the elevation lines when it starts out but then becomes this sci-fi—dystopian—future—esque Arrival-ish language/code.

Ryoji Ikeda, Supercodex

I chose to talk about Ryoji Ikeda’s live set performance, Supercodex. I had the opportunity of attending this performance in Pittsburgh about a year ago and it is still being performed internationally today. Witnessing this performance was absolutely incredible. This entire live experience takes place in a large, black cube-shaped room, and it is almost hypnotic.

Ryoji Ikeda is an electronic and visual artist and uses physical environments and mathematical notions to create live performances of his work in highly immersive environments.

adev_Project_10

//Aisha Dev
//adev@adnrew.cmu.edu
//Section E
// Project 10


var frames = [];
var sm1 = - 0.00006;
var sm2 = - 0.000065;
var sm3 = - 0.00005;
var sm4 = - 0.0001;
var sm5 = - 0.0003;
var detail1 = 0.005;
var detail2 = 0.003;
var detail3 = 0.003;
var detail4 = 0.001;
var detail5 = 0.0015;

var trees = [];
var bwTrees = 0;

// var playlist = ["Across The Unverse", "Aint No Sunshine", "All Along The Watchtower", "American Pie", "Anywhere Is", "Bennie and The Jets", "Blackbird", "Blowin in The Wind",
// "Blue Jean Baby", "Bridge Over Troubled Water", "Budapest", "A Case of You", "Comfortably Numb", "Catch the Wind", "Cowgirl in the Sand", "Crazy Love", "Come Together", "Dancing in the Dark",
// "Dont Think Twice Its Alright", "Hallelujah", "Hear of Gold", "Heavenly Day", "Hey Jude", "Ho Hey", "Home", "I See Fire", "Flight Attendant", "Just Like A Woman", "Liar", "Knights in White Satin",
// "Lady Lady Lay", "Layla", "Leave Your Lover", "Lodi", "The Long and Whinding Road", "Long as I Can See The Light", "Losing You", "Sospesa", "Me and Bobby Mcgee", "More Than a Woman",
// "Mr Tambourine Man", "No Woman No Cry", "Oh Sister", "Old Man", "Only Love", "Over The Creek", "Piece of My Heart", "Proud Mary", "Roxanne", "Something", "Song To Woody", "Songbird", "Sound of Silence", 
// "Start Over", "Stop This Train", "Take Me to Curch", "The Thrill is Gone", "The Times They Are a Changin", "Fast Cars", "Underneath", "While My Guitar Gently Weeps", "Wholl Stop The Train", "Yesterday",
// "Wish You Were Here", "You Are So Beautiful", "Our House", "Fortunate Son", "Warning Sign", "Like A Rolling Stone", "Jokerman"];
// var index = 0; 



function setup() {
    createCanvas(480,200);
   
 for (var i = 0; i < 20; i++){ 
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
      
    frameRate(10);

}
 
function draw() {
    //functions
    makeBackground();
    makeMountains();
    //songs();
   drawTree();
    addTree();

   
}



function makeBackground(){
   background(30, 50, 100);


   
}


function makeMountains(){
    noStroke();
    
    //highest mountain range
    fill(174, 153, 139);
    beginShape(); 
    for (var mOne = 0; mOne < width; mOne++) {
        var speedOne = (mOne * detail1) + (millis() * sm1);
        var peaksOne = map(noise(speedOne), 0,1, 0, height);
        vertex(mOne,peaksOne-70); 
    }

    vertex(width,height);
    vertex(0,height);
    endShape();
    
    //second highest mountain range
    fill(128, 121, 113);
    beginShape();
    for (var mTwo = 0; mTwo < width; mTwo++) {
        var speedTwo = (mTwo * detail2) + (millis() * sm2);
        var peaksTwo = map(noise(speedTwo), 0,1, 0, height);
        vertex(mTwo,peaksTwo-30); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
        
    //middle mountain range
    fill(93, 84, 86);
    beginShape(); 
    for (var mThree = 0; mThree < width; mThree++) {
        var speedThree = (mThree * detail3) + (millis() * sm3);
        var peaksThree = map(noise(speedThree), 0,1, 0, height);
        vertex(mThree,peaksThree+10); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();


     //second - lowest mountain range
    fill(67, 60, 67);
    beginShape(); 
    for (var mFour = 0; mFour < width; mFour++) {
        var speedFour = (mFour * detail3) + (millis() * sm4);
        var peaksFour = map(noise(speedFour), 0,1, 0, height);
        vertex(mFour,peaksFour+30); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();


      //lowest mountain range
    fill(48, 45, 48);
    beginShape(); 
    for (var mFive = 0; mFive < width; mFive++) {
        var speedFive = (mFive * detail3) + (millis() * sm5);
        var peaksFive = map(noise(speedFive), 0,1, 0, height);
        vertex(mFive,peaksFive+60); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape(); 

}

function drawTree() {
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function makeTree(x) {
    var tree = {
        birth: x,
        size: random(10, 30),
        speed: 2.0,
        move: TreeMove,
        display: TreeDisplay,
        height: random(30, 60),
        color: [120, 150, 100, 90]
    }
    
    return tree;
}

function TreeMove() {
    this.birth += this.speed;
}

function TreeDisplay() {
    var treeHeight = 50; 
    fill(this.color); 
    noStroke();
    push();
    translate(this.birth, height - this.height);
    ellipse(0, 0, this.size, this.size);
    ellipse(7, 10, this.size, this.size+2);
    ellipse(-9, 2, this.size, this.size);
    stroke(200, 180, 140);
    strokeWeight(2);
    line(0, 0, 0, this.height);
    line(0, this.size/5, this.size/6, this.size/20);
    if (this.size > 30) {
        line(0, this.size/3, -this.size/6, this.size/6);
    }
    pop();
}

function addTree() {
    var newTree = 5; 
    if (random(0,1) < newTree) {
        bwTrees = bwTrees + 30;
        if (bwTrees == 4) { 
            trees.push(makeTree(width)); 
             bwTrees = 0; //reset
        }
    }

}


// function songs(){
// 	fill(181, 165, 138);
// 	textSize(10);
// 	textFont("Times New Roman");
// 	text(playlist[index],10, 460);

// }

This assignment was a bit challenging for me. I had been missing road trips with my family so I decided to re-create one in the Himalayas, complete with the high mountain ranges and pine trees. I wanted to add running text of the playlist we tend to listen to so I’m still working on that.

Memory of Form and Matter

Chris Sugrue

I think this piece was really fascinating to me because it is a physical sculpture that doesn’t actually change its form. Even though it technically static, it feels completely dynamic. It is created through a series of parametric, algorithmically generated forms and is put together in a way that is viewed differently from every angle.

I think this hybrid between digital and physical, and data-driven art is really quite interesting. This is what Chris Sugrue does, she is an artist and programmer who creates these novel interactions, these experimental interfaces. She studied Art and Technology at Parsons, New York and has since done multiple residencies, from Barcelona to New York. She was instrumental in creating EyeTracker, for ALS patients that went on to win multiple design and innovation awards.

She currently teaches at Parsons Paris.

jiaxinw-SectionB-LookingOutwards 04

Cloud Piano

I was looking through some of the posts and I found this one particularly intriguing. I am extremely drawn to the idea of the natural world represented through computational means in a very human way, that make these natural phenomena more present with us as humans. This is particularly striking because it provides a whole new sensory interaction with a natural phenomenon that is so elusive, so erratic and so notoriously mysterious.

I also really appreciate this because of it’s simplicity and innocence. It has truly been created from a place of curiosity and wonder and appreciation. I love that it takes this childhood fantasy and makes it accessible to us in a way that purely provides joy and pleasure.

It’s also really interesting that it sounds so beautiful and playful without sounding over-written or composed. It sounds like the most perfect string of serendipitous notes.

Project_09_adev

//Aisha Ghei Dev
//adev@andrew.cmu.edu
//Project-09
//Section E



var myPortrait;

function preload() {//loading baby photo
    var myPortraitURL = "https://i.imgur.com/GszICUU.jpg";
    myPortrait = loadImage(myPortraitURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    myPortrait.loadPixels();
    frameRate(10);//low frame rate for faster processing.
    noStroke();
}

function draw() {
	//random position values
	var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    //colour at specific pixel
    var theColorAtLocationXY = myPortrait.get(ix, iy);
 
    fill(theColorAtLocationXY);
    var sqDimensions = (random(10, 50));

    rect(px, py, sqDimensions/2, sqDimensions/2);
}

   
//Writing nickname
function mousePressed(){
	fill(255,0,0);
	textFont ("Georgia");
	textSize(28);
	text("$$$PAISHA", mouseX, mouseY);
}



    











    

For this project, I wanted to do something light and fun and kind of poke fun at myself. I chose this baby picture of me that I think is hilarious.

I played around with a few iterations of my code and I liked the one with the text the most because it makes is even more personal with a funny childhood nickname.

A Day in the Life of Americans

A Day in the Life of Americans
by NATHAN YAU, Flowing Data

I really love this data visualisation because its really dynamic, aesthetic and informative. It also has this interesting bird’s eye view of people and how they live their lives. It has this sense of removal and perspective. It really is about people just being people in their daily activities and movement. It’s also really interesting to see rush hours where activity rapidly changes like 9:00 am or 5:00 or 6:00 pm; there literally is a visual rush of little dots across the page.

Its so fascinating because the designer has managed to make everyday activities and mundane movements extremely engaging. It also has this strange voyeuristic quality to it, where you literally watch people do very normal things. I feel like I could watch this for hours and never be bored. It is satisfying and yet makes me want to know more about these individual trends and movements.

adev_project_07

var iInc;
var colR;
var colG;
var p;
var q; 
var curveSize;
function setup() {
   createCanvas(480, 480);
  
}

function draw() {
    p = map (mouseY, 0, height, 1, 10);
    q = map (mouseX, 0, width, 1, 15);
	colR = map(mouseX, 0, width, 130, 20);
	colG = map(mouseY, 0, height, 60, 110);
	curveSize = map (mouseX, 0, width, 100, 200);

	var k = p/q;
	 background(colR,colG, 10);



iInc = map (mouseY, 0, height, 0.05, 1.5);	

translate (width/2, height/2);

for (var i = 0; i < TWO_PI * q ; i+= iInc*1.2) {
var r = curveSize * cos (k*i);
var x = r * cos(i);
var y = r * sin(i);
fill(255,);
strokeWeight(iInc*5);
point (x+ random (-1, 1), y+random(-1, 1));

} 
    
}

For this project, I really wanted to play around with the jitter. I’m haven’t done any sort of math in a while so it was challenging for me to find my way around the curves. I decided to have more fun with it aesthetically and use dots to represent the curves because I think they’re more delicate and ephemeral.

The patterns and colours make it feel less mathematical and almost cozy like fall or early winter.

adev_Project_6

//Aisha Dev
//15-104 SECTION E
//Project 6





var rectPitY = 80;


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


 function draw(){
 	background(0);
    // Pittsburgh time (EST)
 	var Hpit = hour();
 	var Mpit = minute();
    

   // Time in New Delhi
 	var Hdel = Hpit + 9;
 	var Mdel = Mdel + 30;

 	for (var i = 0; i <= second(); i ++){
 		strokeWeight(0.3);
 		 fill (55,55,55,50);
     line (400, height/2, width/i, i*20);
 		strokeWeight(0.5);
 		stroke(255);
     line (i, 0, i*20, i+width);
     }
   
    //Hours in Pittsburgh
     fill(255);
     stroke(40);
     rect (width/2, 80+Hpit, 150, 20);

     //Hours in Delhi
     noFill();
     stroke(255);
     strokeWeight (3);
     rect(width/4 + Hdel, 300, 20+(4*Hdel), 150);

     //Minutes in Pittsburgh
     for (var i = 0; i <= Mpit; i ++){
     	stroke(10);
 		strokeWeight(2);
 		 fill (255);
     ellipse(i*2.2, 50+(i*1.3), 70, 70);
     }

      //Minutes in Delhi
     for (var i = 0; i <= Mpit; i ++){
     	stroke(255);
 		strokeWeight(1);
 		 noFill ();
     ellipse(200+(i*1.5), 320, 20, 20);
     }

 }

I wanted to include multiple time zones because I feel like that is how I experience time. I wanted to include what Indian Standard Time means to me when I’m on Eastern standard time.