“You can make anything by writing” – C. S. Lewis

Concept:

I’ve been watching a few of Patt Vira’s videos on coding and one of them about generative text jumped out to me. In this video she made the text rotate in a interesting pattern. So I followed along the video and decided to try and maybe extended it a little bit so it’s a bit more unique. I also will say I’m still a bit new to the use of many of the JS functions and syntax, I’d like to hopefully revisit this in the future. But I’ll save it for the reflection.

I noticed a few things I could improve her code on, such as giving it different fonts. It was a bit stale if only one font was used so I thought maybe we can make it so when the user clicks, the fonts change. Also it was a bit bland seeing the hello text, so why not give the user the option to change around the text. Below is the final product.

How it’s made:

So the code is done with points, where the points are displayed based on the text’s poistion. Then lines are drawn to give that 3D effect of the code. Now this code utilizes the angles, and degrees which I will be honest, I struggle to understand as they were quite, finiky to say the least.

But then the text itself is displayed on the screen, in the rotational motion and in 3D. Again, learning this was quite a challenge but it was interesting nonetheless.

Highlighted bit of Code I’m proud of:

I decided to make it so there are different fonts used when the user clicks the screen.

function mousePressed() {
  if (mouseY > 50) {
      currentFontIndex = (currentFontIndex + 1) % fonts.length;
      font = fonts[currentFontIndex];
      updatePoints();
  }
}

This function above cycles through a list of fonts and goes to the next font in the list. Based on the font, it gives off a different design, ranging in boldness and style. It was a good amount of fun to make but I will say I struggled here a little as initially I thought I could make a list using the loadFont function. But then after a bit more thinking, it is better to dynamically change the font type, using a different variable for a list. So I’ve made a fontList variable which houses the many fonts I’ve added to the file

let fontPaths = [
  "fonts/GoogleSans_17pt-Regular.ttf",
  "fonts/Dosis-Regular.ttf", 
  "fonts/ArchivoBlack-Regular.ttf",
  "fonts/PlaywriteNZBasic-Regular.ttf",
  "fonts/Bungee-Regular.ttf"
];

Reflection

I will say, I wish I could do more with this code. Obviously time constraints and many assignments coming up did hinder the overall product but I feel like some ways I can expand on it is by making different designs of the typography. Or even, finally figuring out how to make the text spin in different directions. However I feel confident in what I learned so far through this assignment so hopefully I can use this to expand on it for the midterm project.

This reading made me question more so the everyday designs that are prominent in our lives in terms of usability and understanding. I feel as if, the more modern and contemporary a design is, the less funcationality and even instructions behind it are. I mean, just as a real life example, when I go to Galleria mall, the bathroom was quite confusing to use. They had some new faucets, where they output water, soap, and also you can blow dry your hands. Of course, this is great in terms of efficiency and spacing, in order to have all you could need at your fingertips. But not only was it, a little odd to understand, it was also a bit inconsistent, as depending on where you put your hands, you could get splashed with water when you wanted to blow dry them, or soap when you wanted water. I applaud of course the ease of convience for it, but simply put, better labelling and also a bit of a larger design would be appreicated.

In terms of interactive media, I would agree with the three design concepts he presents and I’d go as far as to say that, more emphasis should be on the  experience design. When I notice think about interactive media, it is paramount that interactivity is a key part of designing a enagaging and unique bit of media. But if I’m honest, most of the time, I feel a bit underwhelmed from the experience I get from most interactive designs, say in museums or art galleries. It’s not to say there is a lack of interactivity, but I’d argue that memorability of the given piece of interactive media matters a lot, especially if you want to be remembered. One person I can name who I’d say masters the experience is Scott Snibe’s Boundary Functions . You still interact but also take in the experience behind the art, and the actual meaning as well. Another place I’d say is places like TeamLab, where you truly are surrounded by this experience of art that I think you can lose yourself in it as easily as you can interact with it. Even theme parks like Super Nintendo World have a lot of interactive games, where you can feel challenged but also enjoy the experience.

To close off, I would say it matters a lot in how you frame the experience of interactivity. It needs to speak to our human emotion and to really provoke us to get the feeling of which the curator of that bit of media, was trying to convey.

“Colors, like features, follow the changes of the emotions.” — Pablo Picasso

