Category: Section C

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-03

var leftColor; 
var rightColor;
var inBetweenColor;
var inBetweenPosition;
var angle1 = 0;
var angle2=0;


function setup() {
    createCanvas(640, 480);
    leftColor = color (200, 171, 223);
    rightColor = color (35, 42, 97);
    inBetweenColor = color (115, 171, 223);
    inBetweenPosition = 0;
    
}

function draw() {
	//background color change
	inBetweenPosition = map (mouseX,0, width, 0, 1);
	inBetweenColor = lerpColor(leftColor,rightColor,inBetweenPosition);
	background(inBetweenColor);

	//triangles bottom
	push();
	fill(mouseX+200, mouseY, 100);
	triangle(100, 360, 0, 480, 140, 480);
	fill(mouseX+200, mouseY, 300);
	triangle(210, 270, 110, 480, 290, 480);
	triangle(570, 240, 430, 480, 650, 480);
	fill(mouseX+200, mouseY, 100);
	triangle(410, 370, 270, 480, 510, 480);
	pop();

	//triangles top
	push();
	fill(mouseX+200, mouseY, 300);
	noStroke(0);
	triangle(100, 160, 0, 0, 140, 0);
	triangle(410, 170, 270, 0, 510, 0);
	fill(mouseX+200, mouseY, 100);
	triangle(210, 70, 110, 0, 290, 0);
	triangle(570, 30, 430, 0, 650, 0);
	pop();

	//triangle moves
	noStroke(0);
	if (mouseY>height/2){
		fill(mouseX+200, mouseY, 100);
		triangle(100, 270, 0, 0, 140, 0);
		fill(mouseX+200, mouseY, 300);
		triangle(100, 270, 0, 480, 140, 480);

		fill(mouseX+200, mouseY, 100);
		triangle(210, 140, 110, 480, 290, 480);
		fill(mouseX+200, mouseY, 300);
		triangle(210, 140, 110, 0, 290, 0);

		triangle(410, 240, 270, 480, 510, 480);
		fill(mouseX+200, mouseY, 100);		
		triangle(410, 240, 270, 0, 510, 0);

		triangle(570, 150, 430, 480, 650, 480);
		fill(mouseX+200, mouseY, 300);		
		triangle(570, 150, 430, 0, 650, 0);
	}

	//eyes
	fill(255);
	var x1=map(mouseX,0,width,163,173);
	ellipse (x1,270,40,40);
	var x2=map(mouseX,0,width,233,253,true);
	ellipse (x2,270,40,40);

	fill(0);
	var x3=map(mouseX,0,width,154,174);
	ellipse(x3,265,10,10);
	var x4=map(mouseX,0,width,224,254,true);
	ellipse(x4,265,10,10);

	fill(255);
	var x1=map(mouseX,0,width,360,370);
	ellipse (x1,160,40,40);
	var x2=map(mouseX,0,width,430,450,true);
	ellipse (x2,160,40,40);

	fill(0);
	var x3=map(mouseX,0,width,350,370);
	ellipse(x3,155,10,10);
	var x4=map(mouseX,0,width,420,450,true);
	ellipse(x4,155,10,10);

	//rotating rectangles
	fill(255);
	noStroke(0);
	push();
	rotate(radians(-angle1));
    ellipse(angle2, angle2, 0.1, 0.1);
	rect(140,135,10,10);
	rect(30,185,10,10);
	rect(70,245,30,30);
	rect(180,175,20,20);
	rect(120,195,10,10);
	rect(270,295,80,80);
	rect(299,355,10,10);
	rect(350,255,50,50);
	rect(490,155,70,70);
	rect(530,195,40,40);
	rect(620,285,10,10);
	pop();
    angle1 += mouseX/100;
    angle2 += 0.5;
}

I enjoyed being able to interact with my work through a mouse. I made sure to use many different elements and played with the color of the background and triangles. I also wanted to focus on using both the mouseX and mouseY. I think the eyes made the piece come together to make it more interesting as well!

sketch

var deg = 0; // Degrees to Rotate
var x = 0; // Offset from origin
var r = 255; // Rgb Code
var b = 0; // rgB  Code
var dim = 10; // Circle Dimension

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

function draw() {

    angleMode(DEGREES); // This makes things easier for later
    background(220, 220, 220, 90);

    push();
    fill(r, 0, b); // changes fill color as mouse moves
    noStroke();

    translate(320, 240); // moving origin to center of screen
    rotate(-deg); // 6 Counter Clockwise circles
    ellipse (0 + x, 0, dim, dim);

    rotate(60);
    ellipse (0 + x, 0, dim, dim);

    rotate(60);
    ellipse (0 + x, 0, dim, dim);

    rotate(60);
    ellipse (0 + x, 0, dim, dim);

    rotate(60);
    ellipse (0 + x, 0, dim, dim);

    rotate(60);
    ellipse (0 + x, 0, dim, dim);



    rotate(deg * 2); // 6 Clockwise Circles
    ellipse (0 + x, 0, dim, dim);

    rotate(-60);
    ellipse (0 + x, 0, dim, dim);

    rotate(-60);
    ellipse (0 + x, 0, dim, dim);

    rotate(-60);
    ellipse (0 + x, 0, dim, dim);

    rotate(-60);
    ellipse (0 + x, 0, dim, dim);

    rotate(-60);
    ellipse (0 + x, 0, dim, dim);

    rotate(-60);
    ellipse (0 + x, 0, dim, dim);

    pop();

    /* As mouseX Increases, make the circles
        - Rotate CW and CCW
        - Move further away from origin
        - Change Color
        - Grow larger
        All of these don't want to go completely offscreen
        255 is a convienient number as it's used for standard rgb
        To make something change slower, mouseX needed to be
            ivided by a larger numbers
    */

    deg = constrain (mouseX/3, 10, 255);
    x = constrain (mouseX/3, 10, 255);
    r = constrain (mouseX/3, 10, 255);
    b = constrain (mouseX/3, 10, 255);
    dim = constrain (mouseX/6, 10, 50);
}

I really liked the image shown on the project page, and it made me think about loading icons. We’d just covered a lot of rotation, and a lot of loading icons are rotations, so I just followed those ideas and took a stab at it.

kzr-project-03

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_03*/
var lineX=0;
var lineY=0;
var colorX=0;
var colorY=0;
var colorR=0;

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

function draw() {
    background(0);
    //gridlines
    for(var c=0; c<=640; c+=20) {
        strokeWeight(0.3);
        stroke(200);
        line(c,0,c,480);
        line(0,c,640,c);
    }
    //lines coming in from the edges from top and bottom
    for (lineX=0; lineX<=640; lineX+=60) {
        //varying the color based on where mouse is
        colorX=mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(lineX/4,colorX,colorY);
        line(lineX,0,mouseX,mouseY);
        line(640-lineX,640,mouseX,mouseY);
    }
    //lines coming in from the edges from left and right
    for (lineY=0; lineY<=640; lineY+=60) {
        //varying the color based on where mouse is
        colorX=mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(lineY/4,colorX,colorY);
        line(0,lineY,mouseX,mouseY);
        line(640,640-lineY,mouseX,mouseY);
    };
    //lines going out from center to positions around the mouse
    for (var a=50; a<=650; a+=50) {
        //varying the color based on where mouse is
        colorR=(mouseX+mouseY)/2;
        colorR=constrain(colorR,0,255);
        colorX=255-mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=255-mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(colorR,colorX,colorY);
        line(width/2,height/2,mouseX+a,mouseY-a);
        line(width/2,height/2,mouseX-a,mouseY-a);
        line(width/2,height/2,mouseX+a,mouseY+a);
        line(width/2,height/2,mouseX-a,mouseY+a);
    }
    //large circle made up of smaller circles at certain increments
    for(var b=0; b<=360; b+=5) {
        colorX=(mouseX+mouseY)/2;
        colorX=constrain(colorX,0,255);
        fill(0,colorX,colorX);
        push();
        translate(width/2,height/2);
        rotate(radians(b));
        //loop used for incrementing the larger circles
        for (var g=1; g<=40; g++) {
            ellipse(mouseX*g,mouseY*g,5*(g/2),5*(g/2));
            ellipse(mouseX/g,mouseY/g,5/g,5/g);
        }
        pop();
        //triangular grid-like lines around circles
        push();
        translate(width/2,height/2);
        rotate(radians(b*2));
        for (var h = 1; h<=40; h++) {
            triangle((mouseX+b)/h,(mouseY-b)/h,mouseX/h,mouseY/h,(mouseX-b)/h,(mouseY+b)/h);
            triangle((mouseX+b)*h,(mouseY-b)*h,mouseX*h,mouseY*h,(mouseX-b)*h,(mouseY+b)*h);
        }
        pop();
    }
    //rectangles in background over gridlines
    for(var d=20;d<=640;d+=40) {
        //two different loops because I wanted to adjust color and placement, probably unneccessary
        for(var e=0;e<=640;e+=40) {
            fill(0,colorX-20,colorY-20,40);
            rect(d,e,20,20);
            fill(colorX-30,colorY-30,colorX-50,10);
            rect(d+10,e,mouseX/10,mouseY/10);
        }
        for(var f=0;f<=640;f+=40) {
            fill(colorX-40,colorY-40,0,50);
            rect(d+10,f-10,20,20);
            fill(colorY-40,0,colorY-40,60);
            rect(d+30,f-10,20,20);
        }
    }
}

I started by making the gridlines, and then started using loops to put in shapes, changing the color and position based on where the mouse was. I originally made it 800×800, but changed it to 640×480 at the end.