## agusman-LookingOutwards-06-Randomness

IAAC-Institute for Advanced Architecture of Catalonia
STIGMETRIC SYSTEMS by the Advanced Architecture Group

Stigmetric Systems Simulation

This project is an exploration of stigmetric systems and multi-agent based systems. Using a group of agents, which are often used to represent organically behaviored bodies in a larger “flock” (birds, bees, fish, etc.), the program randomly distributes these across different surfaces, spinning forces, and vectors with specific targets are applied to them.

What’s excellent about agent-based computational design is that it is a field that merges the seemingly arbitrary and random nature of the organic and the mechanized, calculated nature of computer software. Randomness fits well into computational design because in a simulation, random values can fill in the unimportant blanks and can be used the emphasize the algorithm over the results. In that way, we can enhance the seemingly arbitrary patterns in nature through very calculated, yet somewhat random, simulations.

## agusman-Project06-AbstractClock

``````//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//
//Project 06 Abstract Clock

var prevSec;
var millisRolloverTime;
var circleorigin = 0;

var milsecangle = 0;
var secondsangle = 0;
var minutesangle = 0;
var hoursangle = 0;

var degreespmsec;
var degreespsec;
var degreespmin;
var degreesphour;

//--------------------------
function setup() {
createCanvas(300, 300);
background(255);
millisRolloverTime = 0;
angleMode(DEGREES);
}

//--------------------------
function draw() {
background(255, 10);

// Fetch the current time
var H = hour();
var M = minute();
var S = second();

// Reckon the current millisecond,
// particularly if the second has rolled over.
// Note that this is more correct than using millis()%1000;
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);

var hourBarWidth   = map(H, 0, 23, 0, width);
var minuteBarWidth = map(M, 0, 59, 0, width);
var secondBarWidth = map(S, 0, 59, 0, width);

// Make a bar which *smoothly* interpolates across 1 minute.
// We calculate a version that goes from 0...60,
// but with a fractional remainder:
var secondsWithFraction   = S + (mils / 1000.0);
var secondsWithNoFraction = S;
var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);

noFill();
// ellipse(150, 150, 135, 135);
// stroke(0, 10);
// ellipse(150, 150, hourBarWidth, hourBarWidth);
// stroke(0);
// ellipse(150, 150, secondBarWidthChunky, secondBarWidthChunky);
// stroke(0);
// ellipse(150, 150, secondBarWidthSmooth, secondBarWidthSmooth);
// stroke(0);
// ellipse(150, 150, minuteBarWidth, minuteBarWidth);

degreespmsec = map(S + (mils / 1000.0), 0, 59, 0, 360);
push();
translate(150, 150);
rotate(milsecangle);
stroke(255, 0, 0);
ellipse(30, 30, 50, 50);
pop();
milsecangle = degreespmsec;

degreespsec = map(S, 0, 59, 0, 360);
push();
translate(150, 150);
rotate(secondsangle);
stroke(255, 0, 0);
ellipse(30, 30, 50, 50);
ellipse(38, 38, 75, 75);
pop();
secondsangle = degreespsec;

degreespmin = map(M, 0, 59, 0, 360);
push();
translate(150, 150);
rotate(minutesangle);
stroke(0, 0, 255);
ellipse(95, 95, 30, 30);
pop();
minutesangle = degreespmin;

degreesphour = map(H, 0, 11, 0, 360);
push();
translate(150, 150);
rotate(hoursangle);
stroke(0, 255, 0);
ellipse(20, 20, 250, 250);
pop();
hoursangle = degreesphour;

// 30 * 12 = 360, different center for every hour, hoursangle
// then write mincircle function relative to that
//variable  = 20, 0, + 30 degrees
}

//get center of outside circle
//
``````

I think I am on the cusp of honing in on a very interesting interaction, but the final execution in the period of time we were allotted isn’t very satisfactory to me. I was inspired to create a clock based on an optical illusion of circular infinity- after coming across this captivating image, I entertained myself with trying to map out the logic behind it:

