Lumar Final process

See my context reflection here. It’ll give some background information on why I chose to explore this area.

algorithmicdancetypealgorithmicdancetypeish1 algorithmicdancetypeish2

algorithmicdancetypeish3 algorithmicdancetypeish4

I messed up and used popStyle instead of popMatrix when translating the ellipses on the z axis.

algorithmicdancetypeish8

I had calculated the hue of each point according to its relative position within the array of points that is constantly being added to. This enabled the drawn form, no matter how many points, to always have the full range of the rainbow. Unfortunately, it slowed down so so quickly.

So I just changed the mapping to the mod of 10,000. That being said, sometimes it takes less than 10,000 points for the two rotating circles to complete the radial curve shape.

algorithmicdancetypeish12

 

screen-shot-2016-12-02-at-9-32-40-pm screen-shot-2016-12-02-at-9-34-48-pm

screen-shot-2016-12-04-at-10-13-27-pm screen-shot-2016-12-04-at-10-05-21-pm

Mapping the derivative intersections of 0, to the borders of the letter form – essentially taking the z of the point and mapping it to the x of the letters:

Ex: “B”

AlgorithmicDanceTypeish18

Some additional inspiration from Aman, & Char –  acetate printouts in many many layers of the point cloud, mapping to the color pattern, additional inspiration from Thomas Medicus’s

Special Character 🙂 displayed below:

Changed some of the formulas to allow the points to map and move smoothly and reconnect to stay continuous. Slight patterns of color were adjusted in.

The issue is just that since everything is mapped continuously and evenly through out, the middle bar of the A is missing.

The letter “A”:

The letter ‘C’ above worked a lot better.

I really wanted to strive to get the letter form to be more informed by it’s cycloid method of creation. Simply having a cloud of points doesn’t justify the need to have the cycloid creation within the process.

This is why I wasn’t satisfied with this earlier iteration below:

For the future, what I want to do:

  • make the line of the circle disappear when you look at the letter form straight on (Golan’s suggestion)
  • stereoscopic view in 3js for google cardboard
  • remapping in real-time to different words
 
import geomerative.*;
//import cardboard.*;

// Declare the objects we are going to use, so that they are accesible from setup() and from draw()
RFont f;
RShape grp;
RPoint[] points;

import peasy.*;
PeasyCam cam;

DMachine DM;
float h2;
float w2;
float d2;
float CAPHEIGHT = 300;
// determines the main artboard size (radius)
float ArtboardRadius = 500;

// Animation for starting circles
float Radius1st = floor(random(ArtboardRadius * 0.2, ArtboardRadius * 0.5));
float Radius2nd = floor(random(ArtboardRadius * 0.2, ArtboardRadius * 0.5));
float speedModif1st = floor(random(3)+1);
float speedModif2nd = floor(random(3)+1);

// arm lengths
float armlength = (ArtboardRadius * 1.05) + floor(random(-75, 75));

// beginning location of drawing arm circles and it's speed
float n1, n2;
float nShift = radians(floor(random(45, 135)));
float nSpeed = 0.0005;

// a new layer for the drawing machine
PGraphics fDM;
ArrayList<Starpoint> starArray = new ArrayList<Starpoint>();
IntList inventoryOfEndpointi = new IntList();
int index = 0;
float letterXmax=0;
float pointsArrayIndexOfMax=0;
void setup() {
//fullScreen(PCardboard.STEREO);
inventoryOfEndpointi.append(0);
// VERY IMPORTANT: Allways initialize the library in the setup
RG.init(this);
// Load the font file we want to use (the file must be in the data folder in the sketch floder), with the size 60 and the alignment CENTER
grp = RG.getText("F", "Comfortaa_Bold.ttf", 400, LEFT);

size( 1280, 720, P3D );
d2 = dist(0, 0, w2, h2);
colorMode(HSB, 100);
cam = new PeasyCam(this, 100);
cam.lookAt(650, 300, 0);
cam.setMinimumDistance(50);
cam.setMaximumDistance(1000);
cam.setDistance(800);
cam.setYawRotationMode();
ortho();
smooth();
background(0);
strokeCap(CORNER);

n1 = radians(180);
n2 = n1 + nShift;

DM = new DMachine();
fDM = createGraphics(width, height,P3D);

starArray.add(new Starpoint(width/2, height/2,0));
RG.setPolygonizer(RG.UNIFORMLENGTH);
RG.setPolygonizerLength(1);
points = grp.getPoints();
for(int i=0; i<points.length;i++){//need to map the letter data to the size of the cycloid thingy
points[i].y = points[i].y+120;
}
}
void keyPressed(){
println("float[][] starArray={");
for(int i=0; i<starArray.size();i++){
println("{"+starArray.get(i).x+","+starArray.get(i).y+","+starArray.get(i).z+"},");
}
println("};");
}
float noiseInput = 0;
void draw() {
background(0);
// draw Artboard (BIG CIRCLE)
noFill();
//MAKE THE STROKE OPACITY DISAPPEAR WHEN YOU TURN IT TO THE SIDE
stroke(100);
strokeWeight(1);
ellipse(width/2, height/2, ArtboardRadius*2, ArtboardRadius*2);

// draw Initial Points (Begin Points)
DM.draw1stBeginPoint(n1, Radius1st, speedModif1st);
DM.draw2ndBeginPoint(n2, Radius2nd, speedModif2nd);
DM.CalculateEndPoint(armlength);

float distances = dist(DM.tX, DM.tY, width/2,height/2);//points further out should have z's from the letter that is further away
float zz = 0;//initial z value of all points

stroke(100);
line(DM.tX,DM.tY,0,DM.tX,DM.tY,zz);
int sizeOfArray = starArray.size()%11000;
starArray.add(new Starpoint(DM.tX, DM.tY,sizeOfArray));

for (int i = 1; i < starArray.size()-1; i++) {
Starpoint point = starArray.get(i);
point.render();
if (!(point.hasBeenChecked)){//check if the point is where direction changes drastically if it hasn't already been checked
point.findIfMaxLetter(starArray.get(i-1),starArray.get(i+1),i, noiseInput);
noiseInput+=.0001;
}else if(point.hasBeenChecked && (inventoryOfEndpointi.get(inventoryOfEndpointi.size()-1)>i)){
if(!(point.mapped)){
for(int j=1;j<inventoryOfEndpointi.size();j++){
int indexOfTarget = inventoryOfEndpointi.get(j);
int indexOflastEndpoint = inventoryOfEndpointi.get(j-1);
if((i<indexOfTarget) && (i>indexOflastEndpoint)){
point.mappingToEndpoints(i, starArray.get(indexOfTarget).endZ, indexOfTarget, indexOflastEndpoint, starArray.get(indexOflastEndpoint).endZ) ;//determines the endZ
}
}
}else if(point.mapped){
point.moveTowardsEndZ();
}
}
}
}
class Starpoint {
boolean hasBeenChecked = false;
boolean endCurve = false;
boolean mapped = false;
float x, y, z, endZ;
float hue;
Starpoint(float xx, float yy, int arraySize){
hue = map(arraySize,0,10999,0,100);
x = xx;
y = yy;
z=0;
}
void render(){
pushMatrix();
//color is mapped according to where it is in the array to ensure a rainbow no matter how many points there are
stroke(hue,100,100);
translate(0,0,z);
point(x,y,2);
popMatrix();
}
void moveTowardsEndZ(){
z = 0.99*z+0.01*endZ;
}
void mappingToEndpoints(int currentPointIndex, float targetZ, int targetEndpointindex, int lastEndpointindex, float lastZ){
endZ = map(currentPointIndex,lastEndpointindex,targetEndpointindex,lastZ,targetZ);
mapped = true;

}
void findIfMaxLetter(Starpoint p1,Starpoint p2, int index, float noisy){
if((p1.x>=this.x && p2.x>=this.x)|| (p1.x<=this.x && p2.x<=this.x)||(p1.y>=this.y && p2.y>=this.y)|| (p1.y<=this.y && p2.y<=this.y)){
this.endCurve=true;
this.mapped = true;
addEndCurveIndexValueToGlobalArraylist(index);
//clearly it's an edge, go search for an appropriate z
FloatList inventoryZ = new FloatList();//stores the multiple possible z's for later
for(int j=0; j<points.length; j++){
float ltrY = points[j].y;//they have to match y values generally
if (this.y>ltrY-1+height/2 && this.y<ltrY+height/2){inventoryZ.append(points[j].x);}//if it matches y, add the x value of the letter point as a possible z value
}
inventoryZ.append(0);
addEndCurveIndexValueToGlobalArraylist(index);

//which of the posible z's will it take from the inventory?
//int whichZ = floor(random(0,inventoryZ.size()-1));
int whichZ = floor(map(noise(noisy),0,1,0,inventoryZ.size()));
this.endZ = inventoryZ.get(whichZ);
}else{
float radialDistance = sq(p1.x-width/2)+sq(p1.y-height/2);
float radialDistance1 = sq(this.x-width/2)+sq(this.y-height/2);
if (radialDistance>=radialDistance1){//is it bigger farther away?
//if it is, is the next one smaller?
float radialDistance2 = sq(p2.x-width/2)+sq(p2.y-height/2);
}
}
this.hasBeenChecked = true;

}
}
void addEndCurveIndexValueToGlobalArraylist(int indexValue){
inventoryOfEndpointi.append(indexValue);
}
//////////////////
class DMachine {
float MAxx1, MAyy1;
float MAxx2, MAyy2;
float tX, tY;

float anim;

DMachine() {
anim = 0;
}

void draw1stBeginPoint(float n1_, float Radius1st_, float speedModif1st_) {
float MAx1, MAy1;
MAx1 = width/2 + ArtboardRadius * cos(n1);
MAy1 = height/2 + ArtboardRadius * -sin(n1);
stroke(60);
strokeWeight(1);
fill(0);
ellipse(MAx1, MAy1, Radius1st, Radius1st);

// resets the angle
n1 -= nSpeed;
if (degrees(n1) < 0) {
n1 = radians(360);
}

noStroke();
fill(255);
MAxx1 = MAx1 + cos(anim * speedModif1st) * Radius1st/2;
MAyy1 = MAy1 + sin(anim * speedModif1st) * Radius1st/2;
anim += 0.025;
fill(60);
ellipse(MAxx1, MAyy1, 5, 5);
}
void draw2ndBeginPoint(float n2_, float Radius2nd_, float speedModif2nd) {
float MAx2 = width/2 + ArtboardRadius * cos(n2);
float MAy2 = height/2 + ArtboardRadius * -sin(n2);
stroke(60);
strokeWeight(1);
fill(0);
ellipse(MAx2, MAy2, Radius2nd, Radius2nd);

// resets the angle
n2 -= nSpeed;
if (degrees(n2) < 0) {
n2 = radians(360);
}

noStroke();
fill(255);
MAxx2 = MAx2 + sin(anim * speedModif2nd) * Radius2nd/2;
MAyy2 = MAy2 + cos(anim * speedModif2nd) * Radius2nd/2;
anim += 0.025;
fill(60);
ellipse(MAxx2, MAyy2, 5, 5);
}

void CalculateEndPoint(float armlength_) {
// "crazy" math stuff here
// only look if you dare!

stroke(60);
fill(60);

// distance between the two main points
float a = dist(MAxx1, MAyy1, MAxx2, MAyy2);
line(MAxx1, MAyy1, MAxx2, MAyy2);

// the mid-point
float a2X = lerp(MAxx1, MAxx2, 0.5);
float a2Y = lerp(MAyy1, MAyy2, 0.5);
ellipse(a2X, a2Y, 5, 5);

// The armlength "compensator" aka the triangle height calculator
float fD1 = abs(sq(armlength) - sq(a/2));
float fD2 = sqrt(fD1);

// "compensation" angle
float alpha = asin(abs(MAyy1 - MAyy2) / a);

if (MAyy1 - MAyy2 < 0 && MAxx1 - MAxx2 < 0) {
// works in between "180-270"
// a is \ angle
tX = a2X + fD2 * cos(-PI/2+alpha);
tY = a2Y + fD2 * sin(-PI/2+alpha);
} else if (MAyy1 - MAyy2 < 0 && MAxx1 - MAxx2 > 0) {
// works in between 90-180
// a is / angle
tX = a2X + fD2 * cos(PI/2-alpha);
tY = a2Y + fD2 * sin(PI/2-alpha);
} else if (MAyy1 - MAyy2 > 0 && MAxx1 - MAxx2 > 0) {
// works in between 0-90
// a is \ angle
tX = a2X + fD2 * cos(PI/2+alpha);
tY = a2Y + fD2 * sin(PI/2+alpha);
} else if (MAyy1 - MAyy2 > 0 && MAxx1 - MAxx2 < 0) {
// works in between 270-360
// a is / angle
tX = a2X + fD2 * cos(-PI/2-alpha);
tY = a2Y + fD2 * sin(-PI/2-alpha);
}

// final lines
line(MAxx1, MAyy1, tX, tY);
line(MAxx2, MAyy2, tX, tY);
}
}

AAAGH LOOKING OUTWARDS EVERYWHERE

fontgrid-f093b6c4c7d01d8036b14a95cfcb5eb7

Designers traditionally use grids to help their design of type. Type, even humanist type is still/can still be broken down systematically with math and geometry. How might I use computation to aid in design? Or to manipulate current types?

Other than that, the details of serif, stroke weight, relative x heights, ligatures, time period, etc all contribute towards a personality that each type holds. Great communications designers should be able to use them as they would aesthetic and communicative forms not merely words. When would you use one over the other?

What would I like to analyze/explore in computational type?

Create a new display type? Explore the anatomy of type? It’s history and cultural weight?

This is a particularly interesting example of the exploration of type anatomy:

