sketch

//Robert Managad
//Section-E
//rmanagad@andrew.cmu.edu
//Final Project -- Trigonometric Loading Icons

//This code loops on the basis of the trigonometric functions cosine, sine, and tangent.
//It can be modified to produce three distinct animations, depending on the trig function used,
// and on the axis be affected.


var spins = [];
var drips = [];
var warps = [];
var pluss = [];

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

	//Spin Loop, center
	push();
	for (var i = 0; i < 12; i++){
		var spinposition = createVector(i * 20, i);
		var spinradius = i * 1; // Radius increases by 200% for every iteration of i, up to 12.
		spins[i] = new Spin(spinposition, spinradius); //holds circle function in the array
	}  
	pop();

	//Drip loop, top center
	for (var i = 0; i < 8; i++){
		var dripposition = createVector(i*18, i);
		var dripradius = i * 2;
		drips[i] = new Drip(dripposition, dripradius);
	}

	//Warp loop, left center
	for (var i = 0; i < 12; i++){
		var warpposition = createVector(i*20, i);
		var warpradius = i * 1.5;
		warps[i] = new Warp(warpposition, warpradius);
	}

	//Plus loop, left center
	for (var i = 0; i < 12; i++){
		var plusposition = createVector(i*20, i);
		var plusradius = i * 1.5;
		pluss[i] = new Plus(plusposition, plusradius);
	}
}

function draw() {
	background(0);

	//drip draw
	for(var i = drips.length - 1; i >= 0; i--){
		var drip = drips[i];
		drip.update();
		drip.display();
	}  

	//rectangle mask
	fill(0);
	noStroke();
	rect(140, 130, 140, 300);

	//warp draw
	for(var i = warps.length - 1; i >= 0; i--){
		var warp = warps[i];
		warp.update();
		warp.display();
	}  

	//spin draw
	for(var i = spins.length - 1; i >= 0; i--){
		var spin = spins[i];
		spin.update();
		spin.display();
	}  

	//plus draw
	for(var i = pluss.length - 1; i >= 0; i--){
		var plus = pluss[i];
		plus.update();
		plus.display();
	}  
}

//--------------------

//elements of each circle are compounded into the Spin function.
function Spin(spinposition, spinradius){
  this.position = spinposition;
  this.radius = spinradius;
  this.direction = 1;
  this.time = 0; //controls the placement of the starting anchor, time to jump towards.
  //updates position every time draw is called.
  this.update = function(){
	this.time += this.direction * this.radius * 0.007; //holds value of velocity. Higher radius value = higher speed.
	this.position.y = (200 + 90 * cos(this.time))/2;
	this.position.x = (200 + 90 * sin(this.time))/2;
	//trig function directs the animation (slowing down in middle/accelerating the circles as they approach the edges)
  }

  //holds visual presentation
  this.display = function(){
  	noFill();
    stroke(255);
    strokeWeight(1.5);
    ellipse(this.position.x - 20, this.position.y - 20, this.radius, this.radius);  
  }
}

//---------------------

function Drip(dripposition, dripradius){
  this.position = dripposition;
  this.radius = dripradius;
  this.direction = 1;
  this.time = 0; //controls the placement of the starting anchor, time to jump towards.
  //updates position every time draw is called.
  this.update = function(){
	this.time += this.direction * this.radius * 0.004; //holds value of velocity. Higher radius value = higher speed.
	this.position.y = (200 + 90 * tan(this.time))/3;
	//trig function directs the animation (slowing down in middle/accelerating the circles as they approach the edges)
  }

  //holds visual presentation
  this.display = function(){
  	noFill();
    stroke(255);
    strokeWeight(1.5);
    ellipse(this.position.x + 275, this.position.y - 10, this.radius, this.radius);  
  }
}

//------------------------

function Warp(warpposition, warpradius){
  this.position = warpposition;
  this.radius = warpradius;
  this.direction = 1;
  this.time = 0; //controls the placement of the starting anchor, time to jump towards.
  //updates position every time draw is called.
  this.update = function(){
	this.time += this.direction * this.radius * 0.002; //holds value of velocity. Higher radius value = higher speed.
	this.position.y = 200 + 30 * cos(this.time);
	this.position.x = 200 + 30 * tan(this.time);
	//trig function directs the animation (slowing down in middle/accelerating the circles as they approach the edges)
  }

  //holds visual presentation
  this.display = function(){
  	noFill();
    stroke(255);
    strokeWeight(1.5);
    ellipse(this.position.x , this.position.y + 160, this.radius, this.radius);  
  }
}

//----------------------------

function Plus(plusposition, plusradius){
  this.position = plusposition;
  this.radius = plusradius;
  this.direction = 1;
  this.time = 0; //controls the placement of the starting anchor, time to jump towards.
  //updates position every time draw is called.
  this.update = function(){
	this.time += this.direction * this.radius * 0.002; //holds value of velocity. Higher radius value = higher speed.
	this.position.y = 200 + 40 * 1/cos(this.time)/3;
	this.position.x = 200 + 40 * 1/sin(this.time)/3;
	//trig function directs the animation (slowing down in middle/accelerating the circles as they approach the edges)
  }

  //holds visual presentation
  this.display = function(){
  	noFill();
    stroke(255);
    strokeWeight(1.5);
    ellipse(this.position.x , this.position.y, this.radius, this.radius);  
  }
}

If gifs below are frozen: right-click and open the image in a new tab.

My final project culminated in a series of six loading icons. I used trigonometric functions to calculate x and y positions — because of their cyclical behaviours, sin, cosine, and tangent worked well for looping animations. Individual animation gifs can be seen above. Process work can be seen below

From a design standpoint, I developed these loading icons with several human factors in mind — from longevity and human attention span, to interactivity and engagement. Repetition in form, symmetry in composition and shape, and cyclical rhythm all contribute to keeping people from becoming disengaged with the content. As a component living in a transitionary space, the loading icon serves to bridge one space to the next.

For my final project, I’d like to create a series of recursively-generated loading icons, following multiple stylistic variations. This is in-line with an exploration of communications design variables–specifically, how color and images can be used in a moving picture to engage and hold a viewer’s attention. This is important in liminal spaces such as loading screens, where visitors to a website or video need some visual component to tell them that progress is being made. A visually-engaging loading icon, like the above, would make the interstitial space between pages seem shorter.

In doing this, I’d like to explore different illustration methods–from existing on the three-dimensional plane to using p5js physics– that can be translated efficiently to Processing.

Project One: Spotify – Pride Stories by Studio Giant Ant

Year of Creation: 2016

Link to Project Work: http://www.giantant.ca/spotify-pride-stories

Link to Creator Bio:http://www.giantant.ca/about/

—–

Project Two: Most Female and Male Occupations Since 1950 by Flowing Information

Year of Creation: 2016

Link to Project Work: http://flowingdata.com/2017/09/11/most-female-and-male-occupations-since-1950/

Link to Creator Bio: http://flowingdata.com/

The two projects I chose to compare for my final Looking Outwards take two different approaches in delivering messages to audiences — both, however, are rooted in computational media, with varying degrees of computation usage.

Giant Ant’s Spotify Pride Stories is an information visualization-animation discussing the role of same-sex marriage laws in the workplace, and the lifestyles of stakeholders tied to those laws. It uses primarily Adobe Illustrator and Adobe AfterEffects to tell a story with their information, and uses computationally-derived data to form infographics on specific moments within the animation.

In comparison, Flowing Data’s Most Female and Male Occupations Since 1950 is a static infographic running on javascript and HTML/CSS that encourages user interaction through mouse-hover. Viewers are introduced to the topic of gender in the workplace through a gradient visualization, which they can experience for themselves by placing their cursor over different areas within the inforgraphic.

As a set, these two projects represent approaches to design that I’m very invested in — animation, world-building, and information delivery.

sketch

//Robert Managad
//Section-E
//rmanagad@andrew.cmu.edu
//Project 11 -- Turtle Graphics

var turtleWormA;



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

function draw() {
	var mil = millis(); //use of milliseconds an automatic rotation.
	background(230, 201, 148);

	//turtle drawings below, which vary on length and placement

	push();
	translate(width/2, height/2);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 100; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();

	push();
	translate(width/4, height/4);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.75, height*0.75);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.75, height*0.25);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.25, height*0.75);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.45, height*0.35);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.85, height*0.65);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.15, height*0.45);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.15, height*0.55);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.55, height*0.95);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.60, height*0.65);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.40, height*0.85);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.10, height*0.90);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.40, height*0.60);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.80, height*0.40);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.90, height*0.90);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.60, height*0.10);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.95, height*0.15);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.10, height*0.15);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
}

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

For the Turtle Composition, I wanted to play with modifying turtle paths using trigonometric functions. I also thought about elements in nature that visually present trigonometric functions to incorporate into my work as compositional elements. I came up with a handful of ideas, but ultimately saw compositional harmony with worms popping out of holes in the ground (or armpit hair).

Artist: Porter Robinson

Title of Work: Worlds (album)

Year of Creation: 2014

Link to Project Work: http://porterrobinson.com/music/

Link to Artist Bio: https://en.wikipedia.org/wiki/Porter_Robinson

Porter Robinson is an EDM producer specializing in electrohouse, dubstep, synthpop, progressive house, and experimental genres. In his album Worlds, Porter used heavy sampling of reproduced vocaloids as well as original soundfonts and sound capturing methods. As an album project, Worlds influenced me significantly in my approach and philosophy towards performance art and the role of sound and music in experiential design.

