Author: Jheel Thanki

Inspiration

For this assignment, the task was to make a simple work of art using loops. My first thought was that  I wanted to make something that resulted in a visually appealing pattern of some sort (with an element of interactivity as well). As I was brainstorming ideas, I scrolled through my Pinterest boards and came across various dot mandala designs. The intricate patterns and vibrant colours of these mandalas instantly caught my eye, inspiring me to create a digital version that would capture the same sense of symmetry and beauty. I wanted to explore this concept – an effect where symmetrical shapes radiate out from a center point, creating an interesting pattern.

Concept

The core concept behind my project is to also incorporate a kaleidoscope-like pattern that keeps rotating, creating a mesmerizing visual effect. I aimed to use symmetrical shapes (circles) and a gradient of colors to mimic the aesthetic of traditional mandala designs. To add an interactive element, I decided to map the number of segments to the horizontal position of the mouse, allowing viewers to alter the complexity of the pattern by simply moving their cursor. This interaction not only makes the art more engaging but also gives viewers control over the visual complexity, making each interaction unique.

Implementation

Here’s the final product!

I started by setting up a square canvas with a black background to make the colours stand out. The origin was moved to the center of the canvas to simplify the rotation and placement of symmetrical shapes. I used two nested loop to create the series of symmetrical shapes (circles in this case) radiating from the center. Each shape is rotated by an equal angle to maintain symmetry. The number of these symmetrical segments is dynamically adjusted based on the mouseX variable, adding interactivity.

Something I explored on my own was how to use the rotate function and incorporated it for two purposes in the artwork:

• To rotate the entire canvas continuously over time, creating the overall animation effect of the whole mandala rotating.

background(0); // black background
  translate(width/2, height/2);  // moving origin to the center of the canvas (instead of top left corner)

  // Rotating the entire canvas to animate the mandala
  rotate(frameCount * 0.6);  // rotating by frameCount * 0.6 to make the animation and control speed (since frameCount increases with every iteration of the draw() function)

• To manage the placement of individual symmetrical segments of the mandala.

// Mapping the mouseX position to the number of symmetrical segments (between 6 and 30)
  numShapes = int(map(mouseX, 0, width, 6, 30));
  // print(numShapes);

  let maxRadius = 250;  // max radius (distance from center of canvas till edge) for shapes

  // Loop to create symmetrical patterns
  for (let i = 0; i < numShapes; i++) {
    push(); // saving current drawing style settings and transformations
    rotate((360 / numShapes) * i);  // rotating each shape by equal angles

I enjoyed Casey Reas’s talk more than I expected to, especially considering that this was the first time I had heard the idea of “randomness” and “chance” being used in an artistic context as compared to a math or probabilistic one. After I began to appreciate this notion of chance in art, I was struck by how even this is very subjective and can be used in countless ways.  One example of this is when Casey Reas talked about the concept of decision-making regarding the level of randomness incorporated into artwork. This means that artists sometimes also make conscious choices about how much of their work they leave to chance, creating “a delicate balance between order and chaos”. This also remined me of the quote by Gerhard Richter:

Above all, it’s never blind chance: it’s a chance that is always planned, but also always surprising. And I need it in order to carry on, in order to eradicate my mistakes, to destroy what I’ve worked out wrong, to introduce something different and disruptive. I’m often astonished to find how much better chance is than I am.

What I found extremely interesting about this idea was the intentionality behind randomness in art. It is about letting go of complete control but not entirely abandoning it, which can lead to unexpected, sometimes better outcomes than planned. This challenged my initial assumption that randomness in art is purely accidental and without thought. In the end, it made me contemplate: what exactly is the role of the artist? Is he still the creator of the work, or merely a medium that guides chance to reach the final piece? It also made me consider how we can use randomness not just to fill gaps but as a crucial tool for innovation and breaking away from mistakes.

One part of the talk that made it more interesting for me was the use of examples and actual works of art to illustrate this use of randomness. For instance, I found it very intriguing that something seemingly simple like the Table of Random Numbers could have such widespread use across several industries. I also liked the example of the piece “Fractal Invaders”. The idea of using a coin flip to generate art created very interesting results, but what was even more interesting was how symmetry and duplication suddenly sparks our imagination and makes us see figures in the art. It made me think that something that might initially seem highly structured or algorithmic can still engage the imagination in many ways. Overall, the talk made me rethink the creative potential of combining strict rules with the freedom of randomness, and helped me see that the “unexpected” is an important element in the artistic process.

I saw this assignment as an opportunity to get creative with p5.js and make something visually appealing using basic shapes, while also adding some elements of interactivity. I have had some experience with coding and I’m also really passionate about design, so overall, I really loved how this project made me think of new ideas and navigate the challenges that came up.

Main Idea

For this portrait, I wanted to create something that truly represents a part of me. As someone who absolutely loves books, I decided that a simple library setting (with a bookshelf) would perfectly capture this passion. Instead of going for a generic self-portrait, I focused on the details that define my personality, aiming to reflect my love for reading in both the visuals and interactivity of the piece.

Implementation

Creating the library scene involved several key steps, from drawing the bookshelves to the self-portrait itself. The books in the library are not just static; they come alive through interactivity, making the scene more engaging and fun. Every time you hover your mouse over a book, it bounces up and down, creating a playful effect. I’m particularly proud of the way the books bounce—implementing this took some effort, as it involved calculating the physics for a smooth jumping motion and resetting them back to their original positions. A fun surprise was discovering how, when you swipe the mouse across a row of books, it creates a wave effect, adding another layer of interaction.

Here’s a snippet of code that controls the bouncing of the books :))