Concept:

Recently, I watched Disney’s Pocahontas, and one of the songs that has been become quite a hit was “Colors of the Wind”. It is a beautiful and emotional song with a message about living in a more interconnected, diverse and colorful world. Which is what I wanted to represent with the use of colorful circles, moving around as if they were in the wind. And it is quite mesmerizing to look at the different circles in a wide range of color. To me, it gives a nice representation of how we look at ourselves in society, where we’re all different and unique, yet living side by side, we creating this enchanting community of diversity. Take a peak below, by clicking on it with your mouse (or tap if you’re on mobile).

How it’s made:

So for this assignment, I utilized OOP and arrays to generate the circles. I created a class where I defined the main variables within the constructor function, which is integral to the class. Then for the movement of the circles, I made a seperate function which manages the movement by increasing the direction vector of the circles by a random amount. Then I made a function to actually display the circles.

Now the way I went with generating multiple circles was using an array, and then a for loop to just append circles to it. And finally, another for loop so the balls are displayed and have movement. Now for the color factor, I went for a simple effect where if you click the canvas, the colors of the circles rapidly change. This did in turn create a sort of LSD effect so if you’re sensitive to epilepsy, I would not advise you holding down the mouse button.

Of course, there are probably much more efficient ways to create this same effect, but honestly, I just randomly stumbled upon it. I was just playing around with the size and color variables and in the end, this is what I produced. It looked quite satisfying so I decided to go along with it.

A highlighted bit of code I’m proud of:

This bit of code I’m quite proud of as I struggled with how to make the circles not leave the boundaries of the canvas. It was quite difficult intially as I just assumed that it was as simple as defining  specific parameters and that’s it. But then I thought more about it and wanted to make it dynamic, instead of static.

So I tried and eventually was able to make it so the circles sort of bounce off the walls and go back towards the center of the canvas. In this sense, they still won’t disappear off the canvas, and won’t be hindered in the velocity.

move() { //This function gives the balls vectors of directions
    this.x += this.dx;
    this.y += this.dy;

  //The if statements constrain the balls so they don't go off the canvas
    if (this.x < this.d / 2 || this.x > width - this.d / 2) {
      this.dx *= -1; 
    }
    if (this.y < this.d / 2 || this.y > height - this.d / 2) {
      this.dy *= -1; 
    }
  }

Reflection:

This was quite a fun project to make. It was interesting experimenting with classes and I can see why they are quite fundamental in not just efficinizing your code but also dynamically creating new objects and changing their variables. It is insanely useful to shorten the code used and to add as I would like to refer to them as characteristics to objects, through the use of functions.

And I think the artwork, while simple in nature, does have a good amount of deep meaning. If you click the mouse, you get a different color for each and every circle. And that to me just is a beautiful way to see the world, where each and every one of us are a different color, come in different shapes and sizes and go in random directions. When put together, we create a beautiful and colorful muse, a nice representation of our world.

Crawford’s reading has spiked my questioning of what we deem is an interactive system and in general interacitivity. Because if I am honest, I do not agree with Crawford’s take on his definition of interactivity. He comes at it from a more simplistic and dumbed down view of the definition, and frankly, doesn’t seem to me is a proper way to define it. Crawford defines interactivity through the following defintion: 

I choose to define it in terms of a conversation: a
cyclic process in which two actors alternately listen, think,
and speak. ~ Crawford, 1950

I mean firstly, isn’t everything we see, hear, touch, smell and feel a “conversation”. Every body of work, is a communication, between the author/publisher and the reader consuming the information. It is quite literally a transfer of information like any conversation. Now for this cyclic process he talks about, there are many holes with it.

I mean, he mentions that two actors are supposed to listen, think and speak. But any program, and especially AI, cannot think independently on its own accord. And the other point was him dismissing the fact that books and movies are not interactive by nature. I’m sorry, but what does Word or Powerpoint or hell, even me writing this article on WordPress, constitue as?? You cannot say, okay if I know what to expect with a book, that it’s a think object with words, that any computer program is much more interactive. I know what to expect when I type on the keyboard in Word or drag around images in Powerpoint. Any interaction I have with a computer program, to similar degree I’m interacting with a book by reading it. Even movies too, they make us think about the characters thinking what action to take given the event in the movie. So it is the same thing and both actions are the same degree of interactivity.

