I want to use computation to build fictional environments through which people can explore, learn about themselves, and reflect on the physical world around them. I want to learn how we can build immersive worlds digitally that can be translated into physical and the reverse. How can we change our relationship to technology to one of care and humanity? How do people attempt to place sentimentality into emotionless objects? Is there a way to democratize the digital web? I want to build beautiful worlds such as Taehee Wang’s Queer UV Map diagram, where they use the website to simulate navigation into their body, mortality, and fear. I’m inspired by net artists such as Olia Lialina and Lorna Mills, who use play and humor to inform their work, and Yeseul Song’s Thought Sculpture III, which invites participants to reflect on their senses as they experience digital forms. I love Laurel Scwulst’s philosophy behind creating a handmade web, and am oddly fascinated by broken websites and broken links—they highlight how the technology (often misinterpreted as a neutral third party) is imperfect too, just like the humans that build it.
In my first prompt, to draw a self portrait, I first envisioned how I could simplify a depiction of myself into shapes. Would it be a QR code that leads to a link that’s significant to me? Should I re-draw an illustration I’ve done in the past, re-interpreting it into a series of numbers and functions? I decided to draw my home desk set-up using the same colors in this past illustration of a desk I’ve done. I’m often drawing and re-drawing my desk numerous times, in different mediums and different desk setups for each apartment I live in. It’s the space I see most frequently every day, the place I truly inhabit. This past August, I moved apartments (the shocking distance from one apartment in Astoria, Queens to another apartment in Astoria just a 6-minute walk away). I figured this would be the perfect opportunity to cement the ephemeral changing space of a desk set-up into yet another drawing.
(Illustration initially drawn on Procreate, collaged with photo elements.)
As I started coding, I started to separate the parts of my illustration into basic shapes and identified the key colors that made up my illustration. First, I drew parts of the desk, and then I drew the parts of the monitors. I based all my approximations on the (0, 0) coordinate being top left and (width, height) coordinate being bottom right.
I wanted to try making my drawing scalable, so instead of using exact points, I would approximate the locations using width and height variables. I noticed that my division started to get a little messy haha. I was placing my coordinates all based on eyeballing the placement and proportions.
//draw desk
strokeWeight(0);
fill(179,148,229);
quad(width/5, 2*height/3, 4*width/5, 2*height/3, 4*width/5+width/8, 4*height/5, width/5-width/8, 4*height/5);
fill(135, 89, 212);
rect(width/5-width/8, 4*height/5, (4*width/5+width/8)-(width/5-width/8), height/15);
I tried to draw out a grid behind the monitors using a while() loop and for() loop, but both made my code crash. I gave up on automating a grid or dot pattern after that. I’m hoping to get answers on how to automate grid drawing next time in class.
//tried using loop to draw grid, made it crash
while (i < 10){
line(i*width/10, 0,i*width/10, height);} i++;
Then, I tried to make it so that the colors in the computer screens would change over time. I set r, g, and b as variables declared at the beginning of the code (I placed it outside of the functions and it seemed to work there…). As each draw() was called, the r, g, and b variables would either go up by one or go down by one. I also declared upr, upg, and upb as booleans to make sure that the r,g,b numbers stayed within the bounds of 1 and 254.
//set r in fill color of monitors
if (upr==true) {
r++;
if (r>=255) upr = false;}
else if (upr==false) {
r--;
if (r<=55) upr = true;}
Then, I added a circle in each of the monitor screens so that the drawing made a :| funny face.
Next, I fiddled with the background color. I landed upon a pale sky blue.
The web editor was quite intuitive to use. I wasn’t quite sure how GitHub would be incorporated into my process quite yet with the p5 web editor. I would also like to host my p5 project independently on a site outside of the p5 web editor someday as well. If I had more time, I’d like to map the coordinates for the rest of the shapes as well. It was more time consuming than I expected to draw out each shape.