Jhon – Page 2 – Introduction to Interactive Media

Week 2 — Graphic Art

At first, I wanted to do something that was static (e.g. putting everything in setup) since that was an option presented by the professor. However, the more I thought about incorporating randomness into my project, I thought that having some animation or movement would be the best way to do that. I still wanted to keep the artwork simple and focused on making use of a clear, structured pattern while allowing for unexpected variations.

I decided to create a looping animation that generates geometric designs at five key positions on the canvas: center, top-left, top-right, bottom-left, and bottom-right.

let positions = [

[width / 2, height / 2], // cent

[0, 0], // tl

[width, 0], // tr

[0, height], // bl

[width, height] // br

];

let positions = [ [width / 2, height / 2], // cent [0, 0], // tl [width, 0], // tr [0, height], // bl [width, height] // br ];

let positions = [
  [width / 2, height / 2], // cent
  [0, 0],                  // tl
  [width, 0],              // tr
  [0, height],             // bl
  [width, height]          // br
];

Each of these positions contains a series of concentric shapes that shift over time, creating a dynamic, evolving effect. The rotation is driven by angleOffset * j, which ensures that each circle is slightly different in position based on frameCount, adding to the sense of movement. The shapes themselves are defined using beginShape() and endShape(CLOSE), which connect the calculated points to form a jagged circular pattern.

let angleOffset = frameCount * 0.1;

for (let i = 0; i < positions.length; i++) {

push();

translate(positions[i][0], positions[i][1]);

stroke(colors[i]);

for (let j = 0; j < numCircles; j++) {

let radius = map(j, 0, numCircles, 20, maxRadius);

beginShape();

for (let angle = 0; angle < TWO_PI; angle += PI / 6) {

let x = radius * cos(angle + angleOffset * j);

let y = radius * sin(angle + angleOffset * j);

vertex(x, y);

}

endShape(CLOSE);

}

pop();

}

let angleOffset = frameCount * 0.1;

for (let i = 0; i < positions.length; i++) {
  push();
  translate(positions[i][0], positions[i][1]);
  stroke(colors[i]); 

  for (let j = 0; j < numCircles; j++) {
    let radius = map(j, 0, numCircles, 20, maxRadius);

    beginShape();
    for (let angle = 0; angle < TWO_PI; angle += PI / 6) {
      let x = radius * cos(angle + angleOffset * j);
      let y = radius * sin(angle + angleOffset * j);
      vertex(x, y);
    }
    endShape(CLOSE);
  }

  pop();
}

I wanted to do a bit more and add an interactive element on top of the randomness. So, I added a function that shuffles the colors whenever you click on the canvas. This makes sure that while keeping the overall structure of the artwork the same, each interaction with the piece introduces a fresh, randomized arrangement of colors, keeping it visually engaging.

function mousePressed() {

shuffle(colors, true);

}

function mousePressed() { shuffle(colors, true); }

function mousePressed() {
  shuffle(colors, true);
}

This project helped me appreciate the balance between structure and randomness in p5.js/computational art. By keeping certain elements predictable (such as placement and form) while allowing colors and movement to shift dynamically, I was able to create an interactive piece that feels both intentional and surprising. Well…at least I hope! Check it out:

Assignment 1: Self-portrait

For this assignment, we were tasked to create a self-portrait using p5.js. In the class, we worked with different shapes and how to check x and y positions on the canvas so that it was easier to place our shapes. I wanted to think about creating something that was really representative of me while also making it fun. So, after going through a couple of ideas, I decided to create a self-portrait of me in my snowboarding attire, with some subtle animation and interactivity on the side.

In the portrait, you can see me in full snowboarding gear with snow falling down. I’m particularly proud of the animated snowflakes because it did take me a bit to animate it. The logic behind it is composed of 4 key elements. First, I initialize/declare an array of snowflakes with the necessary key parameters: x, y, and the size.

let snowflakes = [

{ x: 250, y: 50, size: 20 },

{ x: 50, y: 50, size: 30 },

{ x: 80, y: 90, size: 15 },

{ x: 150, y: 120, size: 30 },

{ x: 200, y: 200, size: 15 },

{ x: 220, y: 1500, size: 20 },

];

let snowflakes = [ { x: 250, y: 50, size: 20 }, { x: 50, y: 50, size: 30 }, { x: 80, y: 90, size: 15 }, { x: 150, y: 120, size: 30 }, { x: 200, y: 200, size: 15 }, { x: 220, y: 1500, size: 20 }, ];

let snowflakes = [
  { x: 250, y: 50, size: 20 },
  { x: 50, y: 50, size: 30 },
  { x: 80, y: 90, size: 15 },
  { x: 150, y: 120, size: 30 },
  { x: 200, y: 200, size: 15 },
  { x: 220, y: 1500, size: 20 },
];

Second, in the last part of the draw() function, I include a for loop to create snowflakes based on the specifications of the list of snowflakes. In addition, if the y coordinate of the snowflake is bigger than the height, it is reset to 0 and the x coordinate is randomized:

for (let i = 0; i < snowflakes.length; i++) {

let snowflake = snowflakes[i];

drawSnowflake(snowflake.x, snowflake.y, snowflake.size);

snowflake.y += 1;

if (snowflake.y > height) {

snowflake.y = 0;

snowflake.x = random(width);

}

for (let i = 0; i < snowflakes.length; i++) { let snowflake = snowflakes[i]; drawSnowflake(snowflake.x, snowflake.y, snowflake.size); snowflake.y += 1; if (snowflake.y > height) { snowflake.y = 0; snowflake.x = random(width); } }

for (let i = 0; i < snowflakes.length; i++) {
  let snowflake = snowflakes[i];
  drawSnowflake(snowflake.x, snowflake.y, snowflake.size);
  snowflake.y += 1; 
  if (snowflake.y > height) {
    snowflake.y = 0;
    snowflake.x = random(width);
  }
}

The drawSnowflake function utilizes the x, y, and size parameters passed to actually create the snowflake shapes by drawing 6 “arm” lines and 6 perpendicular smaller lines through a for loop. I learned that I need to push() to save the current transformation matrix and then pop() to restore it, such that each snowflake is drawn independently without affecting the transformations applied to other snowflakes or elements on the canvas.

function drawSnowflake(x, y, size) {

stroke('white');

strokeWeight(2);

for (let i = 0; i < 6; i++) {

push();

translate(x, y);

rotate(i * PI / 3);

line(0, 0, size, 0);

line(size * 0.5, -size * 0.2, size * 0.5, size * 0.2);

pop();

}

function drawSnowflake(x, y, size) { stroke('white'); strokeWeight(2); for (let i = 0; i < 6; i++) { push(); translate(x, y); rotate(i * PI / 3); line(0, 0, size, 0); line(size * 0.5, -size * 0.2, size * 0.5, size * 0.2); pop(); } }

function drawSnowflake(x, y, size) {
  stroke('white');
  strokeWeight(2);

  for (let i = 0; i < 6; i++) {
    push();
    translate(x, y);
    rotate(i * PI / 3);
    line(0, 0, size, 0);
    line(size * 0.5, -size * 0.2, size * 0.5, size * 0.2);
    pop();
  }
}

A fun little Easter Egg is that you can click on my ski mask to remove it to reveal my face! : -> Have a look: