Month: September 2023

Week 2 – Response

Casey’s talk on chance operations perfectly shows the use of technology in arts. The most significant and profound argument I think he is making is that people are using computers, which are ordered, rational machines, to create randomized, chaos art. As he develops his argument, he starts from the nature, religion, and science to show the relations among order, chance, and chaos, and how these could to apply to art works after artists started to generate art using software and chance operations.

I personally agrees with Casey’s argument, and believe that machines are very good experimental place to test the relations between chance and order. By looking at the examples Casey gives during his talk, it is clear that developing from chance and order in art to chance in code, chance and order seem to find a balance in code, or in other words in machines. The last example, 10 PRINT, he shows sheds light on it.  Even though it uses random operations, the final art work generated is still somehow in a certain order. The patterns are still detectable if analyzed closely. Does it mean that even the chaos is still confined in a ordered system, in this case computers? Does chaos follow a certain pattern to be chaotic? This reminds of an installation art I visited in Iceland. The work was titled “The only certain thing is uncertainty”, and used random mechanical motions to explore this theme. Even though the results of these motions were unpredictable, the mechanical systems were always the same, such as a metal piece plucking a thing, hanging bent mental wire. Therefore, I find Casey’s argument and examples reading interesting and inspiring.

Week 1: Self Portrait – hello kitty

Your concept

My concept was this meme/image of a crying Hello Kitty with the caption “*sniff* I’m sorry for being stupid”. I love how cute this image is and I’ve been using it in my messages to friends a lot, so I’ve been associated with it in the past few days. I thought it would be fun to make an interactive version of this for my self-portrait.

As it needed to somewhat look like me, and I don’t look like Hello Kitty, I added a pair of round sunglasses that I’ve been wearing in class because of my eye infection.

A highlight of some code that you’re particularly proud of

There isn’t anything functionality-wise that I was too proud of, but the most difficult part about this sketch was drawing Hello Kitty’s face. Using boxes/lines would lose the cuteness appeal of it, so I learned how to draw using bezier curves. It reminded me of Photoshop’s Pen tool, except with written coordinates instead of being able to smoothly adjust the control points.

I’m really proud of how clean and polished the final product looks, as bezier curves look much better over simple geometric shapes. Though it took way more time to draw each curve to my liking.

// face
fill(255)
// bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);
beginShape()
vertex(118, 75)
bezierVertex(65, 45, 55, 55, 65, 114); // left ear
bezierVertex(13, 262, 136, 262, 200, 263); // left face
bezierVertex(264, 262, 387, 262, 335, 114); // right face
bezierVertex(345, 55, 335, 45, 282, 75); // right ear
bezierVertex(225, 63, 175, 63, 118, 75); // top head

Curves needed to draw Hello Kitty’s face

Embedded sketch

Click to make her cry! 🙁

Reflection and ideas for future work or improvements

I could’ve possibly added more animations, such as waving hands during the crying animation state, but I wrote my draw() functions in a bad way so to add animations to certain elements would take a lot of rewriting. My lesson learnt is to plan out the details of what I want to make ( final outcome ), so I don’t have to rewrite code when I later think of new features later on.

Assignment 1: Self Portrait

Concept:

In this sketch I mostly wanted to have as much fun as I wanted to with it. From getting the face structure the way I wanted to adding neutral toned colours that could be eye pleasing. Adding the change of colours was the final step of the whole process, which I thought was the most fun part.

//clothes
fill(mouseY,193,117,135);
rect(202,306,129,24);
fill(mouseX,205,202,184);
rect(163,282,10,23);
rect(240,282,10,23);
quad(158,292,245,293,265,319,138,319);

//earring
fill(mouseY,225,125,186);
circle(156,228,5);
circle(246,228,5);

//bow
fill(mouseX,227,34,80);
circle(173,190,10);
triangle(175,190,186,180,186,196);
triangle(170,189,159,180,159,196);

A highlight of code that I’m particularly proud of:

I’m quite proud of how I put together the face and hair. I enjoy drawing and learing anatomy, so trying a different way to practice certain positions was a little challenging. However, I managed to place the shapes in the positions and areas I felt was right.

Embedded Sketch:

 

 

Reflection and ideas for future work or improvements:

Hopefully I would get to practice more on the rest of the body. Maybe work harder on trying to animate or move my sketches smoother. I also wished I worked on the size of the canvas and adjust it before starting.

Nourhane’s video response Week#1

