Author: Nelson Mbigili

The whole idea of interactivity and its distinction from mere reactions or participation stood out for me considering the focus of this course (Introduction to Interactive Media). As the text analyses interactivity insisting on dynamic exchanges between participants, requiring active listening, thoughtful consideration, and responsive speaking, I realize the importance of these elements. As an artist, I aim to integrate emotional aspects of my designs, considering how my audience will hear, think, and speak as they interact with my work. Beyond artistic experiences and designs, I also hope that computer systems and programs continue to evolve becoming more interactive as we evidently see it bloom day by day through the advancement of generative AI and other technologies. 

While interactivity involves listening, thinking, and speaking, its application might be challenging or unnecessary in some contexts within computer systems and applications. I hope that the level of interactivity required be only tailored to the specific needs and goals of the system or application.

Concept and Inspiration

For this week, as I was looking forward to make use of arrays and object oriented programming, I wanted to draw lights that smoothly turn on and off. My idea has inspiration  from disco lights that blink turning on and off. An image of such an arrangement of lights can be seen here below:

The alternation of black and white colour are intended to create an illusion of lights turning on and off.

Implementation

To implement my idea, I created two classes one for the boxes and one for the circles. I had functions to draw the boxes and circles in each class and created the objects in the setup function and saved the locations of each in an array. In the draw function I used the arrays to draw the boxes in the canvas.

My sketch

My final sketch can be seen here below:
<

My code

Continue reading “Week 3: Smooth Lights”

As I reflect on my own artistic experiences, I have often tried to maintain control over my art pieces. While I do not consider myself a very skilled artist, I have been challenged by the idea of allowing a blend of randomness and planning, particularly in electronic art. Casey Reas’ idea of balancing order and chaos, with examples from various artworks, has shown me that chance can indeed add value to art. While I still believe that randomness can enrich a piece by adding layers of unpredictability, I lean more toward the idea that certain elements (if not most) should remain under the artist’s control to preserve uniqueness. Randomness should therefore complement what is already structured, rather than dictate the entire piece. A good example of how to effectively use randomness is to generate random inputs that run through algorithms the artist has defined.

While we value both the artist’s design and the abstractions from chance, a good balance between the two is necessary, especially in a time when there are so many generative options available. This balance helps preserve the value of art. Lastly, I believe the extent to which randomness is used should remain entirely up to the artist, and the way different artists apply it can also contribute to the uniqueness of their work.

My concept:

As I was thinking of what to draw making use of loops either (for or while), I decided to draw the Sky! I choose the sky because I thought drawing stars all over the sky manually one after another would be tiresome. So using loops would be the best option.

In order to make my art interactive I decided to make my sky dynamic, where by it would change mode from day mode to night mode or from night mode to day mode on clicking the mouse.
In the night mode, I used a for loop to populate the stars and in the day mode I used it to scatter the clouds.

Piece of code I am proud of: 

I am proud of how all the sketch has turned, however I am particularly proud of how I was able to finally create a piece of code to draw stars. I was able to achieve this by  using beginShape() and endShape() functions. Inside these, I used a for loop with two concentric circles with different radii. By altering the angle, spikes had vertexes on outer circle and other points on inner circle. Then the two pairs connected all the way from 0 – 360 degrees. Below  is that piece of code:

//Function to draw stars
function drawStar(x, y, radius1, radius2, npoints) 
{
// Angle between the outer points 
  let angle = TWO_PI / npoints;
// Angle inner points between the outer points
  let halfAngle = angle / 2.0;
// Start defining the shape
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
// x and y coordinates for the outer point
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
// x and y coordinates for the inner point
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

My Final sketch:

My final sketch (Dynamic Sky) can be seen here below:

Reflection for future work

Through this assignment, I have come to appreciate loops. Before using loops  I stared my manually drawing (hard coding) every location and size of the stars, but loops saved the work and made my sketch more artistic. In future I hope to incorporate loops in my sketches so I can create engaging and manageable sketches.

Background
As I was learning how to draw using P5.js, I initially experimented by arranging shapes and figures randomly. I found myself drawing a robotic face because it was easy to arrange boxes and shapes, even if they didn’t resemble a familiar human face. As I became more comfortable with using various shapes and gained an understanding the coordinate system, thanks to the detailed references on the P5.js website, I wanted to create something more human-like. I started by sketching a simple drawing (below) of a man wearing a tie in my notebook.

I managed to complete the drawing in P5.js  and it appeared better than I expected. I also added some features including dynamic objects and mouse inputs. However, I was not fully pleased with ‘my almost portrait’ as I did not like how the lower part turned out. I faced challenges in filling  the colours  on the lower body and arms because my drawing had a lot of independently connected lines as seen below. So I wanted to make the lower part look better.

My Final Portrait
Despite the fact that I was very impressed with how my portrait had turned, I did not like the fact that everything below the head had to remain with the background colour.
So I decided to come up with a simpler design by changing the lower body and adding a neck and a small chain and I could now colour it different from my background.
I had added some a Moon and Sun emoji which simultaneously passed indicating day and night. I set some offsets for the smoke from the man’s cigarette so it appears to ascend upwards.
Lastly but not least, I was curious to explore  mouse input functions, so I added blinking on pressing the mouse.
My final Portrait can be seen below:

Achievements I am most proud of

I have managed to learn so much in such a simple assignment.  One achievement I am most proud of is how I managed to add some dynamic objects and features in my portrait. One of them being the moving smoke, where I added some offset to move the smoke upwards and some ‘Shake’ variable to make the smoke shaking as it ascends. Below is the code for that:

// Drawing Ciagerette tip 
circle(220, 375, 10);
// Drawing Cigarette smoke 
fill(12, 12, 12);
// Used this shape/Curve from (https://p5js.org/examples/repetition-bezier/)
bezier(220, 375, 200, 350, 250, 320, 230, 300);
bezier(222, 380, 210, 355, 260, 330, 240, 310);
noFill();
// Adding Movable smoke to make it dynamic
fill(fade, fade, fade)
bezier(220+shake, 375+Smokeoffset, 200-shake, 350+Smokeoffset, 250+shake, 320+Smokeoffset, 230-shake, 300+Smokeoffset);
bezier(222+shake, 380+Smokeoffset, 210-shake, 355+Smokeoffset, 260+shake, 330+Smokeoffset, 240-shake, 310+Smokeoffset);
noFill();

Reflections and ideas for future works

Creating a portrait has  been a very nice assignment. I have gained understanding on working with P5.js. I have also experiences the importance of properly commenting my code as it was easier to navigate the code and see what to improve, which could have been very difficult without proper comments.
For future, I would love to add more functionality and make use of many other  features that I was not able to use in this assignment such as the 3D objects, loading images, rotation and many other.