Computationally, Porter developed many of his ambient noises through the use of simulated improvisation via program learning. Likewise, Porter utilized music databases to sample from and incorporate into each song of Worlds.

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-10


var mountain = [];
var mountainLinks = [
	"https://i.imgur.com/U4n2NMc.png",
	"https://i.imgur.com/OwkMkiT.png"]
var mountainAssets = [];

var tree = [];
var treeLinks = [
	"https://i.imgur.com/4b5pxqM.png",
	"https://i.imgur.com/1YjM5m7.png",
	"https://i.imgur.com/7sXiAyN.png"]
var treeAssets = [];

function preload() { //made assets in Adobe Illustrator to transfer over.

	//mountainloop
	for (var i = 0; i < mountainLinks.length; i++) {
		mountainAssets[i] = loadImage(mountainLinks[i]);
	}
	for (var i = 0; i < treeLinks.length; i++) {
		treeAssets[i] = loadImage(treeLinks[i]);
	}
} 

function setup() {
    createCanvas(480, 240); 
    frameRate(60);
    mountain[0] = mountainComponents(200);

    tree[0] = treeComponents(150);

}


function draw() {
    background(255); 

    //actual background
    stroke(0);
    fill(51, 46, 42);
    rect(0,0, width, height);

    //draw mountains
   	newMountains();
   	randomizeMountains();


   	//draws hills in the background
   	drawHills();

   	//drawing the ground
   	noStroke();
   	fill(238);
   	rect(0, 170, width, 70);

   	//setting mountains in an initial location.
    
    //draws bushes
   	newTrees();
   	randomizeTrees();


}

/////////////////////////////////

function drawHills(){ //midground hills for introduction of color.
	var terrainSpeed = 0.0006;
    var terrainDetail = 0.005;

    push();
    beginShape();
    noStroke();
    fill(186, 219, 217);
    vertex(0, 300);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height)
        vertex(x, y - 10);

    }
    vertex(width, height);
    endShape();
    pop();
}



///////////////////// TREES

function newTrees() {
	//keeps the trees moving along the x-axis
	for (var i = 0; i < tree.length; i++) {
		tree[i].tMove();
		tree[i].tPlace();
	}
}

function treePlace() { //draws the trees
	image(treeAssets[this.nFloor], this.x, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
	image(treeAssets[this.nFloor], this.x+300, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
	fill(255);
}

function treeMove() {
	this.x -= this.speed
}

function randomizeTrees() {
	var chance = 0.002 //places in more trees into the array.
	if (random(0, 1) < chance) {
		tree.push(treeComponents(width));
	}
}

function treeComponents(originX) {
	var treeComponents = {
		x: originX,
		y: random(135, 140),
		cwidth: random(30, 50),
		cheight: random(30, 50),
		speed: 1,
		nFloor: floor(random(0,3)),
		tMove: treeMove,
		tPlace: treePlace
	}
	return treeComponents;
}

///////////// MOUNTAINS 

function newMountains() {
	//keeps the mountains moving along the x-axis
	for (var i = 0; i < mountain.length; i++) {
		mountain[i].mMove();
		mountain[i].mPlace();
	}
}

function mountainPlace() { //draws the mountains
	image(mountainAssets[this.nFloors], this.xx -100, this.yy-130, mountainAssets[this.nFloors].width/10, mountainAssets[this.nFloors].height/10);
	fill(255);
}

function mountainMove() {
	this.xx -= this.speedy
}

function randomizeMountains() {
	var chance = 0.002 //places in more mountains into the array.
	if (random(0, 1) < chance) {
		mountain.push(mountainComponents(width));
	}
}

function mountainComponents(originXX) {
	var mountainComponents = {
		xx: originXX,
		yy: random(130, 140),
		speedy: 0.5,
		nFloors: floor(random(0,1)),
		mMove: mountainMove,
		mPlace: mountainPlace
	}
	return mountainComponents;
}

I took inspiration for this landscape by a project I was working on in Illustrator. With that being said, many of the assets were created first in Illustrator and loaded into my program. I had the most challenge with debugging this code and scaling images correctly — minor issues kept me from moving forward with actually drawing the program out.

Creator: Anton Reponnen

Title of Work: UP Memory Tower

Year of Creation: 2015

Link to Project Work: http://work.repponen.com/UP-Memory-Tower

Link to Artist Bio: http://work.repponen.com/About

Anton Reponnen is an interaction designer focused on developing visual identities, forms of interaction, and livable spaces. This is evident in her redesign of the hardware memory system, called UP Memory Tower.

Anton found a design opportunity within the product ecosystem of external hard drives — she saw the process of buying new and/or upgrading to better hard drives as “not-connected.” Likewise, she identified that the web-based cloud system has its own limitations, such as needing internet access and having to log in to an account.

The UP Memory Tower personalizes the external hard drive as users add to a base-memory dock when more storage is needed — all memory is still stored in one central location. Likewise, only a portion of the hard drive can be take with you — it still acts a portable storage like a usb or SD card. I find this product fascinating for its versatility, and its accordance to social conventions — it sustains the expected nature of existing products while introducing new behavioral concepts towards an established object.

sketch

//Robert Managad
//Section-E
//rmanagad@andrew.cmu.edu
//

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/oZsaEpS.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 320);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);
}

