Xindi Lyu-Project 03-Dinamic Drawing-Section A

sketch

/*Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-03-Dinamic Drawing */
function setup() {
    createCanvas(640, 480);
    background(255);
    rectMode(CENTER);
    
}
function draw() {
    noStroke();
    background(49,76+mouseY,87+mouseX/2);
 var a = max(min(mouseX,640),0);
 var b = a*24/64;
 fill(255);
//red


fill(254-a/5,228,196-b)
triangle(160,240+a*120/640,320,240+a*120/640,240,120+b);
triangle(160,480+a*120/640,320,480+a*120/640,240,360+b);
triangle(160,0+a*120/640,320,0+a*120/640,240,0+b);
triangle(160,240+a*120/640,320,240+a*120/640,240,240+b);
triangle(480,240+a*120/640,640,240+a*120/640,560,120+b);
triangle(480,480+a*120/640,640,480+a*120/640,560,360+b);
triangle(480,0+a*120/640,640,0+a*120/640,560,0+b);
triangle(480,240+a*120/640,640,240+a*120/640,560,240+b);




fill(232-a/20,173+a/20,159+a/20);
triangle(0,120+a*120/640,160,120+a*120/640,80,0+b);
triangle(320,120+a*120/640,480,120+a*120/640,400,0+b);
triangle(0,0,160,0,80,0+b/2);
triangle(0,360+a*120/640,160,360+a*120/640,80,240+b);
triangle(320,360+a*120/640,480,360+a*120/640,400,240+b);
triangle(0,120+a*120/640,160,120+a*120/640,80,120+b);
triangle(320,0,480,0,400,0+b/2);
triangle(320,120+a*120/640,480,120+a*120/640,400,120+b);


fill(251-a/10,149+b,13+a/5);
triangle(160,120+a*120/640,320,120+a*120/640,240,0+b);
triangle(160,360+a*120/640,320,360+a*120/640,240,240+b);
triangle(160,0,320,0,240,0+b/2);
triangle(160,120+a*120/640,320,120+a*120/640,240,120+b);
triangle(480,120+a*120/640,640,120+a*120/640,560,0+b);
triangle(480,360+a*120/640,640,360+a*120/640,560,240+b);
triangle(480,0,640,0,560,0+b/2);
triangle(480,120+a*120/640,640,120+a*120/640,560,120+b);
 
fill(93+a/5,212-b,206);
triangle(0,240+a*120/640,160,240+a*120/640,80,120+b);
triangle(0,480+a*120/640,160,480+a*120/640,80,360+b);
triangle(0,0+a*120/640,160,0+a*120/640,80,0+b);
triangle(0,240+a*120/640,160,240+a*120/640,80,240+b);
triangle(320,240+a*120/640,480,240+a*120/640,400,120+b);
triangle(320,480+a*120/640,480,480+a*120/640,400,360+b);
triangle(320,0+a*120/640,480,0+a*120/640,400,0+b);
triangle(320,240+a*120/640,480,240+a*120/640,400,240+b);

}

For this project I experimented the pattern image and how it would interact with a user. The triangular patters varies as long as their color schemes, while some sort of their orientations remained the same.