Ian Kaneko Project-07-Curves

Honestly I had very little idea of what I was doing or where I was going with this project. In the end I just experimented around with different equations until I found something that looked cool. The background of my project is a failed attempt at adding more complex curve. However I kind of liked the randomness that it added so I decided to keep it around. I added a cruciform on top of it which ended up having a very interesting shaped fill space. To finish it off I added a “+” to the center that would rapidly spin, making it look circular.

ikaneko Curves



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

function draw() {
  background(0);

  squiggles();

  drawCruciform();

  drawSpinner();
  

}

// function for background squiggles
function squiggles() {
  strokeWeight(10);
  var x;
  var y;
  var a = width / 2;
  var nPoints = map(mouseY, 0, height, height / 4, height / 2); // It jiggles with y movement
  
  push()
  translate(width / 2, height / 2); // Puts the jumble in the middle of the canvas
  beginShape();
  for (i = 0; i < nPoints; i++) {
    stroke(250, i, 200);
    var t = map(i, 0, nPoints, 0, 2 * PI);  
    x = a * cos(t * (1 - 2 * pow(sin(t), 2))); // Attempted equations
    y = a * sin(t * (1 + 2 * pow(cos(t), 2))); // These didn't turn out how I expected but kinda liked them
    vertex(x, y);
    }
  endShape();
  pop();
 }

 // function for the cruciform
  function drawCruciform() {
    var x;
    var y;
    var a = map(mouseX, 0, width, width / 8, 200); // They move with the mouse
    var b = map(mouseY, 0, height, height / 8, 200);
    var nPoints = 300;
    strokeWeight(20);
    fill(150, 100, mouseX * mouseY / 300); // The interesting fill shape changes color

    translate(width / 2, height / 2); // Centers it around the middle of the canvas
    beginShape();
    
      for(z = 0; z < nPoints; z ++) {
        t = map(z, 0, nPoints, 0, 2 * PI);
        x = a * (1 / cos(t)); // Cruciform equations
        y = b * (1 / sin(t));
        
        vertex(x, y);

      }
    endShape();

    
  }

  function drawSpinner() { // Adds two rectangles to the cent that spin with mouse movement
    fill(200, 250, 200);
    push();
    rotate(mouseX * 10); // Spins very rapidly
    rectMode(CENTER);
    rect(0, 0, 50, 120); // These are already using the same translation as the cruciform
    rect(0, 0, 120, 50);
    pop();
  }

Leave a Reply