Author: Eric Dargan

Final Project

For my final project, I set out to use the tools and techniques I had learned during this semester to create an interactive map that people would be able to engage with to find which of multiple dinner parties was closest to them, and to help them get connected to the people hosting it.

 

You can find my code here!

One of my biggest frustrations with the previous coding classes I’ve taken is that most of the work never goes beyond the complier, and is not something people can find easily and understand what’s happening. So for this project, I wanted to stretch and try to bring an idea fully to realization, incorporating it into a website that would be easily found.

I utilized the google maps API to create the map, and going into this project I thought I would have to pixel-map the markers in order to create them, and using p5.js create functions to trigger events when they are clicked on. Once I did my research after getting into the project and learned about all of the functionalities that the Google Maps API provides, I learned that I was able to do all of that through the API, in a way that is designed much more beautifully and seamlessly than something I would have been able to do.

It didn’t take me long to get from step 1 (creating the map and adding the points and events) to step 2 (embedding it into the map and giving the user ability to manipulate the canvas), but it took forever to try and figure out step 2. This project started off appearing very ambitious, then through the API’s seemed much simpler, then became nearly impossible once I dove into the computer-generated code from squarespace that made up the website I was seeking to embed my map into.

I feel that I made two critical mistakes that led to my project not finishing as I imagined it would. 1) I made a (rather large) technical aspect of my project based on skills that I hadn’t quite developed yet. I wanted to stretch but I should have stretched within the bounds of the canvas and p5.js, instead of reaching out. 2) My project was dependent upon understanding and interacting with code that I didn’t have any documentation on, connection to, and that was not written for humans to interpret. This left me stuck at the second stage for the majority of my time working on this project, troubleshooting visibility issues and errors that popped up out of nowhere that were hidden within several hundred lines of code.

Overall, I am proud of myself for being able to access and understand using the Google API, which I can see being very useful in the future, as well as navigating the different challenges of this project, from acquiring server space to combining javascript with html and css, learning how to work with a project that spans multiple files, and how to ask for help when I know I need it. One of the best classes I’ve taken at NYU thus far. Thank you Scott.

Final Project

For my final project, I will be using the google maps API to create an interactive map in which people are able to find and sign up to attend the closest dinner party to them. I’m going to stylize the map, so that it doesn’t look as cluttered and only shows the things I think are most important. I will be creating markers for the Dinner Parties in order to show where the locations are. I also want to request the user’s location, to help them find the closest dinner party to them. Once they find one that they’d like to sign up for, they can put in their information and an email will be sent out to the dinner party hosts so that they can reach out to the person and know to be expecting them at the next dinner party. I will utilize the following libraries to bring this to life: p5.dom, p5.gui, and p5.geolocation. The end goal of this project, beyond this class is to bring this into actual use, integrated into a website, but for this project I will most likely be writing it in open processing and using fake data until it’s functioning properly and I know that it’s secure.

Libraries

One P5.js library I am interested in using is p5.dom. p5.dom lets you interact  with HTML5 objects beyond the canvas, including video, audio, webcam, input, and text. One of the reasons that I initially came to NYU as a Computer Science Major was because I was drawn by the reach of CS; that something I could do from one computer could potentially reach millions of people over time. It’s always been about reach for me, and really maximizing my efforts. This is partly why I’m more inclined to use p5.js which allows you to display and interact with your work online, much easier than Processing because its written in JavaScript instead of Java. Based on what drew me into CS in the first place, the concept of libraries is really interesting because it introduces the potential to get even more from the code that I’m writing. I see myself continuing to code beyond this class, and even beyond college into my adult life, and the way I envision it is not through heavy backend that doesn’t really see the light of day, but through creating art and being able to share it with people. I’m taking Intro to Web next semester and I’m very excited by the potential of being able to use what I’ve learned in p5.js, as well as the library p5.dom to compliment the work that I’m doing in that class.

Chapters 10 + 11

These articles were interesting to me. I have about two years of experience with Java and have competed in UIL competitions using Java, and until last semester I was majoring in Computer Science. Technically I still am since I haven’t officially filled out the major change form. Part of me revolts against the order and technicality of OOP techniques, and writing clean code when it comes to art. I can totally see the value in utilizing these techniques and how much easier it can make everything, but it does feel very technical to me. Perhaps this is why I have not used much of my prior knowledge in any of my sketches. Art feels like a different world, but in reality, you need both order and freedom of expression. There is freedom within constraints. The iPhone is beautifully designed and ingeniously programmed. Great products utilize both, and I suppose art is anything that guides us to wonder. Nevertheless, it is a challenge for me to abstract “a brush stroke”, or to create a class for each object I want to use, but I suppose it’s like a painter pre-mixing their paints to be able to use them during the painting process.

