hizlik-visualization

screen-shot-2016-11-03-at-6-21-05-pm

You can view the project live here. IT TAKES 20-30 SECONDS TO LOAD

Chart: It shows the amount of departures from stations per hour. Using this, you can kind of see how some stations have more people taking bikes in the mornings and some have more people taking them at nights (possibly to/from work?). Y axis = number of departures, X axis = station.

Making of: It was remarkably hard using d3, just like we were warned (that it takes a different kind of thinking). That said, I’m fairly happy with how it turned out, for a simple chart. I could not fix the x-axis names (I wanted them to be vertical) and could not get animations working. I also would have preferred to have a max-height that is consistent across all hours, rather than changing the scale of the chart. But I couldn’t figure that out either. I couldn’t get the axis titles to show up either, so I ended up not using them.

cambu-lookingoutwards07

screen-shot-2016-11-03-at-2-16-49-am

click above to play around with it 

The prompt for this looking outwards is especially difficulty for me because there are so many great examples out there + I’m very aware of where/how to find many more. I recently found out the co-creator of Processing & founder of Fathom, Ben Fry, attended CMU for Communication Design and CS.

Hence, to make it easier, I decided to scope in and select something from Fathom’s incredible portfolio of work. One of their pieces, The Measure of a Nation, stuck out in particular for both its interesting mobile and web interactions (click here for video) and the ease by which it allows the comparison of complex information.

The piece isn’t immediately ‘understandable,’ and normally that would bother me, but I like that it becomes more comprehensible as you play with it longer. This reminds me of something Dan Boyarski told our C-Studio I class last mini, it went something like this:

‘Have a conversation with the viewer […] provide them the respect to believe they can come to understand your message […] it’s not necessarily a bad thing if your work asks something of the viewer’

 

kander – LookingOutwards07

For this Looking Outwards assignment, I looked at the work of Ingrid Burrington (who, it should be noted, has”lifewinning.com” as her web domain name). She doesn’t focus exclusively on visualizations, but she has a really interesting map-based visualization that seeks to measure the impact of a hike in the public transit fare in New York City. There are a few issues with the visualization, and I think it could be synthesized a little further, but I enjoy the nature of the data that she chose to analyze.

Burrington’s map allows you to zoom in and out of different areas of NYC, which is broken up into it’s different census tracts. Mousing over a tract brings up on the side information about the median income (the map is also color coded based on this data), percent of public transit uses, income of those riding public transit, and population. Clicking on a station brings up a little pop up that tells you the type of pass bought at each location, the total increase in spending by full-far riders that would result from the pay hike.

Visit the project here

info_vis1

info_vis2

I think there are a lot of parts of the visualization that could be less confusing. First, it might be a good idea to break it up into several visualizations — perhaps one about ridership and types of passes and one about the pay hike — or otherwise have a way to pare down the data that is shown. Additionally, I don’t feel it was necessary to color code the subway lines (maybe if I was a New Yorker, I’d feel differently). I think it adds confusion.

I also think that this high number of types of of data muddies the message, and drowns out perhaps some more interesting facts that could be drawn from the visualization. For example, it might be far more revealing to have a visualization that shows the ratio of average cost increase per public-transport rider to median income of the area. Or perhaps a comparison between the amount that an area would pay and the percentage of the pop. that actually took public transport. It felt like a lot of simpler visualizations crammed into one, but without a larger synthesis.

Still, there are some very redeeming aspects of the visualization. Each of the individual elements is done well and clearly, and the overall aesthetic is pleasing. Public transport fare increases, and which areas would pay the most, is a very interesting data set, because it’s hard to conceptualize how much money actually stands to be made from a small fare increase on each rider. Furthermore, all of this data existing in the same text-based document or spreadsheet would be absolutely impossible to interpret, so this visualization is definitely a step-up.

Additionally, I perused other parts of the website, and I love the informal, ever-so-slightly flippant style in which she writes and speaks (the use of the word “hella” in a description of one of her projects really sealed the deal for me). Her Seven on Seven talk with Meredith Whittaker, which includes a discussion of magic, is pretty cool as well.

Antar-lookingoutwards07

Chris Harrison

Bible Cross-References & Biblical Social Network (People and Places)

This week I looked at the work of Chris Harrison, a CMU professor for Human-Computer Interactions. I took one of his intro classes last semester and really enjoyed learning more about the history of computer science and how both hardware and software have evolved. While I’ve always understood him to be an impressive researcher and a highly regarded computer science professor, I never knew that he worked in art and design. Of his work, I was particularly intrigued by his work with the Bible. Once I began to look into this piece, I began to understand the dimensionality of professor Harrison.

Created in collaboration with Christoph Römhild, a Lutheran Pastor, the work illustrates the range and complexity of the connected network of information in the Bible. The first piece shows a rainbow of connected verses, where the colour of the arc is determined by the distance between the two chapters. With 63,779 cross reference, the piece is fairly illegible, but communicated the detail of the Bible superbly. I admire Harrison and Römhild for taking the artistic and aesthetic route to data visualization rather than the practical. While religion, and specifically Christianity and the Bible have lead art through the centuries, I think that this piece creates an interesting tensions where the beauty has to due purely with the quantity of the information, and has little religious connotations. While the western christian idealism has been brainwashing the art world for centuries, it has begun to reach the point of being boring and overdone. Yet this work is a refreshing reminder that the Bible can be appreciated for its power, even if you don’t agree with its message or its messengers.

The second piece, Biblical Social Network (People and Places) is equally fascinating and impressive. The graph contains over 10,000 connections and handles the quantity elegantly with the appropriate line weight and opacity. This piece offers for more legibility than the last and can be served to some degree as an information tool. However, the usability is still limited, with only about a couple dozen names legible without zooming in. I think the most interesting part of this was the fact that “Jesus” was so small. While I was surprised at first that “Israel” was the largest, it is perfectly logical.  I also enjoyed the play in figure and ground based on the font/background colour. There’s a luminosity to the information web that taps a bit more into the religious/christian aesthetic.

I think there’s also a quiet elegance to this work that is seen anytime technology is used to create religious art. I believe there’s something interesting to be said about humanity after the fact that we can take this book that is thousands of years old, and translate it in our modern ways to be completely reinterpreted. Even more, this reinterpretation repurposes the Bible from being used as a preaching tool of conversion, to a display of a vast quantity of information. It allows for a new appreciation of just how big the Big Book is. Since the work is largely artistic rather than practical, it doesn’t seek to even inform the reader of the information in the Bible. It simply displays the levels of vastness, complexity and detail for what they are.

tigop-Book

PDF: gaslightingbook.pdf

(pdf of book above)

Using the Temboo API service, I decided to retrieve tweets which use the words gaslight, gaslights, gaslighting, gaslighter, gaslighted, etc. I wanted this to be a tool to unveil what the Twitter population’s thoughts on gaslighting were, and as an outcome to this experiment, I received both political commentary as well as personal history of those who claim that they have been gaslighted. I was expecting to see results relating to abusive or toxic relationships and psychological torment, but I was surprised to see tweets on Hillary Clinton and Donald Trump show up. These results made the content of the book extremely reflective of the time we are currently living in, and I thought that was something which made this collection of tweets special. Also, I was unaware of the fact that trans and queer communities might show opposition or hostility towards one another — something that I had learned after reading the retrieved tweets.

I wish I had played around more with imagery, but I was able to play around with the formatting of the font/color/size of the words (which was a bit frustrating — I first tried using Basil.js and InDesign, but because the tweets had many unusual characters, Basil.js freaked out. Due to time constraints, I simply used Processing to generate a PDF of my book.

 



// Set up text strings
String searchText, tweetText;

// Create a JSON object to store the search results
JSONObject searchResults;

void setup() {
output = createWriter("gaslightTweets56.txt");
// Set a search term and instructions
searchText = "https";

// Display initial tweet
runTweetsChoreo(); // Run the Tweets Choreo function
getTweetFromJSON(); // Parse the JSON response
timeKeeper();

}

void runTweetsChoreo() {
// Create the Choreo object using your Temboo session
Tweets tweetsChoreo = new Tweets(session);

// Set Profile
//tweetsChoreo.setCredential(Gaslighting Trackr);

// Set inputs
tweetsChoreo.setQuery("gaslighted");
tweetsChoreo.setConsumerKey("XXXXXXXXXXX");
tweetsChoreo.setAccessToken("XXXXXXXXXXX");
tweetsChoreo.setConsumerSecret("XXXXXXXXXXX");
tweetsChoreo.setAccessTokenSecret("XXXXXXXXXXX");

// Run the Choreo and store the results
TweetsResultSet tweetsResults = tweetsChoreo.run();

// Store results in a JSON object
searchResults = parseJSONObject(tweetsResults.getResponse());
}

void getTweetFromJSON() {
JSONArray statuses = searchResults.getJSONArray("statuses"); // Create a JSON array of the Twitter statuses in the object
//JSONObject tweet = statuses.getJSONObject(0); // Grab the first tweet and put it in a JSON object
for(int i=0; i

Layout code (Processing):


import processing.pdf.*;

void setup() {
int time= millis();
background(255);
size(612,792, PDF, "gaslightingBook.pdf" );
//noLoop();
//beginRecord(PDF, "gaslighting1.pdf");

}
//void draw(){
// The font "andalemo.ttf" must be located in the
// current sketch's "data" directory to load successfully

void draw(){
//size(612,792);
PGraphicsPDF pdf = (PGraphicsPDF) g;
PFont tweetFont = createFont("ChaparralPro-Bold",12);
PFont cuckFont = createFont("AR DARLING",23);
PFont timeFont = createFont("Castellar",23);
PFont subheadingFont = createFont("Bell MT Italic",12);

textFont(cuckFont);fill(0);textAlign(CENTER,CENTER);textSize(32);text("Gaslighting Trackr",width/2,height/2-80);
textFont(subheadingFont);fill(0);textAlign(CENTER,CENTER);textSize(28);text("\nand the American Psyche",width/2,height/2-70);
pdf.nextPage();//p1

pdf.nextPage();//p2
textFont(subheadingFont);fill(0);textAlign(CENTER,CENTER);textSize(12);text("\n\n\nCompiled by Teenygoop \n2016",width/2,height/2-70);
pdf.nextPage();//p3

pdf.nextPage();//p4
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\n RT @TicketmasterUK: .@springsteen tells @BBCRadio2 if he needed a stand-in \nhe'd pick @thebrianfallon.\nWe second that! >> https://t.co/InmAU…"+
"RT @TicketmasterUK: ICYMI: \n@thebrianfallon chats to us about his record and he \nupcoming UK tour >>\nhttps://t.co/AHVDCu3wKb" +
"\nRT @dhabitahzainal: @farahNAKATA hello! You can get it at Gaslight Cafe, \nBukit Damansara or anywhere that I'll be performing next 😀 "+
"\nwhere…\nShoutout to all the men in my life that have ever tried to gaslight me. \n@farahNAKATA hello! You can get it at Gaslight Cafe, Bukit Damansara or anywhere that \nI'll be performing next 😀 where are you staying?"
+"\nRT @TicketmasterUK: ICYMI: @thebrianfallon chats to us about his record and he \nupcoming UK tour >> https://t.co/AHVDCu3wKb"+
"\nCuándo alguien le explica a uno que es el Gaslight y uno se siente identificado...",30,30);

textFont(cuckFont);
fill(0);textAlign(CENTER,CENTER);text("\nOnly a cuck wouldn’t know that the original film \nversion of Gaslight was directed by Thorold Dickinson",width/2,height/2-100);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nFind Gaslight of St.James @gaslightstjames on https://t.co/SaCcOcn59y"+
"\nRT @TicketmasterUK: .@springsteen tells @BBCRadio2 if \nhe needed a stand-in he'd pick @thebrianfallon. \nWe second that! >> https://t.co/InmAU…"+
"\nRT @TicketmasterUK: .@springsteen tells @BBCRadio2 if \nhe needed a stand-in he'd pick @thebrianfallon. \nWe second that! >> https://t.co/InmAU…"+
"\nRT @tuckersworld09: @JonRiley7 @LosinDonald \nI don't think I've seen anyone gaslight as patently and frequently as trump."+
"\nRT @TicketmasterUK: .@springsteen tells @BBCRadio2 if \nhe needed a stand-in he'd pick @thebrianfallon.\nWe second that! >> https://t.co/InmAU…"+
"\n#NowPlaying  Handwritten by  The Gaslight Anthem.  \nListen https://t.co/3fPcyvproZ  Stream https://t.co/d1gncMyqHI \n#ClassicRock #Rock #radio"+
"\nRT @TicketmasterUK: .@springsteen tells @BBCRadio2 if \nhe needed a stand-in he'd pick @thebrianfallon. \nWe second that! >> https://t.co/InmAU…",
width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n \n STOLEN:10/27/2016 01:46:23",width/2+270,height/2+300);
pdf.nextPage();//p5

textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nIm not gonna post personal shit on here but I just think everyone should read this and be aware."+
"\n https://t.co/aviRqlsTHp"+
"\nRT @goldengateblond: There is literally no other way to interpret it, you gaslighting freak. \nhttps://t.co/hnKL80baaj"+
"\nRT @Piquerish: @nia4_trump @jamesbott007 Do NOT believe the LYING, GASLIGHTING, \nmanipulating PRESS! EVER! \nGO AND VOTE!!! https://t.co/tpn9n…"+
"\nRT @shannonrwatts: I'll publicly announce who I'm voting for and denounce his opposition, \nbut under no circumstances will I endorse him! #g…"+
"\nRT @goldengateblond: There is literally no other way to interpret it, you gaslighting freak. \nhttps://t.co/hnKL80baaj"+
"\nRT @Elixicana: Y'all seeing that pattern here? Writing people off as sensitive as a way to \ntry to make them seem weak, pretty much gaslight…"+
"\nRT @shannonrwatts: I'll publicly announce who I'm voting for and denounce his opposition, \nbut under no circumstances will I endorse him! #g…"+
"@NationalismRise that woman is groace. \nIt has to be a massive gaslighting operation on white males.\n@FrankConniff @jasoninthehouse @realDonaldTrump ",30,30);

textFont(cuckFont);
fill(0);textAlign(CENTER,CENTER);text("\nHow in the actual fuck is voting for someone \nNOT an endorsement?? GOP Gaslighting 101",width/2,height/2-80);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nRT @shannonrwatts: I'll publicly announce who I'm voting for and denounce his opposition, \nbut under no circumstances will I endorse him! #g…"+
"\nRT @goldengateblond: There is literally no other way to interpret it, \nyou gaslighting freak. https://t.co/hnKL80baaj"+
"\nRT @shannonrwatts: I'll publicly announce who I'm voting for and denounce his opposition, \nbut under no circumstances will I endorse him! #g…"+
"\n@karaschlegl I mean, he was good looking and all but \nhe's probably been gaslighting you the whole time?"+
"\nRT @shannonrwatts: I'll publicly announce who I'm voting for and denounce his opposition, \nbut under no circumstances will I endorse him! #g…"+
"\nRT @shannonrwatts: I'll publicly announce who I'm voting for and denounce his opposition, \nbut under no circumstances will I endorse him! #g…"
,width/2+270,height/2);

textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n \n STOLEN:10/27/2016 01:53:52",width/2+270,height/2+300);

pdf.nextPage();//p3

textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nRT @goldengateblond: There is literally no other way to interpret it, \nyou gaslighting freak. https://t.co/hnKL80baaj"+
"\nRT @goldengateblond: There is literally no other way to interpret it, \nyou gaslighting freak. https://t.co/hnKL80baaj"+
"\nRT @goldengateblond: There is literally no other way to interpret it, \nyou gaslighting freak. https://t.co/hnKL80baaj"+
"\nGaslighting too fucking overpowered."+
"\nIm not gonna post personal shit on here but I just think everyone should read this and be aware."+
"\nhttps://t.co/aviRqlsTHp"+
"\nRT @goldengateblond: There is literally no other way to interpret it,"+" \nyou gaslighting freak. https://t.co/hnKL80baaj"+
"\nRT @Piquerish: @nia4_trump @jamesbott007 Do NOT believe the LYING," +"\nGASLIGHTING, manipulating PRESS! EVER! GO AND VOTE!!! https://t.co/tpn9n…"+
"\nRT @shannonrwatts: I'll publicly announce who I'm voting for"+ "\nand denounce his opposition, but \nunder no circumstances will I endorse him! #g…"+
"\nRT @goldengateblond: There is literally no other way to interpret it,"+ "\nyou gaslighting freak. https://t.co/hnKL80baaj"+
"\nRT @Elixicana: Y'all seeing that pattern here?",20,20);