Casey Reas’ exploration of chance operations in the realm of generative art provides a compelling argument for the intersection of technology and creativity.  The idea of utilizing randomness within the confines of algorithmic structures resonates deeply with the age-old debate of structure versus freedom in art. When he draws parallels between traditional art methods and computational processes, it reinforces the notion that technology is just another tool in the artist’s toolkit. However, I think that while chance operations in code provide a sense of unpredictability, they are still bounded by the parameters set by the programmer, making the ‘randomness’ a controlled one.

Reas, while advocates the cause of computational art, might inadvertently present a biased view, advocating primarily for the merger of art and code. The essential question that I’m left with is does the purity of randomness get tainted when confined within coded structures? Additionally, while the talk hasn’t changed any of my previous beliefs, it does make me think about the true essence of creativity. If an artist sets the parameters and the machine generates the art based on these, where does the artist’s influence end, and the machine’s creativity begin? The talk certainly raises questions about the authenticity of art, the boundaries of human creativity, and how technology shapes or confines our artistic expressions.

Week 1 – Self-portrait

Concept

 

 

Code snippet

// Declare in the global scope
// All functions will have access to this variable
let myRandomNumber;


function setup() {
  createCanvas(300, 400);
  
  myRandomNumber = random(255); // How can we find out what a variable's value is? print()

  let myRoundedNumber = round(myRandomNumber); 
  
  print('myRandomNumber = ' + myRandomNumber);
  print('myRoundedNumber = ' + myRoundedNumber);

  
}

 

Assignment 1: Self Portrait

When I received this assignment, I did not give it much thought initially. However, I had a concept of adding my favorite, which I believe would reflect myself and create a self-portrait of a girl. Initially, I was uncertain about where to begin this illustration.

From the concepts learned from the class, I knew how to develop shapes but I could not think about a complete self portrait. I started by coding the background and slowly each parts of the body. One of the most engaging aspects of the process was determining the coordinates for each body part. It felt like solving a puzzle.

One of the highlights of my code was the decision to use ellipses for the body and hair instead of rectangles which turned out to be a successful choice.

Looking ahead, I am eager to explore more interactive projects with meaning backgrounds. This assignment has provided me with a strong foundation and inspiration for my future works.

Assignment 1 – self portrait

This is my version of a “smiley face”, I used the elements we’ve learnt last class to implement the variables in the background and experiment with them, as you move the mouse they make an x while changing colors.

Reflection

The skills that i hope to achieve, is to maybe make a more polished portrait, and to fully understand how to create more shapes that will allow me to produce better results. I would say it is personally for me a bit difficult as i have little knowledge about coding in general, but i managed to create this portrait after practicing a couple of times, i would say i got the hang of it, nonetheless, it is fun and interesting with experimenting different types of syntax and changing the variables as i continue to code.

function setup() {
  createCanvas(800, 800);
 background(0)
;
}

function draw() {
  //background
  fill(mouseX, mouseY,50) // to fade the colors

 
  circle(mouseY,400,300,) //to move the circle with the pointer
circle(400,mouseY,300) //to move the circle with the pointer

  //face
  fill(255,255,)
  circle(400,400,600)

  //eyes
  circle(280,330,90)
  circle(490,330,90)

  //pupils
fill(0)
  circle(280,330,50)
  circle(490,330,50)
  noStroke()
  
  //mouth
   strokeWeight(20);
  stroke('#f28865');
  arc(400, 550, 150, 200, .1, PI-.1);
  noStroke();
  
  //eyebrows
  stroke('#333');
  strokeWeight(9);
  noFill();
  arc(280, 310, 80, 80, PI+.9, -.9);
  arc(490, 310, 80, 80, PI+.9, -.9);
 

  //nose
   stroke('#333');
  strokeWeight(9);
  noFill();
  arc(400, 480, 50, 80, PI+.9, -.9);
 
  
 
  
}

 
editable link: https://editor.p5js.org/mka413/sketches/dnJhX_ugh

Self Astro Portrait

Concept: For this assignment, I decided to go with a more creative approach for the self-portrait by involving my interest in space science. I attempted to draw a female astronaut that represents the field I would like to explore and learn more about in the future, with an animated starry background and a few planets.

Code: 

I’m proud of the code snippet below because it was challenging to make it function the way I planned it to be. I initialized an array of stars with random positions at two different speeds, and the function keeps updating the position of the stars once they reach the end of the canvas, making them to start from the top again. That’s how it created the illusion of stars falling.

 Let stars = [];

