Month: October 2017

project7

//Fon Euchukanonchai
//15-104 Section A
//keuchuka@andrew.cmu.edu
//Project-07

var nP = 100;

var colorR;
var colorG;
var colorB;

var add = 0;
var plus = 0
var value = 0;


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

}


function draw() {
	
	//random color values for background
	var rColor1 = random(150, 255)
	var rColor2= random(200, 255)

	// mapping colors to mouseX for the three blobs and blobs that radiate
   	var mC = map(mouseX, 0, 400, 0, 300)

   	var bOne = map(mC, 0, 400, 80, 90) 
	var bTwo = map(mC, 0, 400, 45, 48)
	var bThree = map(mC, 0, 400, 90, 100)

	var bBehind = map(mC, 0, 200, 0, 100)

	//setting background to random colors
    background(255, rColor1, rColor2, mouseX/50);
    
    // blobs that radiate
	Curve(bBehind, 0+value, 255, 0+value, 255, 10+add, 0, 0, 300, mouseY/130);
	Curve(bBehind, 255, 255,0+value, 255, 10+add, 0, 150, 0, mouseY/170);
	Curve(bBehind, 0+value, 255, 255, 255, 10+add, 0, 400, 250, mouseY/150);

	//blobs 
	Curve(bOne, 255-value, 255, 255-value, 255, 100-plus, 0, 0, 300, mouseY/140);
	Curve(bTwo, 255, 255, 255-value, 255, 100-plus, 0, 150, 0, mouseY/170);
	Curve(bThree, 255-value, 255, 255, 255, 100-plus, 0, 400, 250, mouseY/150);

	//if mouse is pressed, the whites and colors are flipped
	if (mouseIsPressed){
		plus = 70;
		value = 255
		add = 10

		} else {
		plus = 0 
		value = 0 
		add=0
	}


}


//function to build blob

