Final Project

When I started working on the project, I tried to convert some poetry I had already written into the p5 format. Every time I tried working it into some sketches, it came out sounding silly and all the animations/artwork took away from the poem. I realized one major reason for this was because the poetry wasn’t written to be fragmented between p5 sketches, it was written to be whole on a single page. I tried writing a poem while doing the p5 sketch, but that became difficult as well. I had trouble flipping between the programming and the writing, and wished I had something already settled (either the poem or the artwork), so that I could focus on one instead of both. Finally, I wrote a poem on post it notes, flipping a note once I had filled it up, so that I couldn’t see what I had previously written, and each stanza was its own blank page. This strategy helped a lot, as the poem’s logic itself became fragmented, in the way the p5 sketch would be as well.

I felt a lot of pressure in the beginning to do a lot of animation and cool visual effects, however, after playtesting and talking to other people in the class, they suggested putting the text as the main part and not sticking to a traditional “text + illustration” model, which was incredibly helpful. I instead tried to apply animations and other p5 visual capabilities to the text itself, which is made possible in p5’s WEBGL library. Text can be applied as a texture to objects, and so getting objects to transform through effects like for loops was very helpful.

p5js final capture slide10.PNG
p5.js final capture.PNG

Here are some images of the final project, although it is highly interactive and best experienced whole.

One issue I had that I would like to fix is that the sketch is so heavy it kills the browser. On nicer computers (the production laptops for instance), the browser can handle the density of the sketch, but on my computer it often breaks before getting through the whole poem.Often times, if I had two four loops in the same sketch it would break faster, so I had to separate them and wrote out some objects by hand. I asked Koji how to fix this and he said there isn’t much I can do, but I would like to know if there is a solution, as I would like this to be more accessible to people that don’t have high RAM computers.

You can see the final, editable version here. I also added four slides to the front page of my website, and used random(int()) to determine which slide would load. You can see this here. All in all, I am pleased with my final project. This was an exciting process that I really enjoyed!

Final Project Playtesting

Playtesting my final project idea went really well. I received a lot of helpful advice and mostly links to artwork I had never seen before. Playtesting made me think more thoroughly about what types of clues the sketch should give people to know how to control the flow. Should there be text that just says “click anywhere on the screen” or should it be something more discreet? It also made me think about the relationship and expectations people have with text + illustration/graphics.

Here are some creative references that were shared during playtesting:

As of now, I would like to take a few 3d object scans and upload them to my sketch, as well as continue to keep building out the different scenes. You can see my progress here:

Week 6: Dom, CSS, html

This week was really challenging as it felt like learning a whole new programming language. I was frustrated and overwhelmed at first, but after watching (and rewatching) the videos, I got some exciting results. I adapted my 3-d object sketch from last week and put the canvas on top of a collage of different gifs, making it slightly transparent so that when the 3-d objects are on top of the gifs, the canvas becomes transparent and the gifs show through. This creates an interesting mirror/cage affect. I typed in “woman” on giphy, and selected gifs that seemed to have strong pop culture references and interesting movement or imagery. I started off with a barbie theme and stuck with that in the beginning, before trailing off and selecting from a more random sample of gifs. It was strange having everything in layers and then mostly in the setup function. I had a lot variables, a lot in the project folder, and a lot in setup, none of which is typically the case. The past few weeks I have been trying to shorten my code and make it stored in arrays, classes, and out of sight, but this week all of that went out the window and my code is sloppy and all over the place. With that being said, I am very excited about the visual effects I was able to create, and really enjoyed the assignment.

Final Piece

In Process

Week 5: Objects

For this assignment I really wanted to use 3-d objects as I have been playing with them and trying to get them to work. After a lot of online forums and reddit threads about how to disable whatever is blocking WEBGL in Chrome, I couldn’t get it to run properly in p5. Luckily, I was able to use Firefox to run WEBGL in p5!

I had .a lot of fun with this assignment because I was excited about the novelty of 3-d shapes, however, I was confronted with the limitations of these objects early on. For instance, it is nearly impossible to adjust their orientation, p5 places them in the middle of the canvas and I still haven’t been able to figure out how to adjust this. Moreover, adding text is quite complicated and something I will wait to tackle in the next assignment. Because of these limitations, I had trouble adding functions on to the object class. I ended the assignment with only 2 functions in the class. I added mousePressed to make it a little interactive, as mousePressed controls the grow (or freeze) function of the class.