Function draw() {
// Displaying the stars and updating
  for (let i = 0; i < stars.length; i++) {
    let star = stars[i];
    star. y += star. speed; //star goes downwards
    if (star. y > height) {
      star. y = 0; // This will reset the star's position if it goes off-screen
    }
    fill(255);
    ellipse(star.x, star.y, 4.5, 4.5);
 }

// Stars in the background
function drawStars(numStars) {
  //  white dots as stars
  fill(255);

  for (let i = 0; i < numStars; i++) {
    stars.push({
      x: random(width),
      y: random(height),
      speed: random(0.5, 2), //speed for every star
    });
  }
}
}

Reflection: 

In this assignment, I would say that I did a good job with what I had in mind but I could’ve done a better portrait in addition to  making the planets move in a certain motion. For future assignments and tasks, I would like to do something that is more challenging for myself through videos online and other sources. I hope to gain more experience on creating curves and lines to be able to express myself better.

Self-Portrait: On the Run

Project Concept

My concept for this project is to portray a guy (supposedly) running on the road. Then I started to think about the elements I could add because just a static picture is boring. I figured the two elements I could improve are the background and the figure. I decided to add some animation to the figure and some interactivity with the user’s mouse so that it would chase the user’s mouse along the X-axis. For the background at first, I only wanted to implement a sky featuring a sunrise, that is to use a gradient color for the background. But it still seemed boring so I decided to add a moon and alternate them over time. Naturally, that comes with stars and different sky colors so I implemented that also. I already have the cycle for a day, why not extend it to a month? Therefore I also added phases of the moon. Then the project finally seemed complete, and it is shown below.

Code I am Proud of

I am not very proud of anything in particular actually, because it is all simple code, and not many calculations were needed. If I have to mention something then it would be the implementation of the Sky. It involved calculations based on deltaTime,  relative positions of the sun and the moon, integrated loops with the looping nature of the draw() function to ensure the coherency of sky color changes, and used a wide variety of shapes and curves. The code goes on like this, and the comments should be enough to explain the code.

class Star{
  constructor(){
    // Random position of stars
    this.x = random(400);
    this.y = random(400);
    this.speed = 1;
  }
  
  display(t){
    this.y -= this.speed * deltaTime / 20; // Star movement
    if(this.y <= 0){
      this.y = 400 - this.y % 400;
    }
    // Transparency control
    fill("rgba(255,255,255,"+t+")");
    stroke("rgba(255,255,255,"+t+")");
    let starBody = rect(this.x,this.y,2,2);
  }
}

class CrescentMoon{
  constructor(y){
    this.phase = 0;
    this.moonY = y;
  }
  
  display(){
    this.phase = this.phase % 16;
    fill("white");
    
    // Moon shape
    beginShape();
    vertex(200,this.moonY-75);
    if(this.phase <= 9){
      bezierVertex(200-(100-25*(this.phase)),this.moonY-75,200-(100-25*(this.phase)),this.moonY+75,200,this.moonY+75);
      bezierVertex(200+100,this.moonY+75,200+100,this.moonY-75,200,this.moonY-75);
    }
    else{
      bezierVertex(200-100,this.moonY-75,200-100,this.moonY+75,200,this.moonY+75);
      bezierVertex(200+(100-25*(16-this.phase)),this.moonY+75,200+(100-25*(16-this.phase)),this.moonY-75,200,this.moonY-75);
    }
    endShape();
  }
}

class Sky{
  constructor(){
    this.sunY = 400;
    this.speed = 1;
    this.moonPhase = 0;
    this.timer = 0;
  }
  
