Author: djg9362

Throughout my time of reading Chapter one of this story, I couldn’t help but remember an old Star Wars game that I used to play when I was a little kid with a Nintendo DS. The game, in question, went by the name of “Lego Star Wars: The Complete Saga”, where there was a level in the game’s chapter based on the 3rd Star Wars prequel, Revenge of the Sith, where I was Anakin Skywalker in his yellow plane and I was supposed to fly to a certain destination; however, there was this section of the level where there was a holographic border wall that no matter how hard i tried, i couldn’t bypass it and move on to the next. If I had a dollar for every minute I spent trying to shoot down said wall in order to get through, I’d have enough to buy a $15 burger with fries; not to mention the amount of times in which I tried taking a shortcut around the border wall, but that move was sadly no use! This moment was driving me nuts because the border wall looked as if it shouldn’t be too hard to pass by, but I was having trouble figuring out if I had to either shoot something to disable it or bring something with me to disarm it. After so long, my own brother had to step in and help me figure out that the way to bypass this border wall is by grabbing a purple ball of energy with me and drop it off somewhere near a hexagon shaped bowl that would deactivate the border wall without difficulty. Despite completing the level successfully, I still look back into this memory and think that perhaps there should’ve been some sort of highly responsive clue that would’ve given me an idea of what I should consider finding it in order to move forward through the level faster. I could imagine a mini transparent blue box popping near my Nintendo DS screen popping up and informing me that I need to find this certain ball of energy in order to move forward in the level. Therefore, because of the frustrating situation of this memory of mine, that is why I believe that the idea of signifier, or at least examples of it, should be explained a little more in the reading because the idea can be applicable for any game similar to the one I played where someone is stuck in a section of level and needs a clue about what to do or what to find, similar to my past issue.

All in all, the main principle that I want to try applying into a few of my sketches in interactive media, if possible, is the principle of signifiers. This is because that someone were to face a sketch of mine that required them to activate something via clicking or hovering over an area, but have no idea as to what they must focus on doing in order to achieve said-task, then perhaps a mini clue of sorts should be of existence in order to assist their understanding without holding their hand too much. One has to remember that not all humans share the same intelligence and/or critical thinking skills. It will always be a gamble between whether they are met with a tricky task but are capable of finding out what it is they must do, or they are NOT able to figure out the right course of actions and are in-need of a little hint as to what is the recommended action for them to conduct. It’s as the saying that I think of in my mind goes: the clearer something is without giving too much away, the better performance that you will be able to do in an interactive scenario.

The main idea, from my understanding, is the fact that what makes a video game interactive as it should be is if it is willing to assist the user/player in figuring the right course of action for a task that they are not sure how they must accomplish. The whole thing of an interactive program and the user is for the both of them to be able to communicate with each in order to ensure that they understand each other. Besides, without any tip to help the user move forward in the interactive program, they might as well be staring at a sketch that they cannot interact with any further; something that would make the sketch look like a regular art piece rather than interactive one. Thus, some kind of signifier as to how one can move forward in an interactive program, just like how they’d move forward in a video game, will surely help the sketch stay true to its interactive nature. Overall, these are the thoughts that I’ve gathered from the reading.

let colorData;
let positionData;

async function setup() {
  createCanvas(400, 400);

  // start up information from the 2 CSV files
  colorData = await loadStrings("colors.csv");
  positionData = await loadStrings("positions.csv");

  // pick one color by random
  let myColor = random (colorData);

  // pick one position by random
  let myPosition = random(positionData);

  // keeping the X and Y coordinates separate
  let coordinates = myPosition.split(",");
  let x = Number(coordinates[0]);
  let y = Number(coordinates[1]);

  // Making sure background color is set and understood
  background("gray");

  // Chosen text customization
  textFont("Georgia");
  textSize(50);
  textAlign(CENTER, CENTER);
  fill(myColor.trim());

  // Make sure text is displayed
  text("HHN", x, y);
}

For this assignment, I figured this would be the perfect moment to create a generative output based on a characteristic trait of mine that I often don’t tell too many people about. What is this characteristic trait in question that I speak of? Well, to answer that question, let’s just say that it has something to do with a Halloween event over in Florida, USA, that goes by the name of Halloween Horror Nights or HHN for short; this is an event that i personally adore with each fragment of my heart because of how it gives me the thrilling adrenaline rush of going through its haunted houses based on famous horror films. With this trait of mine mentioned, this is what has fueled me into thinking a way to have this assignment serve as a refreshing reference to what I adore; all while under the idea of presenting this trait of mine in the style of those old DVD screens on the TV where the DVD logo would bounce around the screen and how it would change color whenever it hit a corner. As someone who has grown up with a few memorable enough childhood moments of watching the DVD logo go all over the place and change color each time it hit the TV corners, i knew that i should have the name of my favorite halloween event be displayed within my sketch but in the form of this type of generative text output where each time you run it, the text itself would not only choose to “teleport” to a random spot by random, but also change color by random also!

 