// Drawing books with jumping effect
  for (let i = 0; i < books.length; i++) {
    let book = books[i];

    // Checking if the mouse is hovering over book
    if (
      mouseX > book.x &&
      mouseX < book.x + book.width &&
      mouseY > book.y &&
      mouseY < book.y + book.height &&
      !book.isJumping
    ) {
      book.isJumping = true; // book starts jumping when hovered
      book.velocity = -5; // initial jump velocity
    }

    // Handling jumping animation
    if (book.isJumping) {
      book.y += book.velocity; // updating y position based on velocity
      book.velocity += 0.4; // applying gravity effect

      // checking if the book has fallen back to its original position on the shelf
      if (book.y >= book.originalY) {
        book.y = book.originalY; // resetting position to the shelf
        book.isJumping = false; // stop jumping
        book.velocity = 0; // resetting velocity
      }
    }

 

Another feature I implemented is the colour change of the book held by the girl in the portrait. When you click on any book in the library, the book’s colour changes to match the one clicked, and I think this really adds to the interactivity of the scene and somehow just makes it seem more of a representation of my personality.

This is the code that controls the book changing colour:

function mousePressed() {
  // Checking if a book is clicked
  for (let i = 0; i < books.length; i++) {
    let book = books[i];
    if (
      mouseX > book.x &&
      mouseX < book.x + book.width &&
      mouseY > book.y &&
      mouseY < book.y + book.height
    ) {
      // Changing the girl's book color to the clicked book's color
      girlBookColor = book.color;
    }
  }
}

 

One of the most challenging parts of the drawing was the hair, which required understanding how the bezierVertex() function works. I spent time experimenting with the curves to get the right look, and I’m happy with how the hair flows in the final version. I also focused on the randomization of book sizes, spacing and colours to create a more realistic and dynamic library scene. The varied spacing between the books was particularly important because it prevented the scene from looking too uniform and added to the realistic clutter you’d expect in a real library.

Reflections and Possible Improvements

I’m proud of how the self-portrait captures a unique part of me through both the visuals and interactions. The bouncing books, the randomization of elements and the changing book colours all work together to create a portrait that isn’t just about how I look, but about what I love. The process was a great learning experience, especially in terms of coding the animations and achieving a realistic look using basic p5.js knowledge.

Possible improvements include adding more interactive features, such as having the girl’s expression change when clicking on different books or adding a subtle glow effect around the hovered book to enhance the visual feedback. Also, optimizing the code for smoother animations, especially when multiple books are interacting simultaneously, would enhance user-experience. Overall, I really enjoyed this project and look forward to exploring more of my creative potential throughout the course.