Using Text Data to Manipulate Images & Sound (pt. 1)

I was given the task of extracting text data from a .txt file or equivalent, and using code to manipulate it to create images or sounds. This would form a foundation for our project, as once we know how to convert data into non text-based forms, we can start manipulating all sorts of data to do a variety of things.

Here is a link to my website, showing a visual representation of random values extracted from a text file: http://dindins.web44.net/data%20stuff/test.php

When I started work on this task I was initially inclined to use JavaScript to extract the text-file contents, because JavaScript is used to read XML files etc. and is what I planned to use to create the onscreen images. After several attempts at this however, I discovered that JavaScript is not capable of accessing local files for security reasons. In the end I had to resort to using PHP, which meant this process would only work if the text file was uploaded to a server. In future I hope to find a way of achieving these same results, but using files that are located locally on the users machine.

Below is a screenshot of some of the code to show my process. This process can be summarized as follows:

•  I was able to access the text file on the server using PHP
• I then stored this text in a JavaScript variable as a string
• Next I used the 'split' method to separate the string into single numbers
• I then created an array which contained each of these values
• This array could then be randomized using a shuffle function

To create the visuals of this text I used JavaScript to write 'div' tags into the document. I used the knowledge I gained doing my previous weather data project to edit the colours of these divs depending on the random value from the text file assigned to them. Below is a screenshot of this code:

Here is an example of one arrangement of these values:

These values will randomize each time the page is refreshed.

One problem I encountered when making this is that I always seemed to get one value back that was 'undefined'. I can only assume that this issue lies with the way I wrote the 'for loop' but I am yet unsure. I hope to resolve this issue for later projects.