To make this sketch of mine, i have had to use some of our previous classwork as inspiration for my sketch; this includes the “Hello Amazing Class” sketchwork as well as our other sketchwork that had those two CSV files (“colors.csv” and “circle.csv”) connected to the main sketch in order for the main circle to cycle in changing into colors/appearances if clicked by our mouse. This is how I had the bright idea to try creating two CSV files that were to be connected to my main sketch file, with those two being the “positions.csv” file and “colors.csv” file. Those two would be responsible for not only setting up the colors that are supposed to be the cycle the text is supposed to follow by random, but also the positions that the text too must cycle through randomly but in terms of different spots with the sketch canvas. Once those files were set up, that’s when I had to write in a way that can be described as this: x & y -> coordinates, myPosition -> myColor -> colorData + positionData -> colors.csv + positions.csv. It has simply been about connecting the files with the instructions of my code so that it can be ensured that the text would not only be able to pick a random color and position each time i run my sketch, but also that the coordinates of its x and y are exactly specified if they are to randomly move to an exact spot as intended without sparking confusion. One more thing to mention, is that i need indeed had to ask Ai to assist me in checking my code to see if it shall work; sure enough, it was able to help confirm that my code was indeed ready to go, but not without making a few minor adjustments (i.e. making that the text would be aligned to being centralized on each random spot it goes to rather than drip to the other side unnaturally). Honestly, looking back at this, I honestly feel a little bit happy that I was able to figure out how to create two new files to connect to my main sketch in order to have it operate as it should. It simply felt as if it saved me the trouble of having to figure out where to write the values of the colors and positions on my actual sketch instructions..

 

All in all, I should consider myself glad with how this sketch seems to look in my eyes. It is able to make its output look different with each time I press the play button to run it, whether it be through color or choice of alternate positions! Since that is the case, then perhaps what I may consider for a few more of my sketch works is the need to create some files of my choosing depending on what I’m working on and how I choose to organize things out without letting them be all over the place. It’s kind of like cable TV, where it’s your obligation to figure out how to organize each cable into connecting to their respective outlets so that the TV will be able to operate as it should be operating. Overall, this is all what I just needed to say about my generative text output workpiece.

When it comes to a strong interactive system, I like to consider the characteristics to be nothing more but representations of the system’s ability to LISTEN to a user. This is because if the interactive system is said to be involved in the “interactive” category of the arts, then it has to be the system’s obligation to stay true to its name via making sure that the communication between itself and the user is one-hundred-percent inline with each other. This includes the computer receiving the message depending on what the user manually activates on their own physical interface end and then actually ACTING upon whatever command it must have received. For example, let’s say that you were to be playing Five Nights at Freddy’s and you see an enemy outside your location in the game; your instinct would be to close the door right away to protect yourself. Only way to do that, however, is to have your hands interact with the hardware of the computer via moving the mouse so that your cursor would hover over the door button in the game, followed by left clicking your mouse so that the computer would respond to your action of left clicking your mouse by having the door in the game close under your command. Thus, this is an example of how an interactive system is supposed to work, with the computer giving you access to whatever it has to offer while also making it be your obligation to activate a certain command from your end that will reach into the computer system’s understanding and conduct a performance that will keep the interactive conversion strong as result of the computer “listening” to your inputs

With this understanding in mind, there are only a few ideas I can think of as of now. One idea that I wish to possibly figure out is how to create a series of coding that will let users control the position of certain objects/shapes from my sketches. Let’s say, for example, that if someone were to want to click on a triangle that could hypothetically be available in a sketch of mine, I would have to take it upon myself to write some coding instructions that would allow the user to either rotate the shape through simple clicks or, if possible, move the triangle to a different spot via holding and dragging with the mouse. Another idea I wish to figure out is how to hide certain phrases in my work.. only for them to reveal themselves upon being activated by the user interacting with my sketches. For instance, a user may be reveal a sketch of mine that would have them click on a random empty spot, only for the spot to show a transition of the words, “HHN”, fading into existence right before their eyes; this will be due to the hypothetical doing of me adding some coding instructions into my sketch that would allow said-words to fade into existence upon the user clicking on the designated empty spot with the mouse. After all, the concept of interactive art from my eyes should be known as art pieces where the observer him/herself is in control of what shall change within the sketch.