Midterm Part 2

I was pleasantly surprised by the way this project ended up. 

I originally wanted to make a city builder, where you could click and drag to create a building at the size you want it and it would default along the two axis that the buildings above are built upon. This was my first time working in 3 Dimensions, and I was not able to give the user this flexibility and figure out how to automate all of the rest of it to where it would still look good. Instead, I manually created the buildings (originally were going to be objects in a class), and then created cloud objects that the user could place by clicking. The user is also able to control the time of day by dragging the mouse from left to right and vice versa, and along the transition from day to night, the sun turns into the moon. I also added twinkling stars to the sky, which I originally wanted to fade in and out instead of blinking, but the dominant method for doing this was to change the opacity of the refreshing background to where the stars are slowly blotted out, however I needed the background at full opacity so that the sun/moon didn’t drag.

I had originally wanted to add lights and detail to the buildings, create a ground, with two roads running along the opposite axis with cars periodically driving across. My difficulties with the Z-axis in the inclined me keep the scene simpler if possible. When I wasn’t able to allow the user to create the buildings in the scene, it kind of changed my game plan. The original idea was to give the user a dynamic background and allow them to arrange the buildings as they like, however in a way that reversed. In the final iteration the user controls the background and the foreground is already set.

My code for some reason doesn’t function properly on Open Processing, but if you’d like to interact with my artwork you can copy the code from there into processing and it should work just fine. You can find the link here.

You can also see a screen recording of the functionality in my presentation.

Midterm Part 1

For my midterm project, I am attempting to make an interactive portrait of the city in 3D. The idea is that the user can control the time of day through sliding the mouse from left to right (left is day, right is night). The sun eventually turns into the moon as the day ends. The user is able to create buildings by clicking, as well as streetlights by pressing a key. At the moment these functionalities have not been implemented, as I still need to create the building and streetlight class. I also would like to create clouds for the daytime and stars for the night. I drew inspiration from this sketch, this sketch, and this sketch on open processing. I have been very interested in perspective drawing lately and felt that this would be an interesting opportunity to try perspective drawing through code. I will most likely be using arrays to create star and cloud objects. I have never made anything in 3D before, so will need to learn how to render all of the shapes in 3D, as well as how to light the scene to give it more of a sense of depth. The most challenging part of this will most likely be giving the user freedom to create the buildings where they would like to, and it still looking right. Because it is a perspective drawing, the scale/size of the buildings will be different based on where they click. At the moment I plan on only allowing control in the x direction as to where the building is and the rest will be done by the computer. My code isn’t functioning correctly in open processing as it is in Processing, but here is the link:

https://www.openprocessing.org/sketch/513463

Week 3 Animation Assignment

For this project I wanted to create everything myself, without using any of the same code we used in class or trying to make anything similar to what we did in class. The principles of animation/life that I wanted to show were squash and stretch and timing. What I ended up creating was an animation of a ball bouncing from the left side of the screen to the right.

I actually struggled a lot with this project. My code was not very object oriented and I feel that I didn’t go about creating the layout in the best way.

I decided to correlate the xPosition of the ball with frameCount, which I figured was a good idea since in physics, by the laws of projectile motion, the velocity in the x Direction shouldn’t really change unless something acts upon it. However I made the decision to also connect the Y-Velocity to frameCount, thinking only of the first stage of the drop, where the velocity needs to pick up as the force of gravity acts upon it.

I decided to break up the animation into 3 stages: 1) the ball drops, 2)while on the ground, the ball experiences vertical compression and a horizontal stretch as it bounces, 3) the ball bounces back up into the air and out of the frame.

The flaws to this approach, at least in my execution was a disregard for later stages when focusing on the current stage, resulting in inconsiderate variable creation and design (i.e. yVelocity being directly correlated to frameCount). Because yVel is in direct correlation to frameCount, the ball exhibits this strange behavior where it bounces and leaves the ground with much more speed than it hit the ground with, as if charged with energy while on the ground.