textFont(cuckFont);
fill(0);textAlign(CENTER,CENTER);text("\nWriting people off as sensitive as a way to try to \nmake them seem weak, pretty much gaslight…",width/2,height/2-60);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nRT @shannonrwatts: I'll publicly announce who I'm voting for and denounce his opposition,"+ "\nbut under no circumstances will I endorse him! #g…"+
"\n@NationalismRise that woman is groace. It has to be"+ "\na massive gaslighting operation on white males."+
"\n@FrankConniff @jasoninthehouse @realDonaldTrump How in the actual fuck"+ "\nis voting for someone NOT an endorsement??  GOP Gaslighting 101"+
"\nRT @shannonrwatts: I'll publicly announce who I'm voting for and"+ "\ndenounce his opposition, but under no circumstances will I endorse him! #g…"+
"\nRT @goldengateblond: There is literally no other way to interpret it, \nyou gaslighting freak. https://t.co/hnKL80baaj",width/2+270,height/2+20);

textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 01:56:48",width/2+270,height/2+300);

pdf.nextPage();//p5
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nRT @caitoz: Hillary trying to back claim Japan for America. \nLike a retrospective Columbus."+ "\nThis woman is a gaslighter extraordinaire. https…"+
"\nRT @LannisterLover: Wow. Never realized what a vicious, vindictice, manipulative,"+ "\ngaslighter @HeatherDubrow is until the Ireland vaca  #rho…"+
"\nRT @LannisterLover: Wow. Never realized what a vicious, vindictice, manipulative,\ngaslighter @HeatherDubrow is until the Ireland vaca  #rho…"+
"\nRT @LannisterLover: Wow. Never realized what a vicious, vindictice, manipulative, \ngaslighter @HeatherDubrow is until the Ireland vaca  #rho…"+
"\nWow. Never realized what a vicious, vindictice, manipulative, gaslighter"+ "\n@HeatherDubrow is until the Ireland vaca  #rhoc #rhoc11 #psycho"+
"\n@realtvwchr @Leosxpstl36 @HeatherDubrow she is a gaslighter shes always been a spiteful person \nbut no1 b4 Kelly wld go up against her"+
"@AllAboutTheTea_ #HeatherDubrow is a \ntypical #bully #gaslighter #itsabouttime some1 stood up 2 her \nI am with #KellyDodd on this 1 #alltheway",30,30);

textFont(cuckFont);
fill(0);textAlign(CENTER,CENTER);text("\n@JeraunHudson @TalibKweli \ninhumanity against man has gone on way longer. \nTry again gaslighter.",width/2,height/2-100);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("må være helt alene i din egen leilighet med abuseren din og"+ "han gaslighter deg sykt : ) artig"+
"\n@Oasis00000 #gaslighter"+
"\n@milesjreed"+
"\nIntroducing our new gaslighter in chief."+
"\nRT @DABridge22: Listening to Kellyanne Conway and seriously"+ "\nwondering what she is taking. #logicfail @cnn"+ "\nShe's a gaslighter extraordinaire…"+
"\nRT @DABridge22: Listening to Kellyanne Conway and seriously wondering what she is taking."+ "\n#logicfail @cnn She's a gaslighter extraordinaire…"+
"\nListening to Kellyanne Conway and seriously wondering what she is taking."+ "\n#logicfail @cnn She's a gaslighter extraordinaire, \nlike her boss."+
"\n@Ciocia oy gaslighter, you better ask yourself that question... \ncause the retardmeter is off the charts with you",width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 02:04:07",width/2+270,height/2+300);

pdf.nextPage();//p6
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nRT @333333333433333: trying to communicate openly & \nhonestly after years of being gaslit and \nmisunderstood by nearly every romantic prospec…"+
"\nRT @mtracey: The way the HRC campaign and its media allies have"+ "\"gaslit\"" +"\nthe public re: @wikileaks is despicable and will have long-lasting…"+
"\nive been gaslit and emotionally manipulated my whole life and"+ "\nseeing those things explicitly depicted but widely dismissed is terrifying lol"+
"\nRT @revasteenbergen: The early stages of being gaslit by a #narcissist"+ "\nhttps://t.co/x6H44Osm9M"+
"\nRT @s_green: I just googled"+"\"what percentage of people who think they \nare getting gaslit are actually getting gaslit?\""+
"\n1) You're not gaslit, you're gaslighted."+
"\n2) You're not gaslighted, you just met a pregnant pro-choicer, is all."+
"\nI just googled"+ "\n\"what percentage of people who think they are getting gaslit are actually getting gaslit?\"",30,30);

textFont(cuckFont);textSize(19);
fill(0);textAlign(CENTER,CENTER);text("\nRT @carolJhedges: '\'Enter the dangerous \ntwisting alleyways and gaslit \nthoroughfares of 1860s London\''"+
"\n❈MURDER & MAYHEM❈"+
"https://t.co/p14nZ8C…",width/2,height/2-90);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\n@sonnysgal4life I hope it's more Ashley/Sharon but w/ the whole"+ "\"I adopted lie\"" +"\n& not the whole"+ "\"gaslit to think I was pregnant\""+" 🙈😂"+
"\n@in_a_partydress @annasproul I had gaslit myself into thinking you had always been blonde!"+
"\nthis confirms the memories I thought were lies!"+
"\n@DocBrown_TV @CW_Arrow I'll spare him the 🔥, "+"\nbut he seems device-y. It's the EPs' 180 re: Olicity "+"\nthat has me feeling gaslighted (gaslit?)."+
"\n@vedia_lupae I've occasionally said"+ "\" I feel like I'm being gaslit\""+" \nwhen it was really just a disagreement I was panicking about."+
"\npersonal for a sec: I've been living in a mentally"+"\n/emotionally taxing and abusive AND gaslit situation"+" for over a year. I'm getting out but"+
"\n@TASK1ne He just gaslit a fellow creator at the"+ "\nHouse of Ideas who has been horrifically harassed."+ "\nHe has been trash since 2004."+
"\nRT @revasteenbergen: The early stages of being gaslit"+ "\nby a #narcissist https://t.co/x6H44Osm9M",width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 02:06:19",width/2+270,height/2+300);

pdf.nextPage();//p7
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nRT @stilllearning2b: 10 Reasons Being Gaslighted Is the Worst #narcissist https://t.co/Ki6ziUJgKF"+
"\nNoticing a trend, while canvassing out of state:"+
"\nWomen being gaslighted by husbands or boyfriends"+
"\nor bros, or fathers. #ItsAFromOfBulllying!"+
"\nOne thing I know for absolute certain:"+ "\nif you lie to spare my feelings, you have now hurt my feelings,"+ "\nlost my respect, AND gaslighted me."+
"\nRT @ApologyProject: Tracy was gaslighted"+ "\ninto believing she couldn't be a #dv victim"+ "due to her strength & \nmartial arts training https://t.…"+
"\n@amaditalks so you still were gaslighted by duolingo chat bot?"+
"\nRT @sunslammerdown: getaway makes no secret that he's abused,"+ "\ngaslighted, and manipulated tailgate; \ndenying it is literally just denying th…"+
"\nRT @sunslammerdown: getaway makes no secret that he's abused,"+ "\ngaslighted, and manipulated tailgate; \ndenying it is literally just denying th…",30,30);

textFont(cuckFont);textSize(19);
fill(0);textAlign(CENTER,CENTER);text("\n\ngetaway makes no secret that he's abused, gaslighted, \nand manipulated tailgate; \ndenying it is literally just denying the uncontested truth."
,width/2,height/2-90);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\n@netw3rk as someone who felt gaslighted by our use of \nrashad vaughn last season i really need this"+
"\nTime to be gaslighted by the \nDuolingo chatbot… #GirdYourLoins"+
"\nRT @jazzhandmcfeels: Shitlibs are so thoroughly gaslighted \nthey're now just inventing conspiracy theories. \nWe troll farm now! https://t.co/…"+
"\nRT @jazzhandmcfeels: Shitlibs are so thoroughly gaslighted \nthey're now just inventing conspiracy theories. \nWe troll farm now! https://t.co/…"+
"\n1) You're not gaslit, you're gaslighted."+
"\n2) You're not gaslighted, you just met a pregnant pro-choicer, is all."+
"\n@COM1CBOOK @Big5Army I think I'm \nbeing gaslighted."+
"RT @iCALLhelpline: Most people who are gaslighted \nusually aren't aware that this is happening to them. \nThe challenge is recognize it and st…"
,width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 02:16:54",width/2+270,height/2+300);

pdf.nextPage();//p8
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nGaslighters use emotional & \npsychological intimidation on us for selfish gain. \nHere's how to DEAL W/ THOSE BULLIES: https://t.co/gv11iUymcP"+
"\n@JRubinBlogger @KatiePavlich @henryolsenEPPC I can't wait till \nall you media gaslighters are no longer in media. \nYour Misandry is abhorrent."+
"\n@mitchellvii @DanaRuxi123 Good to hear a positive message \n- tired of hearing about the rigging, \nwonder if they're gaslighters!!!"+
"\n@GrundislavGames The gaslighters? \nThe Candle Wicks? The Torch Burners?"+
"\nRT @LC_Sun: When you've been raised by gaslighters it is almost impossible \nto deal effectively - that is, realistically - with gaslighters…"+
"\n...gaslighters... https://t.co/308XntAYff"+
"\nRT @High_n_Right: .@GOP blasts O-Care after premium hike ann.. https://t.co/78cnGeScMl  \nPro Gaslighters @NancyPelosi @BarackObama the typic…"+
"\n.@GOP blasts O-Care after premium hike ann.. https://t.co/78cnGeScMl  Pro Gaslighters \n@NancyPelosi @BarackObama the typical Lib incompetents",30,30);

