MY6 (final project progress)

For our final project, we have decided to take this opportunity to showcase 6 different current events around the world, that we believe should have more exposure in the media. Through this, we would like the people affected by these issues to be the focus of how these events are presented in the media.  To do this we will use p5js to display a world map with the 6 countries these issues are happening in highlighted, which will be projected onto a surface that will use Arduino to trigger videos and images in p5js. We have selected the counties, and the events, along with the videos and images. We hope that through these videos the lives of the people affected by these issues are the focus, followed by the images which are headlines of these events in the news articles.

Example of Video:

Example of Image:


Technical Difficulties:

So far, we have a map that has the six countries highlighted, we are able to make an image appear of the news article, however, our first issue is embedding a video into p5js, either through a link or downloaded and uploaded as a media file. Next, we have set up a sensor in Arduino, which we know works and is able to read values, however, when tried to make the sensor trigger the image (as we don’t know how to use a video) it does not read the values. We have used “webSerial_handshake_simpler” example provided by the professor, to test the sensor as well as log the rVal (reading of the sensor) which works, however, in trying to get it to do the same to the background with our map it does not work and does not trigger the image either.

Here are two videos demonstrating the two issues.

Our fail:

working example:

Finally, we would like along with the force sensor to trigger p5js to zoom into the map and then play the videos and present the headlines (this will be triggered by matching the cut out of the country onto the country on the map which will be projected onto a paper surface that the sensors are under [image of the model included]) which is our third and final major issue.

p5js Code:


#define FORCE_SENSOR_PIN A0 // the FSR and 10K pulldown are connected to A0

int sensor = analogRead(A0); 

void setup() {
  // start the handshake
  while (Serial.available() <= 0) {
//    Serial.println("0,0"); // send a starting message
    delay(300);            // wait 1/3 second

void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
    int left = Serial.parseInt();
    int right = Serial.parseInt();
    if ( == '\n') {
 int sensor = analogRead(FORCE_SENSOR_PIN);
  Serial.print(sensor); // print the raw analog reading


credit for p5js world map:

Leave a Reply