MetaFont was possibly the world’s first parametrized typeface (created in 1977). It was created by Donald Knuth for the typesetting of his life-work The Art of Computer Programming. Most fonts are created by designing the outline of the font. When a typeface has to be created in different weights, you cannot just “grow” or “shrink” this outline computationally. A designer has to sit and create new outlines by hand. MetaFont takes a drastically new approach. Instead of being described by its outline, this font is represented by a series of variables inspired by handwriting:

  • Pen
  • Weight
  • Slant
  • Superness
  • Curlyness

By manipulating these variables you can create very different styles of the MetaFont, as shown in these screenshots.

 

 

In creating type in 3d, Ortho Type is a prominent example. It allows the user to manipulate the 3D view, width, height, depth, thickness and color of the typeface via UI controls. You can try it out here.

 

My only issue now that I’ve thought more about computaitonal type is….WHY? WHY DID I THINK IT’S A GOOD IDEA?  Well, in our communications mini, we just started on our more in depth typeface project. I figured learning more about it in studio could be better compounded with exploration in 60212. Agh. I don’t know though. Any computational type I make I feel will not do what type is meant to do (which is be readable) while meeting the invisible standards of aesthetics that would make it valuable as art as well.

So….what am I going to do????

Jonathan Puckey has some very interesting things type-as-visuals that I think bypasses the usual hurdles computational type faces.

generativeges114-147301071cde741353a7e301ce31b89c

 

I love Professor Kyuha’s work  – I just don’t know how to make it more than simply ‘decorating’ or making it ‘pretty’ with an added computational aesthetic.

http://code-type.com/play-with-node/Type_Spin2/

Ben Cho (he made some really nice rule-based computational type amongst many other accolades and positions) , John Maeda and Stephen Benton wrote a paper together on computational type. It’s really long but quite interesting:

http://acg.media.mit.edu/people/pcho/thesis/pchothesis.pdf

 

…..anywhoo. This is a fun video that I just wanted to include.

Because Lumar can’t decide…

  1. Make this concept a reality with a rasberry pi. Have another application that people can input there own knocking patterns, so that when the door is knocked on and opened, we know who is coming in and out of studio.

2. Body moCap – coding is so bad for your body posture. Could we code by dancing and talking? Or I could finish what I first intended for my body mocap (music and particle systems)

3. Make an entire computational font set for the plotter.

4. body mocap alphabet – body mocap that takes the shapes you make with your body to form letters – convert for plotter.

 

 

 

 

Lumar-LookingOutwards 8

Hiroshi Ishi mentioned materials that translated the intangible yet versatile digital ‘pixel’ or atom, to the physical. He proposes radical, interactive, auto-adaptive materials.

I am very much excited about moving towards tangible media! A particular sentiment that Ishi expressed – “digital pixel, you can’t touch, it…it sucks”. The direction he proposes for technology is one where in more technology will feel like less. Technology will be used to make technology ‘ invisible’ in the sense that most will be translateable to the physical world.

The little motorized tile ‘pixels’ presented at Lexus Design Conference in Milan is a perfect example.

Here’s a little bits/tangible media inspired collaboration project of mine from earlier:

 

This is an arduino project that I really enjoyed. The sound generated from motion when applied with body motion capture can give a whole new depth to the phrase “percussive dance”

DODECAUDION (2011) from ◥ panGenerator on Vimeo.

Lumar- Reading-Response #08: Two Readings about Things

“1. The Critical Engineer considers any technology depended upon to be both a challenge and a threat. The greater the dependence on a technology the greater the need to study and expose its inner workings, regardless of ownership or legal provision.”

“5. The Critical Engineer recognises that each work of engineering engineers its user, proportional to that user’s dependency upon it.”

I am looking forward to the design lecture tomorrow. I am both excited and incredibly wary of the booming rise of the internet of things. I can imagine it can very easily be another subject that would go perfectly as an expansion of the documentary “death by Design”. The documentary “Death by Design” explores the question –

“What is the cost of our digital dependency?”

It uncovers a global story of damaged lives, environmental destruction, and devices that are designed to die.

With the engineering principles, I find #1 something that’s emphasized in my design studios. When designers include ‘fancy’ futuristic tech as solutions in their concept pitches, the biggest warning is always that the designer has to be able to consider carefully how to make the technology work for people, finding the gaps within the system that the tech could fulfill rather than making gaps to the existing system to necessitate a convoluted solution. I like to liken the use of technology that one doesn’t fully understand as a design solution problem to the federal government pouring money into a flopping program; it doesn’t really help. Well….I mean, it does. Money will inherently make the wheels spin faster, but the amount of money certainly isn’t proportional to the net benefit. The money simply isn’t being used effectively. Technology, if not understood well, is much the same.

For number 5, I agree! Tools shape you, you shape tools!

“tools

shape

you

shape

tools”

That’s a quote directly from Graphic #37, a graphic design magazine that introduces computation as a medium for graphic design.

An analog example of this sentiment would be in the evolution of symbols. When a designer first makes a symbol for an object, it tends to be more literal and representative. But as the public gets used to this association, the next generation of designers would redesign the symbol to be a simplified version of the previous. If this second symbol was used at the very beginning, it might not be nearly as effective. (think of the symbols for phone)

 

 

Lumar-MoCap

scan-4 scan-5

img_4348 img_4349

I had wanted to create a program to find out the kinetic energy used at each joint (not to be confused with velocity because kinetic energy depends on acceleration and mass as well). It’s a foundation that is incredibly scalable. I had spent the good chunk of the week trying to work out 3.js and brainstorming ideas….actually I spent a little too much time on that. By the time I did give up on getting my 3.js up and running, it was crunch time for crash coursing 3d in processing.

Based off kinetic energy, there could’ve been a particle system that reacted to higher levels, wherein greater motion will generate more. Or rather an environment – tiny particles at each unit of the 3d grid where the gravitational pull of a part of the body is increased according to its change in kinetic energy. I thought that would be the most interesting because the person would be ‘there’ in the environment by…’not’ being there. The negative space within the environment saturated with floating particles would indicate the human form, but would be more dynamic and better understood while in motion because the particles would gravitate towards it.

On a interaction standpoint, with this hooked up to real time data, people with larger mass will comparatively have larger gravitational pulls if they move at the same speed as someone of smaller stature. With multiple people, there is an interesting competition between who’s kinetic energy draws upon more of the floating ‘ star’ particles within the void.

etc, etc, etc, idea after idea, different modes for different ‘planets’ (planetary pull effects weight), comparing motion, calculating joules from kinetic energy and based of weight and mass assumptions – visualize calorie consumption, etc etc

etc, etc

But having lots of ideas is sometimes a detriment – there is too much to know where to focus on. So I started off with just calculating KE.

In impromptu collaboration with the fabulous Guodu:

The idea we came up with had a focus on the interaction design. We built the foundation first on being able to calculate the kinetic energy each

redhead chickendrumstick rainbowcube

Originally, we wanted the kinetic energy of each limb to be expressed by an iridescent bar chart. The individual bars would represent different parts of the body, and change colors and height according to the limb’s kinetic energy (the limb would as well, so there would be some sense of what represents what).

The bars going up and down would look like the wave formations of audio files. While it wouldn’t have matched specifically, we were really looking forward to manipulating amplitude and frequency of sound waves in processing according to kinetic energy. This way, anyone could dance ‘in sync’ with the music. Never worry about missing a beat when the music is generated according to your dance!

We had some trouble with transformations (translation/orientation) in 3d space. Great learning experience together! Neither of us have ever touched 3d programming/3d in general before this assignment so I’m happy that we have had the chance to crash course through it.

ballguy

kineticenergyworking

mappingcolor

rainbow

rainbowopacoty

 

Here we put BVH files of ourselves dancing:

THE BLOG STOPPED TAKING MEDIA UPLOADS. ERROR ERROR ERROR – THE REST OF THIS IS AVAILABLE ELSEWHERE –

Did you notice it was smoother? We changed our formula to make the reactions of the balls smoother. Since we were only smoothing distance to a running average, and kinetic energy is velocity squared, the easing had little to no effect. We decided that instead of expressing kinetic energy, we would just visualize velocity instead.

hihi

Overall, I can’t say I am too proud of how the end result translated the movement visually. But I am happy to have had this opportunity as my first exposure to 3D programming/animation/anything.

For documentation purposes, I will try to get another BVH file rendered of someone moving their  body parts one by one to show how the program works, before recording a live video of someone interacting with it and the computational results in sound and visuals being shown.

I’m excited to use the velocity data to inform the physics of a particle/cloud system.

 

The code for now:

 

 

Lumar-LookOutwards07

Sob! D3 is……strangle worthy. So much respect. I’ve always loved Amanda Cox’s work. I love it even more now.

(she’s been shown in class – the NY times designer)

Here’s another of her compatriots – SARAH SLOBIN, a data visualist  for Wall Street Journal who calls herself a ‘visual journalist’. She calls herself a visual journalist because at the Times graphics editors do their own reporting, so these are many pieces she herself pitched and produced. Over the course of her profligic career, she has done everything from “infographics that span two pages of newsprint, to long-form multimedia stories to deep data-dives to designing front-ends and coding back-ends, from breaking news to new products.”

screenshot2016-01-01at4-46-19pm

the billion dollar startup club is an interactive, immediately dramatic visualization of the biggest (monetarily) baddest startups around.

Lumar-DataViz

Onboarding experience as a rushed customer for healthyride:

See the actual footage here:

screen-shot-2016-10-28-at-5-31-18-pm

1.Short on time

timing

2. Oh look! Bike share!

ooo

3.What a confusing Kiosk

so-angry_2

4. IT WON’T COME OOOOOFFF

it-wont-come-off

5.SO ANGRY. STORMS OFF LATE.

stormsoff

 

If I wanted to figure out how to improve this onboarding experience I would need to know the kind of users that are more likely to use HealthyRide and in which ways. Determining for whom I’m designing for is vital!

With this in mind, I took the data for each station in 2016, and extracted the latitude, longitude, and distribution between subscriber vs. customer. This would’ve been my filthy hack method of getting the map assignment done as well. The size of the circles plotted is proportional to the number of users (and extrapolated from there, possibly the type of audience that is more likely to become users and thus the kind of people we want to ensure the onboarding process is smooth for. The reasoning isn’t perfect because one can also argue that the smaller circles represent an area with an audience we should be designing even more for because

Once it’s finished the svg file generated can ripped and edited to have a map slipped under it in illustrator.

The size of the circles plotted is proportional to the number of users (and extrapolated from there, possibly the type of audience that is more likely to become users and thus the kind of people we want to ensure the onboarding process is smooth for. The reasoning isn’t perfect because one can also argue that the smaller circles represent an area with an audience we should be designing even more for because clearly they aren’t using Healthy Ride enough….so my scenario doesn’t quite as easily work application wise in the research process….that’s ok)

The color…well….it was supposed to be an interpolation between yellow and blue correlated to the proportion of subscribers vs. customers from each station, but apparently the d3.interpolateCool/Warm/Plasma/all those cool color scales come in a seperate d3 library.

screen-shot-2016-11-04-at-2-49-10-am

screen-shot-2016-11-04-at-3-04-24-amscreen-shot-2016-11-04-at-3-14-23-amscreen-shot-2016-11-04-at-3-25-20-am

whywontitwork

whhhhhhhyyyyyyy is this blurrrrry?!?!

 



  
  D3 HealthyRide Visualization
  
  
    
    


Lumar-LookingBotwards06

This bot takes sentences out of the New York Times completely out of context. And it happens to be a riot. Plenty of people seem to agree – the bot has a loyal following of 131k!

https://twitter.com/nytminuscontext

screen-shot-2016-10-28-at-7-33-41-am

This is just so incredibly fun. I wonder how the Bot was programmed to have such humor or whether the humor is largely self-prescribed knowing that it is a segmented taken from the NY times? Is it inherently funny? Or just funny because we think it’s from the NYT?

screen-shot-2016-10-28-at-7-35-26-am

 

Some are just outrageous and I absolutely cannot imagine under what circumstance/context they would make sense under in  the NYT:

screen-shot-2016-10-28-at-7-38-23-am

Perhaps that is part of the allure? Wondering HOW ON EARTH DID THIS COME TO BE?!?!??!?!

I’m so curious – this bot could totally promote articles way better than any ad. I’d want to read this article if only to find out the context behind this outrageous statement.

Lumar-BookOfKindness

BOOK DESCRIPTION: “Something Kind” by Lumar is a book that is computationally generated, leveraging human computation through Amazon Mechanical Turk, several short programs in Processing, and Basil.js.

The text of the book consists of responses provided by Amazon Mechanical Turk workers, when they were asked to “write about something unexpectedly nice that someone did” for them. The program incorporates the RiTa library for content analysis, and singles out the pertinent action verbs of each quote to display on the facing page spread. Altogether the book emphasizes kindness as an action – and ends the book with the actions “GO & DO” with some gradual play on flipbook transitions through both the heart imagery and verb spread/sizing.

bookkind

_dsc2169-copy

_dsc2170-copy

_dsc2171-copy

The action verbs on the page spreads all eventually get redder, smaller and darker the closer the book gets to the end with the last verb page being “GO & DO” in smaller font at the bottom of the page.

screen-shot-2016-10-28-at-4-53-15-pm

I ended the book with a screenshot of an email a Turker sent me thanking me for the HIT (task)! Wow! I was touched! I’m really glad she liked it!screen-shot-2016-10-28-at-4-53-25-pm

 

REGRETS: Besides not being able to execute some parts of the original idea (the original sequence held more of a sentiment of a personalized gift of kind moments book) I had really wanted the extracted verbs to be written in a different color directly within the quote. I had gotten the program to send to the json file the index values of the words I wanted highlighted within the quote if it was a word array, but having the color be unique for a single or couple index values of a string in Basil was difficult. I had not managed to figure it out.

An idea I had before the book of kindness:

scan-6

Physical book of kindness brainstorms:

scan scan-1

I had really wanted the design of the pages to be cognizant of the fact that as a physical book, it had depth and extra dimensions to play with. So while the hearts on each page look as if they are traveling bit by bit to be more fully on the page, the edge it leaves helps form a half heart on the side of the book – which helps form an entire heart when you look at the book from an angle.

Metaphorically, I like the aspect of a heart emerging the deeper into the book you are.

Maeda media was an inspiration! Thank you Golan for the recommendation!

Originally I really wanted the the flipbook heart feature to have more than just a moving heart, but in fact a question mark on the outside side edge of the book – as if the title “Book of kindness” or “Something Kind” ended in a “?” as it wrapped around the corner. The “?” would be lerped gradually into a exclamation mark that would end the book be reaffirming that kindness is an action!!! Exclamation! No more “?”.

 

Idea:

Enter a time (perhaps someone’s birthday, a time you are feeling really down, the date of someone’s death, etc)

Through Temboo – program runs through twitter to finds  365 tweets that have the word “hate” (or “sad” /”lonely”?) in it posted at that time.

It then sends a mechanical turk request for human computation to spurt out 365 examples of either—–

1. An unexpected act of kindness

Take a moment to remember something nice that someone did for you recently, that you weren’t expecting. In a single sentence or two, please describe what happened, and how it made you feel.

Here are a couple examples of what your sentence might look like:

  • One of my roommates cleaned up the fridge in our apartment.
  • I was running late and in a big hurry. A man let me cut in front of him in the line at Starbucks.

//3. A specific little detail of life that makes them smile or laugh

4. A link to a post, picture, quote, gif, video, etc that inspires, uplifts, makes them smile, etc (the program will take that link and generate a visual qr code to include)

Given this, the hate quote is printed really small in black and white on one side of a two page spread, and the happier result on the other side at the edge of a page in a lerping gradient color from the rainbow in relation to the page’s place in the book.

The height position of the happy quote is determined by the page’s position within the book in relation to an arc formula – that way when you flip through the book quickly, the flip book animation is that of a rainbow arching.

or like maeda @ media – the quotes printed at the edges creates a word when you see the book from the side – a sketchbook for somebody

The words/sentences are then processed by RITA to be ordered to rhyme

The VERBS are then processed by RITA and the typography is different to emphasis ACTIOOOONNN


PROCESS/what actually happened:

  1. Index.html Page request form  Wasn’t able to get automated external hit request to amazon to work – something about my AWS authentication key not working? So I ended up just manually submitting requests through the gui request maker amazon provides instead.
  2. External Hit Initialization (use Boto SDK to access Amazon Web Services API)   Tried Boto, AWS authentication key wrong, and just a lot of plumbing issues that didn’t necesarily have to do with art or code…and trying out a different SDK like mturk.js was not something I could figure out/learn quickly enough before the free book deadline. Ah…the joys of plumbing.
  3. Illustration generator see below
  4. Verb identifier & selector see below
  5. JSON Content file generator see below
  6. Basil.js script see below
  7. was on a flight – didn’t check email about extension I learned to bind books by hand!!! It was fun – if incredibly time consuming. My book binding process is below

screen-shot-2016-10-23-at-9-06-17-pm

Wrote a processing program to create the flipbook heart illustrations that go on each page by exporting each frame.heartpages

And then in Photoshop, I took all the pages and created an action series (1. reflect over the vertical axis, 2. save, 3. close file) and was able to automate the batch. All 53 illustrations were flipped horizontally in 3.256 seconds :). LOL….but it took a good chunk of time to figure it all out…../fix issues

hearts

 

Wrote an additional processing program that ran through all the quotes from amazon mechanical turk workers leveraging the RiTa library to identify and single out the verbs in the strings. All the verbs are subsequently gathered into an array – wherein I manually chose which verbs I wanted to include. This list of selected verbs is then used in the next program.

Wrote another processing program to create the json file of all the content each page of the book should have. It took the collection of strings from the csv doc of the turker results, the turker’s ID, a corresponding image file, and an array of all the highlighted verbs within the quote.

It generates differently each time (almost – the string data from the turkers stay consistent because I didn’t pay for more….)

See pdf:

bookofkindness

bookofkindness2

somethingkindagain

Flipping through the pages —  the heart translates closer and closer to the center as the book progresses, this allows the edge to create the heart shape on the side.

Here’s a video of Golan flipping through the book:


 

Hand bound the book by organizing the 112 pages into smaller booklets called ‘signatures’ of 4 large sheets printed double sided with spreads – which translated to 16 pages per pamphlet which were then sewn together.

scan-4img_1827

 

screen-shot-2016-10-28-at-2-37-06-am
7 different pdfs for the 7 different signatures needed

The wonkiness of the printing was actually not a computational error on my part, but the side effect of an act of kindness I received!

I had really loved the paper luster of the 80 lb, but my code wasn’t made for that (the measurements of the heart illustration and the placements weren’t adjusted for the widths of the 80 lb papers adding up, I had 50 lb in mind). Fedex only had 32lb and 80 lb. But the 32 lb paper didn’t feel nearly as good. So I had sighed, and grudgingly still went with the 32 lb – it would be narrower than I would’ve liked for the heart’s side edge, but would suffice. Especially since 80 lb printing would cost me $144.

But when I had picked up the order, the fedex guy said he printed it all out on 80 lb paper for me instead, and that he didn’t charge me the extra $70.

….DDISSSAAASSSSTTTEEER!!! HOW COULD I SAY NO?! I couldn’t just ask him to redo 112 pages of $144 printing!

I also thought it added to the meaning of the book – this book was made with the help of an act of kindness.
Here’s the heart generator code:

import processing.pdf.*;
boolean bRecordingPDF;
int pdfOutputCount = 0; 

int numofpg = 53;
int whatpg =0;
float r;
float g;
float b;
float rr;
float gg;
float bb;
float rdiff;
float gdiff;
float bdiff;
void setup(){
  bRecordingPDF = true;
  frameRate(5);
  size(116, 159);
  r = random(100,255);
  g = random(100,235);
  b = random(100,235);
  rr = 255;
  gg = 120;
  bb = 120;
  println("("+r+","+g+","+b+")");
}
void draw(){
  background(255);
    if (bRecordingPDF) {
      if(whatpg<=numofpg){
     beginRecord(PDF, "heart" + pdfOutputCount + ".pdf");
    translate(width-whatpg,height/2.4);
    
    
    noStroke();
    float red = map(whatpg,0,numofpg,r,rr);
    float green = map(whatpg,0,numofpg,g,gg);
    float blue = map(whatpg,0,numofpg,b,bb);
    fill(red,green,blue);
    PShape heart = createShape();
    heart.beginShape();
      for (int i=0; i<50; i++){
        float t = i*2*PI/50;
        float x = 3.3*(16*pow(sin(t),3));
        float y = -3.3*(13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t));
        heart.vertex(x,y);
      }
    heart.endShape();
    shape(heart, 0, 0);
    whatpg++;
  }
    endRecord();
    bRecordingPDF = false;
    pdfOutputCount++;
  }
}
void keyPressed() {
  // When you press a key, it will initiate a PDF export
  bRecordingPDF = true;
}