textFont(cuckFont);textSize(17);
fill(0);textAlign(CENTER,CENTER);text("\n\n\n\n\nLGB people are master gaslighters of trans people. \nWe flight for and alongside them, they drop us, \nthen they ask why we never help them."
,width/2,height/2-100);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\n\n\nWhen you've been raised by gaslighters it is almost impossible to deal effectively \n- that is, realistically - with gaslighters you encounter"+
"\n@MsBlaireWhite @BeyondPhere Wait, gaslighters? Really? XD"+
"\n@oceandreams007 @PJLM @wikileaks @realDonaldTrump Sure."+ "\nNever engage beyond tagging and bagging. \nThey get paid per engagement. #Gaslighters"+
"\n@BwsCurtis @FloridaJeeper16 @THEJeepMafia \nMost are paid trolls with a script in front of them anyway. \nNot worth our time. Gaslighters."+
"\n@seanmdav MSNBC, CNN,ABC,CBS, NBC, NTY, WaPo, Wall St J, \nUSAToday, all are master gaslighters. \nBut they are pissing off Americans big time."+
"\nRT @nickbiscardi: MT @Amaris_Acosta: Rape culture not held up by rapists; \nheld up by"+ "\"devils advocates\""+", gaslighters,"+ "\"sincere questions\""+",…"
,width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 02:20:02",width/2+270,height/2+300);

pdf.nextPage();//p9
textFont(cuckFont);
fill(0);textAlign(CENTER,CENTER);text("\n@smolgerbil it's one of the \ngreatest gaslightings of all time"+
"\n\nSTOLEN:10/27/2016 02:24:48"
,width/2,height/2-100);

pdf.nextPage();//p10
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\n@CIBSEHeritage @CIBSE @SLL100 Still a few places \nleft on this walking tour https://t.co/ibPrPniHqS"+
"\n@KerrangRadio #NowPlaying #ListeningTo The Gaslight Anthem -"+ "\''45\""+
"\nGenuine question: can people gaslight you accidentally because \nneither of you understand who is the stupid one?"+
"\n@mushyyyy ugh worst. The headphone jack doesn't work on my \ndock so I just blasted everyone with gaslight anthem"+
"\nRT @TicketmasterUK: .@springsteen tells @BBCRadio2 \nif he needed a stand-in he'd pick @thebrianfallon. \nWe second that! >> https://t.co/InmAU…"+
"\nRT @TicketmasterUK: ICYMI: @thebrianfallon \nchats to us about his record and he upcoming UK tour \n>> https://t.co/AHVDCu3wKb"+
"\nRT @dhabitahzainal: @farahNAKATA hello! \nYou can get it at Gaslight Cafe, Bukit Damansara or anywhere that I'll be performing next 😀 where…",30,30);

textFont(cuckFont);
fill(0);textAlign(CENTER,CENTER);text("\nRT @MegoLand: Don't ever let someone gaslight you, \nno matter the degree of mental illness \nin which you do, or do not, suffer."
,width/2,height/2-90);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nShoutout to all the men in my life that have ever tried to gaslight me."+
"\n@farahNAKATA hello! You can get it at Gaslight Cafe, \nBukit Damansara or anywhere that \nI'll be performing next 😀 where are you staying?"+
"\nRT @TicketmasterUK: ICYMI: @thebrianfallon chats to us about his record \nand he upcoming UK tour >> https://t.co/AHVDCu3wKb"+
"\nCuándo alguien le explica a uno que es el Gaslight y uno se siente identificado..."+
"\nOnly a cuck wouldn’t know that the original film version \nof Gaslight was directed by Thorold Dickinson"+
"\nFind Gaslight of St.James @gaslightstjames on https://t.co/SaCcOcn59y"+
"\nRT @TicketmasterUK: .@springsteen tells @BBCRadio2 \nif he needed a stand-in he'd pick @thebrianfallon. \nWe second that! >> https://t.co/InmAU…"
,width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 02:26:09",width-50,height/2+300);

pdf.nextPage();//p10
textFont(cuckFont);
fill(0);textAlign(CENTER,CENTER);text("\n@darksuji With the implication that the new, \ninternalized narrative puts \nthe gaslightee under the power \nor influence of the gaslighter."+
"\n\nSTOLEN:10/27/2016 02:28:17"
,width/2,height/2-100);

pdf.nextPage();//p11
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("EVERYONE CALLING BLUE GREEN GASLIGHTED ME"+
"\nWas the entire #oregonstandoff jury gaslighted by A bundy's 3 days of testimony?"+
"\n@Lawrence right because @newtgingrich emotionally abused & \ngaslighted his wife into not caring. \nA REAL man wouldnt even suggest such a thing"+
"\nWhen a person who gaslighted you and spread malicious lies about you starts talking about peace online 👀"+
"\nhttps://t.co/oEJquGTvEO v"+
"\n@KeithOlbermann @GQMagazine Keith, one wonders about women voting for Trump."+ "\nAs in, are they being coerced somehow? Gaslighted? Conditioned?"+
"\nRT @sexy_orphan: I've been gaslighted my whole life"+
"\n@osutein I never talk about it because Apple has \ngaslighted me into thinking I am the screw up here"+
"\nThe @GOP gaslighted this country and its POTUS for 8 years."+
"\nNever, ever listen to these assholes ever again!!… https://t.co/1GIiGZaQ2o"+
"\nI've been gaslighted my whole life",30,30);

textFont(cuckFont);
fill(0);textAlign(CENTER,CENTER);text("\n\nRT @prosumer_report: Interesting piece: \nAre #millennials being gaslighted? \nhttps://t.co/vwAlGt06GW via \n@bornagainmin https://t.co/iTFOjUUugl"
,width/2,height/2-100);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\n\n\n@CAtoDC So where does agency/accountability start and stop \nwhen you've been gaslighted for 20 years?"+
"\nRT @jifoulger: @spoonseeker Are we gaslighted as a \ncommunity https://t.co/dSuVfzayHX"+
"\nInteresting piece: Are #millennials being gaslighted? \nhttps://t.co/vwAlGt06GW via @bornagainmin https://t.co/iTFOjUUugl"+
"\n@Girl1928 [Nods] Yep. I too have been gaslighted."+
"\nRT @dtissagirl: I'm pretty sure the \n@ArrowWriters are gaslighting Felicity. Also gaslighted: me;.",width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 20:26:44",width/2+270,height/2+300);

pdf.nextPage();//p12
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("RT @spinosauruskin: SINGLEHANDEDLY SOLVE EVERY ISSUE I CARE ABOUT \nBEFORE SOLVING THE ONES YOU CARE ABOUT"+
"\n-Every gaslighter on the internet…"+
"\nSINGLEHANDEDLY SOLVE EVERY ISSUE I CARE ABOUT \nBEFORE SOLVING THE ONES YOU CARE ABOUT"+
"\n-Every gaslighter on the internet  @Haram_misfit"+
"\nRT @lepas: @Blackmudpuppy lmfao. \nHe's a classic gaslighter. No wonder his wife left him."+
"\nWhy does no one tell Binky that JP is a gaslighter?"+
"\nRT @caitoz: Hillary trying to back claim Japan for America. \nLike a retrospective Columbus. \nThis woman is a gaslighter extraordinaire. https…"+
"\nRT @LannisterLover: Wow. Never realized what a vicious, vindictice, \nmanipulative, gaslighter @HeatherDubrow is until \nthe Ireland vaca  #rho…",30,30);

textFont(cuckFont);textSize(19);
fill(0);textAlign(CENTER,CENTER);text("Wow. Never realized what a vicious, vindictice, \nmanipulative, gaslighter \n@HeatherDubrow is until the \nIreland vaca  #rhoc #rhoc11 #psycho"
,width/2,height/2-80);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\n@realtvwchr @Leosxpstl36 @HeatherDubrow she is a gaslighter \nshes always been a spiteful person but \nno1 b4 Kelly wld go up against her"+
"\n@AllAboutTheTea_ #HeatherDubrow is a typical #bully #gaslighter \n#itsabouttime some1 stood up 2 her \nI am with #KellyDodd on this 1 #alltheway"+
"\n@JeraunHudson @TalibKweli inhumanity against \nman has gone on way longer. Try again gaslighter."+
"\nnår du må være helt alene i din egen leilighet \nmed abuseren din og han gaslighter deg sykt : ) artig"+
"\n@Oasis00000 #gaslighter"+
"\nRT @calypsoh13: @milesjreed"+
"\nIntroducing our new gaslighter in chief.",width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 20:32:36",width/2+270,height/2+300);

pdf.nextPage();//p13
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nRT @LadyPutz: Breaking: Oregon Jury Gaslights Entire Nation https://t.co/RwI1CtDxDY"+
"\nBreaking: Oregon Jury Gaslights Entire Nation https://t.co/RwI1CtDxDY"+
"\nGaslights & Stringlights https://t.co/Ne1ClpoHpI https://t.co/iUJWbooDDV"+
"\n@SamcFoster I really hate how in the end of the video she \ngaslights the dog 😒 NOT cool.... https://t.co/OliFRGCOTl"+
"\nRT @aliciafiasco_: It's such a damaging message to send \nthat affirms abusers and gaslights their victims further. \nIt has to stop. Abuse is…"+
"\nRT @aliciafiasco_: It's such a damaging message to send \nthat affirms abusers and gaslights their victims further. \nIt has to stop. Abuse is…"+
"\nIt's such a damaging message to send that affirms abusers and \ngaslights their victims further. It has to stop. \nAbuse is not tender/romantic.",30,30);

textFont(cuckFont);textSize(19);
fill(0);textAlign(CENTER,CENTER);text("\nAbuser Gaslights victims. In other news, \nAbuser tells everyone \nto concentrate on more important matters. \nhttps://t.co/SBlPkmaU8F"
,width/2,height/2-100);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nRT @fangirlsmash: Bendis has never been a true ally ever since he came to prominence. \nHe regularly gaslights and blocks anyone who decries…"+
"\nRT @gabriel_gmaraes: @jryangolden @Coreybez1 @NormOrnstein @jboxt1 \nHe gaslights press by accusing HRC of whatever \nhe just did. I was certai…"+
"\n@jryangolden @Coreybez1 @NormOrnstein @jboxt1 \nHe gaslights press by accusing HRC of whatever he just did. \nI was certain at Rep convention"+
"\nRT @fangirlsmash: Bendis has never been a true ally ever \nsince he came to prominence. He regularly gaslights \nand blocks anyone who decries…"+
"\nRT @altmodes: ppl already dismiss the fact that swerve gaslights, \nabuses, and/or enslaves red alert and ten, \nwe don't have to Hypotheticall…"+
"\nRT @altmodes: ppl already dismiss the fact that swerve gaslights, \nabuses, and/or enslaves red alert and ten, \nwe don't have to Hypotheticall…"+
"\nppl already dismiss the fact that swerve gaslights, \nabuses, and/or enslaves red alert and ten, \nwe don't have to Hypothetically Imagine this"
,width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 20:55:04",width/2+270,height/2+300);

pdf.nextPage();//p14
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nRT @FemalesLikeUs: Both #NarcissiticManipulation & \n#Transactivism use the abuse tactic of gaslighting \nto blame their emotional instability…"+
"\nRT @goldengateblond: There is literally no other way to interpret it, \nyou gaslighting freak. https://t.co/hnKL80baaj"+
"\nRT @d_seaman: Gaslighting, a"+ "\“functionally evil\""+ "candidate, and the fight for truth powered by \n@wikileaks — today’s video: https://t.co/Cpq…"+
"\nRT @d_seaman: Gaslighting, a"+ "\“functionally evil\"" +"candidate, \nand the fight for truth powered by \n@wikileaks — today’s video: https://t.co/Cpq…"+
"\nRT @d_seaman: Gaslighting, a"+ "\“functionally evil\"" +"candidate, and the fight for truth powered by \n@wikileaks — today’s video: https://t.co/Cpq…"+
"\nRT @goldengateblond: There is literally no other way to interpret it, you \ngaslighting freak. https://t.co/hnKL80baaj",30,30);

textFont(cuckFont);textSize(18);
fill(0);textAlign(CENTER,CENTER);text("\n\nRT @FemalesLikeUs: Suicide threats = Psychological Warfare \non an Individual Level."+
"\nTA's Suicide Gaslighting of Women = Psychological Warfar…"
,width/2,height/2-100);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nRT @goldengateblond: There is literally no other way to interpret it, \nyou gaslighting freak. https://t.co/hnKL80baaj"+
"\nRT @SSWomen_: Have you heard of gaslighting? #MaybeHeDoesntHitYou \nbut it's a red flag for a manipulative form of \nemotional abuse. https://t…"+
"\nGaslighting, a “functionally evil” candidate, and the fight for truth \npowered by @wikileaks — today’s video: https://t.co/Cpqu9RuARp"+
"\nRT @aroueno: Look at them gaslighting Karthik... \nI want to grab their throats. #theapprentice"+
"\nRT @cavaticat: @MadbanditRoy @kellyhoover27 \nDon't come into this thread with your weak-ass \n#notallmen gaslighting. We don't owe you a damn…"+
"\nRT @AlisonSpalding2: The DNC needs to be punished for being so ABUSIVE to the \nBernie & Trump people & for GASLIGHTING us."+
"\nShow them they d…"+
"\nJeebus. Gaslighting in court:"+
"\nUs: Federal facility."+
"\nJury: Who says?"+
"\nUs: Firearms."+
"\nJury: What firearms? https://t.co/UEPgRpBQOy",width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 21:08:21",width/2+270,height/2+300);