In my logic, I detail how the circles would be drawn from the outside in, and then rotating the circle matrix by the corresponding time (e.g. mapping 12 (hours) or 60 (seconds) to 360 (degrees)). I would then translate the matrix by the difference between the radius of the parent circle and the child circle. For some reason I’m unsure of, the content uploads folder won’t accept my jpegs or pngs of my sketch work, so I’ll try to amend that as soon as possible.

## agusman-LookingOutwards-05-AFrame

A Frame: A web framework for building virtual reality experiences
A Frame Website

A Frame is a three.js framework that enables creators to construct virtual reality and experiences for the web. It has an entity-component-system architecture, which is a common and desirable pattern in 3D and game dev. According to A Frame, some of the benefits of ECS include:

“- Greater flexibility when defining objects by mixing and matching reusable parts.
– Eliminates the problems of long inheritance chains with complex interwoven functionality.
– Promotes clean design via decoupling, encapsulation, modularization, reusability.
– Most scalable way to build a VR application in terms of complexity.
– Proven architecture for 3D and VR development.
– Allows for extending new features (possibly sharing them as community components).”

What I love about software like this is that it makes a craft (creating virtual reality experiences) that up until now has been so elite and obscure accessible to the masses. It’s about time that the public start to involve themselves more personally with a field that is growing more and more rapidly every day and one that will dominate many top industries and social environments.

It’s also exciting that this platform in particular focuses on web-based experiences. The internet is the world’s most highly accessed mediums and being able to share groundbreaking digital experiences that run efficiently on the web is a big step towards making this craft more prevalant in the world.

## agusman-Project05-Wallpaper

``````//Anna Gusman
//Section E
//agusman@andrew.cmu.edu
//Project O5 Wallpaper
//This sketch draws colorful, circular arcs

function setup() {
createCanvas(400, 600); //set the boundaries
frameRate(2); //control the framerate
// var change = [1,2,3,4]; //make array

}

function draw() {
background(0);
strokeWeight(1.5); //set width of lines
stroke(255);

//creating a for loop
//1. initialize variable
//2. boolian test
//3. incrementation operation
//REMEMBER SEMI COLON IN BETWEEEEN

for (var x = 0; x <= width; x += 50) {
var choice;
for (var y = 0; y <=height; y +=50) {
// fill(0,0,255);
var centerA; //x position of arc center
var centerB; //y position of arc center
var start; //starting position of arc

//draw arcs starting from 4 different corners
choice = int(random(1,5));
if (choice == 1) { //top left corner
//changing location of arc center and starting position
centerA = x;
centerB = y;
start = 3 * PI / 2;
}else if (choice == 2) { //top right corner
//changing location of arc center and starting position
centerA = x;
centerB = y;
start = PI;
}else if (choice == 3) { //bottom left corner
//changing location of arc center and starting position
centerA = x;
centerB = y;
start = 0;
}else if (choice == 4) { //bottom right corner
//changing location of arc center and starting position
centerA = x;
centerB = y;
start = PI / 2;
}
noFill();
stroke(300, random(255), random(255)); //randomizes color of stroke
//nested loop to draw multiple arcs on the same rotation
for(var i=1;i<=9;i++){
arc(centerA, centerB, 10*i, 10*i, start, start + (PI / 2));

}
// arc(centerA, centerB, 90, 90, start, start + (PI / 2));
// arc(centerA, centerB, 80, 80, start, start + (PI / 2));
// arc(centerA, centerB, 70, 70, start, start + (PI / 2));
// arc(centerA, centerB, 60, 60, start, start + (PI / 2));
// arc(centerA, centerB, 50, 50, start, start + (PI / 2));
// arc(centerA, centerB, 40, 40, start, start + (PI / 2));
// arc(centerA, centerB, 30, 30, start, start + (PI / 2));
// arc(centerA, centerB, 20, 20, start, start + (PI / 2));
// arc(centerA, centerB, 10, 10, start, start + (PI / 2));
}
}
noLoop();
}
``````

