Screen Shot 2024-09-18 at 5.35.09 am.png

https://editor.p5js.org/JK-Amanda-Goo/sketches/e6O5Qf0Mc

1. Create relationships on my sketch

Process

  1. Topic selection I like planets in the universe 🪐 as looking at the planets and universe is kinda meditational and I resonate with planet’s characteristics - having a core solidness het containing flexibility interacting with other planets and the environmental factors in terms of life philosophy. So I set the theme as my planet, and other planets around in my universe.
  2. My planet’s location is fixed at the center position with any background width & height dimension (by setting the relationship with width & height of the background), and the size dimension is flexibly changing (by setting the relationship with the location of mouseX)
  3. I wanted to make its color flexible as every human being has variety in their color inside and outside. Thinking of how to get color flexible, I chose to make mouseX and mouse Y values impact the RGB values as the argument in fill() function.

Screen Shot 2024-09-18 at 4.21.25 am.png

Screen Shot 2024-09-18 at 4.21.05 am.png

  1. As every planet makes interaction with the other planets in the universe I wanted to creates objects thats moving to certain direction by itself as time goes, at the same time has relation to my planet. So I create different shapes - square, rectangle, ellipse, triangle - with following characteristics:

    IMG_4595.HEIC

    Screen Shot 2024-09-18 at 5.34.17 am.png

Final view 🪐🪐🪐

Screen Recording 2024-09-18 at 5.38.17 am.mov

Code sharing 🪐🪐🪐

https://editor.p5js.org/JK-Amanda-Goo/sketches/e6O5Qf0Mc

//W2 assignment: Use variables to build in some relationships between two or more elements in your sketch and think about how the perception of what’s happening is different depending on which element’s perspective you take on.

//MY BLOG POST://www.notion.so/Week2-8ce57bfa54aa42e5b1ddaa644ad956e0?pvs=4

//GET YOUR MOUSE ON THE BACKGROUND!

let sq1X;
let sq1Y;
let rec1X;
let rec1Y;
let elp1X;
let elp1Y;
let elp2X;
let elp2Y;
let sq2X;
let sq2Y;
let elp3X;
let elp3Y;
let rec2X;
let rec2Y;
let sq3X;
let sq3Y;

function setup() {
  //CHANGE THE CANVAS SIZE!
  createCanvas(400, 400);

  //Planets initial position
  sq1X = width / 5;
  sq1Y = 0;
  rec1X = (3 * width) / 5;
  rec1Y = 0;
  elp1X = (2 * width) / 5;
  elp1Y = height;
  elp2X = (4 * width) / 5;
  elp2Y = height;
  sq2X = width;
  sq2Y = height / 5;
  elp3X = 0;
  elp3Y = (2 * height) / 5;
  rec2X = width;
  rec2Y = (3 * height) / 5;
  sq3X = 0;
  sq3Y = (4 * height) / 5;
}

function draw() {
  background(67, 67, 87);

  //Planets moving direction & speed
  fill(mouseX - 150, mouseY + 150, height);

  sq1Y = sq1Y + 1;
  square(sq1X, sq1Y, 30, 5);

  rec1Y = rec1Y + 2;
  rectMode(CENTER);
  rect(rec1X, rec1Y, 30, 20);

  elp1Y = elp1Y - 1;
  ellipse(elp1X, elp1Y, 30, 25);

  elp2Y = elp2Y - 2;
  ellipse(elp2X, elp2Y, 20, 40);

  sq2X = sq2X - 0.7;
  square(sq2X, sq2Y, 35);

  elp3X = elp3X + 1;
  ellipse(elp3X, elp3Y, 25, 40);

  rec2X = rec2X - 1;
  rect(rec2X, rec2Y, 25, 40);

  sq3X = sq3X + 2.5;
  square(sq3X, sq3Y, 25);

  //Q. Shapes - Is there no way to draw triangle based on the center position like we can do with recMode(CENTER)?

  //My planet
  fill(mouseX, mouseY, width);
  circle(width / 2, height / 2, mouseX);
  text(frameCount, width / 10, height / 10);
  //describe();
}

Questions