Here is the code that identifies the verbs!

 
import rita.*;
String[] kindverbs = {"hired","save","accept","asked","volunteering","make","made","makes","cursed","thanked","waiting","bought","shocked","given","ask","moved","paying","pray","surprised","helped","pay","offered","give","remember","remembering","gave","inspired","improve","paid","thank","help","making","enjoy","blessed","appreciated","cheered","touching","vouched","listening","cared","touched","wrote","promised","served","found","understood","understand","assured","strive"};
JSONArray[] highlight = new JSONArray[50];
String[] rawKindness = {
   "A coworker hired me for extra work, because she knew I was trying to save up money. At first I was hesitant to accept because she asked me before she asked her assistant, but it was okay with the assistant. I was grateful that she thought of me for the task, which was something I would have been happy volunteering to do.",
 "My neighbor stopped by my house and brought me a cinnamon broom. Those are those little straw brooms that you see in the stores in the fall that make the house smell really nice. It was so sweet of her and so unexpected! It made me very happy and it makes me happy every day when I see it.",
"I was in a hurry to get to the train station and cursed out a woman under my breath as I passed her.  Then, my wallet fell out of my pocket and onto the street.  She picked it up and handed it to me.  I thanked her sincerely and felt like a huge heel!",
"I was waiting on my friend to get back from doing something while in a Skype call with her.  We were about to play a game, however, she had told me to wait.  As soon as she got back, I had gotten an in-game notice stating she bought me an in-game item I have been wanting for quite some time, I was really shocked as she had already given me a couple other things prior to this so it was very unexpected and a huge surprise to me since I didn't ask for it.",
 "I was a single, 18 year old mother with my 1 year old daughter. I had just moved into my own place that was across the street from Walgreens. We walked together to grab some bread and applesauce. I was so embarrassed to be paying in change, and it was obvious the cashier was less than thrilled. As we were walking back across the street and go into the apartment complex a truck pulled up along side me. It was a husband and wife who told me I shouldn't be embarrassed and to be proud of how hard I was working. I was already in tears, and then they handed me a $20 bill, and that they'd pray for me. ",
 "This was over 10 years ago and I've never forgotten that moment. Still makes me tear up :)",
 "I was 7 months pregnant with my first child. My husband and I were visiting my parents and siblings who lived 9 hours away. I thought we were just picking up a crib my parents had bought us. Upon entering my parents house, we were surprised to see a bunch of close family and friends. It was a surprise baby shower for us! We were so happy to see everyone and receive so many, many gifts.",
 "I was in a very desperate financial situation and my best friend knew about it. So he knocked on my door and handed me $20. I was so, so thankful and grateful for that act, because I was able to buy food. I love him.",
 "I had a tire blow out on a rainy night while going off an off-ramp in the middle of nowhere.  A cop pulled over to see if I was alright, and let me borrow his umbrella.  He stayed there until I got my tire changed to make sure I was safe.",
 "My Mom recently made my husband and I sauerkraut with fresh rice (one of my favorite foods of hers). I was surprised and thrilled that she had made it for us - and also relieved, because we don't know how to cook that much nor have much money, and needed some healthy food desperately.",
 "My mother made me food when I was sick. She also helped me pay a bill to. It made me feel great and relived. It was a surprise.",
 "I stopped at a gas station last week because my car had ran out of gas. When I got to the station I realized I didn't have my wallet. Frantically looking around my car a nice woman asked if something was wrong to which I explained to her that I left my wallet. She offered to give me 5$ for gas to get on my way.",
 "I was at the grocery store just trying to buy a few things for dinner that night. Nothing real expensive, about $15-$20 worth of stuff. My card got declined. I had no other payment. I was going to leave the stuff there when the person in line behind me offered to just pay for it. I was really grateful and also super shocked because you don't see that kind of thing anymore.",
 "My car had broken down taking my kids to school. Another mother drove by and offered to take my kids to school. Then she was kind enough to return, picked me up and drove me home.",
 "I am usually the one to make sure the laundry is done for everyone in the house. For a few weeks I had been working really hard, trying to get in a lot of overtime, and in between working from home one evening I put a load of clothes in the washer. I completely forgot about them and before I fell into bed I remember the clothes. I rushed out to the washer to put the clothes in the dryer and saw my son had not only tried the clothes, but had folded them. I got tears in my eyes for how nice that felt.",
 "To be honest I had hard times remembering anything.. A couple weeks ago I was at the groceries store, an old man and I going to the cashier, he was in front of me: he picked the left line and I continued to the right. His line was going to be closed with the client before him so he moved to my line. I told him to pass in front of me and he replied he wasn't in a hurry because he was retired.",
 "One nice thing that someone did for me recently that I wasn't expecting was when my dad went to Trader Joe's and bought healthy food for me after I had been feeling unwell. He usually shops at a different grocery store , but he did it because he knew that it would be food that I would like.",
 "I was in the office before lunchtime somene gave me a candy, . It was super unexpected, I felt super good. I really I needed",
 "My sister surprised me by leaving fruit snacks at my front door the other day. I love fruit snacks. It was a small thing, but made my day.",
 "I was given a really nice compliment at work.  I was told I inspired someone to improve at their job and she got a promotion because of it.  It was incredibly heartwarming.",
 "I was in the drive-thru to pick up my starbucks for my office.  As I pulled up to the window, the barista told me that my order had been paid for by the car in front of me.  I was extremely grateful for the kindness and paid it forward when I could.",
 "It was late at night, and I had just gotten out of the gym. I walked to the parking lot, got in my car, and tried to start it, and the battery was dead. A fellow gym-goer came out shortly after, and I guess he heard me repeatedly try and start my car, which was unsuccessful. He walked up to my window and asked me if I needed a jump - and I said absolutely, yes, thank you! He pulled his car around, we got the batteries connected, and 30 seconds later I was on my way. What a life-saver! I was relieved to not have to waste money calling roadside assistance, and was quite frankly seriously positively surprised that someone would go out of their way to help me. It was very heartening, and I now make it a point to 'pay it forward' as far as these sorts of little kindnesses go.",
 "I was really tired and we were out of coffee. I had to go to a 7 hr online trainig class and didnt know how I'd make it through. My husband shows up with coffee for me, I was so happy and grateful.",
 "Our HR Manager was making cheese, egg and ham biscuits for everyone to enjoy one morning. I am a vegetarian and the ham was mixed in so I would not have been able to partake of the goodies. However she surprised me by making 4 separate ham  free biscuits just for me.  It was a very nice and welcome treat!",
 "My buddy let me sleep on his couch for a week.  I really needed a friend right then.  Felt great to have one pull through for me.",
 "I recently was cleaning my home and wanted to get rid of a lot of items around the house. I started early in the morning and was extremely surprised at how well the house was looking, for the first time in over a year the clutter was gone. But I noticed  I had lots of stuff out by the curb and wondering now if the city will pick it up.",
 "To my surprise my neighbor who has a truck  came over and loaded all the garbage on his truck and took it to the dump.",
 "I was so relieved that it was all gone. I felt so blessed to have such a nice neighbor.",
"A young lady offered me her seat on the subway.  Now, at 63 I'm not that old but I do have gray hair.  I appreciated her offer though I did not take her up on it - what a kind young lady.",
"It was surprising group kindness.  I went to a dance class tonight and the cirque class was doing dive cart wheels.  I thought I could do them and asked to join in.  The teacher let me.  I was the last one and the others cheered really loud when I did it.  Normally, we don't cheer in class, so it was a big surprise!  I'm almost 3 times older than them...I guess that might be the reason....but am not sure.",
"I had had a really bad day and a friend that I had been texting about stuff I had been going through was there for me. She gave up the rest of her afternoon at work and showed up at my apartment and took me to lunch and then we just sat and talked. Totally unexpected. Glad she gave me time.",
 "I had taken the day off work because I was very tired. My mom stopped by just to bring me a can of coke which she knows is my favorite drink. I felt like someone cares about me.",
"I had a fight with my boyfriend and was walking around our neighborhood which was in a downtown area. A homeless person bought me a beer and talked about angels and God. It was a really touching moment. I felt as though it was a message from above even if that sounds ridiculous.",
"I was in between jobs and really eager to get my foot in my career. I had posted an article on Facebook about the type of career I wanted, nothing too long and nothing like rant. A friend read it and messaged me right away, telling me she had a cousin who was in that field. Without me being able to reply, I got a text message from the cousin saying how my friend had vouched for me and if I would be available for an interview. Fast forward to now and I am loving my job! It was such a helpful extended act of kindness that changed my life.",
"My husband made the bed yesterday. I know it sounds trivial but it was a really nice surprise to walk in on. I hate making beds and I also hate sleeping in unmade beds so it meant a lot to me. It made me feel special and appreciated.",
"My dog was sick and I had just brought my favorite goat buck in for a second surgery. I was stressed out and upset because I have no other family than my animals. I was telling all this to a cashier at an organic grocer store I shop at. She an I have been friendly for over a year. After listening to me she said it hurt her to see me so sad and she asked me if she could give me a hug. I haven't had a hug from anyone in years so it made me feel like I was cared about by someone in a genuine way. I felt touched and sad at the same time, realizing just how long it had been since anyone showed me a tender act of care.",
"I was recently on the side of the road with a flat tire and a sweet boy stopped and changed my tire for me. I felt really thankful and also know there is still some good in this world.",
"A person who I didn't expect to show sympathy, actually was very upset when I told him about my mother's recent death - he even wrote a note.",
"I was out to dinner at Outback Steakhouse with my family (5 of us). My 3 young kids were being somewhat challenging, and I was a little stressed and not really enjoying my meal.  When we were done, the waiter came to us and said someone at the bar had paid for our meal, tip and everything. We immediately looked up, and no one was there. I was so in shock, confused, and happy....it really made my day.  I posted about it on Facebook and thanked the stranger who paid for our meal, and promised to pay it forward. I received a lot of positive feedback and comments from people.",
"My female cousin once unexpectedly baked a cake and served me a piece. I felt this was quite unusual since she's normally lazy and never does things like this (for anyone), although the inverse is not quite the same. I enjoyed it and found it unusual (the gesture), but coined it as a random act of kindness from her.",
"I was trying to buy a house and someone offered me the money I needed to put down on the house. I was over joyed and shocked that someone would help me in that.",
"I was in a video store (ok not extremely recently but it is what came to mind) and talking to my daughter about what we could get because I had rent due and was really short on money and it was just a bad time in general.  The next thing I knew a somewhat scruffy-looking guy came up and handed me a five dollar bill and kept walking.  I just stood there in shock for a little bit.  I was a little embarrassed, but is was such a nice thing for somebody to have done.",
"The grocery store where I shop regularly was crowded. I had other important work to do and was short on time. The helper at the grocery store understood my predicament  and helped me pay my grocery bill by opening a new counter. He really made my day!",
"One day, I happened to be in a town quite unfamiliar to me. The people there spoke a different language which I could not understand well. Similarly, they could not understand what I was telling them. I wanted to go to a hotel run by somebody who speaks my language. I knew only my mother tongue besides English. There gathered a number of taxi drivers  around me to take advantage of my miserable situation. Seeing the pathetic condition I was in, a young man stepped forward and asked what the matter was. He spoke in good English. I felt very much relieved and happy. I explained my situation and requested him to help. First he assured me that he was not a con and showed me a chain around his neck to prove that he was a devotee of one of the local Gods. He then called one of the taxi drivers and gave instructions as to where to take me. The taxi took me to a hotel whose owner spoke the same language as mine. I felt greatly grateful to the person who helped me in this difficult situation.",
"A man let me go in front of him at the grocery store when I only had a few items and he had a cart full.  I was very relieved because I had a rowdy toddler with me.  It was very nice of him and I was very appreciative.",
"I was on my way to one of my hardest midterms last year, physics. Unexpectedly, a girl was handing out packets containing snacks and other various test supplies out on campus, which was a really nice.",
"A man I had just met, changed the flat tube in my tire five minutes before the mountain bike race that we were both competing in. He did this without hesitation. Amazing.",
"I just did some groceries. I got some extra snacks and drinks. I saw a homeless senior citizen resting on a bench, and decided on a whim to share my snacks and drinks.",
"I was having a really bad day out of nowhere. My mom showed up to my apartment and brought flowers. She does not even live in the same town as me. It was very thoughtful of her. I felt grateful for her.",
"I always strive for a clean house but rarely get it. Not only did I walk into a clean house after work on my Birthday, but my man also got me the most beautiful flowers! I always want nothing but flowers for my day and this time he came through and then some! It was awesome and made me feel good.",
};
JSONArray values;
void setup(){
  values = new JSONArray();
  for(int i=0;i<rawKindness.length;i++){//go through the entire array of quotes to get to each quote
    String[] quote = RiTa.tokenize(rawKindness[i]);//make each quote into an array of words
    
    for(int j=0; j<quote.length; j++){//run through each word in the quote
      for(int k=0;k<kindverbs.length;k++){//test to see if it matches any of the desired verbs
        String quotedword = quote[j];
        String kindword = kindverbs[k];
        if(quotedword.equals(kindword)){
          //save the index values of the matching words within the quote
        }
       
      //add those index values into an array that gets out into the JSONarray of arrays
      }
    }
  }
}

 


