Category: Project-07-Curves

//Shaun Murray, 
//shaunmur - Section B

var nPoints = 2500
var R, G, B;
var mX, mY



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

function draw() {
    mX = mouseX
    mY = mouseY

	background(mX - 75, mY - 50, mX - 150);
	push();
	translate(mX, mY);
	epi(0, 0);
	pop();

	push();
	translate(mX - 100, mY - 100);
	epi(0, 0);
	pop();

	push();
	translate(mX + 100, mY + 100);
	epi(0, 0);
	pop();

	push();
	translate(mX + 100, mY - 100);
	epi(0, 0);
	pop();

	push();
	translate(mX - 100, mY +100);
	epi(0, 0);
	pop();

	push();
	translate(mX - 200, mY);
	epi(0, 0);
	pop();

	push();
	translate(mX, mY + 200);
	epi(0, 0);
	pop();

	push();
	translate(mX + 200, mY);
	epi(0, 0);
	pop();

	push();
	translate(mX - 200, mY + 200);
	epi(0, 0);
	pop();

	push();
	translate(mX + 200, mY + 200);
	epi(0, 0);
	pop();
}

function epi(x, y) {
	var a = map(mouseX, 0, 400, 0, 50);
	var b = map(mouseY, 0, 400, 10, 90);
	R = mouseX
	G = mouseY + 50
	B = mouseY

    stroke(R, G, B);
    noFill();
    beginShape();
    for (let i = 0; i < nPoints; i++) {
        var theta = map(i, 0, 100, 0, TWO_PI);
        var x = (a + b) * cos(theta) - b*cos(((a + b) / b) * theta);
        var y = (a + b) * sin(theta) - b*sin(((a + b) / b) * theta);
        vertex(x, y);
    }
    endShape();

}

A visual representation of what you might see when you rub your eyes with your fists.

Heying Wang

heyingw@andrew.cmu.edu

sketch

var nPoints=100;
function setup() {
    createCanvas(480, 480);
    background(220);
    frameRate(5);
   
}

function draw() {
    var x;
    var y;
    
    //constrain mouseX and mouseY
    constrain(mouseX,0,width);
    constrain(mouseX,0,height);

    //limite the size of the astroid with map method
    //sets up a constantly chaging background
    var a = map(mouseX,0,width,20,100);
    var b=  map(mouseY,0,height,20,100);

    background(100+a,150-b,100+b-a);
    for(i=0;i<=200;i++){
        fill('yellow');
        circle(random(width),random(height),1,1)
    }


    //draw one large astroid at the center 
    fill(a,b,50);
    translate(width/2+random(-2,2),height/2+random(-2,2)); 
    astroid(a,b); 
     
    fill(random(250),random(250),random(250));
    heart(a);
   
    push();
    //the one on the bottom right
    translate(width/4+random(-2,2),height/4+random(-2,2)); 
    rotate(radians(mouseX));  
    fill(a,b,160);
    astroid(a,b);
    
    fill(random(250),random(250),random(250));
    heart(a);
    
    //the one on the top left
    pop();
    push();
    translate(-width/4+random(-2,2),-height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b);
 
    fill(random(250),random(250),random(250));
    heart(a);
    //the one on the top right 
    pop();
    pop();
    push();
    translate(width/4+random(-2,2),-height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b); 
    fill(random(250),random(250),random(250));
    heart(a);
 
    //the one on the bottom left
    pop();
    pop();
    translate(-width/4+random(-2,2),height/4)+random(-2,2); 
    rotate(radians(mouseX));
    fill(a,b,160);
    astroid(a,b); 
    fill(random(250),random(250),random(250));
    heart(a);
       

}

//draw astroid and the lines
function astroid(a,b){
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x = a*pow(cos(t),3);
        y = b*pow(sin(t),3);
        vertex(x, y);
    }
    endShape(CLOSE);
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x = a*pow(cos(t),3);
        y = b*pow(sin(t),3);
        strokeWeight(0.2);
        stroke('wight');
        line(x,y,0,0);
    }
   
}
//draw heart
function heart(a){
    k=map(a,0,100,0.5,1.2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        x =k*16*pow(sin(t),3);
        y = k*13/16*13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

I made this constantly changing pattern with hearts curve and astroid curve. The background color corresponds to the position of mouse x and mouse y.

The size of the astroid curve and the heart curve also depends on where the user places he mouse. They can become as narrow as a pointer or as wide as a square. They will also be rotating around the center as the mouse move clockwise or anti-clockwise.

Thus, the user can interact with the page by moving their mouse around to create their unique, desired pattern.

For this project, I was interested in the different depictions that were shown in the example for how to generate a circle curve. I thought it would be fun to try and draw a circle, but with a specific math curve. I chose the petal curve, and created a code that allowed you to manipulate the shape and frequency of the curve based on the position of the mouse. At first, it looks like a relatively pattern, with the petal curve rotating in the center, and its shape becoming skewed the greater the mouseX position it. However, if the mouse is pressed, then the pattern becomes more intricate, with the curves increasing in frequency to create a void, or circle, in the center. I had difficulty being able to take the curve a step further to make it more dynamic to look at. At first I chose a much more complicated curve, but I could not get the parentheses right while typing it in and it never looked correct!

var nPoints = 100
var angle = 0
var m;
var n;

function setup() {
  
  createCanvas(400, 400);
  m = width/2
  n = height/2
}

function draw() {
  background(0);
  frameRate(20)
  drawPetalCurve(m,n);
  if (mouseIsPressed){ // if mouseIsPressed, draws higher frequency of rotating petal curves
    for (j= 0; j<10;j++){
    drawPetalCurve(m,n);
  }
}
 
}

function drawPetalCurve (m,n){
  var x; 
  var y;
  var a = 100
  var b = 100
  var p = (constrain(mouseX, 50, 300))/50 //change dimensions of curve based on mouse location
push();
stroke(255)
noFill();
  translate(width/2, height/2) // curve drawn at center
beginShape();
  for (var i = 0; i < nPoints; i++) {
    rotate(angle)
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = p*a*cos(t)*(sin(t)*sin(t))	
        y = a*(cos(t)*cos(t))*sin(t) 
          vertex(m/2+x, n/2+y)
    angle+=0.1
       }
    endShape(CLOSE); 

pop();
   
}