For this project, I created a generative, color-changing and angle-rotating arc-tiled wallpaper. I’ve always been drawn to circular forms and loved the effect I got when repeating and transforming the arc quadrants. First I needed to dictate the four points of origin for the arcs on each vertex of the tile, then the rotation direction and angle of the arcs. I randomize the origin points, the starting points of rotation and the colors of the arcs so that the wallpaper can generate a different pattern with each refresh.

Here are some of my abstract sketches and logic.

Iterations:

## agusman-Project04-StringArt

``````function setup() {
createCanvas(windowWidth, windowHeight);
background(60);

}

function draw() {
fill(50);
rect(0,0,windowWidth,windowHeight);
// for(var j = 0; j < windowHeight ; j=j+20){
for(var i = 0; i < windowWidth; i=i+10){
from = color(200, 200, 32);
to = color(72, 61, 200);
for(var i=0; i < windowWidth; i++){
var lerp = map(i, 0, windowWidth, 0, 1);
stroke(lerpColor(from, to, lerp));
}
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
``````

This sketch explores using strings to create a gradient curtain on a sine wave. I liked creating this simple interaction where it felt like I was pulling back a sheer curtain of individual lines.

## agusman-LookingOutwards-04

The Classifier on Creative Applications

The Classifier

Creators: Benedict Hubener, Stephanie Lee, Kelvyn Marte, Andreas Refsgaard and Gene Kogan

The Classifier is an AI paired with a table interface that selects music based on the beverages people are consuming around it at that time. The system is comprised of a microphone that takes in the ambient noise of drinking the beverage and an AI that compares the characteristic sounds to pre-trained models. The current limitation of the models is that they are constrained to three categories: hot beverages, wine or beer. The approach they take in trying to characterize the beverages by their distinctive noises is really unique, yet I have to wonder what other sensors or methods they could’ve used to collect more… telling… kinds of information, such as heat, color, carbonation- which could possibly lead to expanding the beverage categories from the current three.

I’ve also always been fascinated by generating contextual music. In my time at CMU, I’ve come across several student projects who’ve sought to use visual and other sensory input as the lens through which music is created. A friend of mine tried to recreate the sound track of a classic episode of “Tom & Jerry” just purely through a series of frames. Seems like a fascinating and incredibly enigmatic field of study that I would love to pursue.

## agusman-Project03-DynamicDrawing

``````// Anna Gusman
// Section A
// Project 03
// This code is a bouncy-bodied, color-changing brush concept.
// Referencing properties of spring and damping forces from p5, I create a brush shape
// that organically changes dimensions as the mouse is dragged.

var centerX = 0.0, centerY = 0.0; // center point of the polygon

var radius = 45, rotAngle = -30;
var accelX = 0.0, accelY = 0.0;
var deltaX = 0.0, deltaY = 0.0;
var springing = 0.0009, damping = 0.98;
//values of the spring and damp forces that make the triangle speed up and slow down when following the mouse.
//
var rr = 10;
var gg= 10;
var bb= 10;
var colorchange = 90;

//dictate the number of nodes
var nodes = 3;

//create zero fill arrays
var nodeStartX = [];
var nodeStartY = [];
var nodeX = [];
var nodeY = [];
var angle = [];
var frequency = [];

// soft-body dynamics
var organicConstant = 1.0;

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

//center shape in window
centerX = width/2;
centerY = height/2;

//initialize arrays to 0
for (var i=0; i<nodes; i++){
nodeStartX[i] = 0;
nodeStartY[i] = 0;
nodeY[i] = 0;
nodeY[i] = 0;
angle[i] = 0;
}

// iniitalize frequencies for corner nodes
for (var i=0; i<nodes; i++){
frequency[i] = random(5, 12);
}

frameRate(60); //increase the drawing speed
}

function draw() {
// fill(255, 10);
// background(200, 3);
fill(rr, gg, bb); //color of polygon
rr = 127.5*cos(2*PI*colorchange/360) + 127.5;
gg = 127.5*sin(2*PI*colorchange/360) + 127.5;
bb = 127.5*sin(2*PI*(colorchange-20)/360) + 127.5;

colorchange++;
stroke(0);
drawShape();
moveShape();
}

function drawShape() {
//  calculate the locations of the nodes
for (var i=0; i<nodes; i++){
rotAngle += 360.0/nodes; //drawing 3 points on the circumference of the circle
}

// draw polygon
curveTightness(organicConstant);
beginShape();
for (var i=0; i<nodes; i++){
curveVertex(nodeX[i], nodeY[i]);
}
for (var i=0; i<nodes-1; i++){
curveVertex(nodeX[i], nodeY[i]);
}
endShape(CLOSE);
}

function moveShape() {
//move the center point
deltaX = mouseX-centerX;
deltaY = mouseY-centerY;

// create springing effect
deltaX *= springing;
deltaY *= springing;
accelX += deltaX;
accelY += deltaY;

// move the polygon's center
centerX += accelX;
centerY += accelY;

// slow down springing so that the polygon does not continue moving infinitely
accelX *= damping;
accelY *= damping;

// change the tightness of the curves using the organic constant
organicConstant = 1-((abs(accelX)+abs(accelY))*0.1);

//move the nodes
for (var i=0; i<nodes; i++){
angle[i] += frequency[i];
}
}
``````

For this project, I created an bouncy-bodied, color-changing brush concept. I referenced p5’s softbody dynamics example in order to see how they treated oscillating vector forces. You can find the example here

I was inspired to create a brush concept from the bit of code I wrote in this week’s recitation lab on creating a mouse controlled spiraling ellipse. I first made iterations on this to explore styling options and effects.

Example:

Example:

Still, the brush felt more controlled and predictable than I wanted to to be- I wanted there to be a larger element of surprise. Elements of the soft body dynamics example allowed me to soften the reactions of my shape/brush by giving it springing and damping properties, created by controlling the relationships between the drawn vertexes(nodes) of the shape (curveTightness and curveVertex. This makes the brush wiggle and have a pleasing, natural element to it’s movement. I then control the number of vertexes and sides of the shape and the acceleration and movement of these vertexes. (accel, delta, springing, damping, nodeStart, node).

Next I wanted to illustrate change across the movement of the brush path. I did this by creating a color system that undulates across the length of 3 sine waves, one each for red, blue and green.

I also experimented further with eliminating or altering the spring relationship between the mouse and the center of the polygon. Here is one example:

In future iterations of this brush concept, I’d like to embed customization of the brush shape so that when you click, you could alter the number of vertexes that would result in different brush trails. Definitely excited to play around with this more, as it has been a great learning experience.

## agusman-LookingOutwards-03: 4D Printing

The emergence of “4D printing”

Artist/Scientist: Skylar Tibbits

TED Talk: “The Emergence of 4D Printing”

When I observe the rapid pace at which technology and hardware is evolving, I have to think of all the technology and hardware that becomes immediately discarded as a result. The materials that we have used to build our homes, cities and products cannot provide us much more than what their static form allows, other than the ways we can use that form for creative reuse. So what will happen when our environment changes faster than we can build the proper tools and technologies?

Skylar Tibbits, Co-Director and founder of the Self-Assembly Lab at MIT, is proposing the manufacture and use of “programmable” materials that adapt to the changing environment. He calls this material phenomenon “Self-Assembly” and defines it as a process by which “disordered parts build an ordered structure through local interaction.” By creating responsive building blocks that are constructed and reconstructed by using small amount of energy and interaction, people can build tools that suit the needs of a changing environment. Skylar and his team have been building these “responsive building blocks” with the aid of 3D printing. He calls this process of printing self-constructing objects “4D printing”, as the 4th dimension is the element of change over time.

## agusman-Looking Outwards Post 02-Reface

Project: Eyewriter

Artists/Organizations:
Free Art and Technology (FAT)
OpenFrameworks
The Ebeling Group
the Graffiti Research Lab: Tempt1, Evan Roth, Chris Sugrue, Zach Lieberman, Theo Watson, James Powderly.

“Art is a tool of empowerment and social change, and I consider myself blessed to be able to create and use my work to promote health reform, bring awareness about ALS and help others.”
~ Tempt One

This project, spearheaded by the Free Art and Technology collective, is an incredible installment of new media art merging into the field of social innovation. Eyewriter, the name of the product, is a tool comprising of a low-cost, open source eye-tracking system that people with inhibited movement or degenerative muscle disorders like ALS can use to draw with their eyes.

The FAT team worked with LA graffiti artist, Tempt1 who was diagnozed with ALS in 2003. ALS has left him completely paralyzed, with the exception of his eyes. With this open sourced software and product, he is able to continue sketching large-scale graffiti and plastering it onto the walls of buildings using large-scale projectors.

## agusman-Project02-VariableFace

``````//
// Anna Gusman
// agusman@cmu.edu
// Section A
// Project 02
// This program creates variable faces

var faceWidth = 150;
var faceHeight = 150;
var eyeVelX = 0; //eye velocity x
var eyeVelY = 0.4; //eye velocity y
var eyeSize = 40;
var rightEye = 40;
var leftEye = 40;
var leftEyeX = 5;
var leftEyeY = 20;
var rightEyeX = 40;
var rightEyeY = 20;
var eyeColor1;
var eyeColor2;
var mouthWidth = 100;
var mouthHeight = 50;
var mouthXcor = 30;
var mouthYcor = 50;
var color1;
var color2;

function setup() {
createCanvas(400, 400);
eyeColor1 = color(0)
eyeColor2 = color(255, 200, 255);
}

function draw() {
stroke(0.1)
background(255, 255, 255);
fill(255,255,255);

from = color(255, 219, 0);
to = color(182, 152, 0);
noStroke();
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, leftEye, leftEye);
ellipse(eyeRX, height / 2, rightEye, rightEye);

noStroke()
from = color(255, 217, 0);
to = color(253, 176, 0);
for (var i = 0; i < faceWidth; i++) {
fill(lerpColor(to, from, (i+1)/faceWidth));
ellipse(width / 2 , height/2 - i*0 , faceWidth-i, faceHeight-i);
}
//Draw eyes in the right order
if (eyeVelX>0) {
drawLeftEye();
drawRightEye();
} else {
drawRightEye();
drawLeftEye();
}

//mouth//
arc(mouthXcor / .15, mouthYcor / .2, mouthHeight, mouthWidth, 0, PI);

}

//Left Eye//
function drawLeftEye(){
noStroke()
from = color(0, 0, 0);
to = color(255, 200, 255);
for (var i = 0; i < leftEye; i++) {
fill(lerpColor(eyeColor1, eyeColor2, (i+1)/eyeSize));
ellipse(width / 2 - i + rightEyeX, height/2 - i*eyeVelY - rightEyeY, eyeSize-i, eyeSize-i);
}
}
//Right Eye//
function drawRightEye(){
noStroke()
from = color(0, 0, 0);
to = color(255, 200, 255);
for (var i = 0; i < rightEye; i++) {
fill(lerpColor(to, from, (i+1)/rightEye));
ellipse(width / 2.5 - i + leftEyeX, height/2 - i*eyeVelY - leftEyeY, eyeSize-i, eyeSize-i);
}
}

function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges.
faceWidth = random(150, 200);
faceHeight = random(150, 200);
eyeSize = random(30, 50);
rightEye = random(0, 40);
leftEye = random(0, 40);
mouthHeight = random(10,80)
mouthWidth = random(20, 50)
eyeColor1;
eyeColor2;
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
``````

This project pushed me in ways I could not expect. My initial vision was to play with the idea of exploring all the possible iterations between a set of my favorite emojis, allowing me to generatively view all the intermediary emotional states between them. I also wanted to play with gradients to give an extra dimension to these expressions- and thus I hurled myself into the realm of for loops. I realize that this may have been beyond the scope of the assignment, but it was fascinating to learn the logic and technique behind creating this visual element and how a computer understands to draw it.