icm final: gists, etc.


the screen shot below doesn’t look like much, but it’s progress!

i’ve figured out how to get an off-canvas image to canvas by clicking on it.

i’ve also figured out how to create a new line of text when the text string length exceeds the width of the canvas.

still lots to do, like figuring out:

  • how to only render text to canvas one time—currently, you can select text as many times as you want and the new text just appears on top of the old
  • how to get text spacing right—will there only be a top line and/or a bottom line? a way to adjust text size?
  • styling the photos in a grid under the canvas and incorporating captions

Screen Shot 2015-11-29 at 7.16.37 PM

i haven’t been great at documenting my progress on this project, but here’s the mini update:

    • i put together github gists of some of the code i’m testing out. you can check them out here.
    • i tried to break down the road blocks into more manageable pieces
    • i asked for help with this stuff:

icm final: user testing

i’m making a twitter remix meme generator. it pairs a user’s twitter timeline with a set of archival images. you pick the tweet you want from the timeline, choose the archival image you want, drag the tweet onto the image, save, and share. sounds simple, but proving difficult-ish to code.

i’m interested in the medium of the meme. but i’m more interested in what can happen when we drag the present back to the past, what new things emerge when we ground our constantly updating now in history, when we acknowledge that we do in fact have and live in and are responsible for histories we did not choose. this is a political project. governments and institutions have twitter feeds where they perform the best versions of themselves. meanwhile, history has archival footage of how their actions have lined up with their stated values over time. i was intentional about pairing the twitter timeline (the israeli defense force) and archival images (palestinian refugees from 1948) i did, and the user can’t change them—can only work within them. that’s a thing about history.

user testing was today. i need better “way-finding” (for lack of a better word) on the page. people didn’t know whether they were supposed to pick a twitter user or hashtag they wanted, they couldn’t find the slider to scroll through archival images, they didn’t know they were supposed to drag tweets, etc. lots to figure out still, and i’m looking forward to getting it working.

work in progress
work in progress

ddc and icm: sydette harry and nikole hannah-jones

on monday, sydette harry, the community manager for the coral project, spoke to our class. her approach was much more interactive than francis’s, and she really managed to get us to participate in a way that we hadn’t yet.

where francis mostly says information at us (a method i like, but mileage varies), sydette’s technique felt more like collecting information from us. it felt like we were all learning from each other. she asked open-ended questions, wrote responses on the board (!) with chalk (!), and let the responses dictate what content she covered next. i’m sure she already had a loose idea of what she wanted to go over, but she also struck me as someone who has experience/talent improvising and extracting compelling ideas from hesitant/skeptical audiences.

the primary question for the two hours was:

“how do you meet the needs of people who don’t know they’re part of a community (yet)?”

this is the state of affairs for commenters on news sites.

we talked about tuckman’s stages of group development: forming, norming, storming, and performing; and how the obstacle to forming community on the internet is that there’s not consensus about what the task at hand is. the “performing” step, the really important one, is interrupted or never accomplished.

this was all on my mind at the panel on civil rights reporting i went to tonight. at one point, nikole hannah-jones said (to paraphrase) that the public now has access to reporters through social media—that if reporters misrepresent a story, they now have to answer for things they might not have had to answer for in the past.

which i found interesting because in francis’s class, we’re often talking about a “don’t read the comments” paradigm of interaction between readers and journalists. i asked nikole in the q&a how she decides who to listen to, what the balance is between answering readers on social media and ignoring ugly comments. where i collapsed these two into the same category of interaction, she really emphasized the difference between social media and comments. she said she only ever reads five comments deep on a given article but that, in her experience, when there’s a hateful comment that she actually takes time to respond to, the tone of the commenter changes in the follow-up; commenters don’t actually expect their words to reach a human, and they don’t expect to be addressed by a human in response. and (still paraphrasing) she said that the kind of discourse that happens on social media is qualitatively different.

all food for thought, maybe for my icm final project. i’m excited to hear nikole hannah-jones again at the creative summit next weekend.

notes from sydette harry's lecture
notes from sydette harry’s lecture

icm: brooklyn museum api

this is a rough sketch using the brooklyn museum api. i really want to dig into this more because i like the idea of letting people interact with museum collections in interesting ways, and the documentation for this api seems really solid.

you’ll find out pretty quickly that the sketch is broken. i was focusing more on getting the mechanics working before i start styling, but i still have work to do.

code here:


pcomp: if pcomp and mozilla x-ray goggles had a baby

it would be our pcomp midterm dream come true!

here are the mozilla x-ray goggles, a super neat interactive tool that teaches you about html and css by letting you explore how websites are structured and play around with content.

what if touchier, feelier people could also experiment with website content using dials and buttons instead of just the touchpad interface?

to see what this would be like, angela and i are taking a website, copying all of its guts into p5 using firefox developer tools, and seeing if we can control some DOM elements using the arduino.

we started with the new york times homepage, but the index.html file was so enormous that it was tough to navigate. we switched to david sassoon’s project, inside climate news, instead. i’ve stripped the index.html file to about a third of its original size in order to keep the project manageable. i’m keeping the header, main menus, cover story, and right column—ditching footer and secondary news stories.

now that that’s done, i’ve used the firefox developer tools to copy the css stylesheet into p5, erased the link to the old stylesheet, linked to the new one in index.html with this:

i’m totally positive i have lots of stuff i don’t need in the index, but i don’t know what i can safely get rid of, so i’m keeping it around for now. the p5 editor looks like this:
Screen Shot 2015-10-16 at 10.42.08 PM

next steps are:

  • deciding which elements on the page we want to use potentiometers and buttons to change,
  • finding the parts of the stylesheet and index that affect those elements, and
  • writing the code to connect the analog and digital inputs to a variable that affects those elements.


using the existing index.html was a pain. i re-built a much simpler version of the site (screen shot below), and i’ve figured out how to use p5 to get one element to change.

i’m having trouble with syntax, but the dream is to be able to change the front image to an array that i can scroll through with a potentiometer.

icn remix


icm: setting up p5 project files

i’m using images from the united nations photo archive for my next p5 project.

within the archive, i searched “palestine”, sorted the results by “date ascending” to get earliest photos first, and then pulled 12 chronological images into a file.

then, i searched “israel”, sorted the results by “date ascending” to get earliest photos first, and pulled 12 chronological images into a file.

i pulled each image’s title, description, and date into an excel spreadsheet.

some images in the archive use the same title and description. sometimes i used these duplicates and sometimes i skipped images that were basically the same as previous ones.

in p5, i want to position one set of images above a slider, one set below the same slider, and have the images change as you move the slider along. i want to include each image’s title, description, and date.

at this point, i’m just setting up the files:

images from the u.n. photo archive
setting up a program that uses images from the u.n. photo archive
excel sheet setup
excel sheet setup

icm: sticky nexus

i’ve been watching shiffman’s tutorials trying to get the hang of arrays and constructor functions. i was trying to make a connect-the-dots situation, but ended up with this other thing (click to start):