Some areas for improvement on this project would be making it repeatable (not only executing once, but the animation restarting after completing the bounce), adding more bounces that are progressively lower, and fixing the velocities to mimic reality more closely. It would also be really cool to see this in 3D!

You can see the project here.

Week 2 Interaction Project

For this project I partnered up with Yuening Bai. We knew that we wanted to have something following the mouse, and we discussed pulling images from the web and having the ball actually be a cat, so that it is chasing the mouse. I ran into some trouble trying to code this, and could only figure out how to load a photo from the hard drive of the computer, not from the web. So instead we made it a ball that got smaller as it got closer to the mouse. I originally figured I would do this by making the height and width of the circle correlate to the distance from the mouse in the x and y directions. This had an effect similar to what i was going for, but the circle would disappear if you backtracked from the bottom right of the screen to the top left. To solve this, I made it instead the absolute value of dy and dx.

You can see the code and program here.

Research Project

For this research project I chose to look into generative software, that is code that is created to create. I chose to focus specifically on the artist Matthias Dörfelt, who’s work caught my attention due to its organic form. What I mean by that is that his work doesn’t look like what I’d imagine could come from a computer. It is imperfect, with a cohesiveness that doesn’t come at the price of hard geometric shapes or perfect lines, as are often associated with computers. His work transcends 0’s and 1’s and somehow his hand is so present through each piece of his collection, despite the fact that large amounts of his work are randomly generated with code. The biography of his website affirms this dichotomy between the perfection/rigidity of computers and the organic-nature/inconsistency of humanity; “In his works he often trades control in favor of surprise because he strongly believes in computation as an expressive, playful and humorous tool. Matthias will continue to explore these aspects by infusing technology with flaws, naivety and weirdness.” In order to make something perfect, imperfect, it must be “infused with flaws”.

It is a testament to his prowess as an artist that he is able to create such natural and human-like work from a computer that can only accept very specific commands; a tool that must be told exactly what to do with no room for error. I suppose a great test of fluency within a medium is when an artist is able to create beyond the apparent limitations of a medium, like a painting that appears to be three dimensional or a photograph that really creates a sense of scene, to the point where you feel you are in the photograph.

One thing I found very interesting is that although Dörfelt’s process is entirely digital, all of his artwork that is available for purchase is physical. Similar to a painter or photographer, he sells prints of his work online. Not only that, but since the work is created with elements of randomness, each piece is unique and there cannot be another like it. So when someone buys one of his prints, they are buying something semi-computer, semi-human, but fully original.

Dörfelt isn’t the only artist creating art with code. In my research I came across a project called Written Images, which received over 70 contributions from different media artists and developers. The project compiled 42 of the most creative generative software submissions, and essentially provided a “print-on-demand” service, where a book was created with artwork from these programs. This means that each book is unique, and that you are buying the only copy of the book that you receive. In the art world, rarity is proportional to value; the rarer something is, the more valuable it is to have it. This is why digital artists create limited amounts of their artwork; if it is available everywhere it’s value decreases significantly. Studying Dörfelt has opened my mind to the possibilities of creative coding, beyond just shapes and lines. This really seems like an entirely new avenue of expression, in which the computer is co-creator with the artist.

You can find more of Matthias Dörfelt’s work on his website. There are links to his social media profiles on the website.

You can also check out the written images project here.

If you’re interested in buying some of his work, you can do so here.

Self-Portrait

While creating this self-portrait, I found it difficult to ballpark where the points would end up on the grid, but I began to get the hang of it as I continued drawing shapes. I’m not sure how you would tilt a shape (ex. to make arms or hair), but enjoyed experimenting with different transformations I could make to the shapes. I wanted to keep it feeling as organic as possible, which is why I avoided hard corners/shapes like polygons and straight lines. I struggled a lot figuring out how to use bezier curves. Unlike a circle where you can create it and then just move the center point to move the entire shape, when you move one coordinate on a bezier curve it changes the entire shape of the curve and the shape you had is distorted. It took me a second to figure out how to turn the arc upside down to create the body, but after refreshing myself on the unit circle it made more sense. I was pleasantly surprised to find that to create the irises of the eyes, I could copy the code from the eyes and just change them from ellipsi to circles. They ended up looking exactly how I hoped for them to. For some reason it isn’t allowing me to upload my sketch. The image upload keeps failing.

Link to sketch: https://www.openprocessing.org/sketch/503765