Category: Section E

adev_project_07

var iInc;
var colR;
var colG;
var p;
var q; 
var curveSize;
function setup() {
   createCanvas(480, 480);
  
}

function draw() {
    p = map (mouseY, 0, height, 1, 10);
    q = map (mouseX, 0, width, 1, 15);
	colR = map(mouseX, 0, width, 130, 20);
	colG = map(mouseY, 0, height, 60, 110);
	curveSize = map (mouseX, 0, width, 100, 200);

	var k = p/q;
	 background(colR,colG, 10);



iInc = map (mouseY, 0, height, 0.05, 1.5);	

translate (width/2, height/2);

for (var i = 0; i < TWO_PI * q ; i+= iInc*1.2) {
var r = curveSize * cos (k*i);
var x = r * cos(i);
var y = r * sin(i);
fill(255,);
strokeWeight(iInc*5);
point (x+ random (-1, 1), y+random(-1, 1));

} 
    
}

For this project, I really wanted to play around with the jitter. I’m haven’t done any sort of math in a while so it was challenging for me to find my way around the curves. I decided to have more fun with it aesthetically and use dots to represent the curves because I think they’re more delicate and ephemeral.

The patterns and colours make it feel less mathematical and almost cozy like fall or early winter.

 

sketch

//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//Project 07

var edges = 25;

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

function draw() {
  background(10, 10); //use opacity to create lag illustion
  translate(width/2,height/2); //move "0,0" to center
  strokeWeight(0.2);
  noFill();
  drawHypotrochoid();
}

function drawHypotrochoid() {

    var x; //initialize x
    var y; //initialize y

    //set variables for hypotrochoid
    var a = 0;
    var h = map(mouseX, 0, width, 0, 480);
    var b = a/map(mouseY, 0, height, 0, 480);

    for (var i = 0; i < 20; i++){
        var x;
        var y;
        var a = map(mouseX,0,width,-200,200); //alpha
        var b = edges; //beta
        var h = map(mouseY,0,height,0,10*i);

        //changes the color gradient based on mouse position
        var red = map(i,0,50,0,255);
        var green = map(mouseX,0,width,0,255);
        var blue = map(mouseY,0,height,0,255);
        stroke(color(red,green,blue));
  }

    //draw hypotrochoid
    beginShape();
        for (var i = 0; i < 200; i++) {

            var angle = map(i, 0, 200, 0, TWO_PI);

            var x = (a - b) * cos(angle) + h * cos (((a - b)/b)*angle);
            var y = (a - b) * sin(angle) - h * sin (((a - b)/b)*angle);

            vertex(x, y);

        }

    endShape();
}

This project was culmination of happy accidents- I found that the best way to approach manipulating graphical elements of my algorithm was to experiment and play with combinations of values when mapping my mouse interactions. It was surprisingly helpful to use the mouse as a tool to explore the different geometric permutations and their relationships to one another. The experience weakened my fear of using strange and foreign numbers and letters (back from calc in high school) as a very liberating creative tool. I found that adding even the simplest and subtlest of effects (like redrawing the background with a lower opacity) resulted in really great visual manipulations. For my curve, I used a hypotrochoid because it’s roulette drawing sequence reminded me of the clock mechanism from my project 06.

Here are some screenshots of some permutations

Composition with Curves

//GyuEun Park
//15-104 E
//gyueunp@andrew.cmu.edu
//Project-07

//define rose curves by r = cos kθ 
var k = 7/4;

function setup() {
    createCanvas(440, 440);
    frameRate(1000);
}

function draw() {
	background(70);
	
	//change the origin to the center of canvas
	translate(width/2, height/2);

	beginShape();

	stroke(124, 9, 21);
	fill(124, 9, 21, 150);
	strokeWeight(2);
	
	for (var a = 0; a < TWO_PI * 8; a += 0.01){
		var r = map(mouseX, 0, (70 * cos(k * a)), mouseY, (200 * cos(k * a)));
		var x = r * cos(a);
		var y = r * sin(a);
		vertex(x,y);
	}

	for (var b = 0; b < TWO_PI * 4; b += 0.01){
		var r2 = map(mouseX, 0, (40 * cos(k * b)), mouseY, (20 * cos(k * b)));
		var x2 = r2 * cos(b);
		var y2 = r2 * sin(b);
		vertex(x2,y2);
	}

	endShape(CLOSE);
}

I used a rhodonea/rose curve to create a composition that bears a resemblance to a petalled flower. As seen in the code, I used one of the curves defined by , with the value 7 as the numerator and 4 as the denominator in defining k as n/d.

However, the addition of the interactive quality using mouseX and mouseY led to forms that are more fascinating and intricate than the stagnant rose. I’m glad that the project requirement pushed me to enable a broader range of possible compositions.

Screenshots :

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Assignment ifv-07-Project
var y;
var x;
var a;
var t;
var nPoints = 100;
function setup() {
  createCanvas(480,480);
}
function draw(){
  background(199, 74, 105);
  strokeWeight(2);
  translate(width / 2, height / 2);
  //center ray circle
  for(var l = 0; l <60; l++){
    drawRay(l)
  }
  //rotate and overlap looping arc
  for(var i = 0; i < 20; i+=1.5){
    stroke(222, 150, 168);

    if(i==0){
      push();
      drawCurve();
      pop();
    } else {
      push();
      rotate(PI/i);
      drawCurve();
      pop();
    }
  }
}
//drawing ray circ function
function drawRay(count) {
  push();
  rotate(radians(count*6));
  var H = hour();
  var rayH = map(H,0,0,140);
  line(0,0,(width/10),mouseY/4);
  pop();
}
//looping arc func
function drawCurve(){
  var x;
   var y;
   push();

   var a = 80.0;
   var b = a / 2.0;
   var h = constrain(mouseY / 2, 0, height);
   var ph = mouseX / 230;

   noFill();
   beginShape();
   for (var i = 0; i < nPoints; i++) {
       var t = map(i, 0, nPoints, 0, TWO_PI);
       x	=	(b*cos(t))/ph+b*cos(3*t)/(ph)
       y	=	(b*sin(t))/ph-b*sin(3*t)/(ph)
       vertex(x, y);
   }
   endShape(CLOSE);
}

I wanted to make a design that blended curved lines and straight lines. The mouse’s X and Y position affect the shape and size of the curved forms and the length and position of the lines in the cluster.