Hannah K-Project-03

sketch-178.js

// Creates an interactive dynamic drawing that changes when 
// mouseX is moved
// Composed of right / isosceles trapezoids and triangles

function setup() {
    createCanvas(640, 480);
    background(0,255,255);
}

function draw() {
// 1st shape out of 8 total
    if(mouseX > 0 & mouseX < 80){
        // Horizontal changes on this dynamic drawing are always 80 units
        noStroke();
        fill(255,130,171);
        // 1st of the 8 quadrilaterals that will get smaller from L to R
        quad(0,80,80,130,80,480,0,480);
    }
    else{ 
        noStroke();
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(0,80,80,130,80,430,0,480);
        // 1st of the 8 quadrilaterals that will get larger from L to R
        // In this case, this shape is actually a triangle, but referred to
        // as a quadrilateral for consistency in my code
        fill(255,62,150);
        quad(0,480,80,430,80,480,0,480);
    }

// 2nd shape out of 8 total
    if(mouseX > 80 & mouseX < 160) {
        noStroke();
        fill(218,112,214);
         // 2nd of the 8 quadrilaterals that will get smaller from L to R
        quad(80,130,160,180,160,480,80,480);
    }
    else{
        noStroke();
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(80,130,160,180,160,380,80,430); 
        // 2/8 of the quadrilaterals that will get larger from L to R
        fill(139,71,137);
        quad(80,430,160,380,160,480,80,480)
    }

// 3rd shape out of 8 total
    if(mouseX > 160 & mouseX < 240) {
        noStroke();
        fill(75,0,130); 
        // 3rd of the 8 quadrilaterals that will get smaller from L to R
        quad(160,180,240,230,240,480,160,480); 
    } 
    else {
        noStroke();
        // Regular trapezoid whose color is the same as the background 
        fill(0,255,255);
        quad(160,180,240,230,240,330,160,380);
        // 3rd of the 8 quadrilaterals that will get larger from L to R
        fill(72,118,255);
        quad(160,380,240,330,240,480,160,480);        
    }

// 4th shape out of 8 total
    if(mouseX > 240 & mouseX < 320) {
        noStroke();
        fill(135,206,250); 
        // 4th of the 8 quadrilaterals that will get smaller from L to R
        // In this case, this shape is actually a triangle, but referred to
        // as a quadrilateral for consistency in my code
        quad(240,230,320,280,320,480,240,480);
    }
    else {
        noStroke();
        // Regular trapezoid whose color is the same as the background 
        fill(0,255,255);
        quad(240,230,320,280,320,280,240,330);
        // 4rd of the 8 quadrilaterals that will get larger from L to R
        fill(51,100,201);
        quad(240,330,320,280,320,480,240,480) 
    }

// 5th shape out of 8 total
    if(mouseX > 320 & mouseX < 400) {
        noStroke();
        // 5th of the 8 quadrilaterals that will get smaller from L to R
        fill(0,134,139);
        quad(320,280,400,330,400,480,320,480);
        // Triangle which is same color as the background
        // Referred to as a quadrilateral for consistency in my code
        fill(0,255,255);
        quad(320,280,400,230,400,330,320,280);
    }
    else{
        noStroke();
        // 5th of the 8 quadrilaterals that will get larger from L to R
        fill(255,20,147); 
        quad(320,280,400,230,400,480,320,480); 
    }

// 6th shape out of 8 total
    if(mouseX > 400 & mouseX < 480) {
        noStroke();
        // 6th of the 8 quadrilaterals that will get smaller from L to R
        fill(60,0,200); 
        quad(400,330,480,380,480,480,400,480);
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(400,230,480,180,480,380,400,330);
    }
    else {
        noStroke();
        // 6th of the 8 quadrilaterals that will get larger from L to R
        fill(255,255,255);
        quad(400,230,480,180,480,480,400,480);
    }

// 7th shape out of 8 total
    if(mouseX > 480 & mouseX < 560) {
        noStroke();
        // 7th of the 8 quadrilaterals that will get smaller from L to R
        fill(25,60,100);
        quad(480,380,560,430,560,480,480,480);
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(480,180,560,130,560,430,480,380);
    }
    else {
        noStroke();
        // 7th of the 8 quadrilaterals that will get larger from L to R
        fill(155,20,100);
        quad(480,180,560,130,560,480,480,480) 
    }
    
// 8th shape out of 8 total
    if(mouseX > 560 & mouseX < width) {
        noStroke();
        // 8th of the 8 quadrilaterals that will get smaller from L to R
        // Actual shape is a triangle
        fill(142,56,142);        
        quad(560,130,640,80,640,480,560,480) 
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);        
        quad(560,130,640,80,640,480,560,430);
    }
    else {
        noStroke();
        // 8th of the 8 quadrilaterals that will get larger from L to R
        fill(132,112,255);
        quad(560,130,640,80,640,480,560,480); 
    }
}

When I began thinking of what I wanted to do for this project, I thought it would be interesting to do something using triangles. Initially, I thought of the drawing as having 8 different parts because I created 8 sections and thought I would need 2 shapes per section. But I ended up using 3 per section, and figuring out the coordinates of the shapes took a little bit longer than expected. Overall, I quite enjoyed creating this!

(Comment: For whatever reason, the very right part of my project is getting cut off on the website, even though the canvas width is set correctly.)