JSON outputter:

 
import rita.*;
String[] images = new String[50];
String[] imageAgain = new String[50];
String[] id = {"A14OO6SSSYQQBL","A17LIM50IMQN7Y","A1CE2XPYCDRHVZ","A1EG66WQGRUPCS","A1GKTC682SWY23","A1L2T6S3WLN692","A1N91AUYC0H7S4","A1NKBXOTZAI1YK","A1O67YS3DU0ZHX","A1P1UEH9PMSHXG","A2JR1GWH41MLRB","A2LEY4X3LD8G26","A2M4YIC3XU2693","A2O2Q0LVWOWJ1G","A2VRDE2FHCBMF8","A2ZE2IPHK152KA","A30QV5VTBRGYTA","A31681CCEVDIH3","A38TZK07ON180S","A3NS1DN6J7Z3EU","AG5X553DRP557","AI4LKMF5QD07D","AITY0PTUTW9HW","AMPMTF5IAAMK8","AW5O1RK3W60FC","A2W7Z10Z5YLLF4","A3A8P4UR9A0DWQ","A2FBJV1VAI9SQ6","A2S3BJYB8MXB9A","A31LK6KUPJHPSP","A2L5GOTR5Y42X1","A1U6A617Q95MTZ","A1FFPO2ZR40NCD","A1MJYGGQ9RQUKX","A3CS3BQE8T1BU0","A3S0INU046UTYK","A2P6UJ9BKRPGUS","A03922113RU44GENR8ATX","A1RSAU5I9NZTOP","A27IUQDZPHETTP","A2A5YQTRSCLO32","A1UJFULCCBBIJI","A3JMJIKX36UNC7","A28JGET2XTPRG5","A2YRYS17DU3A8R","A17X4M2GVN70VB","AX0KHOWMMM6Z2","A10PVSMU1UBP8N","A116GKYM2O195O","A2DAZ0CJ3VKS80"};
//this is the array of arrays of indexvalues of indivudal verbs in each quote that need to change color
JSONArray[] highlightedIndices = new JSONArray[50];
String[] kindverbs = {"hired","save","accept","asked","volunteering","make","made","makes","cursed","thanked","waiting","bought","shocked","given","ask","moved","paying","pray","surprised","helped","pay","offered","give","remember","remembering","gave","inspired","improve","paid","thank","help","making","enjoy","blessed","appreciated","cheered","touching","vouched","listening","cared","touched","wrote","promised","served","found","understood","understand","assured","strive"};
String[] rawKindness = {
   "A coworker hired me for extra work, because she knew I was trying to save up money. At first I was hesitant to accept because she asked me before she asked her assistant, but it was okay with the assistant. I was grateful that she thought of me for the task, which was something I would have been happy volunteering to do.",
 "My neighbor stopped by my house and brought me a cinnamon broom. Those are those little straw brooms that you see in the stores in the fall that make the house smell really nice. It was so sweet of her and so unexpected! It made me very happy and it makes me happy every day when I see it.",
"I was in a hurry to get to the train station and cursed out a woman under my breath as I passed her.  Then, my wallet fell out of my pocket and onto the street.  She picked it up and handed it to me.  I thanked her sincerely and felt like a huge heel!",
"I was waiting on my friend to get back from doing something while in a Skype call with her.  We were about to play a game, however, she had told me to wait.  As soon as she got back, I had gotten an in-game notice stating she bought me an in-game item I have been wanting for quite some time, I was really shocked as she had already given me a couple other things prior to this so it was very unexpected and a huge surprise to me since I didn't ask for it.",
 "I was a single, 18 year old mother with my 1 year old daughter. I had just moved into my own place that was across the street from Walgreens. We walked together to grab some bread and applesauce. I was so embarrassed to be paying in change, and it was obvious the cashier was less than thrilled. As we were walking back across the street and go into the apartment complex a truck pulled up along side me. It was a husband and wife who told me I shouldn't be embarrassed and to be proud of how hard I was working. I was already in tears, and then they handed me a $20 bill, and that they'd pray for me. ",
 "This was over 10 years ago and I've never forgotten that moment. Still makes me tear up :)",
 "I was 7 months pregnant with my first child. My husband and I were visiting my parents and siblings who lived 9 hours away. I thought we were just picking up a crib my parents had bought us. Upon entering my parents house, we were surprised to see a bunch of close family and friends. It was a surprise baby shower for us! We were so happy to see everyone and receive so many, many gifts.",
 "I was in a very desperate financial situation and my best friend knew about it. So he knocked on my door and handed me $20. I was so, so thankful and grateful for that act, because I was able to buy food. I love him.",
 "I had a tire blow out on a rainy night while going off an off-ramp in the middle of nowhere.  A cop pulled over to see if I was alright, and let me borrow his umbrella.  He stayed there until I got my tire changed to make sure I was safe.",
 "My Mom recently made my husband and I sauerkraut with fresh rice (one of my favorite foods of hers). I was surprised and thrilled that she had made it for us - and also relieved, because we don't know how to cook that much nor have much money, and needed some healthy food desperately.",
 "My mother made me food when I was sick. She also helped me pay a bill to. It made me feel great and relived. It was a surprise.",
 "I stopped at a gas station last week because my car had ran out of gas. When I got to the station I realized I didn't have my wallet. Frantically looking around my car a nice woman asked if something was wrong to which I explained to her that I left my wallet. She offered to give me 5$ for gas to get on my way.",
 "I was at the grocery store just trying to buy a few things for dinner that night. Nothing real expensive, about $15-$20 worth of stuff. My card got declined. I had no other payment. I was going to leave the stuff there when the person in line behind me offered to just pay for it. I was really grateful and also super shocked because you don't see that kind of thing anymore.",
 "My car had broken down taking my kids to school. Another mother drove by and offered to take my kids to school. Then she was kind enough to return, picked me up and drove me home.",
 "I am usually the one to make sure the laundry is done for everyone in the house. For a few weeks I had been working really hard, trying to get in a lot of overtime, and in between working from home one evening I put a load of clothes in the washer. I completely forgot about them and before I fell into bed I remember the clothes. I rushed out to the washer to put the clothes in the dryer and saw my son had not only tried the clothes, but had folded them. I got tears in my eyes for how nice that felt.",
 "To be honest I had hard times remembering anything.. A couple weeks ago I was at the groceries store, an old man and I going to the cashier, he was in front of me: he picked the left line and I continued to the right. His line was going to be closed with the client before him so he moved to my line. I told him to pass in front of me and he replied he wasn't in a hurry because he was retired.",
 "One nice thing that someone did for me recently that I wasn't expecting was when my dad went to Trader Joe's and bought healthy food for me after I had been feeling unwell. He usually shops at a different grocery store , but he did it because he knew that it would be food that I would like.",
 "I was in the office before lunchtime somene gave me a candy, . It was super unexpected, I felt super good. I really I needed",
 "My sister surprised me by leaving fruit snacks at my front door the other day. I love fruit snacks. It was a small thing, but made my day.",
 "I was given a really nice compliment at work.  I was told I inspired someone to improve at their job and she got a promotion because of it.  It was incredibly heartwarming.",
 "I was in the drive-thru to pick up my starbucks for my office.  As I pulled up to the window, the barista told me that my order had been paid for by the car in front of me.  I was extremely grateful for the kindness and paid it forward when I could.",
 "It was late at night, and I had just gotten out of the gym. I walked to the parking lot, got in my car, and tried to start it, and the battery was dead. A fellow gym-goer came out shortly after, and I guess he heard me repeatedly try and start my car, which was unsuccessful. He walked up to my window and asked me if I needed a jump - and I said absolutely, yes, thank you! He pulled his car around, we got the batteries connected, and 30 seconds later I was on my way. What a life-saver! I was relieved to not have to waste money calling roadside assistance, and was quite frankly seriously positively surprised that someone would go out of their way to help me. It was very heartening, and I now make it a point to 'pay it forward' as far as these sorts of little kindnesses go.",
 "I was really tired and we were out of coffee. I had to go to a 7 hr online trainig class and didnt know how I'd make it through. My husband shows up with coffee for me, I was so happy and grateful.",
 "Our HR Manager was making cheese, egg and ham biscuits for everyone to enjoy one morning. I am a vegetarian and the ham was mixed in so I would not have been able to partake of the goodies. However she surprised me by making 4 separate ham  free biscuits just for me.  It was a very nice and welcome treat!",
 "My buddy let me sleep on his couch for a week.  I really needed a friend right then.  Felt great to have one pull through for me.",
 "I recently was cleaning my home and wanted to get rid of a lot of items around the house. I started early in the morning and was extremely surprised at how well the house was looking, for the first time in over a year the clutter was gone. But I noticed  I had lots of stuff out by the curb and wondering now if the city will pick it up.",
 "To my surprise my neighbor who has a truck  came over and loaded all the garbage on his truck and took it to the dump.",
 "I was so relieved that it was all gone. I felt so blessed to have such a nice neighbor.",
"A young lady offered me her seat on the subway.  Now, at 63 I'm not that old but I do have gray hair.  I appreciated her offer though I did not take her up on it - what a kind young lady.",
"It was surprising group kindness.  I went to a dance class tonight and the cirque class was doing dive cart wheels.  I thought I could do them and asked to join in.  The teacher let me.  I was the last one and the others cheered really loud when I did it.  Normally, we don't cheer in class, so it was a big surprise!  I'm almost 3 times older than them...I guess that might be the reason....but am not sure.",
"I had had a really bad day and a friend that I had been texting about stuff I had been going through was there for me. She gave up the rest of her afternoon at work and showed up at my apartment and took me to lunch and then we just sat and talked. Totally unexpected. Glad she gave me time.",
 "I had taken the day off work because I was very tired. My mom stopped by just to bring me a can of coke which she knows is my favorite drink. I felt like someone cares about me.",
"I had a fight with my boyfriend and was walking around our neighborhood which was in a downtown area. A homeless person bought me a beer and talked about angels and God. It was a really touching moment. I felt as though it was a message from above even if that sounds ridiculous.",
"I was in between jobs and really eager to get my foot in my career. I had posted an article on Facebook about the type of career I wanted, nothing too long and nothing like rant. A friend read it and messaged me right away, telling me she had a cousin who was in that field. Without me being able to reply, I got a text message from the cousin saying how my friend had vouched for me and if I would be available for an interview. Fast forward to now and I am loving my job! It was such a helpful extended act of kindness that changed my life.",
"My husband made the bed yesterday. I know it sounds trivial but it was a really nice surprise to walk in on. I hate making beds and I also hate sleeping in unmade beds so it meant a lot to me. It made me feel special and appreciated.",
"My dog was sick and I had just brought my favorite goat buck in for a second surgery. I was stressed out and upset because I have no other family than my animals. I was telling all this to a cashier at an organic grocer store I shop at. She an I have been friendly for over a year. After listening to me she said it hurt her to see me so sad and she asked me if she could give me a hug. I haven't had a hug from anyone in years so it made me feel like I was cared about by someone in a genuine way. I felt touched and sad at the same time, realizing just how long it had been since anyone showed me a tender act of care.",
"I was recently on the side of the road with a flat tire and a sweet boy stopped and changed my tire for me. I felt really thankful and also know there is still some good in this world.",
"A person who I didn't expect to show sympathy, actually was very upset when I told him about my mother's recent death - he even wrote a note.",
"I was out to dinner at Outback Steakhouse with my family (5 of us). My 3 young kids were being somewhat challenging, and I was a little stressed and not really enjoying my meal.  When we were done, the waiter came to us and said someone at the bar had paid for our meal, tip and everything. We immediately looked up, and no one was there. I was so in shock, confused, and happy....it really made my day.  I posted about it on Facebook and thanked the stranger who paid for our meal, and promised to pay it forward. I received a lot of positive feedback and comments from people.",
"My female cousin once unexpectedly baked a cake and served me a piece. I felt this was quite unusual since she's normally lazy and never does things like this (for anyone), although the inverse is not quite the same. I enjoyed it and found it unusual (the gesture), but coined it as a random act of kindness from her.",
"I was trying to buy a house and someone offered me the money I needed to put down on the house. I was over joyed and shocked that someone would help me in that.",
"I was in a video store (ok not extremely recently but it is what came to mind) and talking to my daughter about what we could get because I had rent due and was really short on money and it was just a bad time in general.  The next thing I knew a somewhat scruffy-looking guy came up and handed me a five dollar bill and kept walking.  I just stood there in shock for a little bit.  I was a little embarrassed, but is was such a nice thing for somebody to have done.",
"The grocery store where I shop regularly was crowded. I had other important work to do and was short on time. The helper at the grocery store understood my predicament  and helped me pay my grocery bill by opening a new counter. He really made my day!",
"One day, I happened to be in a town quite unfamiliar to me. The people there spoke a different language which I could not understand well. Similarly, they could not understand what I was telling them. I wanted to go to a hotel run by somebody who speaks my language. I knew only my mother tongue besides English. There gathered a number of taxi drivers  around me to take advantage of my miserable situation. Seeing the pathetic condition I was in, a young man stepped forward and asked what the matter was. He spoke in good English. I felt very much relieved and happy. I explained my situation and requested him to help. First he assured me that he was not a con and showed me a chain around his neck to prove that he was a devotee of one of the local Gods. He then called one of the taxi drivers and gave instructions as to where to take me. The taxi took me to a hotel whose owner spoke the same language as mine. I felt greatly grateful to the person who helped me in this difficult situation.",
"A man let me go in front of him at the grocery store when I only had a few items and he had a cart full.  I was very relieved because I had a rowdy toddler with me.  It was very nice of him and I was very appreciative.",
"I was on my way to one of my hardest midterms last year, physics. Unexpectedly, a girl was handing out packets containing snacks and other various test supplies out on campus, which was a really nice.",
"A man I had just met, changed the flat tube in my tire five minutes before the mountain bike race that we were both competing in. He did this without hesitation. Amazing.",
"I just did some groceries. I got some extra snacks and drinks. I saw a homeless senior citizen resting on a bench, and decided on a whim to share my snacks and drinks.",
"I was having a really bad day out of nowhere. My mom showed up to my apartment and brought flowers. She does not even live in the same town as me. It was very thoughtful of her. I felt grateful for her.",
"I always strive for a clean house but rarely get it. Not only did I walk into a clean house after work on my Birthday, but my man also got me the most beautiful flowers! I always want nothing but flowers for my day and this time he came through and then some! It was awesome and made me feel good.",
};
JSONArray values;
void setup(){
  values = new JSONArray();

  for (int i = 0; i < rawKindness.length; i++) {
    JSONArray indicesArray = new JSONArray();
    StringList tempIndexValue = new StringList();
    String[] quote = RiTa.tokenize(rawKindness[i]);//make each quote into an array of words
    
    for(int j=0; j<quote.length; j++){//run through each word in the quote to test for verb matches
      for(int k=0;k<kindverbs.length;k++){//test to see if it matches any of the desired verbs
        String quotedword = quote[j];
        String kindword = kindverbs[k];
        if(quotedword.equals(kindword)){//test to see if it matches any of the desired verbs
          tempIndexValue.append(kindword);//add those index values into a list
        }
      }
    }
    for(int j=0;j<tempIndexValue.size();j++){//the list gets added into a json array
      String indexvalue = tempIndexValue.get(j);
      indicesArray.setString(j,indexvalue);
    }
    String filename = "heart"+i+"copy"+".jpeg";
    images[i] = filename;
    filename = "heart"+i+".jpeg";
    imageAgain[i] = filename;
    JSONObject kindness = new JSONObject();

    kindness.setInt("pg", i+2);
    kindness.setString("kindness", "\""+rawKindness[i]+"\"");
    kindness.setString("image", images[i]);
    kindness.setString("image2", imageAgain[i]);
    kindness.setString("author", id[i]);
    kindness.setJSONArray("indicesToHighlight", indicesArray);

    values.setJSONObject(i, kindness);
  }

  saveJSONArray(values, "data/book_content.json");
}

Here’s the Basil.js!

 
#includepath "~/Documents/;%USERPROFILE%Documents";
#include "basiljs/bundle/basil.js";
// Load a data file containing your book's content. This is expected
// to be located in the "data" folder adjacent to your .indd and .jsx. 
var jsonString = b.loadString("book_content.json");
var jsonData;

//--------------------------------------------------------
function setup() {
  b.canvasMode(b.BLEED);
  // Clear the document at the very start. 
  b.clear (b.doc());

  // Make a Title page. 
  b.fill(0,0,0);
  b.textSize(24);
  b.textFont("Taz","UltraLight"); 
  b.textAlign(Justification.LEFT_ALIGN); 
  b.text("SOMETHING KIND", 72,72,360,36);
  b.noStroke();  // no border around img
  var coverimg = b.image("images/heartCover.jpg",b.width-50,b.height*0.8039,50,b.height-b.height*0.8039);
  coverimg.fit(FitOptions.PROPORTIONALLY);

  
  // Parse the JSON file into the jsonData array
  jsonData = b.JSON.decode( jsonString );
  b.println("Number of elements in JSON: " + jsonData.length);

  b.addPage();
  //b.textAlign(Justification.CENTER_ALIGN, VerticalJustification.CENTER_ALIGN );
  //b.text("Much thanks to Professor Golan Levin for the many all nighters you pulled with us",b.width*0.2,b.height*0.2, b.wdith*0.6, b.height*0.4);

  // Initialize some variables for element placement positions.
  // TIP: units are "points", 72 points = 1 inch.
  var quoteW = b.width/2;
  var quoteH = b.height/1.5;
  var quoteX = b.width/2-quoteW/2; 
  var quoteY = b.height/2-quoteH/2;

  var captionX = 0.2*b.width; 
  var captionY = b.height*0.7058;
  var captionW = b.width*0.6;
  var captionH = 36;

  var imageX = 0; 
  var imageXx = 496/612*b.width;
  var imageY = 453/612*b.height;

   b.println("dedication page");
  // Loop over every element of the book content array
  for (var i = 0; i < jsonData.length; i++) {
    b.println(i);
    // Create the next page. 
    b.addPage();

    // Load an image from the "images" folder inside the data folder;
    var anImageFilename = "images/" + jsonData[i].image;
    var anotherImageFilename= "images/" + jsonData[i].image2;
    /*if(i!=jsonData.length-1){
      anotherImageFilename = "images/" + jsonData[i+1].image2;
    }
    else anotherImageFilename = "images/" + jsonData[i].image2;*/
    var anImage = b.image(anImageFilename, 0, b.height*0.8039, 50, b.height-b.height*0.8039);
    anImage.fit(FitOptions.PROPORTIONALLY);

    b.fill(0);
    b.textSize(16);
    b.textKerning(22);
    b.textFont("Taz","UltraLight"); 
    b.textAlign(Justification.CENTER_ALIGN, VerticalJustification.CENTER_ALIGN );
    b.text(jsonData[i].kindness, quoteX,quoteY,quoteW,quoteH);

    // Create textframes for the "caption" fields
    b.fill(0);
    b.textSize(12);
    b.textFont("Taz","UltraLight"); 
    b.textAlign(Justification.RIGHT_ALIGN, VerticalJustification.CENTER_ALIGN );
    b.text("- "+jsonData[i].author, captionX,captionY,captionW,captionH);

    b.addPage();

    var anImageAgain = b.image(anotherImageFilename,b.width-50,b.height*0.8039,50,b.height-b.height*0.8039);
    anImageAgain.fit(FitOptions.PROPORTIONALLY);

    for(var j=0;j<jsonData[i].indicesToHighlight.length;j++){
      b.println(i+"verb"+j+" "+jsonData[i].indicesToHighlight[j]);
      var fillcolor = b.lerp(200, 50, b.pageCount()/104);
      b.fill(b.random(255,b.pageCount()),b.random(fillcolor+55,fillcolor),b.random(fillcolor+55,fillcolor));
      var tsizing = b.lerp(72,24,b.pageCount()/104);
      b.textFont("Taz","SemiLight"); 
      b.textAlign(Justification.LEFT_ALIGN, VerticalJustification.CENTER_ALIGN );
      b.textSize(b.random(tsizing+20, tsizing-10));
      var tcoordinatey = b.random(b.height*0.1, b.height*0.9);
      var tcoordinatex = (b.random(0,b.width*0.7));
      b.text(jsonData[i].indicesToHighlight[j],tcoordinatex,tcoordinatey, b.width-tcoordinatex, 72);
    }
    

  };

  b.addPage();
  var anotherHeart = b.image("images/heart53copy.jpeg", 0, 526, 50, b.height-b.height*0.8039);
  anotherHeart.fit(FitOptions.PROPORTIONALLY);

  ///////GO & DO PAGE------------------------------
  b.addPage();
  var lastHeart = b.image("images/heart53.jpeg", 526,b.height*0.8039,50,b.height-b.height*0.8039);
  lastHeart.fit(FitOptions.PROPORTIONALLY);
  b.textSize(36);
  b.textFont("Taz","SemiLight"); 
  b.textAlign(Justification.LEFT_ALIGN, VerticalJustification.TOP_ALIGN);
  b.fill(255);
    b.text("DO", 533,528.25,72,72);
  b.fill(0);
    b.text("GO", 452,528.25,72,72);
  b.textSize(34);
  b.textFont("DIN","Regular"); 
  b.text("&", 501,524.5,72,72);

  //last words----------------------
  b.addPage();
  var lastImage = b.image("images/TurkThank.png", 0.2*b.width, 0.2*b.height, 0.6*b.width, 0.4*b.height);
  lastImage.fit(FitOptions.PROPORTIONALLY);
  b.textAlign(Justification.CENTER_ALIGN, VerticalJustification.CENTER_ALIGN );
  b.textSize(10);
  b.text("This book is a computationally compilated and formatted collection of Mechanical Turk Worker responses. Above is an email I recieved from a turker",
    captionX,captionY,captionW,2*captionH);

}

