Image/Poster ATTRIBUTION: Callum Bayle-Spence, his work
*sys.#2/blck.spce/sys.#3*
The transition from local to web was a little less than straight-forward. What follows is an exploration of the tech of assembling this piece for showcasing not on my computer locally, not on a project in Blackspace, but for a global audience online!
First, there are some syntactical differences to work through, that go hand-in-hand with file structure changes ( – on the web, there is actually not a data folder that is used for images and other media!)
/* @pjs preload=”/static/processing/Garden_of_Life_fix/tulip_01.png,/static/processing/Garden_of_Life_fix/tulip_02.png,/static/processing/Garden_of_Life_fix/tulip_03.png,/static/processing/Garden_of_Life_fix/tulip_04.png,/static/processing/Garden_of_Life_fix/tulip_05.png,/static/processing/Garden_of_Life_fix/tulip_06.png,/static/processing/Garden_of_Life_fix/tulip_07.png,/static/processing/Garden_of_Life_fix/tulip_08.png,/static/processing/Garden_of_Life_fix/tulip_09.png,/static/processing/Garden_of_Life_fix/tulip_10.png,/static/processing/Garden_of_Life_fix/tulip_11.png,/static/processing/Garden_of_Life_fix/tulip_12.png,/static/processing/Garden_of_Life_fix/tulip_13.png”; */
The above is now the first line in my file set-up, required to pre-load media so that the code can pull them as soon as they are ready. This process of getting images ready is the major limitation to performance on the web! (To consider when implementing image-intensive application such as an array of animation frames, as the present writer found himself doing.)
Apart from this there was one particular error that made my life harder – it was an error that we actually talked about in class, in the Game of Life code.
In my case, I was adding up neighbors that did not exist, so an out of bounds thing ultimately: I changed
//add up neighboring cells
for(int x = 0; x < columns; x++) {
for(int y = 0; y < rows; y++) {
int neighbors = 0;
for(int a = -1; a <= 1; a++) {
for(int b = -1; b <= 1; b++) { //throws error processing-v1.4.8.js:13556TypeError: undefined is not an object (evaluating ‘$this_1.grid[(x+a+columns) % columns][(y+b+rows) % rows].previous_state’) in browser ??
neighbors += grid[(x+a+columns) % columns][(y+b+rows) % rows].previous_state;
}
}
to
//add up neighboring cells
for(int x = 1; x < columns – 1; x++) {
for(int y = 1; y < rows – 1; y++) {
int neighbors = 0;
for(int a = -1; a <= 1; a++) {
for(int b = -1; b <= 1; b++) {
neighbors += grid[(x+a+columns) % columns][(y+b+rows) % rows].previous_state;
}
}
The important thing is, the error did not show up as an Out of Bounds Error, but a Type Error! So things like this kind of error conflation make troubleshooting a bit harder. I think I caught on to the issue when I used the developer console in Chrome (Safari was not showing any details apart from Type Error): another thing to keep in mind when going about these things ( – different browsers do also handle debugging differently!)
Final, little, thing was this issue: I was not able to use fullScreen(); command in Processing for online stuff. Which was hard, because I use that a lot for local.
