Author: jkatungy@andrew.cmu.edu

I wanted to experiment with triangles; when the first run came out okay, I gave it the company of 4 little ones. With the mouse pointer rolling around the screen, the motion is butterfly like.

I would have preferred the colors inside the triangles.

james-dynamicdrawing

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-03

//butterfly1
var Wide = 300;
var Space = (310 - Wide);//fix space between triangles
var High = 4*Wide/5;
//butterfly 2,3,4,5
var Wide2 = 120;
var Space2 = (130 - Wide2); //fix space between triangles
var High2 = 4*Wide2/5;

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

function draw() {
//map canvas background color to mouse X position
    var colR = map(mouseX,0,width,0,255);
    var colG = map(mouseX,0,width,0,0);
    var colB = map(mouseX,0,width,255,0);
    background (colR,colB,colG);
//map triangle base to mouse X & Y position on canvas
//when mouse X is in left half, triangle width reduces
	if (mouseX<=320){
	Wide = map(mouseX,10,320,30,150);
    Wide2 = map(mouseX,10,320,20,60);
    } 
//when mouse X is in right half, triangle width increases
    if ((mouseX>320) & (mouseX<640)){	
	Wide = map(mouseX,320,620,150,300);
    Wide2 = map(mouseX,320,620,60,120);
    }
//when mouse Y is in top half, triangle height reduces
    if (mouseY<=240){
	High = map(mouseY,0,240,20,120);
    High2 = map(mouseY,0,240,10,48);
    } 
//when mouse Y is in bottom half, triangle height increases
    if ((mouseY>240) & (mouseY<480)){	
	High = map(mouseY,240,480,120,240);
    High2 = map(mouseY,240,480,48,96);
    }
//butterfly 1 - center
    push();
    translate(width/2,height/2); //locate origin of triangle canvas at center of original canvas
    triangle(-Wide/2,-High/2,Wide/2,-High/2,0,High/2);//middle triangle
    triangle(-Wide/2-Space,-High/2,-Space-Wide,High/2,-Space,High/2);//left triangle
    triangle(Wide/2+Space,-High/2,Space+Wide,High/2,Space,High/2); //right triangle
    pop();
//butterfly 2 - top left
    push();
    translate(width/4,60); //relocate canvas origin to top left
    triangle(-Wide2/2,-High2/2,Wide2/2,-High2/2,0,High2/2);//middle triangle
    triangle(-Wide2/2-Space2,-High2/2,-Space2-Wide2,High2/2,-Space2,High2/2);//left triangle
    triangle(Wide2/2+Space2,-High2/2,Space2+Wide2,High2/2,Space2,High2/2); //right triangle
    pop();
//butterfly 3 - top right
push();
    translate(width - width/4,60); //relocate canvas origin to top right
    triangle(-Wide2/2,-High2/2,Wide2/2,-High2/2,0,High2/2);//middle triangle
    triangle(-Wide2/2-Space2,-High2/2,-Space2-Wide2,High2/2,-Space2,High2/2);//left triangle
    triangle(Wide2/2+Space2,-High2/2,Space2+Wide2,High2/2,Space2,High2/2); //right triangle
    pop();
//butterfly 4 - bottom left
    push();
    translate(width/4,420); //relocate canvas origin to bottom left
    triangle(-Wide2/2,-High2/2,Wide2/2,-High2/2,0,High2/2);//middle triangle
    triangle(-Wide2/2-Space2,-High2/2,-Space2-Wide2,High2/2,-Space2,High2/2);//left triangle
    triangle(Wide2/2+Space2,-High2/2,Space2+Wide2,High2/2,Space2,High2/2); //right triangle
    pop();
//butterfly 5 - bottom right
push();
    translate(width - width/4, 420); //relocate canvas origin to top bottom right
    triangle(-Wide2/2,-High2/2,Wide2/2,-High2/2,0,High2/2);//middle triangle
    triangle(-Wide2/2-Space2,-High2/2,-Space2-Wide2,High2/2,-Space2,High2/2);//left triangle
    triangle(Wide2/2+Space2,-High2/2,Space2+Wide2,High2/2,Space2,High2/2); //right triangle
    pop();
}