A Journey, London, is a box that opens up to reveal a paper version of the London, and then lights up the map in different ways in an effort to evoke memories in the viewer. I thought this was interesting because there are not specific memories that are being targeted, but the artwork just addresses the fact that the viewer is bound to have memories associated with different locations in London because they either live there, or they are visiting.
So I personally don’t have a very broad or thorough concept of what physical computing entails, so I decided to look at three projects that are very different but relate to different sides of physical computing.
So the first piece I really liked was similar to Design IO’s Connected Worlds piece. Curious Displays by Julia Tsao simulates what may eventually become a real physical project through a connected display on two screens in a living room setting and some sort of sensor which detects the placement of objects around the room.
For my final Looking Outwards I decided to look at Angélica Dass; although she is not a tech artist she inspired much of my work for my game and my last project for this class.
Angélica Dass is a Brazilian photographer based in Madrid, Spain. She is most known for her exhibit Humanae which aims to explore the true variation between skin tones and challenges just what exactly makes us the classified race that we are– as she stated in her TEDTalk, “does it have to do with our origin, nationality or bank account?” She speaks on growing up in Brazil, which, like many Latin American countries and countries in general, culturally contains many implicit and explicit biases against people of darker complexions. Dass recalls being treated like a nanny or a prostitute many times because of her complexion, a story eerily similar to one I heard while interviewing a few Brazilian women for my project. This issue has improved tenfold since the times they are speaking of, however it has not been quite eradicated anywhere in the world.
Dass’ other pieces include Vecinas, a collaboration with the Mallan Council of Spain which aimed to reshape the perception of migrants and refugees of Mall through archived pictures and Dass’ photography, and De Pies A Cabeza, a series of photographs of people’s faces and their shoes. Her work challenges existing notions in a subtle and objective but very powerful way. Conceptually she is “goals” so to say; in my game and in a lot of my work I aim to achieve the same sense of subtlety she does with same amount of intellectual impact.
My last project for this class shifted many times as I realized the limits of my capabilities and, quite honestly, left me with a trail of newly minted skills instead of a clearly defined project. This blog post is the tale of that trail of wandering…
I started off with the intention of continuing my explorations in tangible computing with Guodu, but we eventually scrapped this plan. Instead, I decided I would try to learn the skills necessary to add ‘location awareness’ to a project I’d worked on in a another class. To do this, I would need to learn the below at a bare minimum:
RFID Tag hardware and software [learning resource] incld. reading and writing to and from RFID Tags
wireless communication between computers and Arduino
How to control physical devices (fans, lights, etc.) with an Arduino [learning resource]
Before I had the Adafruit RFID Shield, I decided to explore another RFID reader. The Phidget 1023 RFID tag reader (borrowed from IDeaTe), but after extensive work found I could only control it via a USB Host device. I spent a night exploring a Raspberry Pi approach wherein I would be able to script control of the Phidget reader via processing on the Pi. I learned how to flash a Pi with a Processing image but driver issues with the Phidget ultimately doomed this approach.
I then moved back to an Arduino approach which required learning Physical Computing basics, including how to Solder, communicate with the Arduino board via serial in the terminal (‘screen tty’), understand baud rates, pwm, digital vs. analogue in/out and more. The true highlight of my Arduino adventure was triggering a physical lamp via a digital RFID trigger:
All that said, at one point, I realized the original goal of extending my previous project the way I intended was impossible with the time given. At that point, I completely shifted gears… This new direction was based on a few inspirations:
My next goal was to control physical hardware through some type of digital control. To achieve this, I used BlinkiTape’s Processing library to render MQTT messages sent through Shftr.io from Noodl’s slider modules. See the video below:
Conclusion
In the end, despite not pulling together a singular cohesive project, I learned a great deal about Arduino, hardware programming, soldering, and other tools for communication between hardware and software systems.
For my last project, I took the opportunity to learn Unity through prototyping a simple 3d local-multiplayer game.
In the game, each player controls a ‘Shepherd’. The objective of the game is to eliminate all of the enemies ‘vassals’ which are a herd of small soldiers. The only control the shepherd has over the vassals is to toggle between having them follow their shepherd, or seek out and attack the nearest enemy vassal.
This makes the gameplay tactics about positioning, choosing the right time to attack, and using the environment to their advantage. If your units attack as a group, or at a choke point, they will eliminate the enemy with ease.
Because I had never worked with unity before, the vast majority of this 2 week project was spent familiarizing myself with unity, C#, and how to use many of the built-in functionality that unity provides. This included:
• Nav Meshes & Nav Mesh Agents to control the flocking/pathfinding behavior of the AI vassals.
• Delegates, Events, and Event Subscription to allow GameObjects to relay their position / health / etc. to other GameObjects
• Instantiation, Parent/Child relationships, and how to safely destroy GameObjects to allow for modular setup/reset of the level
• Camera Viewports and how to setup splitscreen for multiplayer
• Layers, Tagging, and physics interactions / collisions
The scripts I wrote for unit control, health, combat interactions, among other things are on github here
As I began wrapping up the programming for the basic gameplay interactions (about 1 night before the due date), I decided to quickly create some low-fidelity 3D assets to create more interesting environments to battle in.
A bridge to connect islands and act as a choke point
Some islands, to create a more divided playspace that forced players to choose when to cross between them.
Some palm trees, to add to the atmosphere and provide an additional small obstacle.
Here’s an earlier iteration of the map, with a previous bridge design that was replaced because it’s geometry interacted problematically with the vassals.
Additionally, I originally tried to work with a top-down camera, but felt that I couldn’t find a balance of showing the entire map while giving enough attention to the seeking behavior of the vassals.
I ran into several roadblocks along the way, but learned even more than I imagined I would in the given time. Unfortunately, much to my dismay as someone from a primarily visual background, I was left with very little time to focus on learning lighting, materials, and camera effects. The result was a very awkwardly-colored poorly lit prototype.
However, I loved working with unity. The separation of functionality into separate scripts and objects that allowed me to compartmentalize code was refreshing. Additionally, working with prefabs that allowed me to build up components of my program as an object felt intuitive. I will certainly work with unity again and mastering lighting and materials will be my next goal.
I took a look at Anna Powell-Smith’s “Fix My Street” app, which sends data to your local council, prompting them to fix something in your area, like the pothole mentioned in this video. I see this as an interesting way to collect data and then actually project it towards a central power that has the ability to create the change that is necessary to make your neighborhood a better place. I don’t think many people know about the app (I know I didn’t) but I wonder how significantly neighborhoods would be changed if it was well advertised. It would be interesting to see what other data sets can be collected and how we can provide this data to a power that has the ability to create change that might be out of our scope of ability.
This project is a “visualization” of items which have been transferred to police departments around America from the Pentagon. The project plays off of 1033 Program — an initiative to transfer excess military equipment from federal agencies to civilian law enforcement agencies. At the time of the project about 200,000 objects had been transferred. In an attempt to convey the quantity of objects and ambiguity of the program, the website displays 1033 random objects. The viewer gets a good sense of the sort of items transferred and while it would take an inordinate amount of time to read the information, the items are arranged in a grid so the scrolling motion down the page drives home the notion that there are VERY VERY many of them.
See my context reflection here. It’ll give some background information on why I chose to explore this area.
I messed up and used popStyle instead of popMatrix when translating the ellipses on the z axis.
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.
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”
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);
}
}
A machine that judges how sick your ollies are. This is actually a really simple piece. The artist used a gyroscope as well as an accelerator to judge the angle and displacement of a skateboard in the x, y, and z directions. This work was so compelling to me because it was simple and snarky. Although there are definitely things I would change about it (instead of making a carnival game of it, I would have installed it in a skate park where people could use the board. the skaters would then be judged loudly and harshly by the machine in the presence of their peers), ultimately I find the idea of machine judgement of subjective things really fascinating. At some point, technically speaking a machine is better equipped than any fallible human to judge certain things… but is this always true? What qualifies as an ollie? As a “good” ollie? Is it some quantifiable motion or is it pizazz and attitude? Can machines judge your “cool factor,” can it make you self conscious?
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.
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.
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:
1) Artwork is square
2) Artwork has a light grey background
3) Artwork has a uniform margin
4) Lines are black
5) There are about 50×50 lines
6) Lines have the same length and stroke
7) Lines are all rotated at different angles
8) Lines slightly overlap
9) There are “interruptions” where a cluster of lines are not drawn
10) There seems to be a general direction, either horizontal or vertical, that the lines are facing despite each line’s rotation
Final Project Proposal
Exploring the Limitations and Affordances of Digital and Physical Environments
The book project was, with out a doubt, my favourite project of the semester, and the animation project, is the one one that I would most like to revisit. I think this final project would be an excellent opportunity to create a generative book that has a digital, animation twin. I have a great appreciation for environments design, even though I have chosen the communication design path. I believe I have an opportunity here to study the affordances and limitations of the physical and digital interpretations of a single design.
In my animation, I used a sine wave for the motion of my letters. The motion was really pleasing, and gave character to the type. In my book, I used basil.js to change the offset and type size of repetitive text, some of them sinusoidally, and some of them linearly. The book had the affordance of hidden images due to the physical french folds. I would like to do some more explorations on the translations of motion and typography.
A compilation of some of our experimenting throughout the week. This includes playing with the sequencer, place two oscillators one after another, and also our generative melodies.
This is the view from Audition, from when we were mixing our soundcloud track together.
This is the visualizer that we used to help our debugging process. The top bar being the melody, and the bottom being the base line.
Here are some of the little bit arrangements we used.
This is our computer which is connected to the mp3 piece. The music is then manipulated through a filter and a delay, then played out the speaker which is connect to a splitter. One branch of the splitter goes to the headphones, and the other to the microphone, which is also attached to the computer. The tracks were first recorded with Audacity, then mixed with Audition.
Little Bits pieces
power
oscillator
mp3 out
midi in/out
synth speaker
filter
delay
envelope
keyboard
pulse
noise
sequencer
Initial Concept
We both immediately got excited over the Korg synth Little Bits pieces, and knew that we wanted to see how far we could push the affordances of the hardware. At the beginning we thought of only creating music collaboratively, one on the keyboard piece, and one manipulating the sound through playing with cutoffs, feedback loops, and attacks/delays. Our first instinct was to work with Makey Makey to use IFTTT. The general idea was to have a jamsesh and when we fell into a rhythm that we liked, we would hit the Makey Makey to begin recording, then hit it again to stop recording and to upload the track to Soundcloud. However, after some investigation, we realized the limitations of IFTTT and that we would rather spend time trying to learn new ways to create music, rather than to dwell over uploading issues.
2nd Iteration
Deciding to focus on the music, we discovered the mp3 Little Bits piece. This piece allowed create music through p5js, which we could then modify and manipulate the way we had been for the music generated with the Little Bits pieces. Our concept was that we could have a stream of melodies being generated through our program, and we could have a collaborative jamsesh between the coded music, and our own improvisations on the little bits pieces. After some brainstorming, we came up with an idea to translate strings, possibly scraped from places like Twitter or NYTimes, into melodies, but in a very meta way. The program would translate any letter from A-G into their corresponding note, if the character was not one of those letters, it would simply hold the previous note, or rest. If given a string such as “a ce melody“, our program would translate it into AAAACEEEEEEDD. This required us to also to lean about the p5 sound library, and also create our own scale using an array of midi numbers.
We wanted our music to have some depth so we figured we could also generate a baseline. If we were using the content of the article or the tweet as the melody, then the username or author’s name could be used for the baseline. This was when we had the pleasure of learning about Euclidean rhythms (Godfried Toussaint). Given two numbers, the algorithm can create a beat made by evenly distributing the smaller number into the larger number. Some of these patterns can be found in traditional music, such as E(3,8). “In Cuba it goes by the name of the tresillo and in the USA is often called the Habanera rhythm” [Toussaint]. We would then use the mp3 Little Bit to bring in the melody, and use the midi Little Bit for the baseline, which would enable us to manipulate the two pieces differently.
Unfortunately, because the melody was following patterns within the string, it wasn’t really following any rhythmic time at all. This made it difficult to align it to any baseline. Though we thoroughly enjoyed coding and learning about euclidean rhythms, we ended up not using this algorithm.
3rd Iteration Once we had finalized our melody code, we began to set up all of our pieces. We connected Krawleb’s computer with an aux cord to the mp3 little bits piece, to play our coded melodies into the little bit. We then attached a filter and a delay to the mp3 and connect them to the speaker. We used a splitter connected to the speaker, with one branch connected to a microphone that recorded into Antar’s computer, and the other branch connected to headphones. We were really excited to start manipulating the melodies and adding in our own improvised music, but we quickly discovered the limitations of the Little Bits. Unfortunately, the audio would have these sharp clips, that sounded like the speaker was blowing out. At first we thought one of the bits was broken, but after testing each piece individually, we realized that it was not a single piece that was causing this, but rather the quantity. When we added a 10th piece to our path, no matter which piece it was, we would have this error. Unfortunately to be able to do any sort of collaboration with our generative melody, we would need to have at least 10 pieces connected. We decided to then simply record our manipulated melody, then, separately, record us creating our own music.
Through the project we felt some other limitations of the Little Bits, such as overheating, weak power, sound compression, and a fatality (a delay blew out). We spent a ton of time making really interesting music, but failed to record most of it. In retrospect, we should have began recording earlier, and much more frequently, so as to have a larger library to mix with. We should have also incorporated a simple networked component.
For this Looking Outwards assignment, I chose to focus on the bioLogic project from the MIT Tangible Media Group. Hiroshi Ishii discussed it in his lecture, but I didn’t understand it the first time around, and I wanted to research it because I am very interested in the idea of biological entities that play an active role in art, and especially in new media, which is often regarded as an art form that is often associated with tech more than anything else.
Essentially, bioLogic was an investigation into programming “living organisms and invent responsive and transformable interfaces of the future.” The group focused on the Bacillus subtilis natto, which expands and contracts in response to atmospheric moisture. The group utilized this property of the bacteria to make several products including little synthetic flowers, but most notably, a garment that ventilates based on the sweat coming off of the body.
Their process documentation is very helpful in understanding how their project actually works:
Finally, their project webpage contains a couple of interviews — one with a representative of New Balance, who talks about the importance of bioLogic to the atheltic industry, highlighting the success of the team in making an interesting and useful product.
Originally I was collaborating with Keali, but as we worked on separate parts of out projects, our paths diverged. I started off by messing around with the three-dimensional representation of motion capture. I started by using PeasyCam to make the camera view changeable by use of the mouse. Then I experimented with what it would look like to show all the frames of the motion capture by not only drawing the current frame- this was inspired by Etienne-Jules Marey. The result of this was interesting at first, but it became incomprehensible overtime because everything ended up the same color.
Then I decided to cycle the color of the motion capture through all the different shades of gray, and to add opacity. Then I recorded a motion capture (thanks Kander) of someone moving very slowly so that the motion could be better shown as the lines would be closer together. The video and gif are on a smaller screen resolution, but my screenshots below are done on a 3840 x 2160 pixel screen. I also made it so that you can reset the program by pressing ‘x’ – this will redraw the background to whatever the current line color is
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”
“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)
The (En)tangled Word Bank is a collaborative project between Stefanie Posavec and Greg Mclnerny that visualized the insertions and deletions of text through the six editions of The Origins of Species by Charles Darwin. Each diagram represents an edition of the series, and is modelled on the ‘literary organism’ structure used for On the Road by Jack Kerouac. The visualization essentially represents the meat of the text, where chapters are divided into subchapters (as per Darwin’s original text), and these subchapters are divided further into paragraph ‘leaves’; the small, wedge-shaped leaflets represent sentences, where they are colored according to whether that sentence survives to the next edition (blue), or deleted beforehand and not be within the next edition (orange). Some of the executions of the diagrams were published as large banners, where each depicted a specimen plate per edition, mimicking a botanical illustrative design. Each plate shows the original diagram, first and last chapter excerpts from the original diagram, and four extrapolations of the diagram detailing the chapters, subchapters, paragraphs, and sentences in each edition.
This design initially appealed to me from a visual perspective–I hadn’t quite evaluated or digested the data that was being represented yet, and did not really decide whether or not the design template was practical or appropriate for the data subject. I felt it was visually strong–well-executed and very organized without being overwhelming. Upon reading the intent and description, I feel what is the most successful and amusing aspect is that the tree structure is used to represent The Origin of Species of all possible texts: there is the implementation of nature in both subject and interface, especially reminiscent of taxonomy structures in biological sciences. In this way I feel like the overall design is strong in combining aesthetic appeal with its slick branches and leaves, and relevance to the subject being presented. I also like the layout of the printed banners in organizing multiple circles focusing on different depths of information.
This week’s looking outwards, I’ve chosen to write about Stefanie Prosavec, someone whom I’d heard of before, but really changed the way I thought about visualization and introduced me to code.
I first stumbled across her work about two years ago, and was immediately drawn in by the intricacy and artistry of her visualizations, that treated the product as a piece that was meant to be equally beautiful as it was informative. Specifically, her projects: writing without words, which looked at quantifying and visualizing text in a way I’d never seen before.
The visualizations she created were not so much exact and measured as they were textural and interpretive, providing comparisons that could be felt between texts, which created a sort of visual persona for different pieces of literature, and even recognizable visual styles for different authors.
Ironically, her work was created ‘by hand’ in illustrator rather than being coded, and after seeing how powerful this form of visualization could be, it only underscored the importance of programming as a design tool for exploring and communicating information.
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.”
the billion dollar startup club is an interactive, immediately dramatic visualization of the biggest (monetarily) baddest startups around.
Number of Rents and Returns during Weekdays and Weekends
Interesting observations:
There are two peaks (8 am and 5 pm) during week days, probably people going to work and going back from work.
Bikes are used more to go home than to go to work.
People wake up late during weekends.
Nobody try to rent bikes when its 3-4 am. There are only returns.
Top Ten Most Ridden Bikes
The most popular bike of the quarter is Bike #70145, which has been ridden for almost 300 hours! The least popular bike is Bike #70008, which has been ridden only for about 10 minutes during the quarter.
Rents and Returns at Stations
Interesting observations:
There’s more traffic near city center.
People tend to rent their bikes at small stations and return them at larger ones.
I really enjoyed making this assignment. There seemed to be so much interesting information that I can extract from the data, and I kept thinking of possible visualizations I can do.
d3 felt strange at first, but soon I got used to it and started to admire its beauty. However for some of the features (for example one bar on top of another in the first chart) I couldn’t figure out how to make them using the idiomatic d3 way, so I used some hackish processing-like method to achieve them.
/* HIDDEN INITIALIZATION BLOCK */
// Select the DOM element
var parent = d3.select("#visualization");
// Set up the margins
var bbox = parent.node().getBoundingClientRect();
var margin = {top: 50, right: 50, bottom: 50, left: 50};
var width = +bbox.width - margin.left - margin.right;
var height = +bbox.height - margin.top - margin.bottom;
// Define svg as a group within the base SVG.
var svg = parent.select("svg").append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* END HIDDEN INITIALIZATION BLOCK */
var data1 = []
var data2 = []
for (var i = 0; i < 49; i++){
data1.push(0)
data2.push(0)
}
var datat = []
var mapdata = null;
var stations = null;
var rentals = null;
function isweekday(t){
var dt = t.split(" ")[0].split("/")
var date = new Date(dt[2],dt[0]-1,dt[1])
var fmt = d3.timeFormat("%a")
return ["Mon","Tue","Wed","Thur","Fri"].indexOf(fmt(date)) != -1
}
d3.json('http://d3.workergnome.com/examples/basic_map/data.geojson', function(loaded_data1) {
d3.csv('db/HealthyRideStations2016.csv', function(loaded_data2) {
d3.csv('db/HealthyRideRentals2016Q3.csv', function(loaded_data3) {
mapdata = loaded_data1;
stations = loaded_data2;
rentals = loaded_data3;
var s1 = 1
var s2 = 1
for (var i = 0; i < rentals.length; i++){
var shr = +rentals[i]["Starttime"].split(" ")[1].split(":")[0]
var ehr = +rentals[i]["Stoptime"].split(" ")[1].split(":")[0]
if (isweekday(rentals[i]["Starttime"])){
data1[shr]+=1
data2[ehr]+=1
//s1++
}else{
data1[shr+25]+=1
data2[ehr+25]+=1
//s2++
}
}
console.log([s1,s2])
for (var i = 0; i < 24; i++){
datat.push((data1[i]+data2[i])/s1)
}
for (var i = 24; i < data1.length; i++){
datat.push((data1[i]+data2[i])/s2)
}
var x = d3.scaleLinear().domain([0, d3.max(datat)]).range([0, height]);
var x2 = d3.scaleLinear().domain([0, d3.max(datat)]).range([height, 0]);
var d1s = []
var d2s = []
for (var i = 0; i < 24; i++){
d1s.push(x(data1[i]/s1));
d2s.push(x(data2[i]/s1));
}
for (var i = 24; i < data1.length; i++){
d1s.push(x(data1[i]/s2));
d2s.push(x(data2[i]/s2));
}
// define the bar width
var barWidth = width/data1.length;
// set up the x scale
var col1 = d3.rgb(190,195,195)
var col2 = d3.rgb(200,190,190)
var col3 = d3.rgb(170,175,175)
var col4 = d3.rgb(180,170,170)
console.log(data1)
console.log(data2)
// Create each bar, select the enter selection, and append a svg group.
svg.append("g")
.attr("transform", "translate(-4,-2)")
.call(d3.axisLeft(x2).ticks(10))
.attr("font-family", "sans-serif")
.attr("font-size", 8)
.attr("opacity",.3)
svg.selectAll("rect.i")
.data(d1s).enter()
.append("rect")
.attr("class", "i")
.attr("x",function(d,i){return i*barWidth})
.attr("y",function(d,i){return height-d-d2s[i]})
.attr("width",barWidth*0.9)
.attr("height",function(d){return d})
.attr("fill", function(d,i){if (i < 25){return col1}else{return col2}})
svg.selectAll("rect.ii")
.data(d2s).enter()
.append("rect")
.attr("class", "ii")
.attr("x",function(d,i){return i*barWidth})
.attr("y",function(d,i){return height-d-1})
.attr("width",barWidth*0.9)
.attr("height",function(d){return d})
.attr("fill", function(d,i){if (i < 25){return col3}else{return col4}})
var ts = 8
svg.selectAll("text.i")
.data(d2s).enter()
.append("text")
.attr("class", "i")
.attr("x",function(d,i){return (i+0.45)*barWidth-ts/2})
.attr("y",function(d,i){return height+8})
.attr("fill", function(d,i){if (i < 25){return d3.rgb(170,175,175)}else{return d3.rgb(180,170,170)}})
.attr("font-family", "sans-serif")
.attr("font-size", ts)
.text(function(d,i){if ((i%25)%2 == 1 && (i%25) != 24){return i%25}else{return ""}})
var ww = ["Weekdays","Weekends"]
svg.selectAll("text.ii")
.data(ww).enter()
.append("text")
.attr("class", "ii")
.attr("x",function(d,i){return (i*barWidth*25+10)})
.attr("y",function(d,i){return 10})
.attr("fill", function(d,i){if (i < 1){return d3.rgb(170,175,175)}else{return d3.rgb(180,170,170)}})
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.text(function(d,i){return d})
//drawing the legend
var t1 = svg.append("text").attr("x", barWidth*data1.length+8).attr("y", height+8)
.attr("font-family", "sans-serif").attr("fill","silver").attr("font-size", 8).text("O'Clock");
var bx = svg.append("rect").attr("x", width-20).attr("y", 50)
.attr("width", 50).attr("height",50).attr("fill","none").attr("stroke","Gainsboro")
var l1 = svg.append("rect").attr("x", width-15).attr("y", 60).attr("width", 10).attr("height",10).attr("fill",col1)
var l2 = svg.append("rect").attr("x", width-15).attr("y", 80).attr("width", 10).attr("height",10).attr("fill",col3)
var lt1 = svg.append("text").attr("x", width-2).attr("y", 67)
.attr("font-family", "sans-serif").attr("fill","silver").attr("font-size", 7).text("Rents");
var lt2 = svg.append("text").attr("x", width-2).attr("y", 87)
.attr("font-family", "sans-serif").attr("fill","silver").attr("font-size", 7).text("Returns");
});
});
});
I chose to write about the bot “Movie Script Caps” by Thrice Dotted. This is a bot that tweets portions of movie scripts that are in all caps.
To me, this bot is more interesting than it is funny. I have researched proper screenplay formatting rules and conventions, and written a few screenplays myself, so I know generally what should and should not be written in all caps, but seeing just those portions without any context makes me want to know more. For example, shot headers and descriptions are always written in caps (like “JACQUI’S POV” or “MED. SHOT”), as are camera movements (“PAN TO:”), first-time character appearances (“We see GOLAN, a middle-aged college professor with a black T-shirt and a beard”), on-screen text (like “SUPERIMPOSE: WRITTEN BY JACQUI FASHIMPAUR” or “A sign says ‘CARNEGIE MELLON UNIVERSITY'”) and editing effects (“FADE THROUGH BLACK” or “EERIE MUSIC STARTS”). These are pretty standard and one can find examples of them in the series of tweets above, but there are plenty of more unusual phrases, too. After all, whether or not to capitalize something is really at the screenplay-writer’s discretion, and sometime he or she will just capitalize something that is particularly relevant to him or her. I find it fun to go through the tweets and try to figure out which phrase is which type of thing (shot header, editing effect movement), and try to imagine a context in which many of them could work together.
It’s not the twitter bot that’s going to save the world or anything, but I was particularly entertained by “Movie Script Caps,” and I think it’s a good out-of-the-box example of what this medium can be used for.
“Ideally We Meeta Few Times xa Week and Have Bottle Rocket Sex” juxtaposes randomly generated cartoon phalluses with sentences from “Men Seeking Women” advertisements from the Pittsburgh Craigslist. There is much comedy to be found in both the images and the sheer absurdity of many of the captions. Each combination makes a different comment on the aims of the poster: some give off an air of patheticness, some douchebaggery, some downright skeeze — highlighting the unexpectedly complex and layered meaning of a ubiquitous form of imagery in our society: the dick drawing.
The idea to draw phalluses actually came from some rather lewd commentary from one of my neighbors about my FaceOSC project. I had been wanting to do some more generative work since seeing Xastol’s generative plotter faces, and I thought the idea of little cartoon dicks would be hilarious. Additionally, right off the bat, I knew I wanted to include some sort of interesting data set or other information with comedic value. For me, having text was a must for this project — not that I couldn’t have worked with text for other projects, but all of my favorite examples from this project in particular (Death Death Death and Crazy But True Cat Stories included) were heavily reliant on text.
I first thought that I could collect data about, oddly enough, bathroom cleaning schedules (the little timesheets that they have in bathrooms of chain restaurants or gas stations that let us know when the bathroom has last been cleaned). Then, I thought I might want to caption the drawings with text messages from my ex-boyfriend, or perhaps from tweets containing a certain hashtag (I was thinking #TGIFridays). After I made my final decision about the text, I ended up hand-selecting the Craigslist ads (although I was algorithmic in the sense that I used the most recent ones) for several reasons:
1) Craisglist doesn’t have an easily accessible API, and I didn’t have the coding prowess to figure out how to scrape Craigslist from scratch without sacrificing other elements of the project.
2) More importantly, I wanted to minimize the trolling posts that I used in the book (a few are thrown in there) because the genuine ones are much funnier.
3) Going through the posts was a hilariously good time.
Although the posts were selected manually, they were formatted computationally with Basil.js.
I’m glad I finally decided on Pittsburgh Craigslist ads — I think this project is hard to pull off if it’s not funny, and the sentences from the ads really bolster the humor.
I spent a lot of time trying to figure out the best way to draw a dick. At first, I went with the to-be expected two ellipses and a rectangle, but I realized that this approached made boring images. Once I had some of the concrete mathematical details down, I elected to create custom PShapes for the shaft and the head, and have the length, testicle diameter vary, and have the perspective vary slightly as well. Retrospectively, I would have included more variation, hairs, and maybe even warts, and if we’re really dreaming big, I might have even done the whole thing in 3d (but, at the same time, I like the cartooney quality of my result).
Click here to see the GitHub repository for the project.
This is the original sketch for the idea, showing the variation in dimensions and orientation that I was going for.
This was one of my first attempt to get the alignment right with ellipses and a rectangle
This is a later attempt using lines. I kind of like where this one was going — I think if I had adapted it to use curves, it could have also turned out nice.
A fairly run-of-the-mill representative of the final product
Here’s a video shot by the professor, flipping through the book:
import rita.*;
String entries[] = new String[30];
JSONObject json;
void setup() {
//basically just initializes all the craiglist entries I'll be using
entries[0] = "Im in search of a beautiful young woman between the age of does not matter-23 who is seeking an older man for a relationship and to treat her like a princess inside and outside of the bedroom. She should be tall have long hair long legs and a gorgeous butt and on birth control, highly recommended but not a deal breaker. She will receive alot of presents and affection . I am very serious about treating a very special young lady this way and if your interested I expect you to be very serious about accepting. SERIOUS REPLIES ONLY. Send a full clothed body pic with face along with stats. The closer you are to me the more you will be spoiled. Your pic will get mine once you prove your serious enough.";
entries[1] = "I have a big, roomy Suv and I've got a taste kink. Any women out there feel the same way? I've got all the time in the world today and I'm looking to have some fun. Put your favorite color in the subject line so I know you're not a bot. Let's chat a little bit and see what we'd like to do on this dreary day.";
entries[2] =
"I think it's finally reached the point where i should throw in the towel with craigslist. I get "
+"almost no replies from real people. I used to at least get the occasional interesting reply or two."
+" I'm bored. Are you tired of the same old/same old too? Let's talk and take it from there. I'm "
+ "pretty open-minded even if that means we just talk. Please reply with a picture and a little about"
+ " yourself. Excuse the cheesy pictures, but I'm not putting my face on cl so I figured these were"
+ " better than nothing. Note: Someone stole one of my pics and is using it to post ads. If you see an"
+ " ad with my picture talking about bi-guys, bi-girls, and hsv...know that it is NOT me. I am not bi."
+ " I do not have hsv. Nothing in the ad is true about me. That is someone using my picture without my"
+ " permission.";
entries[3] = "Hi! Is anyone else bored tonight? It's so nice outside. Anyways... I'm new-ish to the area and have"
+ " been single for about a year. I miss cuddling and making out. Anyone up for a movie late tonight? I"
+ " am. Who me? 33, white, attractive, 6'1, financially stable, four twenty friendly, movie lover,"
+ " crazy about kissing.You? Pic for pic! Yours gets mine."
+ " Ps you can pick the movie.";
entries[4] = "Swm, 6' tall, average looks, good body, tight tush, great sense of humor, will buy dinner for any"
+ " female on one condition: you wear a skirt and hose/nylons. I bet I will be eating alone tonight.";
entries[5] = "Oh it has a first name!!"
+ " Looking for a fwb scenario so my kabossy can fit that bun!!"
+ " Ideally we meeta few times xa week and have bottle rocket sex."
+ " I have skills that will blow you're mind."
+ " In fact if you don't get with me you're missing out on the treat of a lifetime."
+ " My kabossy is in charge!!";
entries[6] = "hello , Im 33 yo white male , 6ft1 180lbs, SINGLE ,in good shape,two part time jobs,no kids,been"
+ " told im goodlooking.looking for a Long term relationship . I have my own place and i drive.. I am a"
+ " country/redneck/metalhead type guy all wrapped in one...some fav bands...Misfits,Metallica,Social"
+ " D, Dropkick Murphys, AC-DC, Disturbed, Fear Factory, and thats all i can think of right now.I have"
+ " 4 tattoos, one on right bicep and 3 on left forearm, id like to get more in the future...I am"
+ " hoping to meet the right one in 2016 since its been a few years since ive had a relationship...Not"
+ " looking for liars , whores , wana be gangsters , gold diggers , game players ,and drama queens, or"
+ " women still attached to their ex.";
entries[7] = "Me:"
+ " I am tall, in shape, and intelligent. I hear I am easy on the eyes, and have all of my teeth. I"
+ " have a decent job and my own place, although I am new to the area. I am 420 friendly, but other"
+ " wise drug free. I am disease and drama free as well and have no kids or anything."
+ " You:"
+ " Honesty is pretty crucial."
+ " Cute although you dont exactly have to think so haha"
+ " Smart"
+ " Job, car, school, art, or something you do with your life"
+ " 420 friendly is a plus"
+ " Piercings and tattoos are also a plus"
+ " Disease/kid/drama free";
entries[8] = "Anyone up late this evening and want to chat and see where it leads? Maybe make a friend or maybe"
+ " something more? Send me an email so we can chat! I am open to any age, relationship status, race,"
+ " etc. as long as you are female lol so don't be shy :)";
entries[9] = "Anybody feel like hangin out and having good conversation? We could talk about anything you feel"
+ " like.";
entries[10] ="I'm white male regular build not bad looking. I have no tats, no piercings, never married, no kids."
+ " No crazy friends, no crazy ex's. I'm more of a homebody and stay out of trouble. I like going out "
+ " to all depending on what to do. I'm looking for someone to talk too who is just a normal regular "
+ " person,"
+ " I'm friendly and nice. Down to earth and chill. If you wanna know more..."
+ " Put 'email' in subject line or send me a text"
+ " FOUR ONE TWO NINE FIVE ONE FOUR FIVE SEVEN TWO";
entries[11] = "Hey ladies, I guess I just wanna keep it quick and to the point lol. I'm not looking for a"
+ " relationship or anything serious, just a girl to hangout and mess around with on occasion. If you"
+ " would be interested in that kind of thing reply to my post and let's see what happens. Please"
+ " attach a picture of yourself and put your boob size in the subject line so I know you're legit.";
entries[12] = "I am not picky tonight. Invite me over already. I can travel to you if things feel right.";
entries[13] = "Hi There!! I am from California... I live in San Diego, I've always wanted to travel but I haven't"
+ " been here :/ only through CL haha... But I don't want to go without finding someone who I can trust"
+ " and who can show me around so I have a good time :)"
+ " Possibly to meet and have a connection."
+ " About Me: I'm a chubby white guy, long blond hair and blue eyes :)"
+ " I'm 27, have a good job and I'm easy going."
+ " You can email me or KIK me at"
+ " Tcandee";
entries[14] = "Contact me tonight....discreet fun wanted..I'm in shape,sense of humor, 40s..text 'I'm in' to"
+ " fouronetwothreeeightninetwoonefivesix. Married / attached ,couples welcome";
entries[15] = "Howz about a nice collaboration between friends? We can have pizza pie as I spice it up with my"
+ " sausage as the perfect ingredient.";
entries[16] = "Hey anybody want to get together tonight? We can catch a movie or do oral? We can Iggy wiggy liol.";
entries[17] = "I am at the point where making time to slowdown, relax and enjoy is important, I like the"
+ " interaction of dinning in, dinning out, the connection created by preparing and sharing a meal"
+ " together, an evening set aside for a nice wine, conversation, candles, teasing, pleasing and an"
+ " antipasto to nibble on. Lol";
entries[18] = "Laughter is important, my sense of humor can range from playful to sarcastic. Not looking to change"
+ " my life or anyone else's other than filling the void. Passionate, expressive and looking for the"
+ " same. Definitely not an out of sight out of mind person, I like to keep in touch throughout the"
+ " day, share thoughts, feelings and events. For me the mental connection is important and"
+ " communication is key. I don't mean to offend anyone but please be local to the Pittsburgh area,"
+ " over 45, ready to slowdown and enjoy, willing and able to make time to do so and looking to share"
+ " and enjoy plenty of pleasure, passion and fun. If interested message me, put your favorite wine in"
+ " the subject line, please include a photo, what you're looking for, what you enjoy/find pleasure in"
+ " and PLEASE!!! Be serious and looking for something regular and ongoing, the more we have to build"
+ " on the hotter it will get. Thank you.";
entries[19] = "would love to be a live in companion and a lover to a naughty older woman 60-85,any race,"
+ " religion. I am an east Indian male NY raised 55 years old and an American citizen. I don't have"
+ " Indian accent when I speak English and I have an MBA. I need a place to stay. I will caress you"
+ " allover, give full body massages, give you great sex, cook and your chores. Please respond with"
+ " your phone number.";
entries[20] = "For reals. I love breast play. Yours, not mine lol. Hoping to find someone out there that loves"
+ " having your nipples sucked. Such a turn on for me. Well and kissing too."
+ " I can drive or host. Anyone curious? Please include a face picture of yourself and I'll return the"
+ " favor. Thanks!";
entries[21] = "Ok who on this site really wants to meat? Let's meat today and meat consistently if that's okay. So"
+ " let's do this.";
entries[22] = "I'm a nightime person who likes to stay up past midnight. Any women on here looking to chat who"
+ " likes to stay up past midnight? If so put midnight in subject line";
entries[23] = "Looking for guys and girls who want to throw down some fun. We got the dunking stix so you supply"
+ " the honey buns.";
entries[24] = "So as I have stated just out of a bad relationship. My ex just could not understand my experiments"
+ " with men. So maybe you will understand? Hey we all have needs right?";
entries[25] = "I'm looking for a nice young thick girl to spoil and give gifts to. This can be one time or"
+ " ongoing. Please no bbw. Please reply with favorite color in subject. Also send pics and a phone #";
entries[26] = "This is a long shot I know. And I know most if not all of you that read this will judge and form"
+ " your opinions. That's okay. Hopefully there is one woman out there that is adventurous and open"
+ " minded enough or maybe in a similar situation that they understand."
+ " I guess I will just lay it all out on the table. I am a 54 yr old married man. Due to wife's lack"
+ " of interest, there hasn't been much in the way of 'sex' for quite some time. My release comes from,"
+ " you guessed it, masturbation. I am looking for a woman who is possibly in the same situation that"
+ " might be interested in getting together for some mutual masturbation. Not looking for intercourse."
+ " We could watch each other or we could lend a hand and help each other. The choice would be yours."
+ " Absolute discretion is a must !! Prefer you be over 40 yrs old. Married or single. If this sounds"
+ " like something you would like to possibly discuss, please send me an email and tell me your"
+ " thoughts on the subject and we can go from there. Women Only Please !!!!";
entries[27] = "Are there any cute girls out there who might be interested in a tribute? If you don't know what"
+ " that is it is when a girl sends a sexy pic or 2 to a guy who then drops his load on the picture and"
+ " takes a picture of that and sends it back to the girl."
+ " It's just a fun flirty activity and doesn't require any personal meets or anything like that. If"
+ " this is something you'd be interested in please send me a pic and what you're looking for and"
+ " please put tribute in the title so I know you're real."
+ " I'm real -- today is Friday and has been sunny but cooler but the weekend will warm up nicely.";
entries[28] = "I am a mature, married busy workaholic & needing assistance with stress relief from time to time. I"
+ " am seeking a steady & reliable massage therapist( don't worry about experience, I can teach you the"
+ " techniques) who can host with great hands for a good sensual full body massage at least once a"
+ " week. No need to look for a p/t job, do more with the time saved and let's help each other out."
+ " Deal with one sane and decent guy, no need to hook up with random men. Ideal candidate would be a"
+ " woman who is uninhibited with a great sense of humor and understands the need for privacy. Looking"
+ " to start soon. This is a perfect opportunity for stay at home mom (after the kids are at school)"
+ " retired woman( age is not an issue), college student or any woman looking to supplement her income."
+ " I have a flexible schedule which will enable us to work around yours. Please put relief in subject"
+ " line so I will know that you are real and sincere.";
entries[29] = "Quit flagging and sending racist emails, haters. Live and let live."
+ " Some guys like blondes. Some guys like BBWs. I prefer ladies who have a darker skin tone. Don't ask"
+ " me why. Don't know. Don't care. And it isn't just a phase. I haven't dated a white woman in 10"
+ " years. I'm not looking for anything serious (though I definitely want to keep the option open) nor"
+ " am I interested in anything financial including a SD/SB arrangement."
+ " What I'm seeing is a situation where we get dinner sometimes, or a happy hour. We catch a movie,"
+ " hear some live music. And there is lots of naked time. We aren't up under each other all the time,"
+ " but we're friends, confidants and lovers. I'm college educated, been told I have a good sense of"
+ " humor and can usually keep up on the conversation."
+ " Anyway, if that has a beat for you, drop me a note. Put 'Maybe I'm the one' in the subject and"
+ " lets's get coffee."
+ " Please make the subject of your reply something interesting so i know ur not a dbag or spam bot."
+ " Thanks.";
json = new JSONObject();
for (int i = 0; i < 30; i++) {
String result[] = RiTa.splitSentences(entries[i]);
String sent = result[int(random(0, result.length))];
json.setInt("id", i);
json.setString("sentence", sent);
String add = str(i);
saveJSONObject(json, "data/text" + add+ ".json");
}
}
Scripting Illustrator with Basil.js:
#includepath "~/Documents/;%USERPROFILE%Documents";
#include "basiljs/bundle/basil.js";
var jsonString = b.loadString("text.json");
var jsonData;
//--------------------------------------------------------
function setup() {
// 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("Helvetica","Light");
b.textAlign(Justification.LEFT_ALIGN);
b.text("Ideally we meeta few times xa week and have bottle rocket sex", 72,72,360,36);
b.text("Katie Tender", 72,108,360,36);
jsonData = b.JSON.decode( jsonString );
b.println("Number of elements in JSON: " + jsonData.length);
var titleX = 72;
var titleY = 72;
var titleW = 72;
var titleH = 72;
var captionX = 72;
var captionY = b.height - 108;
var captionW = b.width-144;
var captionH = 36;
var imageX = 72*1.5;
var imageY = 72;
var imageW = 72*4.5;
var imageH = 72*4.5;
for (var i = 0; i < jsonData.length; i++) {
b.addPage();
b.noStroke(); // no border around image, please.
var anImageFilename = "images/" + jsonData[i].image;
var anImage = b.image(anImageFilename, imageX, imageY, imageW, imageH);
anImage.fit(FitOptions.PROPORTIONALLY);
b.noStroke();
b.fill(b.random(180,220),b.random(180,220),b.random(180,220));
b.ellipseMode(b.CORNER);
b.ellipse (titleX,titleY,titleW,titleH);
b.fill(255);
b.textSize(56);
b.textFont("Helvetica","Bold");
b.textAlign(Justification.CENTER_ALIGN, VerticalJustification.CENTER_ALIGN );
b.text(jsonData[i].title, titleX,titleY,titleW,titleH);
b.fill(0);
b.textSize(36);
b.textFont("Helvetica","Regular");
b.textAlign(Justification.LEFT_ALIGN, VerticalJustification.TOP_ALIGN );
b.text(jsonData[i].caption, captionX,captionY,captionW,captionH);
};
}
b.go();
This is the visualizer that we used to help our debugging process. The top bar being the melody, and the bottom being the base line.