Rant out of the way, what would I define interactivity as in terms of characteristics? I would define it in a way where any action we do with a program, creates a reaction. And no, not where the computer thinks, but where we are actively thinking what the outcome is. I would also say here that interactivity is definitionally having multiple art forms and elements coming together in one. Games are the perfect example of this notion, as they compile together multiple elements, such as text, images, music and user input, in order to form a complete intaractive experience.

In terms of my own p5js sketches, I will add more interaction in terms of keyboard and mouse input and dedicate different functions for different keys. Such as if I did an artwork of some sort, the user would have different effects happen depending on the keys pressed. Another potential option is exploring face tracking or body tracking software, but that might be a challenge in of its own haha.

 

“One must still have chaos in oneself to be able to give birth to a dancing star.” — Friedrich Nietzsche

Concept:

For this assignment, I decided to go for a feel about how I view life. In my opinion, I view life as quite chaotic and we feel like we don’t have really any control over it. But at some point, we stand back and stop for a moment to get our life in order. We do this from scheduling, persistency in our work and even making sure that nothing will surprise us. But no matter how much we try, there will always be even a little bit of chaos in order. Which is why the piece below represents that very feeling.

How it’s made:

This actually partially uses some code from my last assignment, namely the random ellipses going around in different directions. It uses a simple for loop, that constantly iterates a random color for the ellipses and they are placed randomly on the canvas. I’ve made it so they are smaller as if I made them bigger they would be more dense and you practically can’t see much.

That in itself is meant to represent chaos. There’s no specific order or movement that the ellipses follow, no specific size they must have and no specific color they need to embody. To me, this represents pure chaos.

But I then wanted to represent the logic and order our lives embody so I thought the best to do that, was to get the ellipses under control. I was thinking about what’s the best way to represent order and I thought:

“To make order from chaos, there needs to be a base line structure to follow.”

Wait, a line? Yeah that could work. But to actually showcase more ellipses I needed to make a 2×2 made only from ellipses. So I tapped in to some coding knowledge from before and made a nested for loop.

A highlighted bit of code I’m proud of:

I really like the nested for loop that I made to represent order. It takes in the length and width of the canvas, and sorts out the ellipses in rows and columns. It’s quite simple honestly when you think about it. Also I made sure to move them a bit down so they don’t stick to the walls of the canvas.

if (pause == true){
    background(255)
    for (let i = 0; i < widthCanvas; i = i + 50){
      for (let n = 0; n < heightCanvas; n = n + 50){
        fill(random(255), random(255), random(255), random(255));
        ellipse(i + 25, n + 25, random(50));
      }
    }
  }

But I thought more in adding a bit more to this. Of course, order can be easily represented with rows of ellipses in the same color. But I feel as though, no matter how much order exists, there’s still a little element of chaos inside.

Which is why, I made it so the ellipses have different color, and different sizes, but still in line with the order created. To me, it represents just that still a little bit of chaos can exist.

Reflection:

I enjoyed making this simple effect. Originally I wanted to be ambitious and go for an effect where if I click the mouse at a certain point in the canvas, then all of the circles would come towards the mouse. And when the user would let go, they would go back to the random movements. Unfortunately I struggled and couldn’t think of a way to go about it.

But that’s not to say that this wasn’t good. I think giving it more time to thinker and play around, perhaps someday I could make it have cool animations and effects.

Going into Reas’ talk about the length of using order or complexity in a digital artwork, I find it striking just how different the artworks are made depending on the level of randomness used. I mean looking at the Commodore 64 program, it’s very clear that logic and clearly defined patterns are sort of the bedrock of the artwork. Whilst there is a slight bit of randomness in terms of the direction of the lines, it’s interesting that the core of it, is quite literally a random coin flip. Starting from a random coin flip and then giving it symmetry, it’s clear that while on the surface there is a sense of unity and structure to it, the very first base layer is randomness. The level of randomness used is certainly not as heightened as other art pieces but I find it interesting how it is still present.

