Project 03: Pentachoron

 /*
Nicholas Wong
Section A
*/

var triSize = 100; //Triangle size (arbitrary number)
var rectSize = 400; //Rectangle size (also arbitrary)
var colorChange = false; //True means color value decreases, false means it increases
var shadeNum = 255; //Color value to be manipulated

function setup() {
    createCanvas(450,600);
}
 
function draw() {

	cursor(CROSS); // Changes Cursor to a cross

	//Constrain mouse position to canvas
	let mx = constrain(mouseX, 10, width - 10)
    let my = constrain(mouseY, 10, height - 10)

    //Background gets lighter as mouse moves further from center
	background(dist(mouseX,mouseY,width/2,height/2) * 0.1);

	//Stroke properties for lines
	noFill();
    stroke(255 - (dist(mouseX,mouseY,width/2,height/2) * 0.5)) //Lines get darker as mouse moves from center
    strokeWeight(1.5)

    //Square in background moves with mouse slightly
    square(width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20, rectSize)

    //Large triangle moves with mouse slightly
    triangle(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25 , width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25, width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)

    //Lines that connect 3 corners of the larger triangle to one corner of the smaller triangle

    //Corner 1 (top left smaller triangle)
   	line(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25,width/2 - triSize*2+ my*0.25, height/2 - triSize*1.5 + mx*0.25)
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25,width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25)
    line(width/2 - mx*0.25, height/2 + triSize - my*0.25, width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)

    //Corner 2 (top right smaller triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25,width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25,width/2 - mx*0.25, height/2 + triSize - my*0.25)

    //Corner 3 (bottom smaller triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - mx*0.25, height/2 + triSize - my*0.25)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25,width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25)
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25,width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)


    //Connecting 3 corners of the rectangle to one corner of the large triangle

    //Corner 1 (top left large triangle)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 + rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20, height/2 + rectSize/2 + my*0.1 - 20)

    //Corner 2 (top right large triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 + rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 + rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)
    
    //Corner 3 (bottom large triangle)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25, width/2 + rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)


    //Pulsating gradient effect for triangle in middle
	if (shadeNum >= 255){
		colorChange = true; //Change direction of gradient change
	}
	else if (shadeNum <= 0){
		colorChange = false; //Change direction of gradient change
	}

	if (colorChange){ //Color becomes darker
		shadeNum -= 2;
	}
	else{ //Color becomes lighter
		shadeNum += 2;
	}

    //Triangle 3
    fill(shadeNum) //Pulsating gradient shade
    triangle(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25 , width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25, width/2 - mx*0.25, height/2 + triSize - my*0.25)


    //Stroke properties to lines connected to mouse
    push();
    strokeWeight(4);
    stroke(dist(mouseX,mouseY,width/2,height/2) * 0.25) // Line gets brighter as it moves further from center
    //Lines from smaller triangle that connect to mouse
    line(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25, mx, my);
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25, mx, my);
    line(width/2 - mx*0.25, height/2 + triSize - my*0.25, mx, my);
    pop();
}