There was one thing that I wasn’t able to do which I am very interested in learning: isolating each element in the array. If I were able to isolate each element in the array and control it with grow, then the user could grow each box with each click of the mouse. I was able to do this somewhat using Dan Schiffman’s “index” concept, which worked initially. However, when I tried to implement let index= index + 1, so that each click would control a different box, I got error messages. It would be cool to be control the elements in a growing chain, so that one click would allow one box to grow/shrink, then a second click would activate the second box (and have no affect on the box already moving). Repeating this in a pattern would be really interesting and could add different rhythms to the growing/shrinking function because they would be initiated at different times and therefore out of sync.

Overall, I am pleased with my sketch, but would like to learn how to incorporate this action. Editable Sketch Fullscreen Sketch

Conceptually, the basis for this drawing came after visiting the Whitney show on Programmed art. While there were a few pieces I really enjoyed in the show, and the structure of the exhibition itself made a lot of sense to me, honestly most of the work was disappointing technically and aesthetically. While some of it was overtly political/social, most of it was not, specifically in the generative/ code-driven work. I found this to be disappointing because in the current American political climate, code-drive algorithms harbor an intense amount of control over online social /+ consumer interaction. I have seen some beautiful and deeply political generative art and found it odd that this type of work was missing from the exhibition. Anyways, while this drawing is not overtly political in any way, I wanted to create something that looked very structured and organized externally, and give it an illusion of evolution/change. This makes the drawing seem slightly generative, even though it clearly is not. Moreover, the organization is clean, yet inconsistent with these changes (that the user controls). I wanted to make a feminine-seeming object at the core of this organization, and thought the torus was anti-phallic in form. I placed this shape in the center, made it very small and not able to be controlled by the user. This allows it to “float” and exist regardless of the external organizational cubes that seemingly generate only to shrink back down to the center. Placing this feminine presence inside, yet unaffected by a basic algorithmic mode of “production” could challenge the dominating cultural narrative that a grandiose masculine/objective/rational set of laws governs digital production. More importantly

Week 4 Assignment: Functions

This week’s assignment was actually very simple. I decided to take our assignment of the bouncing balls and make it into a function. Everything worked well except when I used the mousePressed function. I have been having some trouble figuring out the proper order and structure for mousePressed so it was frustrating to have a problem I had no idea how to fix. What happened is that when I tried to configure the ball movement/speed to mousePressed, the balls would move in increments of the “speed” variable every time the mouse was clicked, and stay still when the mouse wasn’t being clicked. I went to office hours with a resident who helped me fix this problem in a matter of minutes and in a much simpler way than I was thinking about before. Instead of connecting mousePressed to the variable for speed, we made a different variable to represent the ball movement. Then, in the setup/CreateCanvas function, we made the variable false so that the balls would not move. In the ballMove function, I added a Boolean statement so that the balls would move if the variable was true. Then, in the mousePressed section, we made mousePressed trigger the following: ballFlg = !ballFlg;

This was the perfect solution so that the function of mousePressed would switch back and forth every single time it was clicked, so that the mousePressed could start the movement, and then stop it right after.

The last thing I did with this simple function application was make each click of the mouse change the color of the balls. This was just to give another input/output of clicking to encourage the user to keep clicking. I made the balls all the same color as well.

Week 3 Assignment: Slides

This week Winnie and I paired up to make a design with two variable elements that could be manipulated by sliders. We chose to stick with the number of sets of lines, and the density of how tightly lines were packed per set (or the distance between lines in a set).

This assignment took a lot of time and required multiple meetings with residents. Overall, I am very satisfied with the output design, and I am satisfied with the minimalism of the input code.

We used a for loop to create the the sets of lines. This part was remarkably simple, however, rotating (and translating the canvas) the sets evenly became quite a challenge that we needed to solve with a resident. First, we had to translate the origin to the true center of the canvas. Then, we changed the angleMode to Degrees, and rotating the for loop by i * (180/numSet). In this example, numSet has a value of 6, but the sliders make this value increase.

Another issue we struggled with was allowing the sliders to function independently: when one would get dragged the other one would get dragged. I tried making a map with mouseX as well as adding a mouseRelease function with true / false statements but nothing would work. After meeting with a resident, we made the bounds of the left slider width/2 and placed a if/else statement around the sliders so that one slide would activate with if, and the other would activate with else. I loved this simple and easy to understand solution.

Overall I am happy with the way our assignment looks and am glad we worked in pairs. Working together gave me more patience with working through the code as well as being more committed to the design overall as we came up with it together.