Ammar Hassonjee – Project 07 – Curves

Interactive Curve Drawing

/* Ammar Hassonjee
    ahassonj@andrew.cmu.edu
    Section C
    Project 07
  */

  var nPoints = 100;
  var angle = 0;
  var angle2 = 0;
  var angle3 = 0;
  function setup() {
      createCanvas(480, 480);
  }


  function draw() {
      background(map(mouseY, 0, height, 0, 255), map(mouseY, 0, height, 0, 255), map(mouseY, 0, height, 80, 255));

      var a = map(mouseX, 0, width, 30, 300);
      var b = a * (3 / 8);
      var c = a / 8;
      // Drawing the deltoid curves
      fill(180, 0, 0);
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      drawDeltoidCurve(a);
      angle += map(mouseX, 0, 480, 2, 10);
      pop();

      // Varying the rotation angle
      fill(0);
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle2 * -1));
      drawDeltoidCurve(b);
      angle2 += map(mouseX, 0, 480, 2, 10);
      pop();

      fill(180, 0, 0);
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      drawDeltoidCurve(c);
      angle += map(mouseX, 0, 480, 2, 10);
      pop();

      // Drawing the Ranunculoid curve with multiple iterations
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle3));
      drawRanunculoidCurve(40);
      drawRanunculoidCurve(20);
      drawRanunculoidCurve(37);
      angle3 += map(mouseX, 0 , width, .1, 5);
      pop();


  }

  // Deltoid curve has parameter to alter size
  function drawDeltoidCurve(value) {
      // http://mathworld.wolfram.com/DeltoidRadialCurve.html
      var x;
      var y;

      noStroke();
      // Drawing the first deltoid
      beginShape();
      for (var i = 0; i < nPoints; i++) {
          var t = map(i, 0, nPoints, 0, TWO_PI);

          // curve equation
          x = (1 / 3) * value * (2 * cos(t) + cos(2 * t));
          y = (1 / 3) * value * (2 * sin(t) - sin(2 * t));
          vertex(x, y);
      }
      endShape(CLOSE);
  }

  // function has parameter to alter Ranunculoid curve size
  function drawRanunculoidCurve(size) {
      // http:mathworld.wolfram.com/Ranunculoid.html
      var x;
      var y;

      // Varying the strokeweight and color of the Ranunculoid curve
      stroke(map(mouseY, 0, height, 0, 255));
      strokeWeight(map(mouseX, 0, width, 10, 0.1));
      noFill();
      beginShape();
      for (var i = 0; i < nPoints; i++) {
          var j = map(i, 0, nPoints, 0, TWO_PI);

          // Curve equation
          x = size * (6 * cos(j) - cos(6 * j));
          y = size * (6 * sin(j) - sin(6 * j));
          vertex(x, y);
      }
      endShape(CLOSE);

    }

When I first started this assignment, I was a little overwhelmed by the requirements and confused about how to translate mathematical curves into a graphic. Once I found two curves however with simple mathematical formulas, the ranunculoid and deltoid, I was able to build functions and then vary their parameters using the mouseX and mouseY variables to make an interesting drawing!