// This makes it all happen:
b.go(); 

Lumar-LookingOutwards05

A lot of my ideation and thinking process for our FaceOSC project was affected  by/inspired by what I saw (or didn’t see) at weird reality’s VR salon. I’ll admit, I was a tad disappointed in some of the works – it felt as if the medium wasn’t being used to it’s fullest extent; it’s a complete 3d immersive environment, but some were such…passive viewing experiences that it was hard to say at all if the content was augmented by its medium or  if the content would’ve been equally fine as 2d or regular 3d movies. I wanted to be surprised within a modular environment – I wanted to turn around and see something new – if it was a building,…I want to know what made the VR experience better than simply walking through the actual building.

That being said, all the works were still wonderful to see! I am very grateful to have gotten the chance to go!

I got unity and tried some photogramming of my own this week!

remake

But anyway! Mars Wong. Dang. He’s only a freshman! I still haven’t gotten over the fact he started on the VR/Game design scene as only a 9 year old, and later on with a Fjord internship as a 9th grader. What on earth was I doing at that age? …typing very slowly that’s what.

http://m4r5w0n6.com/games#/interrogation/

This work I find especially interesting because after fiddling around with photogramming and unity, this piece doesn’t seem particularly arduous to do – so why do I think it’s worth mentioning? It’s a one day project to recreate an interrogation room environment/feel. With fairly simple techniques, but a really clever usage of the tools available, the deliverable definitely achieves its objectives. I bring this up, because there’s a difference between what can be done and what should be done. Some of the pieces in the VR salon felt incredibly computationally complex, but that complexity did not always translate proportionally to a more developed interaction or benefit artistically.

I liken it to traditional artists that create hyper photorealistic portraits. In that, the extra effort put in the technical execution of the portrait doesn’t generate net benefit to the piece as art – really, why bother with photorealism when a camera is so much faster? In this, I think hyperrealism is like using technology just because one ‘can’ and it is left unconsidered.

The pregnancy vr piece was my favorite. There’s the aspect of the unexpected and unnerving in it that really uses the VR medium well to achieve the effect. I wish I had gotten a chance to experience Mars’ archery game; the full body immersion/pieces wherein the user could be an active participant within the environment were always the best;

http://m4r5w0n6.com/games#/archery/

Lumar – FaceOSC

KITSUNE MASK – will be filmed better when it’s day time again from Marisa Lu on Vimeo.

I wanted to play with things that happened in your periphery by utilizing the japanese legend of the shapeshifting fox spirit. When you turn away – the fox mask appears – the interaction of never being able to be sure of what you saw or seeing it only in your periphery plays on the mysterious, mischievous (and sometimes malevolent) nature of the fox spirit. (the floating fairy lights are ‘kitsunebi’). The experience speaks to the transient/duplicitous nature of appearances, but also has a childish side like monsters under the bed, but never there when you look under.

BEGINNING OF PROCESS

Some exploration:

“Eyebrows! Where’d my eyebrows go?”

Baseball cap took over as my hairline?

How might I use what’s in the real and physical environment around the user to influence my program? How do I take the interaction beyond screen and face to include physical objects in the surroundings?

screen-shot-2016-10-08-at-1-22-57-pm screen-shot-2016-10-08-at-1-24-07-pm screen-shot-2016-10-08-at-1-24-40-pm screen-shot-2016-10-08-at-1-26-29-pm screen-shot-2016-10-08-at-1-26-59-pm

“Will it follow my nose? How far will it go?”

It tries to keep the nose center point close to the center between the eyes – I don’t think it recognizes that it’s the same face turned, but rather a new face with somewhat squished features.

A give or take a little over 3/4 will cause the OSC to stop detecting  a face. It comes off at first as an issue/shortcoming of the program – but how might I use that feature not as a fault but as part of the experience…perhaps some sort of play on peripheral vision?

I really think things happening based on your action/peripheral vision is something the VR salon lacked. I was surprised that no one had explored that aspect of the vr experience yet. The environment stayed the same and they really didn’t play up on the fact that the viewer has a limited field of vision while exploring a virtual space.

What if it was a naughty pet? One that acted differently when you weren’t ‘looking’? I took some old code and whipped it into a giraffe – would be interesting if the person’s face was the leaf?

Or if there was a narrative element to it – if your face was red riding hood, and ‘grandma’ kept coming increasingly closer… (or perhaps a functional program that can produce something?)

scan-5

Grandma would have your generalized proportions from the FaceOSC data as well as your skin tone so it’d fit better into the story line of …well…of her as your grandma! (getting color values from live capture is easy to do with a get command)

Print

but as soon as you turned your face away, you’d see the wolf in your periphery.screen-shot-2016-10-10-at-12-16-31-am

….bezier is still such a pain. I think I want to stay with something that works more intuitively with the medium of code (utilizes the advantages coding offers) better than something as arduous as illustration. (Or go ahead and write a program that generates the bezier inputs for me?)

sketch

giraffie

Could I fake/simulate LEAP motion detection – make my program’s interaction feel like a pseudo leap motion based program on the web…based on….face motion?

 

What about the mouth? How accurate is it for that? Could I do lip reading?

lipreading

It would be a very very rudimentary lip reading – one that isn’t accurate. But it still has potential – the very fact that it’s not particularly accurate can have some comedic application.

 

Some more experimentation:

lightballsuccess

…..I was having too much fun. I really need to narrow down and think critically on something and develop it thoroughly. Having restraint during the ideating process is just such a struggle for me – it has really impeded my ability to produce polished deliverables under personal time constraints.

(kitsune’s in legend have the power to make floating lights)

scan-1 scan-2 scan-3 scan-4

WHY WON’T MY FINAL GIF UPLOAD HERE?!!?!?!?!??!

IT’S ON GITHUB:

HERE:

FINAL

Different features:

  • blowing kitsunebi lights away
  • producing the lights
  • wiping them away
  • traditional face painting marks
  • unveiling of the shapeshifting form factor of the fox in you rperipheral vision
  • The piece explores the duality of form through the shapeshifting legend of the japanese fox spirit. The play on the peripheral vision is key because it brings a specific interaction – a sense of surprise and uncertainty to the user, wherein one can never get a clear head on view of what appears when they turn away.

https://github.com/MohahaMarisa/Interactivity-computation/blob/master/Processing/bouncingboxface/blowing.gif

https://github.com/MohahaMarisa/Interactivity-computation/blob/master/Processing/bouncingboxface/sneezing.gif

 

 
// a template for receiving face tracking osc messages from
// Kyle McDonald's FaceOSC https://github.com/kylemcdonald/ofxFaceTracker
//
// 2012 Dan Wilcox danomatika.com
// for the IACD Spring 2012 class at the CMU School of Art
//
// adapted from from Greg Borenstein's 2011 example
// http://www.gregborenstein.com/
// https://gist.github.com/1603230
//
import oscP5.*;
OscP5 oscP5;

import processing.video.*;
Capture cam;

// num faces found
int found;
float[] rawArray;
PImage lmark;
PImage rmark;
PImage mask;
ArrayList particles = new ArrayList();
boolean lightupdate = true;
void setup() {
  lmark = loadImage("kitsunemarkings.png");
  rmark = loadImage("kitsunemarkings2.png");
  mask =loadImage("kistuneMASK.png");
  size(640, 480);
  frameRate(30);

  oscP5 = new OscP5(this, 8338);
  oscP5.plug(this, "found", "/found");
  oscP5.plug(this, "rawData", "/raw");
  
  String[] cameras = Capture.list();
  
  if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    cam = new Capture(this, 640, 480, cameras[0]);
    cam.start();     
  }     
}

void draw() {  
  background(255);
  lightupdate= true;
  //stroke(0);
  noStroke();
  if (cam.available() == true) {cam.read();}
  set(0, 0, cam);
    float startvx;
    float startvx2;
    float startvy;
    float startvy2;
    float endvx;
    float endvx2;
    float endvy;
    float endvy2;
  if(found > 0) {
    startvx = 0.1*(rawArray[62]-rawArray[0])+rawArray[0];
    startvx2 = 0.1*(rawArray[90]-rawArray[32])+rawArray[32];
    startvy = (rawArray[73]+rawArray[1])/2;
    startvy2 = (rawArray[91]+rawArray[33])/2;
    endvx = startvx+0.8*(rawArray[62]-startvx);
    endvx2 = startvx2+0.8*(rawArray[70]-startvx2);
    endvy = (rawArray[63]+rawArray[97])/2;
    endvy2 = (rawArray[71]+rawArray[109])/2;
    pushStyle();
    imageMode(CORNERS);
    blendMode(SUBTRACT);
    image(lmark,startvx, startvy,endvx, endvy);
    image(rmark,startvx2, startvy2,endvx2, endvy2);
    popStyle();
    println("it's drawing the mark");
    float lipheight =rawArray[123] - rawArray[103]; 
    float mouthOpen = rawArray[129]-rawArray[123];
    float originy = (rawArray[129]+rawArray[123])/2;
    float originx = rawArray[128];
    int sizing = 2*int(mouthOpen);
    boolean creating = false;
    if(mouthOpen > 0.2*lipheight && !creating){
      println("start creating");
      BouncingBox anotherLight;
      creating = true;
      anotherLight = new BouncingBox(originx, originy, sizing);
      particles.add(anotherLight);
      if((rawArray[108]-rawArray[96])<1.25*(rawArray[70]-rawArray[62])){//mouth to nose proportion
        for (int i = 0; i < particles.size(); i++) {
          int newvel = int(particles.get(i).xx-rawArray[100]);
          if(newvel<0){ int vel = int(map(newvel, -width,0,1,10)); particles.get(i).xVel = -1*vel; particles.get(i).move(); lightupdate = false; } else { int vel = int(map(newvel, 0,width,10,1)); particles.get(i).xVel = vel; particles.get(i).move(); lightupdate = false; } } } else if(mouthOpen >0.5*lipheight && creating){
        particles.get(particles.size()-1).size = sizing;
      }
    }
    if(creating && mouthOpen <0.2*lipheight){
      creating = false;
    }
    for (int i = 0; i < particles.size(); i++) { BouncingBox light = particles.get(i); light.draw(); if(lightupdate){ light.update();} } float lside = rawArray[72]-rawArray[0]; float rside = rawArray[32]-rawArray[90]; float turnproportion = lside/rside; float masksize = 2.5*(rawArray[17]-rawArray[1]); if(turnproportion>3.7){
      int y = int(rawArray[1]-masksize/1.8);
      image(mask,rawArray[0], y,0.75*masksize ,masksize);
    }
  }
  else{
    for (int i = 0; i < particles.size(); i++) {
      particles.remove(i);
    }
  }
}

class BouncingBox {
    int xx;
    int yy;
    int xVel = int(random(-5, 5)); 
    int yVel = int(random(-5, 5)); 
    float size; 
    float initialsize;
    int darknessThreshold = 60;
    float noisex = random(0,100);
    BouncingBox(float originx, float originy, int sizing){
      xx = int(originx);
      yy = int(originy);
      initialsize = sizing;
      size = initialsize;
    }
    void move() {
        // Do not change this. 
        xx += xVel; 
        yy += yVel; 
    }

    void draw() {
        // Do not change this.
        pushStyle();
        blendMode(ADD);
        for(int i=0; i<50;i++){ float opacity = map(i, 0,50,20,-10); fill(255,250,240, opacity); float realsize = map(i, 0,50, 0, 1.5*size); ellipse(xx,yy,realsize, realsize); } popStyle(); } void update() { noisex+=random(0,0.1); move(); int theColorAt=cam.get(xx,yy); float theBrightnessOfTheColor=brightness(theColorAt); if (xx + size / 2 >= width ||
            xx - size / 2 <= 0 || theBrightnessOfTheColor < darknessThreshold) { xVel = -xVel; } if (yy + size / 2 >= height ||
            yy - size / 2 <= 0 || theBrightnessOfTheColor < darknessThreshold) {
            yVel = -yVel;
        }
        size=initialsize*0.3+initialsize*noise(noisex);
    }
}
/////////////////////////////////// OSC CALLBACK FUNCTIONS//////////////////////////////////

public void found(int i) {
  println("found: " + i);
  found = i;
}

public void rawData(float[] raw) {
  println("raw data saved to rawArray");
  rawArray = raw;
  
}

Lumar-LookingOutwards04

screen-shot-2016-09-30-at-8-25-49-am

I really wanted to go – but I fell asleeeeeeeeeeep.

Anyway, on another note: Daniel Rozin!!!!