The main idea of interactive, from what I like to believe, is giving the art watcher their own mini controller that will let them change what is displayed within an art piece depending on a physical command from their end. Whether it be behind pressing a specific key on a keyboard or left clicking on a mouse that is connected to the computer display of the sketch, what matters most is if the user can communicate with the computer to change something in their favor. It must almost be like a conversation in real life, where one asks another a favor for something and the one who has been is obligated to fulfill said-favor. If it was the other-way around, where the sketch does nothing no matter what an observer touches to release a certain command, then it would simply be a normal artwork that may look stunning, but is missing something to give life to it. If you take it from me, a normal artwork may be good, but one can suppose that nothing is better than encountering artwork that just feels almost “alive” towards you and your presence.

let head;
let leftEar;
let rightEar;
let hat;

class BearObject{

  constructor(type, x, y, stopY, size){
    this.type = type;
    this.x = x;
    this.y = y;
    this.stopY = stopY;
    this.size = size;
    this.speed = 3;
    
  }

  update(){

    if (this.y < this.stopY){
       this.y = this.y + this.speed;
    } 
    
  }

  drawSelf(){

    // Head of Bear
    if (this.type == "head"){
      fill(255, 200, 0);
      circle(this.x, this.y, this.size);
    }

    // Bear Ear
    if (this.type == "ear"){
      fill(255, 200, 0);
      circle(this.x, this.y, this.size);

    }

    // Bear Hat
    if (this.type == "hat"){
      fill(0);
      rect(this.x, this.y, 80, 110);
    }
    
  }
  
}

function setup() {
  
  createCanvas(600, 600);

  // positioning of each object =
  
  head = new BearObject("head", 300, 0, 300, 250);

  leftEar = new BearObject("ear", 200, 0, 210, 70);

  rightEar = new BearObject("ear", 400, 0, 210, 70);

  hat = new BearObject("hat", 260, 0, 70, 100)
  
}

function draw() {
  
  background(220);

  console.log(head.type);
  console.log(head.size);

  head.update();
  head.drawSelf();

  leftEar.update();
  leftEar.drawSelf();

  rightEar.update();
  rightEar.drawSelf();

  hat.update();
  hat.drawSelf();

  
}

My goodness, this assignment was an absolute festival of stressful thinking. Firstly it requires not only looking back into some of our class notes, but as well as the example that was posted on the course website! It is simply because of the fact that generative digital art is not really my tempo and/or within my league. Nevertheless, I had to use the examples to the best of my ability to create this artwork inspired by this video-game franchise that I had always adored with all my heart. The franchise, in question, goes by the name of Five Nights at Freddy’s.

 

This franchise is a video-game series that I remember from my elementary school times, which has also resurfaced back into the present time period of my life! Since it has often brought a smile to my face upon interacting with it, i figured that i could maybe try generating a simple yet lovely art sketch based on the main Bear Mascot of the series; however, I went with the choice of coloring the sketch yellow as a way to pretend that it’s golden, because my memories with the series can be described as.. Golden.

 

Now, I was able to kind of familiarize with the concept of setting up the “class” of the objects in relation to the bear sketch and setting the rules within the class; however, my problem was figuring out how to get the circles actually moving down the sketch, which will almost make it look as if it is generating itself to life via visual movement from top to bottom. After some looking back into the reference sheet, as well as proofreading my mistakes with Ai, I realized that what I had to do was connect each object of the bear to the draw function; equivalent to connecting some cables together so that they would get a TV up and running without issue. In addition, I had to learn to connect the class to the draw function in a way that also required me to install an update command in my sketch, where it was responsible for making sure that the movement of the objects into their respective spots was possible. Right up there with the command of “drawSelf” that would assist in helping keep track of how the objects traveled down the X and Y coordinates until reaching the designated spot that the “setup” has advised them to stop at. It has been about setting the transitions up at the right time and right spots in order to ensure smooth transitions of the sketch coming into place to form the sketch of the bear mascot (but yellow) from Five Nights at Freddy’s. All in all, this still made me hope that I can look back into this sketch for reference if I ever need to work with more artworks that deal with transitional elements that when combined, will be able to form the artwork into one whole picture for all to see.

