Technical Report

Access to technical prototype: Input: https://finlaymcbride.panel.uwe.ac.uk/NTTDInput/ Output: https://finlaymcbride.panel.uwe.ac.uk/NoTimeToDecline/ Github: https://github.com/FinMcB/NoTimeToDecline

After the design brief had been solidified and the research started heading towards paper prototyping, programming the technical implementation started at the same stage. P5.js (McCarthy, 2020) was the framework that we worked with as it is lightweight and easy to test early prototyping with as we have had prior experience with it. This was used in conjunction with PubNub (Greene and Blum, 2020) so that the input and output screens could communicate with each other and essentially send data from the input device to reveal puzzle pieces. 

This began with creating a grid system to represent the puzzle pieces created with this nested ‘for loop’:

function boxes(){       //create portrait grid

  cw = width / numCols;

  ch = height;

  rw = width;

  rh = cnv.height / numRows;

  for (cn = 0; cn < numCols; cn++) {

    for (rn = 0; rn < numRows; rn++) {

      let x = cn * cw;

      let y = rn * rh;

      p = new Piece(x,y,cw,rh,fade)

      gridArr.push(p);

    }

  }

This allows new puzzle pieces to be placed in a grid that is portrait oriented to represent the screen ratio that would be used in Cabot Circus. The pieces were constructed using classes (shown in code below) for more efficiency as well as for adding a ‘fade’ value that could be changed so that it could dissolve away.

class Piece {               //piece class constructor with fade value 

  constructor(_x, _y, cw, rh, fade) {

    this.x = _x;

    this.y = _y;

    this.cw = cw;

    this.rh = rh;

    this.fade = fade;

  }


  display() {

    strokeWeight(10);

    stroke(54,54,54, this.fade);

    fill(0, 153, 51, this.fade);

    rect(this.x, this.y, this.cw, this.rh);

      }

}

Loading in the questions involved importing in the csv file of questions, creating a ‘for loop’ to go through each row and column and pull the questions out into an array called ‘qArr’:

function preload() {
//load questions
table = loadTable('questions.csv','csv','header');
}

for (let r = 0; r < table.getRowCount(); r++){
for (let c = 0; c < table.getColumnCount(); c++) {
qArr.push(table.getString(r,c));
}
}

Due to the prototype being not fully functional, the questions that are pulled in are randomised however if we were to further develop this to facilitate the values for each question etc, then they would be ordered so that some are not repeated. This could be achieved by simply implementing a counter value that increments through the array of questions.

To send and receive the user’s input to PubNub was relatively straightforward, it simply involved subscribing to the created channel on PubNub (in this case it is called ‘Answers’) and a function to send the message (shown in code below).

function sendTheMessage() {

  // Send Data to the server to draw it on other screen

  dataServer.publish(

    {

      channel: channelName,

      message:

      {

        messageText: inputBox.value()       //get the value from the text box and send it as part of the message

      }

    });

}

////////////////////////////////////////////////////////////////////

function readIncoming(inMessage) //when new data comes in it triggers this function,

{                              

  //  error check to match the incoming to the channelName

  if(inMessage.channel == channelName)

  {

    incomingText = "SAYS: "+inMessage.message.messageText;     //extracting message from JSON

    console.log('RECEIVED DATA', incomingText);

    console.log(inMessage);

    }

}

Once this has been sent to the other p5.js sketch it is received as JSON data and is then unpackaged into just the message data in the console log (shown in FIG 1).

As of now this technical aspect of the prototype removes a random puzzle piece if any chunk of data comes through. As the grid of squares is not in a 2 dimensional array, there is no reference to each square. To remove a random square each time and have it fade away, the piece’s fade value is depleted to zero after a certain amount of time and then removes that piece from its array using the ‘splice()’ method.

In conclusion this technical implementation demonstrates how Big Data Energy might go into developing this installation in a real world environment. If this were the case and this aspect was to be completed then the machine learning library, ml5.js (ml5js, 2020) could be applied to produce the distorted image of the user as it facilitates fast style transfer for the webcam. 

References:

Greene, T. and Blum, S., 2020. Pubnub. [online] PubNub. Available at: <https://www.pubnub.com/&gt; [Accessed 9 April 2020].

McCarthy, L., 2020. Home | P5.Js. [online] P5js.org. Available at: <https://p5js.org/&gt; [Accessed 9 April 2020].

Ml5js.org. 2020. Ml5js. [online] Available at: <https://ml5js.org/&gt; [Accessed 9 April 2020].