pdf.nextPage();//p15
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\n@RamonMurkader and then the left gaslit everyone into thinking the Contras were bad"+
"\nI've seen vines with millions of loops \nso putrid and devoid of humor that \nit made me feel like I was being gaslit."+
"\n@JuddLegum we'd get gaslit & \ntold they deserved it, ppl would wear t-shirts \n& make effigies. It would be...horrible."+
"\nRT @CodeWitchJen: I mean as kids we were \nconstantly gaslit into believing that \nwe couldn't trust out own gender feels. So it makes sense."+
"\nRT @CodeWitchJen: I mean as kids we were \nconstantly gaslit into believing that \nwe couldn't trust out own gender feels. So it makes sense."+
"\nRT @CodeWitchJen: I mean as kids we were \nconstantly gaslit into believing that \nwe couldn't trust out own gender feels. So it makes sense."+
"\nWe can all agree that Jim Halpert was \na monster person who routinely gaslit \nneuroatypical people, right?"+
"RT @CodeWitchJen: I mean as kids we were \nconstantly gaslit into believing that \nwe couldn't trust out own gender feels. So it makes sense.",30,30);

textFont(cuckFont);textSize(17);
fill(0);textAlign(CENTER,CENTER);text("\n\n\n\n\nThe Girl Who Was Gaslit Into Killing Herself #TheGirlWho"
,width/2,height/2-95);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nI mean as kids we were constantly gaslit into believing that \nwe couldn't trust out own gender feels. \nSo it makes sense."+
"\n@carmenmmachado I feel gaslit by \nwhat a terrible writer Ryan Murphy is, \nlike why are we acting like everything is ok"+
"\nI’m here for a time when Millennials, \na generation gaslit into thinking its troubles are \n100% self-derived, reject that narrative."+
"\nRT @TenementHouse11: Introducing the history of \n#spiritualism in our gaslit \n#parlour 🔮#spiritsofthetenements h\nttps://t.co/bBm3MRewz4"+
"\nRT @TenementHouse11: Introducing the history of \n#spiritualism in our gaslit \n#parlour 🔮#spiritsofthetenements h\nttps://t.co/bBm3MRewz4"+
"\nIntroducing the history of \n#spiritualism in our gaslit #parlour \n🔮#spiritsofthetenements https://t.co/bBm3MRewz4",width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 21:10:12",width/2+270,height/2+300);

pdf.nextPage();//p16
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nBook your spot in classes at Gaslight Creations in the \nClifton Gaslight Business District. \nhttps://t.co/zBjmlTYU7L"+
"\nCould there ever be a current movie \nwhose title  defines a sinister \nbehavior as perfectly as #Gaslight?"+
"\nRT @FemalesLikeUs: Yes TransActivists use \nnarcissistic psychological abuse to \nGASLIGHT the entire FEMALE \npopulation into submission. https:…"+
"\nMe: will gaslight myself into thinking \nI'm not sick and then swallow/cough/etc"+
"\nWe're kick starting #Halloween with some picks of \nour favourite #spooky films! our choice for today: \n#Gaslight 1940 https://t.co/auZUn6khwL",30,30);

textFont(cuckFont);textSize(19);
fill(0);textAlign(CENTER,CENTER);text("\nWomen experience it daily from males. \nMale-trans use Narcissistic Abuse Tactics to \ngaslight Women into complying w/… \nhttps://t.co/vEnJzSdtQH"
,width/2,height/2-86);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\n@NeverMoreBUSH Thy can't gaslight her. @JoyAnnReid \n@supraTruth @GomezReporting @Trippn21"+
"\nRT @gaslightstjames: #Taxi #Taxicabs \n#Cabbies £30 commission per full \npaying customer at Gaslight of St James"+
"\nGaslight Theatre presents \nBad Seed at Gaslight Theatre \nstarts in 15 minutes!"+
"\n@Eliot_Collie and yet, \nplenty of white americans will \ngaslight the fuck out of these native people."+
"\n45 by Gaslight Anthem"+
"\nYou're with fam. \nLots of people are Voting Jill Stein!"+
"\nDon't let Blackout Gaslight you! \nLook at their empty Rallie… https://t.co/2jl4iR1XZA"+
"\nWe are so honored to be recognized in the"+ "\"Best of Tucson 2016\"" +"\nfor the below categories! #supportlocalbusiness... \nhttps://t.co/XBSyPMifUi"
,width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:10/27/2016 21:13:24",width/2+270,height/2+300);

pdf.nextPage();//17
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nJP is such a slimy thug with UNBEELIEVABLE privilege issues and \na tendency to gaslight. \nWhy the FUCK is he still on the show??? #MiC"+
"\nYou're not a real college student until u have no clean clothes, \nur gaslight is on, you have -$5, & \nare living on expired lunch meat & wine"+
"\n@redshira I'm so, so sorry. \nI was in this spot the last two years after \nbeing gaslight and denied in 2014. \nYou deserve so much better.",30,30);

textFont(cuckFont);textSize(19);
fill(0);textAlign(CENTER,CENTER);text("@LauriebrettX @garyaknichols \neveryone at #gaslight is in awe of \nhow much you have raised \n#welldone #GoSoberUK #Macmillan #cancerresearch"
,width/2,height/2-120);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nRT @CandlelightRed: Hey! We've got some new shows booked! Ya comin'???"+
"\nWednesday, November 23 - The Gaslight in Wellsboro, PA... https://…"+
"\nHey! We've got some new shows booked! Ya comin'??? "+
"\nWednesday, November 23 - The Gaslight in Wellsboro, PA... https://t.co/agtqyrLQRt"+
"\nRT @Tampa_Live: RT @CityofTampa Don't forget! \nThe Mayor's Food Truck Fiesta returns \nTOMORROW from 11am-2pm in Lykes Gaslight... https://t.c…"+
"\n.@walterolson"+
"\nMeanwhile, our own govt is attempting \nto gaslight the American people into \nbelieving this is something other than terrorism."+
"\nRT @bebebebender: The media gaslight is a hell of a thing. @d_seaman"+
"\nRT @bebebebender: The media gaslight is a hell of a thing. @d_seaman"+
"\nThe Gaslight Anthem - The '59 Sound (Acoustic) \nhttps://t.co/hkFrFYLn20 via @YouTube",width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:11/01/2016 16:57:30",width/2+270,height/2+300);

pdf.nextPage();//18

textFont(cuckFont);textSize(20);
fill(0);textAlign(CENTER,CENTER);text("\n@VanPlague i can only dream of the gaslightings \nthat must have taken place... the email leaks... ahh the times"+
"\n@euorleans gaslightings à parte, o seu dia está muito louco"+
"\n\nSTOLEN:11/01/2016 16:59:29"
,width/2,height/2-100);

pdf.nextPage();//19
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,RIGHT);
text("\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…"+
"\nRT @d_seaman: Fucking gaslighter. Your husband raped multiple women \nwhile in a position of power over them."+
"\nEnjoy prison. You’ve shown us…",30,30);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:11/01/2016 16:59:42",width/2+270,height/2+300);

pdf.nextPage();//20
textFont(tweetFont);
fill(255, 54, 28);textAlign(LEFT,LEFT);
text("\nRT @zackfox: when you see a bright future then realize \nthe brightness is from all your bridge burning, \ngaslighting, and fighting fire with…"+
"\nRT @zackfox: when you see a bright future then realize \nthe brightness is from all your bridge burning, \ngaslighting, and fighting fire with…"+
"\nRT @zackfox: when you see a bright future then realize \nthe brightness is from all your bridge burning, \ngaslighting, and fighting fire with…"+
"\nRT @zackfox: when you see a bright future then realize \nthe brightness is from all your bridge burning, \ngaslighting, and fighting fire with…"+
"\nRT @zackfox: when you see a bright future then realize \nthe brightness is from all your bridge burning, \ngaslighting, and fighting fire with…",30,30);

textFont(cuckFont);textSize(19);
fill(0);textAlign(CENTER,CENTER);text("\n#Gaslighting https://t.co/zL2VbGnePw"+
"\nWhen authority figures like #doctors tell you \nyr experience isn't real, over and \nover again, that is called #gaslighting. It's abuse"
,width/2,height/2-90);

textFont(tweetFont);
fill(255, 54, 28);textAlign(RIGHT,RIGHT);
text("\nRT @zackfox: when you see a bright future then realize \nthe brightness is from all your bridge burning, \ngaslighting, and fighting fire with…"+
"\nRT @zackfox: when you see a bright future then realize \nthe brightness is from all your bridge burning, \ngaslighting, and fighting fire with…"+
"\nRT @zackfox: when you see a bright future then realize \nthe brightness is from all your bridge burning, \ngaslighting, and fighting fire with…"
,width/2+270,height/2);
textFont(timeFont);textSize(10);fill(0);textAlign(RIGHT,RIGHT);text("\n\nSTOLEN:11/01/2016 16:58:41",width/2+270,height/2+300);

pdf.nextPage();//p21
exit();

}
//endRecord();

image image image image image image image image

Written by Comments Off on tigop-Book Posted in Book

tigop-Looking Outwards 06

Looking through A Brief History of the Future of Twitterbots, I am finding a some of these bots to be quite arbitrary, and mainly exist to show that it is possible for them to exist…if that makes sense. There are some that definitely may serve an important purpose, and I do like a couple of these-like the random sandwich recipe bot, that’s pretty handy. Followers would possibly accumulate based on a shared interest in collecting these random sandwich recipes, or to find inspiration for their packed lunches. Anything related to random food gets a thumbs up from me. But what I see from these is that in the way they might be random but relate to a specific topic, they kind of serve as a catalyst for creative thinking. For example, the art assignment bot would be a nice way for an individual to have a new exercise for the mind every day. Arbitrarily generated content may seem like a fun way to get “users” or viewers of the content to try new things, expand their mind.

I’m really moved by the yourevalued bot, or bots similar to those, in which the bot responds to an individual using the twitter interface and is depressed. To think that a twitter bot could literally save a life is amazing, and it shows how powerful something that could potentially post sandwiches or random colors and words might be. It is a tool that can literally save humanity!!!!

Bots like this^ as well as bots that can provide twitter users with valuable information are the bots that I personally find myself to be most inspired by. However, I think the idea of using bots to generate content purely for the imagination is interesting. (I mean who am I to say if anything can be ‘purely for the imagination’, people use what they make from that and bring it into the real world, can anything ever really be ‘purely for imagination’?), but I would be curious to see more examples of a twitterbot be used as a tool to create narratives, I also like the idea of having this twitterbot’s output function as something like a performance.

Overall, definitely seeing twitterbots to be a great way to connect with others, a way to really acknowledge our similarities or be there for one another despite differences. Using twitterbots, we can stand in solidarity.

Anson-Book

Here’s the full Spirit Animals PDF: SpiritAnimals_print.pdf

From the Artist’s Note at the beginning of the book:

“Spirit Animals is a computationally generated book of dances, created with Processing 3, an open-source software for creative coding. The dances can be done solo or in groups, with or without music, and are meant for novices and professionals alike. They aim, though do not promise, to be physically possible.

Spirit Animals draws influence from the Fluxus art movement, John Cage’s compositions, Andy Warhol’s Dance Diagrams, and traditional instructional dance diagrams such as the Fox Trot, Tango, and Lindy Hop. The dance names are derived using a random generator combining an adjective and an animal, producing variations on the “Funky Chicken.”

I hope you’ll use Spirit Animals to dance anywhere, at any time, and with anyone. Why walk, when you can dance?”

Spirit Animals marks a new step for me towards creating participatory computational artworks and experiences. I’ve been reading and thinking a lot about the ideas of participation, interaction, and the moment of encounter. I’m very interested in artworks which create situations for people to interact in some physical manner with themselves, the world, and others around them. I’m reading about relational aesthetics, “emancipated spectatorship” and the writings of Claire Bishop, Nicholas Bourriard, Roland Barthes, and Umberto Eco. Conceptually, Spirit Animals is hopefully fun, silly, and has a low barrier to entry for anyone to pick up the book and play. I like that this book/PDF format is easily distributable, and doesn’t require any technology to “perform.” Spirit Animals is also a visual experiment in computationally generated movement patterns. Secretly/not so secretly I have a wild desire to be a choreographer – and have a long history of collaborating with dancers and performers. However, not being a dancer, I’m a bit hopeless at actually creating the choreography, so I enjoy the “computer as collaborator” aspect of the dance creation here. I’m not sure where this goes, but I’m interested in exploring these ideas further.

