Self-Portrait with P5.js // ICM W1

Concept and Design

1. Concentric Circles:
- Each circle grows larger as it moves outward from the center.
- The innermost circle is solid in color, representing a concentrated point in time, while the outer circles become lighter, symbolizing how time diffuses and experiences shape us.
- The outermost circle has an orange outline, indicating permeability and openness to change.

2. Animation:
- A line extending from the center to the outermost circle represents direction and growth.
- The idea is that the point on the outer edge would be dynamic, moving around the circumference of the largest circle, symbolizing potential growth in all directions.

Initial Plan

Pseudocode:
- I initially sketched out the pseudocode and logic on paper.
- The plan involved defining 6 concentric circles (`C1` to `C6`), where `C1` is the smallest and `C6` is the largest.
- I planned to use the `mouseX` and `mouseY` functions to interactively move a point along the circumference of the circles.Best practices for creating a landing page

Implementation

1. Drawing the Circles:
- I initially faced an issue with the order of rendering. Since JavaScript compiles from top to bottom, the largest circle (`C6`) was drawn last, hiding the smaller circles underneath.

2. Rectified Approach:
- To fix this, I reversed the order, drawing the largest circle first (`C6`), followed by smaller circles, which rendered correctly.

3. Circle Properties:
- Each circle had different properties:
- Stroke weight: Differentiated the circles with various stroke weights.
- Stroke color: Gave distinct colors to each circle's stroke.
- Fill: Used for solid color in the center and lighter colors moving outward.

Issues Encountered

- I wanted to animate the line that extends from the center of the circles to their circumference. The idea was to move a point around the circumference interactively using `mouseX` and `mouseY` for real-time interaction.
- However, I faced several errors in trying to implement this interaction, particularly in positioning and animating the point correctly along the circular path.

Next Steps

- Resolve the issue with the line animation using `mouseX` and `mouseY`.
- Smooth the motion of the point along the circumference.
- Possibly introduce more dynamic changes like altering stroke color or thickness based on the movement of the point.

Final Sketch

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

function draw() {
  background(244, 242, 239);
  // C1 = circle 1 , C2 = circle 2 ....

  //drawing circle 6
  strokeWeight(0.3);
  stroke(238, 136, 55);
  fill(232, 236, 231);
  circle(200, 200, 379.69);

  //drawing circle 5
  noStroke();
  stroke(222, 0);
  fill(200, 209, 198);
  circle(200, 200, 253.13);

  //drawing circle 4
  noStroke();
  stroke(222, 0);
  fill(151, 169, 150);
  circle(200, 200, 168.75);

  // drawing circle 3
  noStroke();
  stroke(222, 0);
  fill(87, 116, 85);
  circle(200, 200, 112.5);

  // drawing circle 2
  noStroke();
  stroke(222, 0);
  fill(52, 70, 51);
  circle(200, 200, 75);

  // drawing circle 3  
  noStroke();
  stroke(222, 0);
  fill(26, 35, 26);
  circle(200, 200, 50);

  // drawing a line
  stroke(2);
  fill(255);
  line(200, 200, 200, 10.31);
  // arc 1

  //fill(255, 255, 255, 50);
  //arc(200, 200, 253.13, 253.13, 0, PI / 2);

  // line for arc 1
  //strokeWeight(0.3);
  //stroke(238, 136, 55);
  //line(200, 200, 200, 326.565);

  // Arc 2
  //fill(255, 255, 255, 50);
  //noStroke()
  //arc(200, 200, 253.13, 253.13, radians(180), - PI/2 );

  // line 2
  //strokeWeight(0.3);
  //stroke(238, 136, 55);
  //line(200, 200, 200, 126.565);
}

Link to Sketch