Whereas for the art piece “Articulate” there is a much higher level of randomness and noise, but the bedrock level is actually a unifrom, straight line. The artwork starts out from logic, in the form of a line, but then it branches out in random directions. It doesn’t have any sense where it goes to and what’s even more interesting is that it is able to make an art piece with actual depth to it. This is vehemently clear as some parts of the artwork are lighter than others, giving a pop feel and something that can be more so passed off as an art piece. So even still, it is possible to have a coherent art piece even if the starting layer is randomness.

For my own art, I would utilise the second approach. I’d start perhaps even with a uniform pattern of dots or lines, and then really go from there. I’ve used this practice even for drawings with acrylic colours, as it gives me more of a lovely sense of chaos as the drawing progresses. I feel like that’s what we sort of strive for in art, as we feel as though throughout the drawing process, we need a sense of rebellion to get our emotions across.

But how do we balance chaos and order? Personally I believe we need a good amount of intial grounding at the beginning of our drawing. And then as we go, we should have a very good degree of randomness. But not so much it actively ruins our order. Translating it into percentages, I would say a good 5-10% of order at the beginning, with a decent sized 70% randomness and 30% of order throughout the drawing process. But of course, at the end we are our own artist, so we set our limits and I’d always welcome more randomness.

“I am my own muse. I am the subject I know best. The subject I want to know better.” — Frida Kahlo

Concept:

For our very first assignment in Intro to Interactive Media, I was able to make a portrait of myself, using only simple 2D shapes, through the use of p5.js’ functions. My main goal was to try an recreate as many facial features about myself, such as my lush, green eyes. Also I added some clothing with a color which sort of, compliments my eyes.

Below is my finished portrait:

How it’s made:

The portrait was made using p5.js’ functions for 2D shapes. I made good use of ellipse, quad, arc, circle mostly as they helped me get a good grasp of how I would shape my face.

Starting out though was actually difficult, as I was confliced of whether it would be best to use a circle or an ellipse for my facial structure. Of course both would work out, but I chose the ellipse as it made more sense for me, as I could add get a better shape to add external features, such as my ears or hair.

Then it was a simple case of designing my face out. I used ellipses for my sclera, and a circle for my pupil and iris. I used ellipse for my nose (though I was considering using a triangle too). And for my shirt I used a few quadilaterals to make the shape of my body. As for the shoulders, I used ellipses that are slightly raised and feel more natural.

Now I did have a few struggles whilst creating the portrait, such as positioning the shapes. I started out using the width and height arguments and then having them positioned by either adding or subtracting a given value. Whilst this worked for a while, it was cumbersome as to figure out the starting and end points of where I wanted my shapes.

But then is when I used my smart head for once and thought

“Wait, I can use the print function to see the exact coordinates of the canvas, so I can see where I can pop my x and y coordinates”

So afterwards for some of the shapes in the code I decided to simply use exact values in order to make my life easier haha. This was done just by using the print function to print out the current position of the mouse using mouseX and mouseY.

Another issue I faced and a partial learning curve was the arc function. I had difficulty with understanding how to utilize it in terms of generating the shape of the arc. As the function utilized the arguements pi, half pi and quarter pi, it was difficult to see at what part did the arc start and end. The arc function was mostly used for my mouth and eyebrows and my hair for a more curved feel.

A highlighted bit of code I’m proud of:

So as my birthday was approaching (14th of February and yes, I’m born on Valentine’s Day 😊), I thought to try my hand at adding a funky effect to sort of mark the occasion. I was aware of the mousePressed and random functions and decided to have it generate circles of random color and size, with them being randomly appear around the background. The reason why I’m proud of it was I wanted to see what a simple effect would do for my canvas.

if (mouseIsPressed){
  
  background(0)
  
  noStroke()
  fill(random(0, 255), random(0, 255), random(0, 255), 100)
  circle(random(width), random(height), random(10, 100))
  
}

Reflection:

I throroughly enjoyed creating my self portrait. Although at many points I had struggles with positioning the shapes around, I was able to sort of overcome it in my own manner. The main thing I struggled with was the arc function, as I was a bit confused at how to implement it with getting the arc correct.

I also did like the addition of the effect but I feel like I’d love to add more perhaps to my own self, such as giving myself a different expression. And maybe I could touch up the effect a little more, such as adding more texture. Perhaps even having a smooth effect would be a nice addition. But overall, as a start, this assignment was quite fun to do and I relished in creating my own portrait.