In terms of the technical aspects of creating this book – let me count the ways….. First of all, this is by far the most complex and longest program I’ve ever written. Still being a beginner with coding and Processing, this was actually a mammoth task. I’ve learned a lot, and feel that the biggest technical skill I worked on here was just graphical – generating the foot patterns and figuring out the layout that made the most sense, and making those pesky curved arrows go where they should. I definitely didn’t work with Basil.js or InDesign but did put some of the text pages together in Illustrator. Rita.js is interesting to me, but will have to be tackled at a later date.

Here are some images from the book:

Here is the code:

// Processing 3.0x code
import processing.pdf.*;

float ax;
float ay;
float bx;
float by;
float cx;
float cy;
float dx;
float dy;

float f;
float g; 

float px;
float py;
float qx;
float qy;

int pageWidth = 72 * 8;
int pageHeight = 72 * 10;

float cellMarginX;
float cellMarginY;

int rightFoot_col = 4;
int rightFoot_row = 7;
int leftFoot_col = 4;
int leftFoot_row = 7;

final int pixelsPerInch = 72;

int nCols = 5;
int nRows = 7;
int nSteps = 7;

float cellSpaceW = pageWidth / nCols;
float cellSpaceH = pageHeight / nRows;

final int gridLineWidth = 3;

IntList usedCells;

PShape leftFoot;
PShape rightFoot;

float footScale = 0.07;
float gridMargin;
float gridWidth;
float gridHeight;
float cellWidth, cellHeight;

float leftFootWidth;
float leftFootHeight;
float rightFootWidth;
float rightFootHeight;

PFont myFont;
PFont myTitles;

int currentCell = (nRows * nCols) /2;

int cellNumber; 

int cellCol = cellNumber % nCols;
int cellRow = cellNumber / nCols;

StringList pageTitles;


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


void setup() {
  size(612, 792); // 8.5 x 11  pixelsPerInch * 8.5 and PixelsPerInch * 11

  beginRecord(PDF, "spiritanimals174.pdf");
  //PGraphicsPDF pdf = (PGraphicsPDF) g;

  leftFoot = loadShape("foot_L.svg"); 
  rightFoot = loadShape("foot_R.svg"); 

  leftFootWidth = leftFoot.width * footScale;
  leftFootHeight = leftFoot.height * footScale;
  rightFootWidth = rightFoot.width * footScale;
  rightFootHeight = rightFoot.height * footScale;

  // indent the grid by a half inch all around
  gridMargin = pixelsPerInch * 0.90;

  gridWidth = 612 - (gridMargin * 2);
  gridHeight = 792 - (gridMargin * 2);

  cellWidth = gridWidth / nCols;
  cellHeight = gridHeight / nRows;

  myFont = createFont("Helvetica", 15, true); 
  textFont(myFont); 

  myTitles = createFont ("Helvetica ", 40);
  //textFont(myTitles);

  usedCells = new IntList();

  createPageTitles();

  noLoop();
}


//---------------------------------------------------------
void draw() 
{

  background(255); // white
  drawDanceFloor();


  // dance some steps!
  usedCells.append(currentCell);

  for (int i = 0; i < nSteps; i++) 
  {
    drawLeftFootInCell(currentCell, i+1);

    int nextCell = getPossibleNextCell();
    while (usedCells.hasValue(nextCell)) 
    {
      nextCell = getPossibleNextCell();
    }

    drawLineFromCellToCell(currentCell, nextCell, i);

    currentCell = nextCell;
    usedCells.append(currentCell);

    drawRightFootInCell(currentCell, i+1);   
    nextCell = getPossibleNextCell();
    while (usedCells.hasValue(nextCell)) 
    {
      nextCell = getPossibleNextCell();
    }

    if (i < nSteps - 1) 
    { 
      stroke (0, 100, 255, 100);
      strokeWeight(2); 
      drawLineFromCellToCell(currentCell, nextCell, 1);

      currentCell = nextCell;
      usedCells.append(currentCell);
    }
  }
  textAlign(CENTER);
  fill(0);
  textFont(myTitles);
  text(pageTitles.get(0), 306, 65);
  println(usedCells);

  //textFont(myTitles, 75);
  fill(0);

  endRecord();
}

//---------------------------------------------------------
void drawLeftFootInCell(int cellNumber, int numberToDraw)
{
  int cellCol = cellNumber % nCols;
  int cellRow = cellNumber / nCols;

  float drawLX = (cellCol * cellWidth) + (cellWidth / 2) - (leftFootWidth / 2) + gridMargin;
  float drawLY = (cellRow * cellHeight) +  (cellHeight / 2) -  (leftFootHeight / 2) + gridMargin;

  shape(leftFoot, drawLX, drawLY, leftFootWidth, leftFootHeight);
  fill(0); 
  text (numberToDraw, drawLX - 10, drawLY + 40);
}

//---------------------------------------------------------
void drawRightFootInCell(int cellNumber, int numberToDraw)
{
  int cellCol = cellNumber % nCols;
  int cellRow = cellNumber / nCols;

  float drawRX = (cellCol * cellWidth) + (cellWidth / 2) - (rightFootWidth / 2) + gridMargin;
  float drawRY = (cellRow * cellHeight) +  (cellHeight / 2) -  (rightFootHeight / 2) + gridMargin;

  shape(rightFoot, drawRX, drawRY, leftFootWidth, leftFootHeight);
  fill(0); 
  text (numberToDraw, drawRX - 10, drawRY + 40);
}

//---------------------------------------------------------
void drawLineFromCellToCell(int fromCell, int toCell, int whichStep)
{
  float fromCellX = topOfCellXCoordinate(fromCell); // ax
  float fromCellY = topOfCellYCoordinate(fromCell); // ay
  float toCellX = topOfCellXCoordinate(toCell); // dx
  float toCellY = topOfCellYCoordinate(toCell); //dy

  float fromCellX_qx = lerp(fromCellX, toCellX, 0.3333); // px
  float fromCellY_qy = lerp(fromCellY, toCellY, 0.3333); // py
  float toCellX_px = lerp(fromCellX, toCellX, 0.6666); // qx
  float toCellY_py = lerp(fromCellY, toCellY, 0.6666); // qy

  float tx = toCellX-fromCellX;
  float ty = toCellY-fromCellY;
  float th = sqrt((tx*tx) + (ty*ty));


  f = 0.13; 
  g = 0.11; 
  if (whichStep%2 == 1) {
    f = 0-f;
  }
  if (whichStep%2 == 1) {
    g = 0-g;
  }
  if (th < cellSpaceW) { f = g = 0; } println("Hey: " + whichStep + " " + th + " " + cellSpaceW); ax = fromCellX; ay = fromCellY; bx = fromCellX_qx - f*ty; by = fromCellY_qy + f*tx; cx = toCellX_px - g*ty; cy = toCellY_py + g*tx; dx = toCellX; dy = toCellY; // direction-sensitive offsets to the line coordinates float offsetx = 15; float offsety = 30; if (tx > 0) { // then I'm going from Left to Right
    ax += offsetx; 
    dx -= offsetx;
  } else if (tx < 0) { // then I'm going from right to left ax -= offsetx; dx += offsetx; } else { // tx == 0 if (ty > 0) { // going down
      ay += offsety;
      dy -= offsety;
    } else if (ty < 0) { // going up ay -= offsety; dy += offsety; } } float sepY = 5; if (ty > 0) { // going down
    ay += sepY;
    dy -= sepY;
  } else if (ty < 0) { // going up ay -= sepY; dy += sepY; } boolean bDrawColoredEllipses = false; if (bDrawColoredEllipses) { float eR = 7; noStroke(); //stroke(0,0,0); strokeWeight(1); fill(255, 0, 0); // A = red ellipse(ax, ay, eR, eR); fill(0, 255, 0); // B = green ellipse(bx, by, eR, eR); fill(0, 0, 255); // C = blue ellipse(cx, cy, eR, eR); fill(255, 255, 0); // D = yellow ellipse(dx, dy, eR, eR); } /* fill(255, 200, 255); // Q = light pink ellipse(fromCellX_qx, fromCellY_qy, 10, 10); fill(100, 100, 255); // P = dark purple ellipse(toCellX_px, toCellY_py, 10, 10); */ // draw the curve noFill(); stroke(255); // white strokeWeight(4); // thick beginShape(); curveVertex(ax, ay); curveVertex(ax, ay); curveVertex(bx, by); curveVertex(cx, cy); curveVertex(dx, dy); curveVertex(dx, dy); endShape(); fill(0); noStroke(); ellipse(ax, ay, 5, 5); noFill(); stroke(0, 0, 0); // black strokeWeight(1); // thin beginShape(); curveVertex(ax, ay); curveVertex(ax, ay); curveVertex(bx, by); curveVertex(cx, cy); curveVertex(dx, dy); curveVertex(dx, dy); endShape(); drawArrowhead(cx, cy, dx, dy); //line(fromCellX, fromCellY, toCellX, toCellY); } //--------------------------------------------------------- float topOfCellXCoordinate (int cellNumber) { int cellCol = cellNumber % nCols; return (cellCol * cellWidth) + (cellWidth / 2) + gridMargin; } //--------------------------------------------------------- float topOfCellYCoordinate (int cellNumber) { int cellRow = cellNumber / nCols; return ((cellRow * cellHeight) + (cellHeight / 2)) + gridMargin; } //--------------------------------------------------------- int getPossibleNextCell() { // both moveX and moveY cannot be zero - int cellCol = currentCell % nCols; int cellRow = currentCell / nCols; int moveX = (round(random(-2, 2))); while ((moveX + cellCol >= nCols) | (moveX + cellCol < 0)) { moveX = (round(random(-2, 2))); } int moveY = (round(random(-2, 2))); while ((moveY + cellRow >= nRows -1) | (moveY + cellRow < 0)) 
  {
    moveY= (round(random(-2, 2)));
  }

  if (moveX == 0 && moveY == 0) 
  {
    // arbitrary
    if (cellCol <= 5) {
      moveX = 3;
    } else {
      moveX -= 2;
    }
  }

  cellCol = cellCol + moveX;
  cellRow = cellRow + moveY;

  return cellRow * nCols + cellCol;
}

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

void drawArrowhead(float fromCellX, float fromCellY, float fromCellX_halfway, float fromCellY_halfway) {
  float hx = fromCellX_halfway - fromCellX; 
  float hy = fromCellY_halfway - fromCellY; 

  float len = dist(fromCellX, fromCellY, fromCellX_halfway, fromCellY_halfway);
  float dh = sqrt(hx*hx + hy*hy); //same!
  float ang = atan2 (hy, hx); // hY first!! just is. 
  if (abs(hx) < 0.0001) {
    ang = 0-ang;
  }

  float arrowSize = constrain(len/4, 10, 20); 
  pushMatrix(); 
  translate(fromCellX_halfway, fromCellY_halfway);
  rotate(ang + radians(70)); 
  line(0, 0, 0, arrowSize); 
  popMatrix(); 
  pushMatrix(); 
  translate(fromCellX_halfway, fromCellY_halfway);
  rotate(ang - radians(70)); 
  line(0, 0, 0, -arrowSize); 
  popMatrix();
}



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

void drawDanceFloor()
{
  stroke(255, 255, 255, 30); 
  strokeWeight(gridLineWidth); 

  // draw horizontal lines
  // number of lines  draw are (nRows + 1)

  // set initial draw point
  float drawX = gridMargin;
  float drawY = gridMargin;

  println(cellHeight);

  for (int row = 0; row <= (nRows + 1); row++) {
    line(drawX, drawY, drawX + gridWidth, drawY);
    // bump drawY down to next row
    drawY += cellHeight;
  }

  // draw vertical lines

  // set initial draw point
  drawX = gridMargin;
  drawY = gridMargin;

  for (int col = 0; col <= (nCols + 1); col++) {
    line(drawX, drawY, drawX, drawY + gridHeight);
    // bump drawY down to next row
    drawX += cellWidth;
  }
}

// animals and adjectives collected at random from https://github.com/dariusk/corpora/ with 7 numbers generated by random.org integer generator
void createPageTitles()
{
  StringList myAnimals = new StringList(new String[]{"cougar", "elk", "skunk", "tapir", "whale", "wolf", "newt"});
  StringList myAdjectives = new StringList(new String[]{"vaulting", "sparing", "one-eyed", "gleaming", "doctrinal", "designing", "brimstone"});

  pageTitles = new StringList();
  for (int k=0; k < nSteps; k++)
  {
    String animal;
    String adjective;
    if (myAnimals.size() == 1)
    {
      animal = myAnimals.get(0);
      adjective = myAdjectives.get(0);
    } else
    {
      int randomAnimal = (int)random(myAnimals.size());
      animal = myAnimals.get(randomAnimal);
      myAnimals.remove(randomAnimal);
      int randomAdjective = (int)random(myAdjectives.size());
      adjective = myAdjectives.get(randomAdjective);
      myAdjectives.remove(randomAdjective);
    }

    pageTitles.append(adjective + " " + animal);
  }

  println(pageTitles);
}
Written by Comments Off on Anson-Book Posted in Book

