Author: Maha Al Solh

After watching Casey Reas’s Eyeo take on chance operations and the idea of randomness in generative code, I was highly drawn to his idea of the co-existence between control and randomness. His talk particularly reminded me of a moment that I experienced when creating my generative artwork as a new coder. At first, I highly intended to create a piece that sparks a sense of realism to the audience. However, my perspective quickly changed when I typed a piece of code wrong and my entire artwork was changed for the better. The artwork now had more life and interactivity to it, which I believed was the better direction as it opened doors for varied interpretations and understandings. Reas’s particular argument that having a balance between order and chaos definitely illustrated the idea that unexpected results can spark interest and curiosity as opposed to a fully ordered and precise piece. 

Moving forward in the Interactive Media course this semester, I was highly inspired by Reas’s approach to randomness and therefore I plan on incorporating random elements into my work by looking at code as a space for experimentation and play, rather than a set of rules that must be strictly followed. This perspective challenges my previous perception of coding as something restrictive and inflexible. I already began incorporating randomness and chance into my pieces through elements such as color, speed, and space. 

After watching the video and understanding Reas’s perspective on control and randomness, I believe that the optimum balance between total randomness and total control lies in the artist’s intentions for their artwork. A big part of art is how the audience perceives it; therefore, by incorporating randomness through interactivity, artists enable the audience to approach the artwork from their own perspective. This creates and illustrates new meanings and understandings, whereas total control can limit the accessibility/opportunity to discover unexpected possibilities within an artwork. I personally believe that the percentage of randomness should be slightly higher than the percentage of control in generative art as this approach allows for more unexpected outcomes and gives the artwork a greater sense of creative meaning.

My concept: For this assignment we were tasked to create a generative artwork which included a variety of elements that we have learned in class throughout the first two weeks. For this artwork I was particularly inspired by two things including webs and the way moving lights create trails across certain images, particularly in the dark. Therefore, I wanted to create this digitally using P5js through the representation of moving stars that are interconnected through the use of lines to create the web effect in which I was inspired by. As the stars move, the moving mouse changes their speed and colors which enhances the artwork’s interactivity. 

Code that I am particularly proud of: Something that I am particularly proud of completing in this artwork is being able to achieve the effect of the speed changing as the mouse moves around the canvas to enhance interactivity. I did this by following the steps of The Coding Train on youtube, particularly his video where he creates the starfield simulation. The skills I learned about speed through this video will definitely be used more throughout the course in the upcoming future. 

speed = map(mouseX, 0, width, 0, 20);

How was this made: This artwork was made by primarily following the tutorial of The Coding Train on youtube as stated above. The video which is titled “Coding Challenge 1: Starfield Simulation” is a high speed tutorial which demonstrates how to achieve movement and perspective in p5js through the scenario of stars in the sky. After following this tutorial, I was able to make my own amendments to the artwork such as adding my web-like lines as stated in my intentions/inspiration, whilst also adding more mouse features such as the color changing lines. I would say that one limitation that I faced using this video is that it is 10 years old and uses the old P5 model, therefore I faced a few moments where I struggled with some of the language used in the video, however I was able to resolve this issue through the use of AI to translate old P5 language into the language in which I am regularly familiar with.  

Reflection and ideas for future work or improvements: I am overall very happy with the final result of this artwork as I was able to complete something different from the previous self portrait assignment, whilst also learning some new pieces of code and functions that can be further used in upcoming projects. For future work, I really want to attempt to create something that has a sense of realism, as this was attempted for this artwork initially through the creation of a realistic flower, but unfortunately didn’t work as I faced some difficulties in understanding dimensions and sizes that could help me translate the flower into my desired artwork. Therefore, for next time I would definitely like to watch more tutorials from various sources to expand my knowledge and understanding on coding and hopefully become more aware of the app.

My concept: As our first assignment in the introduction to interactive media course, we were instructed to create a self portrait using strictly code on the p5js website. It was incredibly interesting to try and develop new skills through the use of lines and shape in order to create a realistic figure. Going into the assignment, I decided that it would be best to replicate my everyday look at university to experiment with the website and learn more about the foundations of coding as a beginner. 

How this was made: I began the process of creating my self portrait by setting the canvas to an ideal size in which I chose to be (600, 600). This guaranteed a large working space that allowed me to comfortably develop different elements of the self portrait. I then began the process of creating the face and eyes using the eclipse function. Because I had previously practiced using the eclipse function in class, this was pretty easy to manage. However, when it came to creating the nose, eyebrows and the mouth, I struggled with what shapes and functions to use in order to do so. To resolve this confusion, I used the help and reference button provided by p5js to review the different functions that are available for use. I also used the help of Chatgpt by asking what possible functions could be best suitable for certain facial features, as well as in moments of uncertainty when dealing with certain dimensions and the meaning of each value within coordinates. Doing this allowed me to learn more about other shapes such as the use of line, arcs, and triangles. 

Once I was done with the primary facial features, I moved on to the hair. Personally, the hair was the feature in which I struggled the most with this assignment as I was unaware of what shapes and functions I could use to create something realistic. This encouraged me to just experiment using the ellipse feature as it was the one I was most comfortable with. Therefore I created several ellipses to form dimension and realism in the hair. I also experimented by using the rect function which I found in the reference section of the p5js website to create a darker layer of hair behind the neck to create a sense of light and shadow. I also managed to create an interactive function in the background as it changes colors when in contact with the mouse. I did this through the use of adding the mouseX and mouseY feature that was learned in class into the fill RGB function. 

Code that I am particularly proud of: After completing this assignment, I am particularly proud of the clothes in which I created. I decided to try and replicate an abaya through the use of different shapes and functions. Once again, I used the curved rect function to create the body, followed by regular rectangles to create both the shaila and tshirt underneath. I also used the triangle function to create a collar to go around the neck. I am particularly proud of this code as I created it without the use of any references, through the use of my skills that I have developed throughout the assignment and the creation of different features in the self portrait.

// Clothes 
 fill(255, 180, 180)
 rect(160, 500, 280, 150, 90);
 fill(255, 200, 200)
 rect(220, 500, 150, 100)
 fill(255, 255, 255)
 rect(240, 500, 105, 100)
 triangle(345, 500, 345, 480, 280, 500);
 triangle(250, 550, 250, 480, 300, 500);
 }

Reflections and ideas for future work or improvements: Overall, I am highly satisfied with the final outcome of this self-portrait, particularly because this was my first time coding. I believe that I have been able to develop certain skills which can be used further throughout my time in this course and that I have developed a fundamental understanding of coding using p5js. As for future improvements, I would like to become more comfortable with understanding what certain functions do such as the curves and arcs, as I found the most difficulty in trying to use these elements and I believe that they could have helped me in creating certain features like the hair and clothing. I would also like to deepen my understanding of what the numbers within certain functions represent in order to more effectively position and adjust the shapes without the struggle of spending too much time trying to figure out their coordinates. I am looking forward to seeing how the skills that have been developed in this assignment can help me when it comes to future coding assignments.