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


Leave a Reply