Ghalya Alsanea – Project 03

Align the flowers and be mesmerized!

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-03

var diameter;   //circle diameter
var diameteri;  //diameter of the inversed circle
var xx;         //mouse X location
var yy;         //mouse y location
var xi;         //inverse of mouxe x loxation
var yi;         //inverse of mouse y location
var angle = 0;  //the angle in which the flower roates
var strokeG;    //what G value the inversed flower color is
var dx;         //distance between x and it's inverse
var dy;         //distance between y and it's inverse

function setup() {
  createCanvas(480, 640);

}
function draw() {
  background(0);

  //if the two flowers are aligned in the center within
  //a tolerance, changed the color of the inversed flower
  dx = xx - xi;
  dy = yy - yi;

  if (dx < 30 & dx > -30 && dy < 30 && dy > -30){
    strokeG = 0
  } else{
    strokeG = 255
  }
  
  //set the variables to depend on the mouse
  xx = mouseX;
  xi = width - mouseX;   //the inverse X location
  yy = mouseY;
  yi = height - mouseY;  //the inverse Y location


  //find diameter that increases as mouseX increases
  diameter = mouseX / 2;

  //find inverse diameter that decreases with mouseX
  diameteri = width / 2 - mouseX / 2;

  //animate the angle to rotate the flower
  angle = angle + 1

  noFill();
  stroke(255);

  //draw simple torus flower
  circle(xx, yy, diameter);
  push();
  translate(xx, yy);
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  rotate(radians(60));
  circle(diameter / 2, 0, diameter);
  pop();

  //if mouse is in the second third of the vertical
  //canvas double the torus flower 

  if(mouseY > height / 3){
    fill(255, 50);
    push();
    translate(xx, yy);
    //animate it to rotate clockwise
    rotate(radians(30 + angle));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    rotate(radians(60));
    circle(diameter / 2, 0, diameter);
    pop();
  }
  
  //if mouse is in the bottom third of the vertical
  //canvas double the already doubled flower
  if(mouseY > 2 * height / 3){
    fill(255, 50);
    push();
    translate(xx, yy);
    //amimate it to rotate counterclockwise
    rotate(radians(15 - angle));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    rotate(radians(30));
    circle(diameter / 2, 0, diameter);
    pop();

  }


  //draw it's mirrored version

  noFill();
  stroke(255, strokeG, 0);

  //draw simple torus flower
  circle(xi, yi, diameteri);
  push();
  translate(xi, yi);
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  rotate(radians(60));
  circle(diameteri / 2, 0, diameteri);
  pop();

  //if mouse is in the second third of the vertical
  //canvas double the torus flower 

  if(mouseY > height / 3){
    fill(255, strokeG, 0, 50);
    push();
    translate(xi, yi);
    //animate it to rotate counterclockwise
    rotate(radians(30 - angle));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(60));
    circle(diameteri / 2, 0, diameteri);
    pop();
  }
  
  //if mouse is in the bottom third of the vertical
  //canvas double the already doubled flower
  if(mouseY > 2 * height / 3){
    fill(255, strokeG, 0, 50);
    push();
    translate(xi, yi);
    //amimate it to rotate clockwise
    rotate(radians(15 + angle));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    rotate(radians(30));
    circle(diameteri / 2, 0, diameteri);
    pop();

  }





  



}

For my dynamic drawing, I was inspired by the torus flower of life (shown below), which is a base for a lot of Arabic art and architecture geometry. I wanted it to be interactive in the sense that when the two flowers are centered together, the flower changed colors. I also thought adding animation to the flower petals as you move up to down would look cool, and it changes in size f you move left to right as well.