function draw() {
	var randomSize = random(5, 10);
	var randomDetailSize = random(1, 3);
	var pxDetailX = constrain(200, 280);
	var pxDetailY = constrain(40, 100)
    var px = random(width);
    var py = random(height);
    var dx = 5;
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var ixM = constrain(floor(mouseX), 0, width-1);
    var iyM =  constrain(floor(mouseY), 0, width-1);
    // creating variations in opacity
    var theColorAtLocationXY =  [red(underlyingImage.get(ix, iy)) + 5,
                                green(underlyingImage.get(ix, iy)) + 10,
                                blue(underlyingImage.get(ix, iy)),
                                + 90]
    var theColorAtLocationXYM =  [red(underlyingImage.get(ixM, iyM)) + 20,
                                green(underlyingImage.get(ixM, iyM)) + 10,
                                blue(underlyingImage.get(ixM, iyM)),
                                + 50]
    rectMode(CENTER);

    //creates stroke, no-fill rectangles for interactivity
    if (mouseIsPressed) {
   	strokeWeight(random(2, 6));
    stroke(theColorAtLocationXYM);
    rect(mouseX, mouseY, randomSize * 2, randomSize * 3);
	}
	noStroke();
	fill(theColorAtLocationXY);
	//larger pixels outside the face area
	if (px < 200 || px > 280 || py < 40 || py > 140) {
	ellipse(px, py, randomSize*3, randomSize*3.5);
	rect(px, py, randomSize*1.5, randomSize*1.5);
	}
	//smaller pixels within the face area
	else if (px > 200 || px < 280 || py > 40 || py < 140) {
	rect(px, py, randomSize*1.5, randomSize*1.5);
	}



}

    

I developed my pixel portrait program with a foggy window idea in mind, hence the changes in opacities and layering of randomly-generated pixels. To somewhat speed up the process of visualizing the background image, I incorporated an if statement involving mousePressed, where as long as the mouse is pressed strokes of rectangles will be drawn.

Below is a full canvas illustrating the background image, a self portrait.

Peer: Supawat Vitoorapakorn

Peer Post: https://courses.ideate.cmu.edu/15-104/f2017/2017/10/13/svitoora-07-font-map/

Creator: IDEO

Title of Work: IDEO Font Map

Year of Creation: 2016

Link to Project Work: http://fontmap.ideo.com/

Link to Artist Bio: https://www.ideo.com/about

The IDEO Font Map Supawat discussed in his Looking Outwards 07 interested me for reasons similar as Supawat’s — collectively, typeface can be considered a massive arsenal of bullets used for different purposes. For exploration purposes, the IDEO Map gives users the ability to visualize a type and its similarities to others — by grouping type based on shared elements and the intensity of those shared elements, it becomes easier to encourage the utility of less-used typeface (rather than use established, sometimes over-used typeface).

As an actual selection tool(i.e. in opposition to dropdown style menu) however, the Font Map can be somewhat confusing  — the quantity of sampled “A”s on a frame is overwhelming, and the individual aspects of the typeface, although highly contrasted, get lost in a sea of letters. The user does not have the ability to increase the proximities of the letters further away from each other, nor do they have the ability to swap the A for a different letter.

Speaker: Molly Wright Steenson

Link to Speaker Bio: http://www.girlwonder.com/ | http://eyeofestival.com/speaker/molly-wright-steenson/

Molly Wright Steenson is a designer and architect currently holding the position of the chair of the MDes program at the School of Design at Carnegie Mellon University. Her work in architectural history and designing human systems directly contributes to the ongoing development of Transition Design, a design practice founded in 2013 at Carnegie Mellon that investigates design’s role in making transitions towards preferable, sustainable futures. Specifically, her work focuses on the effects of existing, emerging, and nascent technologies on city systems (and, subsequently, the city in its next larger context — in a region, a region in a country, a country on the globe) as well as one the people that inhabit these cities.

As a designer currently focused on contributing to Transition Design, Molly’s work is influential to my approaches — I see evaluating things in its next larger context as essential in understanding how the designed products, spaces, and messages affect peoples from different breadths of cultures. As a presenter, I see her tactic of making apt references to relatable material as as useful — if the audience can empathize with the content, it makes the content easier to understand.