Zarard-Book

PDF Download of The Faces of Teenie Harris

Teenie Harris was a leading African-American photographer and photojournalist, who was active in Pittsburgh from the ~1940s-1970s. Through my internship at the Carnegie Museum of Art, I’ve been lucky to have access to the museum’s large database of Teenie’s photographs.

This book is catalog of all the faces in a (small but representative) sample of 2000 photos from the photographer Teenie Harris. I used the dataset of photos and a JSON output of a facial detector to isolate all the faces in each image; compute the brightness of each face photo; and sort the faces by brightness. The effect was a book that goes from dark to light, eventually fading into the background color of the page.

Most of my process was oriented around creating the code to generate the book. At first I needed to figure out how to retrieve all of the pixels that contained the face, so i used the bounding box that the face detector’s JSON output gave me. Then for each set of pixels I created a face object with the original size, the pixels, and the brightness. When creating the new face object I had to resize each face to a standard 20 pixels by 20 pixels. Then I sorted each face object by brightness. Then I looped through the sorted faces to create grids of faces that looks like this:

screen-shot-2016-10-31-at-12-27-44-pm

What I discovered was that the charm of the book wasn’t really the gradient but all of the variation within the gradient: the hidden pockets of light and shadow, the variation in face orientation, the expressions that deviate from the traditional portrait smile, and the occasional (and very rare), misclassified “face”. My inspiration for doing stemmed from the practice of of african americans lightening their photos to look “light-skin” or “passing white”. At first I wanted to see if I could catch any hint of that through sorting the faces, but then I realized i had no way of knowing the actual skin tones of the people in the photo versus the exposure that he used.

All things considered, I think this was a successful project. If i were to change anything, i’d probably make the book double-sided instead of flip book style. Additionally I would run the script on the full dataset of images (which i did not have at the time) instead of a sample. Also I struggled a lot with sorting because I couldn’t figure out how to bring in built in java libraries, and so i implemented quicksort which gave me a lot of bugs, so in retrospect I would’ve just asked someone for help sooner.

 

 

Written by Comments Off on Zarard-Book Posted in Book

Guodu-LookingOutwards07

Nick Felton // Computational Information Visualization

far14_101415a-1-1-1024x640 2014 Annual Report

Nick Felton, or Feltron, is a data visualizer who is known for his personal annual reports of mapping his self-tracked data (how much sleep he gets, how much he codes, where he’s been, how many pictures he’s taken etc.).

I was almost going to write about his annual reports and just how much I appreciate the fact that he has not only visualized data but aesthetically visualized data, but I think this is plain obvious after exploring his website. Feltron has both a code and design sensibility. He’s really the middle man between designers who can’t code and coders who can’t design. Goals.

PhotoViz Book

screen-shot-2016-10-30-at-9-56-39-pm

I then became really interested in PhotoViz, another project that was just released in May 2016 that explores the intersection of photography, infographics, and data visualization. Trying to find out what’s inside the book, I think it’s more of a collection of other people’s work, and I’m not sure if Felton included any of his own projects related to photographic data viz. I’ll have to purchase the book to find out.

What’s fascinating is that with the proliferation of smartphones and thus amateur photographer with selfie taking abilities, people aren’t just taking photos at one decisive moment where they are limited to only 10 shots, they are taking many photos because they have cloud or 128gb of storage and need. There’s even cameras that are persistent cameras, meaning they can take a picture every few minutes for let’s say a month or year. It’s almost like surveillance and it’s meant to document rather than to artistically frame a shot. “In 2015, people around the world took a staggering 1 trillion photographs, according to research firm InfoTrends. By 2017, 4.9 trillion images will be stored online” (source). This opens up a lot of conversations about what to do with all this data and how to tell the story or identity that this data represents.

The overlap between photography and data visualization is blurry, and that’s what PhotoViz is.

photography <———–> data visualization <———–> code

Photography can successfully visualize data, like the cover of the book where all the planes within a 6 hour timeframe fly through LAX, but it isn’t necessarily grounded in code. In fact, the photographer painstakingly photoshopped each airplane. Photomontages of Olympic athletes also help visualize the unseen, the steps that go into a blink of the eye routine. Yet photoshop can also be used or photomontage softwares. Overall, I found a handful of examples of the books that have striking visuals, but I can’t tell which one’s were created through code or by hand, except for Tega Brain’s project. Either way, I think PhotoViz is going to be a thing soon.

screen-shot-2016-10-31-at-1-30-30-am Simone Biles Photomontage photoviz_dylanmason_p032-033 365 Selfies, Dylan Mason

screen-shot-2016-03-24-at-2-40-00-pm-e1458854519898

Singapore Sunset, 2016. All Rights Reserved. Singapore Sunset, 2016 screen-shot-2016-10-31-at-1-49-59-am “Since early 2008, roughly 40 million images have been uploaded to Flickr® every month making a rich, ever-growing digital collection that documents a vast range of human experience including our observations of other species. Keeping Time is made from over 5000 of these photos taken during the years 2002-2013.” (Tega Brain)

_____________

More on PhotoViz in this 30 min vid … Nick talks about his conception of Photoviz: here

There was a particular line that Felton said that struck me, “I think of data as the new wood, as a material. Historically designers worked with text and image, but now that’s not enough, you have to play with data. It’s like wood, you can use it in many different and precise ways.”

It made me think about what being a designer will be like in the next 50 years. It used to be the letterpress, and now, it’s data viz, what’s the next medium?

screen-shot-2016-10-31-at-12-45-45-am-copy

 

 

Ngdon-Visualization

Number of Rents and Returns during Weekdays and Weekends

snip20161102_1

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

snip20161102_3

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

snip20161104_10

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"); 

    });
  });


});


Aliot-Book

My book is called “What I Was Doing When You Texted Me.” It’s a personal text-photo memoir of the last two years of my life and also a look-up table for texts that my friends have sent me. It’s very personal project so my opinion is very biased, but I thought the content and the juxtaposition of certain texts and photos were very compelling. Because of the sheer amount of data I had produced, there were upwards of 20 photos/texts that were received/taken within one second of each other, so the “what I was doing when you texted me” question is very literally and accurately answered. The answer was “I was looking at this thing.” (Unsurprisingly many of the photos were screenshots, photos of my boyfriend, or selfies).

In order to generate my book, I cross referenced the time stamps of all of my photos using the EXIF metadata with the time stamps to all of my received texts. After scraping this data, I used processing to create a CSV containing all of the texts received with the photo with the closest time stamp. After ordering the data according to temporal proximity, it was easy to compile a book showcasing the information.

What I Was Doing When You Texted Me (PDF)

Table data;
Table final_data;
Table final_no_repeats;
StringList used_pics;

void setup(){
  final_data = new Table();
  final_data.addColumn("pic_file");
  final_data.addColumn("pic_time");
  final_data.addColumn("text_time");
  final_data.addColumn("text");
  final_data.addColumn("to");
  final_data.addColumn("from");

  data = loadTable("combined_pic_text.csv", "header");
  
  for (int i = 0; i<500; i++){
    for (TableRow row: data.rows()){
      if (int(row.getString("dif")) == i) {
        println(row.getString("dif"));
        String file = row.getString("pic_file");
        String pic_time = row.getString("pic_date_time");
        String text_time = row.getString("text_date_time");
        String text = row.getString("text");
        String to = row.getString("to");
        String from = row.getString("from");
        String dif = row.getString("dif");      
        
        TableRow newRow = final_data.addRow();
        newRow.setString("pic_file", file);
        newRow.setString("pic_time", pic_time);
        newRow.setString("text_time", text_time);
        newRow.setString("text",text);
        newRow.setString("from", to);
        newRow.setString("to",from);
        newRow.setString("dif", dif);
        
        saveTable(data, "data/data_sorted.csv");
      }
    }
  }
  
  saveTable(final_data, "data/data_sorted.csv");
  
  remove_duplicates();
}

void remove_duplicates(){
  final_no_repeats = new Table();
  final_no_repeats.addColumn("pic_file");
  final_no_repeats.addColumn("pic_time");
  final_no_repeats.addColumn("text_time");
  final_no_repeats.addColumn("text");
  final_no_repeats.addColumn("to");
  final_no_repeats.addColumn("from");
  final_no_repeats.addColumn("dif");

  for (TableRow row: final_data.rows()){
    String file = row.getString("pic_file");
    if (!used_pics.hasValue(file)){
      used_pics.append(file);
      TableRow newRow = final_no_repeats.addRow();
      newRow.setString("pic_file", row.getString("pic_file"));
      newRow.setString("pic_time",  row.getString("pic_time"));
      newRow.setString("text_time",  row.getString("text_time"));
      newRow.setString("text", row.getString("text"));
      newRow.setString("from",  row.getString("from"));
      newRow.setString("to", row.getString("to"));
      newRow.setString("dif",  row.getString("dif"));
    }
  }
}
Written by Comments Off on Aliot-Book Posted in Book

kadoin-lookingOutwards06

Nora Reed makes a lot of pretty funny twitterbots that sit at the intersection of trolling and satire. Here are a few samples from different bots she’s made:

capture

capture1 capture2

 

But the bot that takes the cake is Carol, a bot that tweets ridiculous conservative Christian-like phrases in an attempt to troll stuck up internet atheists.

And people actually took this bot for a human being, got angry with it, and started twitter fights. All the bot could do was tweet back generic responses, which made people even angrier because their points weren’t getting through to her.

As funny as it is, with groups of people like the Westboro Baptist Church and other pretty extreme organizations always spewing stuff like this unironically, Carol is pretty convincing, and as outrageous as the things she says are, the people that interact with her also come across as pretty pathetic. Fights with strangers over the internet can be funny, but no one wants to be the guy who’s actually a part of it.

 

 

Catlu – LookingOutwards06

A pair of bots I really liked were Thricedotted’s The Rhymin’ Riddler, and the Riddler’s Apprentice. The Rhymin’ Riddler posts riddles that always start off with “What do you call a…” and then the other bot the Riddler’s Apprentice will respond with an answer to that riddle that will rhyme. One thing I like about these bots is how funny they are. Often, the answers to the riddles make more sense than I expect them to, all while rhyming. I like that there are two bots that interact with each other. I think the idea of bot interaction is really nice, because even though the twitter accounts are just bots, they seem to take on more personality when there’s plausible interaction between the two, and the tweets seem mysteriously more intriguing automatically. It’s funny how you can almost see the relationship between the riddler and the apprentice.

joke2

joke3

riddle

cambu-lookingoutward06

pixelsorter

For my bots investigation, I looked mainly at visual-computational bots that consume an image and reply with a manipulated version. My favourite one of these bots was @pixelsorter (see above results), but I also just Img Rays, Img Shredder, and IMG2ASCIII particularly enjoy two aspects of these types of bots: 

  1. That you send a tweet and then know you will get a reply within a 30-90 seconds, in contrast to how Twitter is normally used (when you don’t know whether or not someone will reply), this is interesting.
  2. But, you don’t know what it will be and the waiting period makes it such that it’s hard to brute force out an understanding of the algorithm.

Together, this created an interesting human-like interaction that a lot like talking to a real person on twitter. checking out  Unfortunately, sometimes the bots didn’t reply, which was very depressing.

A few other fun things I came across while exploring:

Guodu-LookingOutwards06

screen-shot-2016-10-30-at-6-05-30-pm

At first I looked at Every Color (@everycolorbot) and was astonished by the number of followers (90.7K!!!!!! that’s way more than Carnegie Mellon’s 39.6K followers @CarnegieMellon) it had for simply tweeting a few random colors throughout the day. Maybe I am not excited about colors as these followers are. Continuing to investigate, I found what I think is a much more interesting color bot: ColorSchemer @colorschemez

screen-shot-2016-10-30-at-6-01-42-pm

“I’m trying to find colors that go well together. I’m probably not very good at it because I’m a robot with no sense of style.”

Having just a small introduction in first person makes the bot more interesting and makes it seem like there’s more meaning behind these random color choices. Then the additional random adjectives that go with the colors produces some humorous content. Comparatively to the Every Color bot, I find this ColorSchemer bot more entertaining and something I’d subscribe to. The screenshots below are some of my favorite descriptions and/or color combinations. Avocado Sanstone…really? 😉

screen-shot-2016-10-30-at-6-04-44-pm screen-shot-2016-10-30-at-6-04-28-pm screen-shot-2016-10-30-at-6-04-01-pm screen-shot-2016-10-30-at-6-03-48-pm screen-shot-2016-10-30-at-6-03-12-pm screen-shot-2016-10-30-at-6-02-24-pm

 

 

 

Jaqaur – Looking Outwards 06

MOVIE SCRIPT CAPS

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.

screen-shot-2016-10-29-at-9-34-09-pm

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.

screen-shot-2016-10-29-at-10-19-36-pm

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.

cambu-book

the-book

Description