http://www.smoothware.com/danny/woodenmirror.html

“Wooden Mirror – 1999
830 square pieces of wood, 830 servo motors, control electronics, video camera, computer, wood frame.
Size – W 67” x H 80” x D 10” (170cm , 203cm, 25cm).
Built in 1999, this is the first mechanical mirror I built. This piece explores the line between digital and physical, using a warm and natural material such as wood to portray the abstract notion of digital pixels.”

I think his work with making wooden mirrors has a particularly good point in relation to the plotter project – something that I wish I had considered more (should’ve restocked on my different pens) was the physical medium used for computational output. His quote “explores the line between digital and physical” I think is a key consideration in making a successful plotter rendition and something that makes me wish I had thought of more beyond simply bringing in different pens (pens that I should have bought replacement nibs for before 2 am of wednesday night….thursday morning….).

The wooden mirror wouldn’t have been quite as successful if it was simply a digital rendition of video input  –  the fact that the data effects something physical (and depends on the physical environment like lighting and angles of the wood blocks to create value!) in the world makes the piece all the more enthralling. Affecting and responding/dependent to digital and physical environment. WOw. Mind twist. It doesn’t work out of context (it needs the light to be that particular angle in order for the tilt of the squares to work to create shadow)

 

Lumar-PlotterArt

september-27-2016-at-1135amscreen-shot-2016-09-30-at-9-12-50-am

I was really hyped over premise 5 and 6 – the visual processing of real time data and the custom pixel (would be really cool to have a program that runs through a poem and manipulates the type elements with scale and color to fit the color data of an imported image within the script).

For the real time data ….well, I wasn’t as interested in manipulating the plotter in real time, I am really excited to explore data visualization – in this, I’ve been using IFTTT to use IOS location services – whenever my phone detects I’ve entered a predetermined area, the data/time info is recorded in a google spreadsheet. I figured it wouldn’t have been too complicated to set up a system to access the google data (downloading it as a csv/text file at continuous intervals – version control it up with git to push to a repository where then I could have a visualized report of how/where I’ve spent my time every time I pull up that url)….only time got short, plumbing got a little over my head and I really wanted to see what I could do about generative typography with interesting ‘pixels’ or strokes that create the letters.

The first idea was to go with Hershey fonts (see clock project where I wrote a program that would refit hershey font data to a series of vector points in an array that are fitted to a specified size/proportion of your choosing) and have lines go from the vector points to some randomly generated other formula (was really excited to go through the interesting polar graphs/formulas Golan previewed last class).

screen-shot-2016-09-30-at-10-38-15-am

screen-shot-2016-09-30-at-8-53-34-am

I argue that the lines, while they can do with some more consideration towards….designerly restraint, certainly do add a certain smoky ephemerality to the aesthetic that I think works well metaphorically with the question this type exploration brings up.

lumar_7

september-30-2016-at-1235am september-30-2016-at-1235am-1

I messed up slightly on the plotter; the first black pen on there was a little thicker than I’d like (0.2 micron) and the thinner copic multiliners I brought in didn’t run smoothly. (hence the blue – I was very much under the impression this was going to be my test run and I would come back to print my final design which would be different on nicer paper with nicer pens). The fluorescent pink was only meant for the heart shaped ? ‘p’ of “hope”.

What I had ended up using instead of hershey fonts (because the vectors for those aren’t evenly spread over the letter and the letter itself is a single stroke collection rather than a complete shape) was the library ‘Geomerative’ (thank you Golan for all the advice!!).

The first iteration self critique:

  • Needs some designerly restraint – the message is interesting (HO?E – spells out “hope” except with a “?” instead of a “P” but the execution is difficult to read)
  • Again – too much going on without a justification for it.

Second iteration (thursday night trying to figure out my own plotter at home):

  • planning:
  • september-30-2016-at-0321am
  • Really wanted to make a limited color palette type poster for World Vision or Compassion international (international programs that sponsor children – covers their education, clothing, shelter, food, etc)
  • The composition would be the word in diagonal with all the other squares within the grid as the letters becoming increasingly disintegrated/randomized

NOTE: the first iteration is what I’m turning in. (the second iteration is what I’m doing for fun – running a fundraiser for World Vision/Compassion international in November, so I wanted to get a head start on making a poster for it)

Process:

I first made iterating shapes in a grid:

lumar_1screen-shot-2016-09-30-at-4-10-15-pm

I’ll post the next step wherein the diagonal HOPE is the clearest and the rest of the letters slowly ‘disintegrate’ and become more randomized if I have more time just for fun!

Lumar-ResponseToClockFeedback

It was very exciting to have had the chance to be reviewed by top notch creators in the field! (Thank you for your time!!!)

I very much agree with a lot of the points they brought up! As a functional clock – my piece is somewhat difficult to immediately decipher time with. I think I had taken the assignment as an opportunity to just play with looping gradients that entwine and tangle with each other (hence the extra “unnecesary” mouse feature). Exercising designerly restraint will be something I work on in the future – as for the clock – I did have various color versions posted; I wonder what they thought of that?

(and perhaps start on the programming more immediately – a big restraint was simply getting the technical to work within my personal time limits. I had less time to really consider design; in hindsight, during my exploration/ideation process, I might have spent too long looking at a variety of ideas that I hadn’t narrowed it down to a single one to refine until time ran short)

Lumar-Reading03

Question 1A. Read the first 20 pages of “Generative Art Theory” by Philip Galanter (p.146-166). In your own words, and in just a few sentences, discuss an example of something you like which exhibits effective complexity. Where does your selection sit between total order (e.g. crystal lattice) and total randomness (e.g. gas molecules, white noise, static). Include an image which illustrates your selection.

EFFECTIVE COMPLEXITY for me, I think a great example is the gif assignment actually. It was part of my decision process for how I’d choose which idea for a gif to go with. With my intial idea of making a bird made of jelly that bobbled up and down with bezier curves and offset sin motion to control end points, the computer program would’ve been a heck of a lot of work for that specific desire when it could be more easily done (and better executed) in adobe aftereffects. Entire companies’ /softwares are built on making such transformations. In this, I wanted to choose a gif design that validated the use of a computer…..otherwise, it’s needlessly complex.

Question 1B. Quickly skim the remaining 10 pages of the article, in which Galanter outlines nine different problems with generative art (The Problem of Authorship; The Problem of Intent; The Problem of Uniqueness; The Problem of Authenticity; The Problem of Dynamics; The Problem of Postmodernity; The Problem of Locality, Code, and Malleability; The Problem of Creativity; The Problem of Meaning). Select one of these problems for which you yourself feel some sort of internal conflict or personal stake. Discuss your internal conflict. Which side of the argument do you come down on?

YES. VERY MUCH AGREE BODEN! Creativity is so frustrating! Historical creativity is so darn hard to achieve – and yes, I agree that psychological creativity is valid, but it really doesn’t translate as social creativity because it’s already been thought of – that is suuuuuch a struggle!!! Half the time, it’s the impediment to ‘why bother designing something along those lines’?  When I was choosing majors, I was thinking about in what area would I be good at vs what area is there that would be any different whether or not I decided on it. I had at one time, really really wanted to be an anesthesiologist, but while I was good at Bio, and Chemistry, and was confident in my work ethic to carry me through to be relatively ok, there would make no difference whether it was me as an anesthesiologist versus any other person who had a knack for numbers and sleepless nights. There was no extra drive or burning curiousity, no fuel for potential creativity outside simply the psychological. That’s not to say there will necesarily be any HC with my current major….but…..I’d like to think there’s a chance.

Lumar-AnimatedLoop

lumar-loop2

Process:

scan-4

I had initially really wanted to try and make a bird made of jelly  – I thought it would be really fun to mess around with the physics and bouncy bird head-drag- motion as well as the jellied/jittered (every decreasing amplitude/increasing frequency of a sin wave) contours of the animal to suggest a type of material composition. That being said, that was the ideal, but design is all about how to address a need within constraints in material, skill and time. Hence….I went with the top option that I knew for sure I could complete in time executed with enough sensitivity to be pleasant visually as opposed to my initial ideal. Somewhere below I will elaborate on this design in regards to effective complexity.

scan-11scan-9  scan-12

Some inspiration:

screen-shot-2016-09-21-at-1-19-47-am hard-to-analyze

Really hard to analyze how to do this twirling animation in flat shapes:

This is my attempt at figuring out rotation:

scan-10

ughanotherideagone

Sin motion! Offset sin motion great for chicken head drag – don’t get it? Check out the youtube video of chicken head drag:

chickenhead

With my intial idea of making a bird made of jelly that bobbled up and down with bezier curves and offset sin motion to control end points, the computer program would’ve been a heck of a lot of work for that specific desire when it could be more easily done (and better executed) in adobe aftereffects. Entire companies’ /softwares are built on making such transformations. In this, I wanted to choose a gif design that validated the use of a computer…..otherwise, it’s needlessly complex.

The sin squirming worm utilized a quick sin function to determine x position and was easier and more accurately done through a written program

ughanotherideagoneagain

 

lumar_loop

Lumar-LookingOutwards03

GO TO 2 min 15 secs into the video!

Ἁρμονία【巡音ルカ・初音ミク】[Processing Minim Video] from 4Y4 on Vimeo.

I love the delicate, incredibly sensitive motion of the little ‘line spider’ that reacts almost magnetically to the position of other lines – the process of drawing the lines becomes faster and faster the more lines there are already – the spider grows more ‘legs’ to make the connections – the seemingly erratic yet controlled movement is mesmerizing and the path left behind looks like delicately spun silk with a beautifully controlled yet free pattern. There is a cultivated randomness with beautiful visual rhythm that seems to reflect the music of the video.

The color’s are controlled by what areas the spider is magnetically drawn to. I love it. Code wise…..man – that’s tough. Perlin noise used to determine how far the moving spider point needs to be from another existing vertex to connect – if the vertex is close enough at a certain point in time according to a noise funciton – a line is made and the creation of that line contributes to the vector that determines the spider’s direction? It’s definitely more complicated. But it was hard to find more about this piece in a language I understand. (as in…..english)

That being said, here’s another piece that I absolutely loved by Chris Riebschlager – http://the816.com/

To play with his program in the browser:

http://fun.the816.com/neobrush/

 

neobrush-1

neobrush-0

One of my all time favorite artists ever is american impressionist John Singer Sargent. His effortlessly beautiful brush work is to DIIIIIIEEEE for. I love it – there’s a suggestion of movement and form that leaves the mind’s eye filling in the gaps as the eye is drawn across the piece endlessly. I feel some of that in Chris’s brush work above.

The rest of his aesthetic does tend toward computational generated textured brush like strokes/patterns and movement. Another of his projects was a program that took user inputted strokes and made them look like monet’s multicolored paint clumps. An instant ‘paint like monet’ moment.

How’d he do it? I’m guessing he ran an existing image through the program which picked up random select colors from where the brush is, and then with some measure of controlled randomness (gaussian?) created colors for the indibidual swirling lines that are bezier controlled by values based on the mouse direction/speed.

Lumar-Interruptions

PLEASE HAVE FUN CLICKING:

sketch

You’ll have to refresh to a new ‘movie’ to get new and different interruptions from the audience.

I had a lot of fun with this assignment! And…yes, it’s not exactly a recreation, but the code make the recreation would just be taking out the frameCount element in the perlin noise part of the draw function/just take a screen shot of the program when it first starts.

screen-shot-2016-09-22-at-8-31-50-pm screen-shot-2016-09-22-at-8-32-55-pm screen-shot-2016-09-22-at-8-33-04-pm screen-shot-2016-09-22-at-9-02-13-pm

Essentially, I am making an array that holds all the object lines of a row, and then putting that series of row arrays into my giant lines array, which is now arranged by lines[i][j] = a line in row i and column j. Easy! Kind of like a 2d array. Ish. The perlin noise function is used to determine whether a line should draw or not. Essentially by making the increment by which the x and y of the lines reaaaaally small to zoom into an area of the perlin wave – given that, the closer a line is to another, the closer the noise output value – since noise is only generated between 0 and 1, that given value can determine whether it is drawn or not depending on a specific ratio of how empty you want the canvas. (MUCH THANKS TO PERLIN! And Kaleb was kind enough to have explained the concept behind it as well!)

______________________________________________________________

From Monday:

screen-shot-2016-09-18-at-2-09-30-am

Simple for loop/grid structure generating lines with somewhat non-uniform random rotation. I’m going to continue playing with limits and Gaussian randomness. And then maybe throw in some Perlin noise to achieve the interruptions – or make it interactive; I’ve been itching to throw in some physics or something like pseudo particle trails that eat up the lines to achieve the random empty spaces.

If anyone else would like to look into this – here’s a link to a lecture on types of randomness!

October 14

 

Lumar-LookOutwards02

I really loved Stephanie Posevac (and the small startup interaction firm she works with in cali) when I was first introduced to this area of new media arts. I found data visualization incredibly exciting, both as a creative problem to work out how to best show complex data, but also to make the silly mundane things in life hold more meaning.

(short blurb on Stefanie – she’s a UK based designer who has made lots of  work with data projects that involve language, literature and science while illustrating for various books and exhibiting at the MoMa…like HOW COOL IS THAT?)

Eyeo2012 – Stefanie Posavec from Eyeo Festival // INSTINT on Vimeo.

But anywhooo – her work was the stepping stone that brought me interests further into data visualization. (Golan talked about her (or mentioned offhandedly?) during our first lecture as well) I really admired how beautiful her data aesthetic was – the aesthetic sells just as well as the functionality of the design.

Something along those lines – but not quite so aesthetic – also enables effortless data/information transmission;