function Curve(a, colorR, colorG, colorB, Scolor, trans, sW, mX, mY, ph) {

    var x;
    var y;
    
    // setting variables to change size, blob shape, and rotation
    var b = a / 2.0;
    var k = constrain(mouseX, 0, 400)
    var h = map(k, 0, width, 0, b-10);

    strokeWeight(sW);
    stroke(Scolor);

    //colors are parametric
    fill(colorR, colorG, colorB, trans);
    
    // blobs are variable in size, blob shape, rotation, and location
    beginShape();
    for (var i = 0; i < nP; i++) {
        var t = map(i, 0, nP, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(mX+ x,  mY+ y);
    }
    endShape();   
}

With this project, I wanted to create “blobs” that move in subtle ways. The example that looked like some bacteria inspired this sort of movement, therefore I decided to go with polar curve for my project. I realize that the few parameters I could work with were rotation, size, color, location, and the small changes of the shape. I have the mouse react to some of these parameters so they look like they are changing but in a very subtle, bacteria like way. These blobs also had potential coming together, so I had them change in size to look like they “radiate” color to mix and become a gradient. The last layer was to have the colors flip when the mouse is clicked, but otherwise it works the exact same way. The two states I captured were the colors, as I think this is the main change, most obvious change. But the change of the curve is what gives the sensibility to the whole project.

In this project, I chose the Astriod and Deltoid curve equations. I was originally trying to combine the two curves, yet I found it visually too clustered. So I made it alternating when mouse is pressed. Basically, the mouse movement will determine the the rotation speed, the size and form of the curves. I also modified the transparency so that the curves will be brighter when it is bigger in shapes and darker when is smaller, which I intended to create a sense of perspective in the space.

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-07

var t=1; 
var state; //set state for changes when mouse pressed 

function setup() {
    createCanvas(480, 480) 

    state = 1; //start with state 1 
    
}

function draw() {
    background (0);
    var offset=0; 

    translate(width/2, height/2-offset); //move curve to center 
    angleMode(DEGREES);

    t+=1+(mouseX+mouseY)/40;  //change rotation speed according to mouse position
    rotate(t); //rotate around center 
    pattern(); // call pattern function and draw the shape
   
   
}


function hypocycloid(){
    var a= 30; 
    var points=500; 


    var n = map(mouseX,0,width,70,150); //map the changing ranges  
    

    noFill();
    stroke(255,255,255,(mouseX+mouseY)/8); // change opacity with mouse movement 

    beginShape();
    
    for (var i=0; i<points; i++){

        //map angle changing range to 0-360 degree
        var t=map(i, 0, points, 0, 359);

        //curve equation 
        var x=1/3*n*(2*cos(t)+cos(2*t));
        var y=1/3*n*(2*sin(t)-sin(2*t));


        vertex(x,y);
    }

    endShape(CLOSE); 
}

function astroid(){

    var points=500; 

    var a=map(mouseX,0,width,5,40); //map the size change range 


    noFill();
    stroke(255,255,255,(mouseX+mouseY)/8); //change opacity with mouse movement 


    beginShape();
    for (var i=0; i<points; i++){

        //map angle changing range to 0-360 degree 
        var t=map(i, 0, points, 0, 359);
        
        //curve equation 
        var x=3*a*cos(t)-a*cos(3*t);
        var y=3*a*sin(t)-a*sin(3*t)

    
        vertex(x,y);

    }
    endShape(CLOSE);
}


function pattern(){

    

    for(var i=0; i<100; i++){ 
        
        //set x,y position that it goes in draw the shapes in a circle
        var x=5*cos(3.6*i);
        var y=5*sin(3.6*i);

        translate(x,y) //change postiion to draw shapes 


        //determine which curve to present 
        if (state == 1){
            hypocycloid();
        } else {
          astroid();  
        }
    }
}
  



function mousePressed(){

    //when mouse pressed, the state changes, so the curve chaneges. 
    if (state == 1){
    state = 2;
    } else {
        state = 1;
    }
}







   


    

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-07

var nPointsA= 600;
var nPointsB= 200;
var nPointsC= 800;
var x;
var y;
var constrainX;

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

function draw() {
	//ghosted background changing color based on mouseX
	var constrainX = constrain(mouseX, 0, width); //constraining mouseX in the page
	var r = map(constrainX, 0, width, 100, 39);
	var g = map(constrainX, 0, width, 43, 15);
	var b = map(constrainX, 0, width, 107, 54);
    background(r, g, b, 40);
    //Hypotrochoid & Ellipse
    push();
    translate(width/2, height/2);
    drawHypotrochoid();
    drawEllipse();
    pop();
    //Ranunculoid (only appears if mouseX is on left three quarter of page)
    if (constrainX < 3*width/4) {
   		push();
    	translate(width/2, height/2);
    	//mapping the angle of rotation based on mouseX
    	var angle = map(constrainX, 0, width, 0, 4 * TWO_PI);
		rotate(angle);
    	drawRanunculoid();
    	pop();
    }
}

function drawHypotrochoid() {
    constrainX = constrain(mouseX, 0, width); //constraining mouseX in the page
	var n = map(constrainX, 0, width, 0, .5);
    var a = 225;
    var b = n*a;
    var h = constrain(mouseY/2, 0, b);

    noFill();
    //change strokeWeight based on mouseX
    var s = map(constrainX, 0, width, .1, 2);
    //change stroke color based on mouseX
    var c = map(constrainX, 0, width, 255, 100);
    stroke(c)
    strokeWeight(s);
	beginShape()
		for (var i = 0; i < nPointsA; i++) {
			var t = map(i, 0, nPointsA, 0, 6*TWO_PI);
			x = (a - b)*cos(t) + h*cos((a - b)/b*t);
			y = (a-b)*sin(t) + h*sin((a-b)/b*t);
			vertex(x, y);
		}
	endShape(CLOSE);
 }

 function drawRanunculoid() {
    constrainX = constrain(mouseX, 0, width); //constraining mouseX in the page
    var a = 30;
    noStroke();
    //change fill oppacity based on mouseX
    var opacity = map(constrainX, 0, width, 10, 50);
    fill(255, 255, 255, opacity);
	beginShape()
		for (var i = 0; i < nPointsB; i++) {
			var t = map(i, 0, nPointsB, 0, TWO_PI);
			x = a*(6*cos(t)-cos(6*t));
			y = a*(6*sin(t)-sin(6*t));
        	ellipse(x, y, 5, 5); //ellipse at each points
		}
	endShape(CLOSE);
 }

function drawEllipse() {
    constrainX = constrain(mouseX, 0, width); //constraining mouseX in the page
    var a = 270;
    var b = 270;
    noFill();
	beginShape()
		for (var i = 0; i < nPointsC; i++) {
			var t = map(i, 0, nPointsC, 0, 6*TWO_PI);
			x = a*cos(t);
			y = b*sin(t);
			//ellipse at random position x and y range
        	ellipse(x+random(-50, 50), y+random(-50, 50), 3, 3);
		}
	endShape(CLOSE);
 }

I used three different curves for this interactive design: hypotrochoid, ranunculoid, and ellipse. The final product is interactive in that not only does the design react to position Y of the mouse location, the curves, the angle it rotates, stroke weight, stroke color, stroke opacity and background color all react to position X of the mouse location. Because of the circular movement of the other two curves, I wanted to create a “night-sky-with-blinking-stars” effect through creating an ellipse in which points are randomly positioned within a limited range with white blinking circles. The color palette was also chose to reflect the night sky atmosphere.

how Hypotrochoid & Ranunculoid works