After giving Casey Reas’ presentation a watch on behalf of my consideration for what to try out within a coding artwork of mine, it has led me to think about how I wish to incorporate random elements into my works. Perhaps one way that I can incorporate random elements in my work is if there are certain shapes and/or colors that I find myself stuck with or wish to keep as simple as possible. For instance, if I were to try creating an art pattern of lines that I wish to be originally different but don’t know how, I would turn to my code and attempt to apply requests for random elements to be used within each line. Whether it be the shapes that shall be chosen to be featured in each alternative line or the colors randomly given a separate line to represent, the random elements at hand will still share the purpose of helping make my artwork look somewhat original in a sense. But of course, this will be after I share with the coding certain rules of what boundaries/minimum limits to respect and how to at least stay on track. I am still giving the code freedom to create each line featuring an alternate shape/color of the code’s random choice; I am simply letting the computer know the rules of what lines not to cross and how to stay in touch with the goal of creating the artwork without going off-track.

With this in mind, this is why I believe that the optimum balance between randomness and complete control is the presence of rules/expectations of you, yourself, the artist. If one technically thinks about it, without any rules/expectations set for the computer to follow and remember while writing the code for your masterpiece, the computer is going to get convinced that it is free to do whatever it believes is best, and thus create an artwork that is the complete opposite of what you could be looking for. Sure, it will score enough points for trying to be unique and original with its choices of art style on your behalf, but it will lose points in acting with such intention in a careless and rather messy manner. Not to mention that in the world of art, it is almost impossible to execute the concept of artwork that represents some sort of meaning despite its messy appearance. That still doesn’t mean that the chance to create a compelling yet kind of messy artwork can be never reached; it just needs to meet the requirements of how to not go overboard with its creation in which it all lies on your hands to place forth for the computer to take note of.

The bottom line is that any artwork is still free to incorporate random elements into their work for the sake of thrilling mystery, it just calls upon you, the artist, to monitor the workings of the computer in order to see if its random choices are going along with your plan. It can point towards checking how far in height/width the computer is expected to reach while conducting its random outcomes, or even the amount of ordinary elements that it uses and how many times they’ve used otherwise. It all comes down to the idea of being fair with not just yourself but also with the computer as well. It perhaps can be seen as an example of equal collaboration that any artist should always open towards. Overall, this is all of my thoughts in regards to the idea coming from Casey Reas’ presentation.

function setup() {
  createCanvas(600, 600);
  background(30);

  // Star outline via circles
  fill(255); 
  noStroke();

  for(let x = 50; x < 600; x = x + 80){
    for(let y = 50; y < 600; y = y + 80){
      circle (x, y, 15);
    }
  }
  // Moon in the center
  fill(255);
  circle(300, 300, 120);
}

Due to barely being familiar with loops within coding, I had to somehow remind myself of what a loop is like via analyzing the reference sheet from the coding website. Once I understood a little bit of what it was like, this is when I explained to myself that perhaps the artwork I should at least try making with this loop knowledge is an artwork that must feel kind of… organized? But in a modern fashion of course. Not just that but also… an artwork that resembles something that is in relation to what I myself tend to adore very much. Eventually, I’ve settled in with the concept of creating this artwork where the main stars are well… literal mini stars, along with the addition of the moon somewhere in the center. The reason is because of how this is based on the fact that as a young adult, I kind of identify as a night-owl, or someone who seems to like the nighttime. Thus, i just wish to pay a mini tribute to this oldie but a goodie trait of mine via this artwork.

What i’ve done is basically sent the background to a low number that has the background be as dark as the night. Then I had to set up the endoskeleton of the circle stars, starting with making sure they are filled through a number that’ll color them white; then this is where the loops come into play. With the loops, this is where I had to look back at the notes from the previous class, in order to get an idea of how they should be set up at least. Remember that this is all for the sake of trying to figure out how to have each circle star lined up in rows that’ll set themselves up to be a modernized version of the night sky. Most importantly, I had to make sure that the parameters for each circle star in a row/column would be centralized in their rightful spots. Lastly, I had to bring the moon to life via simply creating a bigger circle in the middle that, from my head, would make itself look like the big boss of the night alongside his star minions.

One more thing to mention is that before I could see if my code was right, I did have to check in with Ai to see if my code was indeed correct or if changes were necessary to be made. Sure enough, some of my code was on the right track, but some changes were requested to be made to ensure functionality at its finest. Based on these changes that were successfully implemented, it simply convinced me to try familiarizing myself more with the workings of proper repeat methods, such as the loop, so that if I were to ever need acts of repeat shapes/colors within my works, the loop() command would indeed assist me otherwise.