An older project – but still one of my favorites- called NeuroViz is especially exciting because and it’s an incredibly simple tool for “visualizing the activation and inhibition of nodes within neural networks such that those within our brain.” Being able to communicate the complexity in a straightforward incredibly effortless way takes so much effort. I appreciate these more knowing the iterative process behind it.

Lumar-Clock

Note: for the version of code that was submitted before the due date (aka – the embed right below) was not tested for 10, 11, and 12 o clock times. (If I change the code structure significantly in my leisure time – like besides the superficial color values coded in –  I will post new versions in a separate post)

If you notice, the fattest circle drawer draws out the hour digit, the next biggest gives the number by ten minutes, and the thinnest automated one draws out the single minute digits. Move the mouse very slowly and have fun entwining the lines with eachother!

lumar-circlechangingoriginal

I feel like my first explorations into this effect were more successful.
lumar-circlechanging

screen-shot-2016-09-16-at-3-00-27-pm

(you can find more process on that in the other post I made early in the week)

The background() function seems to have changed some of its abilities from last year to this year’s current p5 version (Edit of previous statement, I ran the program with an older p5 version but it was exactly the same. I must have remembered things wrong….pity- I could have sworn it was different)

ex: A background of 3 opacity put in draw() only overlays over the previous frame’s shapes once (or only to a certain extent before it seems it no longer effects previously drawn afterimages) – it seems overlaying multiple layers of opacity 3 does not = overall opacity of 3 * number of layers.

iridescent

(above shows 3:46 pm – the colors reflect the kind of light and shadow expected at that time. The direction of the light also reflects the position of the sun if east was right and west was to the left. It’s how I know it’s pm as opposed to 3:46 am in the night)

this is the code that I used to convert hershey font data to vectors stored in arrays:

lumar_converthershey

(edit of converthersshey link above – I don’t recall what version I posted for that. I’m pretty sure the final version that I used to generate the info used in the final clock that I posted was made after I started this post…….well, anyway, if anyone tries to run that program and it doesn’t work – here’s the up to date version:https://github.com/MohahaMarisa/Interactivity-computation/blob/master/Lumar_ConvertHershey/Lumar_ConvertHershey.js)

scan-5

Concept mental map of all possible ideas for the clock: I wanted to establish a breadth of ideas before going in depth anywhere. I was too excited for the project just to explore only one area – which I’ll admit may or may not have been a bad thing given we have deadlines to meet. From the concept map, I really wanted to explore telling time through location and utilizing weather API’s to visualize realtime, location specific data. That combined with an interest in dendritic growth which later evolved into an exploration of recursive fractal trees (thank you Dan Shiffman!) ended up being a fairly…heavy program to figure out. The idea I actually settled on was actually just a tangent off a visual effect I coded up for fun.

scan-6

The left page was a further exploration of possibilities for the location clock (tell time through the scene – ex: clock shows sunrise in China tells you it’s say…6 pm in Pittsburgh). The fractal/recursive trees would be generated according to certain presets that would allow it to grow within patterns specific to the region (ie – wider angles of branching to achieve the twisted/squat bonsai look as opposed to branches all reach fairly consistently up for tropical trees, etc). If I can finish debugging the start of that code – I will upload.

These were some inspiration pics:

screen-shot-2016-09-14-at-6-11-16-pm screen-shot-2016-09-14-at-6-11-29-pm screen-shot-2016-09-14-at-6-12-02-pm screen-shot-2016-09-14-at-6-12-16-pm screen-shot-2016-09-14-at-6-12-55-pm

The page to the right is for the idea I actually ended up doing – I had spent too much time experimenting and not narrowing down and focussing in one direction that I feared I wouldn’t have time to finish. Since I had the bulk of the visuals for this soft gradient circle clock, I had thought I would be able to finish it in a timely manner and debugging without losing sleep….so I switched over.

 

victoryReflection: I predicted very very wrong. This soft gradient clock was definitely not quick. Linearly interpolating presented very curious challenges because it was a series of vector points that I generated out of Hershey font data online. I thought some sort of vector path addition would work – but if it does, the solution evaded me. Paul Bourke ad more complex interpolation that I want to explore over the weekend so I can tweak this clock to look be smoother with it’s motion.

The colors of the clock writing spheres reflect the kind of light and shadow that are outside. (see process book for details) In retrospect, it would’ve been much much smarter to fill my color array with the HSB color mode in a for loop than to personally hand pick my colors. Other than that the direction of the light reflects where the sun is in the ‘sky’.

Ex: 6 o clock means the light part of the gradient is on the right (EAST) side of the circle as if a sun was rising and casting light on that side.

Things to improve on:

1.nonlinear interpolation

2. the concept of the piece (conceptually….not that insightful on anything)

3. Visually appealing and fun to interact wit but I should probably throw in some slight noise into the colors for minutes and hours to differentiate it with more than just size.

4. Time management/a more efficient ideating process

5. The code is inefficient in some places – but I couldn’t figure out how to make it cleaner without doing some major overhaul – will definitely see what I can do about it next time.

I’ll probably add things on just for fun over the weekend – feel free to check out this link for anything new:

https://rawgit.com/MohahaMarisa/Interactivity-computation/master/Lumar_CircleGradient/index.html

 

RESOURCES:

Cambu and Krawleb for inspiration and reference help! Thank youuuu! (they are awesome ppl to talk to for idea bouncing or a fresh perspective!)

Golan Levin the awesome

Hershey Text:

https://github.com/techninja/hersheytextjs/blob/master/lib/hersheytext.js

https://forum.processing.org/two/discussion/9520/hershey-line-font-library

and who else? Yup. Paul Bourke!

http://paulbourke.net/dataformats/hershey/

Lumar-GradiantCircleForFun

This was a slight tangent from our actual assignment – just a special effect; it’s a color gradient in various shapes (the example here is a circle).

Cambu had pinned a really cool visual on pinterest and I had thought it was an incredibly beautiful yet refreshingly simple aesthetic that would be fairly short and quick to code up…..so I couldn’t resist. (Credit and thanks to cambu for bringing up the concept!!!! Probably wouldn’t have ever crossed my mind to try it otherwise. IT’S SO FUN TO PLAAAAY WITH)
(Much love for Krawleb for introducing, explaining and teaching how the noise function works! I really appreciate the time you take to help others!!!!)

I might add more features after this post – to see the latest verison:

(P.S. the circle rotates in the most up to date version!)

https://rawgit.com/MohahaMarisa/Interactivity-computation/master/Lumar_CircleGradient/index.html
lumar-circlechanging

lumar-circles

Lumar-LookingOutwards01

Eyeo 2016 – Anouk Wipprecht from Eyeo Festival // INSTINT on Vimeo.

  • Briefly summarize the person’s bio, perhaps with a bit of supplemental Googling. Who are they? where are they based? What did they study? How do they describe themselves and what they do?

Anouk is a Dutch designer who travels a lot, so I would only tentatively call her ‘based’ in Amsterdam, LA, and SF. Her personal website boldly declares “What does fashion lack?” and answers it with “Microcontrollers.” In her lecture she calls herself an interaction designer (interesting, interaction designer first or a fashion designer? She doesn’t elaborate). On her website she is a designer, engineer, curator and lecturer – in that order.

One of her biggest commercial projects was an audi Dress collection that utilized new Audi car tech.

Her Audi dress collection doesn’t seem to offer anything entirely insightful or new in intelligent environment and wearable interaction design. I kept waiting for the other shoe to drop…but while I really loved the abstract concepts she was talking about, I feel the transition from that to the concrete products lost a lot of the insight in translation. In the audi project  on a different article she had mentioned that she believed ‘the notion of virtual reality is to limited to screens” and not enough with everyday objects and the environment…..that’s great! I love the idea she’s getting at – but her audi dress had no virtual reality component! The car did! So if that’s what she was trying to achieve….I’m afraid her dresses are just really futuristic in medium – not interaction.

When she said ‘biomimicry’ I was really hyped up – I wanted to see how she’d use biotech to make intelligent ‘dresses’ or as she considers it, the “environment”. Maybe even a bio-machine-learning-augmented-generative-adaptable dresses.  The summary said “Her designs move, breath, and react to the world around them. She is interested in new ways we can interface — and builds micro-controlled garments to provoke her generation,” but I found that claim to be only superficially true on a lot of her bigger sponsored projects (especially the advertsing car show dress line for audi)

She cuts all the designs close to the body because it shouldn’t be the machine in control, or the person, but rather a symbiosis. She does so through “wireless biosignals” that will allow the dress to react to changes and environments.

2 years ago, she worked with Intel and medical ED with a camera and phone to record what the user was paying attention to. The dress became a ‘research entity’.

 

Some of the soundbytes/phrases and concepts she brought up that caught my attention:

She wants to help the process of “Gamifying fashion” to make wearables fun and accessible. I think she definitely achieved it in one particular project wherein she makes a ‘Unicorn horn’ fashion accessory for ADHD studies – allows the child to be a child not a subject to be studied. The fashion medical wearable with a camera allows for discrete monitoring whenever brain activities spike for when children’s attentions get caught. The video records get sent to the lab for later review.

 

screen-shot-2016-09-08-at-11-46-35-pm

Unicorn Wearable Uses Neuroscience to Help Kids

I think she really sells her work well as “symbiosis of tech, fashion and the environment”

Also well noted, she says “fashion does not equal ‘clothing’… but fashion is too analog”  she wants it digital and “to play a part in the social, public, and personal space.”

But my favorite was one saying “I keep everything open source…keeping it private – bullshit!” YEEES – share the knowledge.

What strategies do they use to present their work effectively? What can you learn about how to present your own work?

Good questions. I’m afraid I couldn’t see much of a structure to her presentation. Case in point – a well structured presentation would have informed listeners about what they’re going to hear and why. In this instance, I had no idea where she would go after one project after the other. There was less to teach so much as just her talk about her work in more depth and some of her philosophy that informed decisions.

anoukwipprecht.nl

labs.codame.com

  • Embed their lecture video. If possible, additionally embed a video of one of their projects that you admire.
  • Label your blog post with the Category, LookingOutwards-01.
  • Title your blog post with the title: nickname-LookingOutwards01, where “nickname” is your login identity on this WordPress website.

Lumar-Intersections

lumar_intersections

For some reason, my embedding is having issues. So this link will run my p5js immediately in the browser…only catch, it was a free service to generate the url to run github index files, so…..no uptime or support guarantees from whatever server it’s being mysteriously run on…..

(first link is the most up to date in case I push any aesthetic changes in the night or if I have time to make all the lines the same length)

https://rawgit.com/MohahaMarisa/Interactivity-computation/master/Lumar_lineintersection/index.html

https://cdn.rawgit.com/MohahaMarisa/Interactivity-computation/master/Lumar_lineintersection/index.html

 

This second link below is my processing code:

https://github.com/MohahaMarisa/Interactivity-computation/blob/master/Processing/lumar_intersectionProcessing/lumar_intersection.pde

screen-shot-2016-09-08-at-9-43-15-pm

 

lumar_intersections

 

Lumar-FirstWordLastWord

I found the “First word Art / Last word Art” incredibly insightful, even after, or perhaps especially because I read it last year as a freshman. Reading it again has brought greater reflection over what I have learned in the past year and personal changes in mindset and experience.

If I were asked last year, “where do you locate your interests along this spectrum [of art as something entirely novel or art as refining whats existing]?” I most definitely would have answered “last word” art. The underlying reasons would be somewhat conflicted but would mostly have stemmed from having a very traditional fine arts background. Having honed technical skills in traditional media and aesthetics for over a decade, I took no small amount of pride in the hard earned technical skill behind my art pieces. The sort of “first word art” pieces (like Dadaism or most especially John Cage’s performance pieces) definitely grated on me. Whether it was simply jealousy or an actual ideological offense I cannot say – only that it felt that “first word art” flippantly disregarded or perhaps in some cases negated the hard earned technical skill I had spent so long striving for in an effort to achieve “last word” art.

But I’ve come to think that valuing technical skill so highly in art brings about a curious dilemma. Where is the line between artist and artisan? For the artisan, technical excellence and refinement of an established product (with a unique personal touches that still lie within the box) is what makes what they do valuable. But how much distance does that establish between them and a very complex…machine? Now with technology able to make unique one of a kind products with mass produced efficiency….where does the artisan stand?

Within that context, the performance art of John Cage could be arguably valued more highly as art than an artisan piece because, ironically, however fleeting his pieces are, the impact they have has so much more longevity. And this brings me to the crux of my rambling – I think my interests are in how much ‘art’ might effectively engage people emotionally, intellectually and aesthetically through the ages. In this sense, I have yet to to determine where exactly on that spectrum my particular interest would be.

We might aspire to make stuff of lasting importance, but when our work is technologically novel, it doesn’t always age well. Discuss

The article certainly casts an interesting light on new media arts that use novel technology as their medium. I think the differentiation between first word art and something that simply shows off new technology for technologies sake, is that the piece important is using technology as a medium – wherein the novelty of the tech is not the main focus of the piece but rather something that augments the aesthetic and poetic expression and intent behind it – doing so lends some longevity to technologically novel pieces….though it is more difficult to say when the selling point of a piece is what sort of experience it invokes within the viewer.

What are some ways in which new technologies shape culture?

Technological advances are the underlying reason to nearly every cultural difference between generation Z and generation X. Take for example something simple like emails. From a generation of paper post, emails have a structure and a formality to them. There is a brief introduction/some small talk to transition into the meat of the message whereas generation Z communicates in brief staccatos. The overworking and abuse of workers prevalent through out the gilded age was largely enabled by light bulbs – workers could now work past sundown.

An example for culture changing technology has plenty of historical precedents. Nomadic viking culture lead to greater ship craft; agricultural Rome allowed for greater architectural achievements; sedentary civilizations developed longer lasting physical record taking methods (chinese and paper), etc.