Zhiyue Chen

Description :

For this project, instead of producing a single element or shape design, we are using code to create a set of parameters that generate a variety of results. That generator creates multiple variations of the form through mouse and keyboard interactions.

​

Design Process:

When brainstorming the idea for this project, it has not been easy for me to set an object or shape to go with and then move forward. I have thought of watermelon, cup, dog, … But none of it seemed to be right to fit in. Then, I turned my head around to biology, medical illustration is my background and I have been in the field of biology for years, so I thought it will be cool to do somethings with macrophages or gene, which I ended up choosing gene. Not making things confusing, gene is made up of chromosomes, and chromosomes are made of DNA molecules, which molecules itself, could be seen as a circle and that was where I started it. 

​

Reflections:

The shape I have created and chosen is in the form of gene, by moving the mouse, you will find that the string is creating shapes and changing randomly every seconds, which is making all kinds of different genes that makes up different people. As I move along and use code to change it, simplify it, then complicate it. I find out that they are more and more possibilities that you can make just to a simple circle. While seeking to vary the customizable variables, you are “forgetting” the shape itself, but redefining it in a different way. The combinations of these two is what beckons me the most and finds it fascinating. There are certainly more possibilities when you try to break the boundaries of the shape, what about breaking the boundaries of design itself?

Fuzzing up the outline of the shapes, and the new shape will find you. Using that elements to make that uniqueness count.

*/

​

function setup() {

  createCanvas(400, 400);

  noStroke();

}

​

function draw() {

  background(10,8); // translucent background 

  let xc = constrain(mouseX, 30, 400);

  // xy grid of ellipses

  for (let x = 0; x <= width; x = x + 30) {

    for (let y = 0; y <= height; y = y + 30) {

      // starting point of each circle -mouse position

      const xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI);

      const yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI);

      // and also varies based on the particle's location

      const angle = xAngle * (x / width) + yAngle * (y / height);

​

     // each particle moves in a circle

      const myX = xc + 40 * cos(2 * PI  + angle);

      const myY = y + 25 * sin(2 * PI  + angle); 

​

      ellipse(myX, myY, random(-10, 30));

    }

  }

​

}

​

function keyPressed(){

  let c = random(0,255);

  let d = random(0,255);

  let e = random(0,255);

  fill(c,d,e,180);

}

​