This small square book tells the story of my summer in Los Angeles in 2014. After sophomore year of high school, I flew from Toronto, ON to live with extended family in LA while working at a small ‘startup’ company. The data to plot these moments of my summer was retrieved from Google’s location tracking database (https://myactivity.google.com) and chosen in a semi-computational manner that involved a non-perfect human input system.

Process

Going into this project, I knew I wanted to work with maps and location data. I’d been playing around with Mapbox Studio and I wanted an excuse to really dig into it. The next ingredient was to use my personal location data from Google My Activity — this made it easy for me to export all of my location data as a massive JSON blob. My initial idea revolved around using that data in conjunction with some longitude/latitude math to trace a line through the earth and create a book that had my location(s) and the projected location(s) of a doppelganger version of me in a different city.

I decided against this direction in the end because I wasn’t convinced there was any particular meaning to tracing a direct (or even canted/distorted line) through the planet. In the end, I decided to focus more on the exploration of my own data instead of trying to make artificial juxtapositions. See the below image for more process of the project.

process

Self-Evaluation

For me personally, looking at the book has a lot of meaning and feels very ‘deja vu’-ish because I can viscerally remember being at all of the highlighted locations. It also has a deep ‘uncanny valley’ feeling because, of course, the images are from Google street view and not things I personally captured — but, I can imagine having captured something similar. After all, I was there!

That said, something I didn’t account for when starting with the idea of using my personal location data was that it wouldn’t have the same meaning to other people. All of the psychological triggers that are working on me just aren’t being experienced the same way by other people. If I were to iterate further on this concept, I would create a fully automated pipeline for taking anyone’s location data + selected date range and converting that into their own book. I think then people would be able to feel the same way I did about my book.

Video

Here’s a video of Professor Levin flipping through my book:

Full Book

Code

python node transformer app:

import json
from datetime import datetime as dt

# JSON LOAD
myFile = open("LocationHistory.json")
# myFile = open("testLocHist.json")
js = json.load(myFile)
#js = [2012,2013,2014,2015,2016,2017]

# Vars 
nLocations = len(js["locations"])
deleteIndexes = set() #must be a set so it be be easily indexed, gautam bose (andrew: gbose) helped me with the logic behind switching this from a list to a set

print("years in main loop: ")
for i in range(nLocations):
    curTimeStamp = js["locations"][i]["timestampMs"]
    #print(curTimeStamp)
    ## converting milliseconds to seconds   
    humanDate = dt.fromtimestamp(float(curTimeStamp)/1000.0)
    #print(humanDate)
    curYear = humanDate.year
    curMon = humanDate.month 
    curDay = humanDate.day

    #print(str(curMon) + " " + str(curDay))

    if curYear == 2014:  # if the condition is met, the items will be deleted
        # keep these
        # print(curYear)
        if curMon >= 7 and curMon <= 8: #print(curYear) if curMon == 7: if curDay >= 12:
                    pass
                    #print("locked")
                    #print(humanDate)
                else:
                    deleteIndexes.add(i)

            if curMon == 8:
                if curDay <= 18:
                    pass
                    #print("locked")
                    #print(humanDate)
                else:
                    deleteIndexes.add(i)
        else:
            deleteIndexes.add(i)
    else: 
        deleteIndexes.add(i)
    #@Cam added this conditional to remove a brief trip to SF

    if js["locations"][i]["latitudeE7"] < 350000000: pass else: # print('case1') deleteIndexes.add(i) # print("## start delete loop from ##") # print(deleteIndexes) # print("w/ LENGTH OF ---> ")
# print(len(deleteIndexes))
# print("______")



### PERCENTAGE GUESSOR 
# print(nLocations)
# print("&&")
# print(deleteIndexes)

for x in range(nLocations, 0, -1):
    print(x)
    if x in deleteIndexes:

        del js["locations"][x]

##### CHECKER LOOP
# for y in range(len(js["locations"])):
#     curAgTimeStamp = js["locations"][y]["timestampMs"]
#     # print(curAgTimeStamp)

#     print(dt.fromtimestamp(float(curAgTimeStamp)/1000.0))


open("updated-file.json", "w").write(
    json.dumps(js, sort_keys=True, indent=4, separators=(',', ': '))
    )



# print(deleteIndexes)
# print(js["locations"])
# date = {}

# date = datetime.fromtimestamp(int("unixTimeVar"))
# year = date.year
# hour = date.hou∫∫r∫

##date.year
##etc. unpack 
# #print("a total of" + nLocations + "exist in this JSON File") #TypeError: Can't convert 'int' object to str implicitly
# print("Locs:")
# print(nLocations)
#print(curYear)
#print(huma  nDate.year)ss
# year = humanDate.year
# print(js["locations"][0]["timestampMs"])
# print(js["locations"][1]["timestampMs"])

javascript web app to call APIs and download images to local directory:

A Simple Map












 

 




//Load JSON File
var locations = [] // all data

window.onload = function rdy() {
    newMapImage(34.1187624,-118.2751063,12,640,640)
    newStreetImage(34.1187624,-118.2751063,640,640, 90, 235, 10)
  }

var i = 0;
function again(jumpVal, newHeading) {
    var longitude = locations[i][0];
    var latitude = locations[i][1];
    var zoom = 12 //locations[0][2]
    var width = 640;
    var height = 640;
    var fov = 90;
    var S = null;
    var pitch = 10;

    if (newHeading == null) {
        var heading = 235;
    } else {
        var heading = newHeading;
    }

    if (S == null) {
      newMapImage(longitude,latitude,zoom, width, height, 0);
      newStreetImage(longitude,latitude, width, height, fov, heading, pitch, 0);
    } else {
      newMapImage(longitude,latitude,zoom, width, height, 1);
      newStreetImage(longitude,latitude, width, height, fov, heading, pitch, 1);
    }



    console.log(longitude + " " + latitude)
    console.log(i + " / " + locations.length)
    //setTimeout(function(){alert(i)}, 500);
    // newMapImage(longitude,latitude,zoom, width, height, save);
    // newStreetImage(longitude,latitude, width, height, fov, heading, pitch, save);
    i = i + jumpVal;


}

function newMapImage(long, lat, zoom, width, height, save) { // map image
  var linkMap = "https://api.mapbox.com/styles/v1/mapbox/streets-v9/static/" + lat + "," + long + "," + zoom + "/" + width + "x" + height + "?access_token=pk.eyJ1Ijoic3VwZXJjZ2VlayIsImEiOiJjaWZxMzV6NnFhb3pjaXVseDQ1dm84Z2RkIn0.T5qZqiB_JanRezs012Zppw";
  document.getElementById('myMap_image').src = linkMap;
  document.getElementById('myMap_link').href = linkMap;
  // document.getElementById('myMap_link').download = 1
  if (save == 1){document.getElementById('myStreetView_link').click();}
}

function newStreetImage(long, lat, width, height, fov, heading, pitch, save) { // street image
    var link = "https://maps.googleapis.com/maps/api/streetview?size=" + width + "x" + height + "&location=" + long + "," + lat + "&fov=" + fov + "&heading=" + heading + "&pitch=" + pitch + "&key=AIzaSyAAhrTirgQBQJH88rpw6LpOfp3oMRTMzqg";
    document.getElementById('myStreetView_image').src = link;
    document.getElementById('myStreetView_link').href = link;
    // document.getElementById('plugBoi2').download = 1
    if (save == 1){document.getElementById('myStreetView_link').click();}
}



map




street






Written by Comments Off on cambu-book Posted in Book

kadoin-Book

Poetry for Robots by Robots

cover

By combining some Shakespeare and computer user guide manuals in a Markov chain generator, the pages on the left of this book are a series of rhyming couplets that don’t always make much sense, but every once in a while says just the right thing to make that special robot swoon. The pages on the right, when flipped through quickly, show a handsome bot falling in love.

Sees the world through rose tinted receivers and transmits the waveforms of the words "I love you." Robot sees the world through rose tinted receivers and transmits the waveforms of the words “I love you.”

PDF of book here:

botbook PDF

botBook Code

Written by Comments Off on kadoin-Book Posted in Book

Drewch – Book

Inspired by The Tower of Babel, I decided to make a stream of letters, some more legible than others, that make out a poem of sorts that I wrote. Can this really mean anything, since the legible letters are still part of this incoherent stream? Can you actually know what this poem means?

binder2-1binder2-3binder2-2

Processing code (at Github): https://github.com/AndyChanglee/60-212/tree/readme-edits/banner

The book as a PDF: ./wp-content/uploads/2016/10/drewch_book.pdf (48 MB)

P.S. I’ve had bad run-ins with making books, especially with inDesign and Adobe products in general. This project was really taxing and I ended up not making a physical book because it was too expensive.

Written by Comments Off on Drewch – Book Posted in Book

Guodu-Book

Alphabet Fonts 

hold hands open

 

dsc02378_1

dsc02434

PDF Version

Final: AlphabetFonts.pdf

My book is about introducing fonts alphabetically. Start your baby early 🙂

Here’s a video of Golan flipping through my book.

On the right page there are 3 randomly generated alphabetical letters of different fonts and on the left is the names of those fonts. I thought it would be interesting to not make it extremely apparent which font matched with each letter so the letters are randomly placed with a slight change in opacity and either being white, transparent white, or transparent black. In this way, I hoped that the difficulty of matching the letters would prompt people to observe the letters more closely and see the subtle or extreme differences.

My own experience to getting into typography and the nuanced differences between fonts and their history was through examining fonts up close. I would print the same letter but of different fonts at 600+ pt on paper because it was easier to trace and note their differences when the fonts are so big.

example Things to observe and learn when you start becoming a type nerd

Inspiration

I became really interested in how to better display the randomization of my font library after Marius Watz‘s awesome demo on Basil.js for scripting InDesign. I began searching baby alphabet books and was inspired by the illustration style of Anna Kövecses, a Hungarian graphic designer. Anna also made the alphabet book of 44 Hungarian letters (pictured below) for her 4-year old daughter.

il_570xn-754715927_qqvq Baby Alphabet Book anna-kovecses_hungarian-alphabet Anna Kovecses’s Hungarian Alphabet Book

Process + Sketches

20161029_145747 Initial Ideas for an ABC book 20161029_150208 Hand Binding Notes draft Experimenting with the appearance, opacity, and number of letters process Hand Binding in Progress

 

Self Evaluation/Future Iteration

  • I would like to make the fonts actually be presented alphabetically. For instance the letter A should have 3 different types of fonts starting with A, like Avenir, Arial, and American Typewriter. I ran into a small problem of actually not having a few fonts starting with certain letters or just not having at least 3 (J, Q,  U, V, X, Y). I’m going to need to download some fonts to make this work…but going to make this happen! I regret that I didn’t figure out how to make this happen for this iteration.
  • Definitely going to have an outside printing service print my book (Espresso, Blurb etc). While it was fun learning how to hand bind and having control over the quality of paper and color, it was definitely laborious and I think even contradictory to the limitless/endless iterative quality of generative books.
  • I still want to explore the composition and placement of the letters of the right page. Right now I have random placement of letters / colors = white, transparent, and transparent black. I’m not convinced this is the best way to represent the letters because there’s not a whole lot of meaning behind it other than it looks pretty. While the random placement produces some interesting compositions, sometimes it is really off.
  • For the left page, I am thinking of adding more text like what does the font look like from A –> Z instead of just naming the font. Use Rita.js or Temboo…what about a simple sentence or phrase where every word of it starts with the letter (An Ant, Big Bunny, Crazy Corn etc) or just #ahhhhh #bae #cool. Overall, I’d like to strike a balance between randomization/generated and a well composed book.
  • Do people feel like I just did this by hand in InDesign, no scripting? or is it obviously programmed? or both?

Code 
Having some trouble embedding syntax-colored code (WP-Syntax plugin). So here’s p5.

upload

 

#includepath "~/Documents/;%USERPROFILE%Documents";
#include "basiljs/bundle/basil.js";

//many thanks to Golan and Marius for the demos 
var jsonString = b.loadString("alphabet.json");
var jsonData;

function draw() {

    b.clear(b.doc()); // clears previous output

    var numOfLetters = 3; //numOfLetters generated on colored page
    var fonts = app.fonts; //object of all fonts
    var fontOpacity = 60;
    var fontInfoSize = 15;
    var fontSize = b.width-100;
    var margin = b.width*.1;
    b.println(fonts);
    b.println("font length"+app.fonts.length);

    //yay colors
    var fontColor1 = b.color(0,0,0); //black
    var fontColor2 = b.color(255,255,255); //white
    var backgroundColor1 = b.color(243, 173, 0); //yellow
    var backgroundColor2 = b.color(234, 158, 147); //pink
    var backgroundColor3 = b.color(50, 160, 255); //blue
    var backgroundColor4 = b.color(216, 66, 30); //red
    var backgroundColor5 = b.color(27,177,91); //green

    jsonData = b.JSON.decode(jsonString);

    //Cover Page
    for (var i = 0; i0){ 
                b.opacity(printLetter, fontOpacity); 
            }
            //textframe resize to content
            printLetter.fit(FitOptions.FRAME_TO_CONTENT);

            //left page fontInfo
            //what font is it?
            var posX = -b.width + 54;
            b.textAlign(Justification.LEFT_ALIGN);
            b.fill(fontColor1);
            b.textSize(12);
            var fontInfo = b.text(fontName, posX, posY, b.width*.5,36);
            fontInfo;

            //leading 
            posY = posY + 24;
        }
    }
    //Back Cover
     b.addPage();
    for (var i = 0; i
					
					
			
Written by Comments Off on Guodu-Book Posted in Book

Ngdon-LookingOutwards06

LookingOutwards06 – The Art Assignment Bot

snip20161028_14

The art assignment bot generates random art assignments with requirements and due dates. When reading through them imagining what I would probably make for each of the assignments, I found that some of them are actually projects that could be potentially very meaningful.

Since the bot randomly mixes up very different subject, mediums and techniques so the results always sound weird and artsy. I find this kind of a satire of real world art assignments.

The concept is also particularly interesting. Usually, such as in this class, artists give assignments to computers to make art for them. However, the situation is reversed with art assignment bot: artists, who are usually considered the most free and creative people, are now getting assignments from a bot, which is not even capable of understanding art. It really makes me think about what art is and what a machine can do.

https://twitter.com/artassignbot

arialy-lookingOutwards06

https://twitter.com/nytminuscontext

nytminuscontext

 

I can hardly believe these are actual quotes from the New York Times. They’re all gold tweets. I’m not sure if they’re literal quotes or markov generated text, but it seems like they’re quotes. I’m having a hard time thinking of any context this would fit in. The image of the New York Times and these tweets are so off that they’re pretty fascinating to read through.

 

takos-LookingOutwards06

https://twitter.com/MagicRealismBot

mrb1mrb3wrb2

I really liked magic realism bot, because It’s weirdly calming and makes an abstract sort of coherence. It makes a sentence or two that describes a scenario, a concept, or just an event. I think the profile picture of this account is what really allows it to excel because it places you in the past, instead of looking at the posts as current, you can see them as sort of abstract literature with a sort of confidence and sense that it has stood the test of time. The tweets are also thought-provoking, and really just paints a picture of a sort of abstraction of the world and they are all very satisfying in terms of content and coherence. This also sort of read as newspaper headlines, or clickbait articles with stature.

For example, one tweet reads “A man disguised as a camel is roaming the streets of Manchester. It keeps repeating one word: ‘Telephones.’ ” . This makes sense, like, it probably wouldn’t happen, but it is not unimaginable, and in fact, if that did happen it would either be funny or completely terrifying, but it’s interesting to consider the different implications of the texts and the different ways the events described could be happening. This works as a stand-alone story, but also provides the possibility for more.

arialy-book

I wanted to make some fun random milkshake ingredients with a hint of nonsensical evil. At first I was going to just have normal ingredients mixed with things like “1 cup from the blood of your enemies.” After finding milkshake recipes that actually had instructions, I decided to have actual recipes with unnecessarily emotional directions. After running the code, I found that some of the directions read more sweet (since many of the hate letters were love hate letters). The contrast of either love or hate with the cooking instructions was an entertaining idea to me.

I generated my book using Processing code. The milkshake names are randomly generated from a list of negative adjectives. The ingredients are random milkshake ingredients, and the directions are a markov chain from the Rita library combining hate letters from the internet and milkshake recipes. The book definitely would’ve benefitted from some sort of images, perhaps just images from #milkshake from instagram. There was also an extreme lack of coherence. Perhaps if I’d had more recipes and hate letters I would’ve been able to tweak the markov chain to make more grammatically-correct sentences (that still had the strange mix of recipe + hate letters). The ingredients also could’ve been more entertaining with a couple strange ingredients added. I’m having a hard time accessing the end result of my book, since nothing seems very funny after reading several iterations of the code.

img_1434 img_1436

arialybookgif

Cover PDF:

aricover

Contents PDF:

arialybook

Cover Code:

import processing.pdf.*;
PImage img;
ArrayList points = new ArrayList();
int index = 0;
float[] milkshake = {104.0, 364.0, 98.0, 367.0, 90.0, 372.0, 82.0, 377.0, 78.0, 381.0, 74.0, 386.0, 74.0, 393.0, 74.0, 398.0, 78.0, 405.0, 88.0, 410.0, 98.0, 415.0, 104.0, 416.0, 113.0, 417.0, 122.0, 418.0, 131.0, 418.0, 141.0, 418.0, 148.0, 418.0, 156.0, 417.0, 163.0, 416.0, 174.0, 414.0, 185.0, 408.0, 191.0, 404.0, 197.0, 399.0, 199.0, 394.0, 198.0, 389.0, 196.0, 383.0, 182.0, 374.0, 168.0, 371.0, 165.0, 364.0, 168.0, 352.0, 202.0, 167.0, 204.0, 162.0, 203.0, 134.0, 202.0, 125.0, 76.0, 125.0, 201.0, 123.0, 198.0, 117.0, 196.0, 109.0, 188.0, 101.0, 183.0, 102.0, 177.0, 95.0, 175.0, 88.0, 176.0, 94.0, 180.0, 61.0, 180.0, 57.0, 177.0, 52.0, 147.0, 12.0, 144.0, 10.0, 139.0, 12.0, 139.0, 18.0, 171.0, 60.0, 168.0, 61.0, 168.0, 65.0, 168.0, 81.0, 165.0, 82.0, 160.0, 81.0, 160.0, 85.0, 156.0, 83.0, 144.0, 82.0, 136.0, 81.0, 136.0, 82.0, 140.0, 81.0, 139.0, 71.0, 136.0, 64.0, 130.0, 62.0, 123.0, 63.0, 127.0, 62.0, 129.0, 54.0, 126.0, 56.0, 123.0, 60.0, 123.0, 55.0, 118.0, 50.0, 117.0, 57.0, 107.0, 43.0, 107.0, 47.0, 116.0, 55.0, 113.0, 57.0, 108.0, 53.0, 106.0, 53.0, 108.0, 61.0, 101.0, 55.0, 102.0, 59.0, 98.0, 65.0, 107.0, 66.0, 104.0, 66.0, 102.0, 72.0, 100.0, 79.0, 105.0, 87.0, 96.0, 91.0, 86.0, 102.0, 85.0, 105.0, 84.0, 111.0, 81.0, 112.0, 76.0, 112.0, 75.0, 118.0, 74.0, 124.0, 69.0, 125.0, 70.0, 163.0, 103.0, 352.0, 108.0, 355.0, 105.0, 364.0};

PShape s;
PFont font;

void setup() {
  beginRecord(PDF, "everything.pdf");
  size(1000, 500);
  
  font = createFont("RalewayThin.ttf", 30);
  textFont(font);
  background(0);
  
  s = createShape();
  s.beginShape();
  for (int i = 2; i < milkshake.length; i+=2) {
    s.vertex(milkshake[i-2] + 510, (milkshake[i-1]+20));}
  

  s.endShape(CLOSE);
  shape(s, 0, 0);
  text("Emotional Shakes", 720, 300);
   endRecord();
  //exit();
}


void draw() {
  
}
void mousePressed() {
 
}

Contents Code:

import processing.pdf.*;
import rita.*;
RiLexicon lex = new RiLexicon();
PFont font;
int count = 0;

RiMarkov markov;
String line = " ";
String[] files = { "../data/cAH.txt", "../data/recipes.txt", "../data/hateLetters.txt", 
  "../data/moreMilkshakes.txt", "../data/bakingBook.txt"};
String[] ingList = {"1 large or 2 small bananas", 
  "vanilla ice cream", 
  "milk", 
  "sugar", 
  "2 1/2 cups frozen blueberries", 
  "1 1/4 cups apple juice", 
  "1 cup vanilla frozen yogurt", 
  "1/4 cup skim milk", 
  "3/4 teaspoon ground cinnamon", 
  "4 scoops vanilla ice cream or frozen yogurt", 
  "3/4 cup cold milk", 
  "1/4 cup chocolate syrup", 
  "3 maraschino cherries, stems removed", 
  "whipped topping & additional cherry", 
  "1/4 cup milk", 
  "2 scoops vanilla ice cream", 
  "1 tablespoon chocolate syrup", 
  "2 tablespoons peanut butter", 
  "3 cups vanilla ice cream", 
  "1 cup chocolate milk", 
  "3 heaping tablespoons chocolate powder", 
  "2 medium sized chocolates", 
  "3 scoops vanilla ice cream", 
  "2 tablespoons chocolate chips", 
  "1/2 banana", 
  "1 tablespoon instant coffee", 
  "2 tablespoon chocolate syrup", 
  "1 cup milk", 
  "1 teaspoon vanilla", 
  "1 cup milk", 
  "1 pkg. (4-serving size) Jello, any flavor", 
  "1 pint vanilla ice cream, softened", 
  "2 cups (480ml) vanilla ice cream", 
  "1 cup (240ml) whole milk", 
  "1/4 cup (60ml) half & half", 
  "2 1/2 tablespoons (35g) sugar", 
  "1/8 teaspoon vanilla extract", 
  "4 scoops vanilla ice cream", 
  "1 cup peaches, peeled, pitted, cut up into chunks", 
  "1 cup cold orange juice", 
  "2 strawberries (garnish)", 
  "1/4 cup milk", 
  "1 scoop lime sherbet", 
  "1 scoop vanilla ice cream", 
  "handful of ice cubes", 
  "1 cup milk", 
  "2 teaspoons vanilla syrup", 
  "1 teaspoon malted milk powder", 
  "2 scoops vanilla ice cream", 
  "1 cup chocolate or vanilla ice cream", 
  "1/2 cup whole milk", 
  "3 - 4 tablespoons chocolate syrup", 
  "1 cup milk", 
  "2 scoops of your favorite ice cream", 
  "2 tablespoons instantmalted milk powder", 
  "8 ounces chai concentrate", 
  "14 ounces vanilla ice cream", 
  "vanilla ice cream", 
  "milk", 
  "about 6-8 Oreo cookies", 
  "4 oz. canned pumpkin, chilled", 
  "1-1/2 cups cold low fat milk", 
  "8 teaspoons sugar", 
  "1/8 teaspoon cinnamon", 
  "1 teaspoon vanilla", 
  "1/3 cup frozen grape juice concentrate, thawed", 
  "1 banana, peeled and sliced", 
  "1 cup milk", 
  "1/2 cup ice cubes", 
  "1 cup milk", 
  "2 scoops vanilla ice cream", 
  "4 large fresh strawberries (or 1/2 cup frozen strawberries)", 
  "1 large banana, chopped", 
  "5 cups chocolate or vanilla ice cream", 
  "2 1/2 cup milk", 
  "1 1/4 cup canned unsweetened coconut milk", 
  "1 large pineapple, peeled, cored, chopped", 
  "5 ripe bananas, peeled", 
  "3 medium papayas, peeled, seeded, chopped", 
  "32 strawberries, hulled", 
  "1/2 cup milk", 
  "1/2 cup whipped cream", 
  "2 tablespoons cherry juice", 
  "1/2 cup ice", 
  "2 - 3 scoops vanilla ice cream or frozen yogurt", 
  "1/3 cup cold milk", 
  "3 tablespoons chocolate malt syrup", 
  "whipped cream topping"};


int x = 160, y = 240;
int ingIndex0 = int(random(0, 87));
int ingIndex1 = int(random(0, 87));
int ingIndex2 = int(random(0, 87));
int ingIndex3 = int(random(0, 87));
String hateAdj = "";
String[] hateWords;
int offset = 40;


void setup()
{
  
  font = createFont("CrimsonText-Roman.ttf", 16);
  textFont(font);
  hateWords = loadStrings("hateWords.txt");
  hateAdj = hateWords[int((random(0, 526)))];
  size(500, 500, PDF, "arialyBook.pdf");

  fill(0);
  //textFont(createFont("times", 16));

  // create a markov model w' n=3 from the files
  markov = new RiMarkov(2);
  markov.loadFrom(files, this);
}

void draw()
{ 
  PGraphicsPDF pdf = (PGraphicsPDF) g;  // Get the renderer
  
  background(250);
  text(hateAdj + "Shake", 50, 30 + offset);
  text("Ingredients", 50, 80 + offset);
  text(ingList[ingIndex0], 60, 105 + offset);
  text(ingList[ingIndex1], 60, 130 + offset);
  text(ingList[ingIndex2], 60, 155 + offset);
  text(ingList[ingIndex3], 60, 180 + offset);
  text("Directions", 50, 215 + offset);
  text(line, x+10, y+175 + offset, 400, 400);
  
  hateAdj = hateWords[int((random(0, 526)))];
  ingIndex0 = int(random(0, 87));
  ingIndex1 = int(random(0, 87));
  ingIndex2 = int(random(0, 87));
  ingIndex3 = int(random(0, 87));
  if (!markov.ready()) return;

  x = y = 50;
  String[] lines = markov.generateSentences(3);
  line = RiTa.join(lines, " ");
  if (count == 0) {
    background(255);
    textAlign(CENTER);
    text("the intersections of milkshakes and hate letters", 250, 250);
    textAlign(LEFT);
}
  if (frameCount == 42) {
    exit();
  } else {
    pdf.nextPage();  // Tell it to go to the next page 
  }
  count += 1;
}

void mouseClicked(){
  
  
}

Written by Comments Off on arialy-book Posted in Book

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