Jenni Lee — Project 03 — Dynamic Drawing

jenni-variable-drawing

var ballDiam = 50;
var ballDiamChange = 1;
var flowerCenterX = 400;
var flowerCenterY = 300;

function setup() {
  createCanvas(800, 600);
}

var rotation = 0;
var rotdir = 1;
var rotdirChange = 2;
var speedOldX = 2;
var speedOldY = 2;
var speedX = 2;
var speedY = 2;

var isMouseMoved = 0;
var ballPosition = 0;

function draw() {

  background(216, 216, 206);
  if (isMouseMoved == 1) {
    speedX = 0;
    speedY = 0;
    flowerCenterX = mouseX;
    flowerCenterY = mouseY;
    frameRate(10);
  } else {
    speedX = speedOldX;
    speedY = speedOldY;
    frameRate(30);
  }
  rotation += rotdir;

  flowerCenterX = flowerCenterX + speedX;
  flowerCenterY = flowerCenterY + speedY;

  // check if the ball is touching the top, 
  // reverse vertical direction
  if (flowerCenterY < ballDiam * 3 / 2) {
    flowerCenterY = ballDiam*3/2;
    speedY = 2;
  }

  if (flowerCenterY + ballDiam*3/2 > height) {
    flowerCenterY = height - ballDiam*3/2;
    speedY = -2;
  }

  // check if the ball is touching the right, 
  // reverse horizontal direction
  if (flowerCenterX + ballDiam * 3 / 2 > width) {
    flowerCenterX = width - ballDiam*3/2;
    speedX = -2;
  }

  // check if the ball is touching the left, 
  // reverse horizontal direction
  if (flowerCenterX < ballDiam * 3 / 2) {
    flowerCenterX = ballDiam*3/2;
    speedX = 2;
  }

  createFlower();
  isMouseMoved = 0;
  if (speedX != 0 & speedY != 0) {
    speedOldX = speedX;
    speedOldY = speedY;
  }
}

function mouseMoved() {
  ballDiam += ballDiamChange;

  // change ball size when mouse moves
  if (ballDiam >= 100) {
    ballDiam = 100;
    ballDiamChange = -1;
  } else if (ballDiam <= 25) {
    ballDiam = 25;
    ballDiamChange = 1
  }

  // change rotation speed and direction when ball moves
  rotdir += rotdirChange;
  if (rotdir >= 10) {
    rotdir = 10;
    rotdirChange = -2;
  } else if (rotdir <= -10) {
    rotdir = -10;
    rotdirChange = 2;
  }

  // change ball color location when mouse moves
  ballPosition++;
  if (ballPosition == 6) {
    ballPosition = 0;
  }

  isMouseMoved = 1;
}

//create center of flower
function createFlower() {

  push();
  fill(251, 246, 178);
  noStroke();
  ellipseMode(CENTER);
  translate(flowerCenterX, flowerCenterY)
  ellipse(0, 0, ballDiam, ballDiam);

  // using sin and cos to determine coordinates 
  // of the surrounding balls
  angleMode(DEGREES); 
  rotate(rotation);
  fill(85, 78, 104);
  ellipse(ballDiam * cos(60 * ballPosition), ballDiam * sin(60 * ballPosition), ballDiam, ballDiam);
  fill(135, 133, 142);
  ellipse(ballDiam * cos(60 * (ballPosition + 1)), ballDiam * sin(60 * (ballPosition + 1)), ballDiam, ballDiam);
  fill(173, 169, 182);
  ellipse(ballDiam * cos(60 * (ballPosition + 2)), ballDiam * sin(60 * (ballPosition + 2)), ballDiam, ballDiam);
  fill(196, 194, 198);
  ellipse(ballDiam * cos(60 * (ballPosition + 3)), ballDiam * sin(60 * (ballPosition + 3)), ballDiam, ballDiam);
  fill(241, 239, 243,);
  ellipse(ballDiam * cos(60 * (ballPosition + 4)), ballDiam * sin(60 * (ballPosition + 4)), ballDiam, ballDiam);
  fill(49, 44, 66);
  ellipse(ballDiam * cos(60 * (ballPosition + 5)), ballDiam * sin(60 * (ballPosition + 5)), ballDiam, ballDiam);
  pop();
}

For this dynamic drawing, I wanted to experiment with the abstraction of a flower. Using dynamic movements, I wanted to convey the feeling of a flower floating through the breeze. Through the dynamic elements of size, position, color, rotation, and speed rotation direction, I was able to execute this idea. This project required a lot of effort for me, as not only did I have to look up many references on the p5 website and experiment with those features, but it also took me a while to figure out the positioning of the circles on this flower. Although it was difficult to accomplish, as I decided to take on the task of utilizing various features which I had previously never used before, such as using sin and cos, it ultimately was a good learning experience.

Here is the flower which I abstracted.