  display(){//10sec/round
    // Timer sync
    this.timer = this.timer % 20;
    this.sunY = -this.timer * 50 + 400;
    
    // Moon phase add
    if(this.sunY + 500 <= -125){
      this.moonPhase++;
    }
    
    // Create colors for gradient
    let topColor;
    let botColor;
    
    // Transparency control
    let displayVar;
    
    // Frames 0-300 back to sunrise
    if(this.timer < 3){
      topColor = lerpColor(color("rgb(23,23,197)"),color("rgb(135,206,235)"),this.timer/3);
      botColor = lerpColor(color("rgb(23,23,197)"),color("rgb(255,77,00)"),this.timer/3);
      displayVar = 1-(this.timer/3);
    }    
    // Frames 300-1000
    else if(this.timer >= 3 && this.timer < 10){
      // Frames 300-650 sunrise
      if(this.timer<6.5){
        botColor=lerpColor(color("rgb(255,77,00)"),color("rgb(135,206,235)"),(this.timer-3)/3.5);
      }
      // Frames 650-1000 day
      else{
        botColor = color("rgb(135,206,235)");
      }
      topColor = color("rgb(135,206,235)");
      displayVar = 0; // Transparent
    }
    // Frames 1000-1300 dawn
    else if(this.timer >= 10 && this.timer < 13){
      topColor = lerpColor(color("rgb(135,206,235)"),color("rgb(23,23,197)"),(this.timer-10)/3);
      botColor = lerpColor(color("rgb(135,206,235)"),color("rgb(23,23,197)"),(this.timer-10)/3);
      displayVar = (this.timer-10)/3;
    }
    // Frames 1300-2000 night
    else if(this.timer >= 13 && this.timer < 20){
      topColor = color("rgb(23,23,197)");
      botColor = color("rgb(23,23,197)");
      displayVar = 1; // Solid
    }
    
    // For loop used to create gradient
    for(let y = 0; y < 250; y++){
      let lineColor = lerpColor(topColor,botColor,y/250);
      stroke(lineColor);
      line(0,y,400,y);
    }
    
    // Display stars
    for(let i = 0; i < 120; i++){
        starlist[i].display(displayVar);
    }
    
    // Display sun and moon
    noStroke();
    fill("#FFC107");
    ellipse(200,this.sunY,150,150);
    moon = new CrescentMoon(this.sunY + 500);    
    moon.phase = this.moonPhase;
    moon.display();  
  }
}

Possible Improvements

As I said, I am not particularly proud of the project. It has lots of room for improvement in many aspects. To begin with, the code itself is sloppy and unorganized. It is stitched with different coding styles and practices, and it is unoptimized in aspects such as (but not limited to) time and methodology. This can be improved with more advanced coding techniques and better planning in code structure. The figure’s animation is also unsatisfying. Because p5js doesn’t support rigging, therefore it was extremely difficult to animate the figure. It was impossible to accurately illustrate each of the keyframes of the figure running because the figure is fundamentally just a set of shapes combined together. Each approximate keyframe takes a huge amount of time to finish. It also doesn’t support interpolating the keyframes so the intended fluctuations in the Y-axis to make the character more lively turned out to seem mechanical and shaky. I could try to smoothly interpolate the keyframes using algorithms, but I don’t have enough mathematical knowledge to support me in achieving this. This can be improved by using careful calculations to accurately orient the keyframes and adding a lot more frames to the animation, then using linear interpolation to connect the keyframes together. However, this method will still feel unnatural because linear interpolation will result in mechanical movements with sharp turns. I tried a few third-party libraries but none could really achieve this. For instance, I tried using Toxiclibsjs’ modules to create a skeleton, but it focuses more on physics instead of animation, therefore it still cannot be used for creating a perfect animation, unless I can find mathematical equations that could represent the movements of every joint, which I tried to do but failed dramatically.

TouchDesigner Workshop

TouchDesigner Workshop
Date / Time:
Sunday Sept 10 – 4:30-7pm
C3-153 (Arts Center upper floor, near IM Lounge)
For NYUAD Community and by invitation – rsvp to hk1772@nyu.edu
Workshop description:
In this workshop you’ll be introduced to TouchDesigner (https://derivative.ca/), a powerful node-based visual programming tool for creating interactive media works. You’ll get to know the interface, be introduced to the extensive use-cases, and be ready to begin prototyping your next interactive project.
This is for absolute beginners coming from any background, whether it be design or programming. Ideal for interactive media and theater students, or anyone looking to expand their knowledge in node-based  software.
No knowledge of code is needed. Bring a laptop (preferably Windows but Mac will be fine for our exploration), ideally a 3-button mouse and have access to a web cam (in-built or external doesn’t matter!).

Artist bio:

Harshini J. Karunaratne is a Sri Lankan-Peruvian digital artist working at the intersections of film, theatre and technology. Rooted in a practice of artistic research and performance, she develops projects that explore themes of eco-grief, gender, the body and afterlife. Harshini’s explorations are centered in the visual, combining a background in photography with VJing, utilizing Resolume and TouchDesigner primarily to create interactive and real-time performances.

Harshini has had her work shown in the UAE, Italy, Germany, Japan, Peru, Greece, at the FILE Festival in Sao Paulo, Burning Man in Black Rock City, Nevada and at Art Dubai. Based in Berlin, Harshini works with TimeLab, a transmedial studio for artistic research. She is also a lecturer at the University in Europe for Applied Sciences and at SRH Berlin University of Applied Sciences, specializing in media theory and performance studies. She is also the organizer and lead curator for MANIFEST:IO, a symposium for new media and electronic art that launched in Berlin in February 2023.