Category: Project-03-Dynamic-Drawing

Project 03 Dynamic Drawing

This is my dynamic drawing of a cityscape with the fore, mid, and background each moving at a different pace as the mouse moves from left to right. The sun also rises and sets and the moon rises while the background changes color. The buildings also reverse in color as the background changes color

sketch
//Michael Li
//Section C 

function setup() {
    createCanvas(600, 450);
    rectMode(CENTER);
   
}

var diam = 50 // diameter for sun & moon
var opacity = 255 //set opacity & grey value
var timer = 0 // for star blinking

function draw() {

    //Background Change color

    //the opacity value is remapped so mouseX would return 
    //0-255 by inputing canvas width
    opacity = map(constrain(mouseX, 0, width), 0, width, 0, 255)
    background(192, 215, 218)
    background(4, 27, 46, opacity); //revealing the second background color as mouse moves to the right
    
    fill(255, 255, 0);

    // restrict mouseX within the canvas
    //remapping the mouseX value in different domains by inputing the canvas width

    //three different remapped values for each layer of the cityscape's translation
    var mapX = map(constrain(mouseX, 0, width), 0, width, 0, width*2);
    var mapX2 = map(constrain(mouseX, 0, width), 0, width, 200, width*2-200);
    var mapX3 = map(constrain(mouseX, 0, width), 0, width, 400, width*2-400);

    //variables used to change the sun&moon sizes
    var mapSunSizeX = map(constrain(mouseX, 0, width), 0, width, 0, 40);
    var mapSunSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 100);

    var mapSun = map(constrain(mouseX, 0, width), 0, width, 180, 310);
    var mapMoon = map(constrain(mouseX, 0, width), width/2, width, 180, 270); 
    //width/2 so the moon appears halfway of the canvas

    //variables used to change the building heights
    var bSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 40);
    var bSizeY2 = map(constrain(mouseY, 0, height), 0, height, 0, 20);
    var bSizeY3 = map(constrain(mouseY, 0, height), 0, height, 0, 10);
    fill(0)
    

    //Sun
    push() //saves all the conditions set before

    diam = 30 - mapSunSizeX +  mapSunSizeY 
    //the sun size changes as mouse moves across the canvas
    
    strokeWeight(0);
    translate(mapSun+diam/4, height*1);
    rotate(radians(mapSun));
    //the sun moves and rotates as the mouse moves 

    //two different stages of the sun
    //the opacity decreases to reveal the other sun
    fill(247, 240, 25); //yellow
    ellipse(width/2, height/2, diam, diam);

    fill(243, 88, 22, constrain(map(opacity, 0, 125, 0, 80), 0, 80));//orange glow
    ellipse(width/2, height/2, diam*2, diam*2);

    fill(243, 88, 22, opacity); //orange
    ellipse(width/2, height/2, diam, diam);

    pop() //return to previous set conditions

    //Moon
    push()

    noStroke();

    translate(mapMoon+diam/4, height*1);
    rotate(radians(mapMoon));
    //the moon moves and rotates with the mouse

    fill(255); //white
    ellipse(width/2, height/2, diam, diam); //cirlce for moon

    //circle to block the moon to form a crescent 
    fill(151, 202, 240)
    ellipse(width/2+diam/3, height/2+diam/3, diam, diam);
    fill(4, 27, 46, opacity)
    ellipse(width/2+diam/3, height/2+diam/3, diam, diam);
    
    pop()

    //clouds

    push()

    translate(mapSun+diam/4, height*1);
    //clouds move with the sun, but only 1/4 the distance traveled

    //ellipses to form the clouds
    fill(255, 120);
    strokeWeight(0);
    ellipse (0, 0-height*9/10, 200, 50);
    ellipse (30, 0-height*8.5/10, 200, 50);
    pop()

    //Stars

    push()

    timer += 1 //the timer ticks
    if (timer%40 ==0){ //every interval of 40 the stars blink once
        if (opacity >= 120){ 
        //the stars only appear when the background is in trasition between two colors
            for (var i = 0; i <= 300; i++){
                //use variable i to count, and draws 300 stars in the range set
                fill(255);
                ellipse(random(0-width*3/5, width*2.7-width*3/5), 
                random(0-height, height*2), random(3, 8), random(3, 8));
            }
        }
    }

    pop()

    //Translate Layer 0
    //the last layer in the back

    push()

    opacity = map(constrain(mouseX, 0, width), 0, width, 30, 200);
    //remap the grey value to create a gradient of grey

    fill(opacity);
    translate(mapX, 0);
    strokeWeight(0);
    rectMode(CORNER); //changes so the rectangles draw from the left corner

    //ground
    rect(0-width*1.9, height*7/8+ bSizeY, width*3, height/5);
    var bSize = map(constrain(mouseX, 0, width), 0, width, 20, 50);

    //buildings last layer
    //drawing each individual building with variious set heights and width
    //the height changes by the value of bSizeY
    rect(0-width*2, height*3/5 + bSizeY, 60, height);
    rect(0-width*1.95, height*2/5 + bSizeY, 75, height);

    rect(0-width*1.75, height*2.5/5 + bSizeY, 40, height);
    rect(0-width*1.7, height*1.5/5 + bSizeY, 60, height);
    rect(0-width*1.6, height*1.8/5 + bSizeY, 40, height);

    rect(0-width*1.5, height*2/5 + bSizeY, 40, height);

    rect(0-width*1.4, height*1.5/5 + bSizeY, 80, height);
    rect(0-width*1.35, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.35, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.25, height*3/5 + bSizeY, 50, height);
    rect(0-width*1.2, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.1, height*1/5 + bSizeY, 50, height);
    rect(0-width*1.05, height*3/5 + bSizeY, 70, height);
    rect(0-width*1.03, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.8, height*1/5 + bSizeY, 50, height);
    rect(0-width*0.85, height*2.3/5 + bSizeY, 70, height);
    rect(0-width*0.7, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.8, height*1/5 + bSizeY, 50, height);
    rect(0-width*0.85, height*2.3/5 + bSizeY, 70, height);
    rect(0-width*0.7, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.6, height*1.5/5 + bSizeY, 50, height);
    rect(0-width*0.55, height*2.7/5 + bSizeY, 70, height);
    rect(0-width*0.44, height*1.5/5 + bSizeY, 50, height);

    rect(0-width*0.3, height*3/5 + bSizeY, 50, height);
    rect(0-width*0.22, height*2.5/5 + bSizeY, 50, height);

    rect(0-width*0.1, height*2.8/5 + bSizeY, 50, height);

    rect(0+width*0.02, height*2.3/5 + bSizeY, 70, height);
    rect(0+width*0.1, height*1.8/5 + bSizeY, 60, height);
    rect(0+width*0.15, height*3.2/5 + bSizeY, 60, height);
    pop();


   //Translate Layer 1
   //second layer of buildings
   push()
    opacity = map(constrain(mouseX, 0, width), 0, width, 60, 150);
    //grey value is remapped to have a smaller range than layer 0

    fill(opacity)
    translate(mapX2, 0)
    strokeWeight(0);
    rectMode(CORNER)

    //buildings second layer
    //drawing each individual building with height varing by bSizeY2
    rect(0-width*1.9, height*11/12 + bSizeY2, width*2.8, height/5)

    rect(0-width*1.7, height*1.8/5 + bSizeY2, 100, height)

    rect(0-width*1.5, height*3/5 + bSizeY2, 80, height)
    rect(0-width*1.4, height*3.2/5 + bSizeY2, 40, height)

    rect(0-width*1.3, height*3/5 + bSizeY2, 80, height)
    rect(0-width*1.25, height*2.2/5 + bSizeY2, 60, height)

    rect(0-width*1.12, height*2.2/5 + bSizeY2, 80, height)
    rect(0-width*1.05, height*3.2/5 + bSizeY2, 60, height)

    rect(0-width*0.8, height*2.2/5 + bSizeY2, 80, height)
    rect(0-width*0.75, height*3.2/5 + bSizeY2, 60, height)

    rect(0-width*0.6, height*3.2/5 + bSizeY2, 80, height)
    rect(0-width*0.5, height*2.2/5 + bSizeY2, 60, height)

    rect(0-width*0.2, height*3.3/5 + bSizeY2, 80, height)
    rect(0-width*0.1, height*4.2/5 + bSizeY2, 60, height)
    pop()

//Translate Layer 2
//front layer

    push();

    opacity = map(constrain(mouseX, 0, width), 0, width, 90, 100);
    //grey values are further remapped to be in a lesser raneg than layer 1
    fill(opacity)
    translate(mapX3, 0)
    strokeWeight(0);
    rectMode(CORNER);

    //buidlings front layer
    //drawing buildings with varied heights adjusted by bSizeY3
    rect(0-width*1.35, height*17/18 + bSizeY3, width*2.8, height/5)

    rect(0-width*1.35, height*3.2/5 + bSizeY3, 100, height)

    rect(0-width*1.1, height*2.8/5 + bSizeY3, 100, height)

    rect(0-width*1.0, height*4/5 + bSizeY3, 80, height)
    rect(0-width*0.9, height*4.2/5 + bSizeY3, 40, height)

    rect(0-width*0.85, height*4/5 + bSizeY3, 80, height)
    rect(0-width*0.8, height*3.2/5 + bSizeY3, 60, height)

    rect(0-width*0.6, height*2.9/5 + bSizeY3, 50, height)
    rect(0-width*0.55, height*3.8/5 + bSizeY3, 60, height)

    pop();
}

Project-03: Dynamic Drawing

sketch
//Alicia Kim
//Section B

var r = 80;
var angle = 0;

function setup() {
    createCanvas(450, 600);
    background(220);
}

function draw() {
    noStroke ();
    //limiting y from 0 to 600
    var y = max(min(mouseY, 600), 0);  
    // as y increases background gets lighter
    background (255*y/650); 


//top ellipse
    fill (255,232,124); // star yellow
    ellipse (width/2,37.5,25,25);

//trunk
    fill (58.8,29.4,0); // brown
    rect(width/2-17.5,65,35,450);

//leaves
// as y increases, size of the leaves increases & y position changes 
    push();
    // higher the y, leaves get darker 
    fill (157-120*y/650,205-140*y/650,143-120*y/650); //frog
    triangle(width/2, 50, width/3, 120, 2/3*width,120);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+65*y/650, width/3-8*1/3*y/650, 
        120+55*y/650, 2/3*width+8*1/3*y/650, 120+55*y/650);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+95*y/650, width/3-12.121212*y/650, 120+100*y/650,
     width*2/3+12.121212*y/650, 120+105*y/650);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+140*y/650, width/3-15.68627*y/650, 120+150*y/650,
     width*2/3+15.68627*y/650, 120+150*y/650);
   

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+175*y/650, width/3-18.05956*y/650, 120+185*y/650,
     width*2/3+18.05956*y/650, 120+185*y/650);
    pop();

//ornaments 
// higher the y, more ornaments appear

    if (y>125){
        fill (251,209,225); // ornaments pink
        ellipse (width/2-10,88,25,25);

    }
    if (y>165){
        fill (255,232,124); // ornaments yellow
        ellipse (width/2+27,138,25,25);
    }

    if (y>210){
        fill (255,218,173); // ornaments orange
        ellipse (width/2,200,25,25);
    }
    if (y>270){
        fill (250,128,114); // ornaments salmon
        ellipse (width/3,220,25,25);
    }
    if (y>330){
        fill (255,232,124); // ornaments yellow
        ellipse (width/2-8,300,25,25);
    }
    if (y>390){
        fill (255,218,173); // ornaments orange
        ellipse (width-width/3,280,25,25);
    }

    if (y>440){
        fill (255,232,124); // ornaments yellow
        ellipse (width/3,360,25,25);

    }

    if (y>495){
        fill (251,209,225); // ornaments pink
        ellipse (width/2+14,400,25,25);
    }

    if(y>550){
        fill (250,128,114); // ornaments salmon
        ellipse (width-width/4,420,25,25);

        fill (255,218,173); // ornaments orange
        ellipse (width/4,450,25,25);
    }
    
}
Ideation

Dynamic Drawing – Project 3

trippy_geometry


function setup() {
    createCanvas(600, 400);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    var w = width
    var h = height
    var mX = mouseX
    var mY = mouseY
    var diam= dist(w/2, h/2,mX,mY) //diameter of center circle
    var diam2= 2 * (dist(w/2,h/2,w/2 + w/4, h/2)- diam/2)// diameter of peripheral circles
    background(255);
    noFill();
    strokeWeight(constrain(diam/10,3,6)); //stroke 
    stroke(diam,diam/3,170)
    circle(w/2,h/2,diam); //this is the big circle in the middle
    
    push();
    noFill();
    strokeWeight(constrain(diam2/10,5,15));
    translate(w/2,h/2);// translates origin to canvas center
    
    var angle = atan((mY -h/2) / (mX - w/2)) //this outputs the angle of the cursor to the center of the canvas
    
    if(mX < w/2){
    var x = diam/2 * cos(angle - PI) // x position of peripheral circle based on angle of cursor
    var y = diam/2 * sin(angle - PI) // y position of peripheral circle based on angle of cursor
    } else {
    var x = diam/2 * cos(angle )
    var y = diam/2 * sin(angle )
    }
    for (var r=0; r<=2 * PI;r+=PI/4){ //the circles rotate every 45 degrees
    rotate(r);
    circle(x ,y,diam2); // these are the peripheral circles
}
    pop();

}

Project – 03

sketch

sketch

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

function draw(){
    background(60,179,113);

    translate(width/2, height/2);
    for (var BE = 0; BE < 12; BE++) {       //12 big ellipses rotating themselves 
        push();
        rotate(TWO_PI * BE / 12);
        var tx = 200 * mouseX/600;
        rotate(radians(frameCount))
        translate(tx, 0);
        fill(46, 79, 79, 200)
        ellipse(0, 0, 20, 40);
            push()
            strokeWeight(7.5)
            line(0, 0, 100, 100)    //sticks jutting out of the big ellipses
                push()
                rotate(frameCount/50)
                strokeWeight(5)
                translate(100, 100)
                line(-200, 100, 100, 50)    //thinner sticks almost perpindicular to the above ones
                pop()           //if I get rid of pop here, some really crazy things happen
            pop()
        for (var SE = 0; SE < 8; SE++) {    //8 small ellipses going in a circular line around each big ellipse
            push();
            rotate(TWO_PI * SE / 8);
            var rx = 60 * mouseY/450;
            rotate(radians(frameCount))
            fill(200, 0, 0, 150)
            ellipse(rx, 0, 8, 16);
            for (var SS = 0; SS < 8; SS++) {
                push();
                rotate(TWO_PI * SS / 8);
                var sx = 60 * mouseY/450;
                rotate(radians(frameCount))
                square(sx, 0, 8);
                pop(); }
            pop();
              }       
        pop();
    }
}

Project – 03

right click to refresh

sketch

//grid lines vertical
var x1 = 30
var y1 = 30
var x2 = 30
var y2 = 60

//grid lines horizontal
var Ax1 = 60
var Ay1 = 30
var Ax2 = 90
var Ay2 = 30

//orange square
var Sx1 = 60
var Sy1 = 60
var d = 30

//purple square
var PSx1 = 240
var PSy1 = 300
var Pd = 30

//yellow square
var YSx1 = 420
var YSy1 = 210
var Yd = 30


var gap = 30
var scolor = 0
var slant = 0
function setup() {
    createCanvas(600, 450);
    background(0);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}



function draw() {

//orange square
strokeWeight(0)
fill('orange')
square(Sx1,Sy1,d)

//purple square
strokeWeight(0)
fill('purple')
square(PSx1,PSy1,Pd)

//yellow square
strokeWeight(0)
fill('yellow')
square(YSx1,YSy1,Yd)

// scaling square orange
if(dist(mouseX,mouseY,Sx1+d/2,Sy1+d/2)<d){
    //squaresscale
    d+=10
}if(d==width/2-15 || d==height/2-15){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(Sx1,Sy1,d);
    d=60;
}

// scaling square purple
if(dist(mouseX,mouseY,PSx1+d/2,PSy1+Pd/2)<Pd){
    //squaresscale
    Pd+=30
}if(Pd==width/4 || Pd==height/4){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(PSx1,PSy1,Pd);
    Pd=60;
}

// scaling square yellow
if(dist(mouseX,mouseY,YSx1+d/2,YSy1+Yd/2)<Yd){
    //squaresscale
    Yd+=1
}if(Yd==width/4 || Yd==height/4){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(YSx1,YSy1,Yd);
    Yd=60;
}



//grid lines vertical left to right
//color
if(scolor==0){
stroke('red');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor==1){
stroke('green');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor==2){
stroke('blue');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor>2){
    scolor=0;
} 




//grid creation animation
x1+=gap
x2+=gap

//lines hit edge of canvas
if(x1>=width-60){
    //move down a row
    y1+=gap*2;
    y2+=gap*2;
    //reset x values
    x1=gap;
    x2=gap;
//loop lines across screen
}if(y2>=height){
    x1=30;
    x2=30;
    y1=30;
    y2=60;
    scolor +=1
}

//grid lines horizontal color top down
//color
if(scolor==2){
stroke('red');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor==1){
stroke('green');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor==0){
stroke('blue');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor>2){
    scolor=0;
}

//grid creation animation
Ay1+=gap
Ay2+=gap

//lines hit edge of canvas
if(Ay1>=height){
    //move across a row
    Ax1+=gap*2;
    Ax2+=gap*2;
    //reset y values
    Ay1=gap + slant;
    Ay2=gap;
//loop lines across screen
}if(Ax2>width){
    Ax1=60;
    Ax2=90;
    Ay1=30;
    Ay2=30;
    scolor +=1
}



//refresh page
if(mouseIsPressed){
    if(mouseButton == RIGHT){
    
    fill(0)
    rect(0,0,width,height);
    //orange square
    Sx1 = 60
    Sy1 = 60
    d = 30

    //purple square
    PSx1 = 240
    PSy1 = 300
    Pd = 30

    //yellow square
    YSx1 = 420
    YSy1 = 210
    Yd = 30
}
}

//slant
if(mouseX>width/2){
    //slant for vertical
    x1=x1+gap;

}
if(mouseY>height/2){
    //slant for horizontal
    Ay1=Ay1+gap;

}

}

Project 03: Dynamic Drawing

Sketches for the different changes I planned to make when the mouse moved
sketch

Although the product is not where I wish it was visually, I will just have to improve on that in my next project. The most challenging part was refreshing my memory on radians so that I wouldn’t have to keep plugging in and checking if numbers work.

/*
    Joan Lee
    Section D
*/

var h = 0;
var angle = 0;

function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(135 * h, 209 * h, 255 * h);      //whenever the mouse moves horizontally it turns from 0 (black) to a sky blue color

    //earth
    noStroke();
    fill(78, 92, 222);
    ellipse(width / 2, height, 800, 400);

    //orbit, done above both the sun and moon to apply to both the same
    translate(h * width, 100);  //moves the sun and moon as the mouse moves horizontally
    rotate(h * QUARTER_PI);     //rotates by pi/4 radians when the mouse moves horizontally
    
    //sun
    fill(255, 208, 0);
    circle(-width / 2, 325, 100 * h);     //grows when mouse moving to the right

    //moon
    fill(200);
    circle(width / 2, 50, 50 * (1 - h));    //shrinks when mouse moving to the right
    fill(135 * h, 209 * h, 255 * h);                //same fill as the background to ensure it is invisible and hiding the rest of the moon
    circle(width / 2 + 15, 50, 50 * (1 - h));       //circle that hides the rest of the moon so it looks like a crescent moon

    hPosition();        //function defined below

}

function hPosition(){
    h = mouseX / width;     //h is btwn 0 and 1 for simplicity's sake instead of just mouseX
    h = Math.min(h, 1);     //stops the changes when the mouse moves 100% of the canvas horizontally
}

Project 03

This is my project of the moon phases!

sketch
// Natalie Koch
// nataliek
// Section A

// The Phases of the Moon

var diam = 300
var value = 255
var canvasX = 600
var canvasY = 450
function setup() {
    createCanvas(canvasX, canvasY);

}

function draw() {
    background(0);
    mouseX = constrain(mouseX,25,575) //motion constraints
    mouseY = constrain(mouseY,225,225) //motion constraints
    if (width/2-mouseX >= 0) {
        diam = mouseX
        value = (mouseX/canvasX)*255
    } else if (width/2-mouseX < 0) { //size variations as moon moves
        diam = width-mouseX}
        value = (mouseX/canvasX)*255
    fill(255,255,value)
    ellipse(mouseX,mouseY,diam,diam) //moon
    ellipse(50,30,10,10)
    ellipse(100,50,10,10)
    ellipse(120,70,10,10)
    ellipse(160,30,10,10)
    ellipse(200,60,10,10)
    ellipse(250,30,10,10) // } stars
    ellipse(300,40,10,10)
    ellipse(350,20,10,10)
    ellipse(400,50,10,10)
    ellipse(450,30,10,10)
    ellipse(500,60,10,10)
    ellipse(550,30,10,10)
    fill(0)
    ellipse(-75,height/2,400,400) //black circles on sides so moon can crescent
    ellipse(675,height/2,400,400)
}

Project 03 – Dynamic Drawing

  • move the mouse up and down to see changes in color
  • move the mouse left and right to change spacing between the squares
sketch
let angle = 0;
var size = 100

function setup() {
    createCanvas(700, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(50);

    //circle in the center
    push();
        translate(width/2,height/2);
            rotate(angle);
            fill(mouseX,43,172);
            stroke('black');
            strokeWeight(5);
        rectMode(CENTER);
            square(0,0,300);
        pop();

    //inner ring of circles
        for(let a=0; a<radians(360); a+=radians(30)){
            
            push();
            translate(width/2,height/2);
            rotate(a);
            translate(0,size);
                rotate(angle);
            rectMode(CENTER);
            blendMode(MULTIPLY);
            fill(mouseY,43,100);
            square(0,0,200);
            pop();
        }

    //outer row of circles
        for(let a=0; a<radians(360); a+=radians(30)){
            
            push();
            translate(width/2,height/2);
            rotate(a);
            translate(0,size+100);
                rotate(angle);
            rectMode(CENTER);
            blendMode(MULTIPLY);
            fill(mouseY,43,172);
            square(0,0,200);
            pop();
        }

        //makes it so that the squares don't disappear when mouseX goes to 700
        size = max(mouseX/2, 100);



    angle += radians(1);

}

Project 3 – Dynamic Drawing

Controls:
– upper right corner = scale up
– lower left corner = scale down
– up & down = triangles move to the right
– click & hold on triangle = rotate
– hover over triangle = fade to white

Originally I wanted to make a field of triangles, where the triangle & neighboring triangles would flip out into a ripple. Initial generation of the triangular grid was easy, but when I wanted to proceed with more complicated maneuvers, I found my self going back to and rewriting my code so it was more structured and centralizing all the important parameters I wanted my operations to depend on.


In particular, I really struggled with the rotation implementation. P5’s scale operation acts as a blanket technique, operating on all the geometries called after it, whereas I wanted triangles to rotate individually, meaning I had to parse through every single triangle individually to find the one I wanted to rotate. When rotating, wiggling the mouse causes the rotation to flicker, as the file is looping through draw to update the new mouse position, so keeping the mouse still when rotating pieces is advised. The rest were relatively straightforward to implement.

sketch 
// Tsz Wing Clover Chau
// Section E


function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(200);
}

var init = true;

var row = 0;
var col = 0;
var selCol = 0;
var selRow = 0;

var offset = 30;

var n = 3;
var l = 0;


var leftX = 0;
var rightX = 0;
var ptX = 0;
var leftY = 0;
var rightY = 0;
var ptY = 0;

var mX = 0;
var mY = 0;

var wait = 70;

var sizeCounter = 1;


let neighC = [255, 255, 255];

let triList = [];


function area(x1, y1, x2, y2, x3, y3) {
    return abs(((x1*(y2-y3)) + (x2*(y3-y1))+ (x3*(y1-y2)))/2);
}

function inbounds(x1, y1, x2, y2, x3, y3, mouseX, mouseY){
    let A = area(x1, y1, x2, y2, x3, y3);
    let A1 = area(mouseX, mouseY, x2, y2, x3, y3);
    let A2 = area(x1, y1, mouseX, mouseY, x3, y3);
    let A3 = area(x1, y1, x2, y2, mouseX, mouseY);
    return (A == A1+A2+A3);
}



function draw() {
    noStroke();
    background(220);
    
    l = (width-(offset*(n-1)))/n;
    var h = sqrt(3)/2 * l; 

    // init triangle grid
    if (init){
        if (row %4 == 0){
            leftX = (col*(l+offset)) + offset;
            rightX = leftX + l;
            ptX = leftX + l/2;

            leftY = (row/2*(h+offset/2)) + offset;
            rightY = leftY;
            ptY =  leftY + h;

            midY = leftY + h/2;


        } else if (row %4 == 2) {
            leftX = ((col-0.5)*(l+offset)) + offset;
            rightX = leftX + l;
            ptX = leftX + l/2;


            leftY = ((row/2)*(h+offset/2)) + offset;
            rightY = leftY;
            ptY =  leftY + h;

            midY = leftY + h/2;

        } else if (row %4 == 3) {
            leftX = ((col - 0.5)*(l+offset)) + l/2 + offset*(3/2);
            rightX = leftX + l;
            ptX = leftX + l/2;

            leftY = (int(row/2)*(h+offset/2)) + h + offset;
            rightY = leftY;
            ptY = leftY - h; 

            midY = leftY - h/2;


        } else {
            leftX = ((col-1)*(l+offset)) + l/2 + offset*(3/2);
            rightX = leftX + l;
            ptX = leftX + l/2;

            leftY = (int(row/2)*(h+offset/2)) + h + offset;
            rightY = leftY;
            ptY = leftY - h;  

            midY = leftY - h/2;
        }
        midX = ptX;

        var cShift = false;
        var a = 90;
        let selC = [0, 0, 0];

        append(triList, [leftX, leftY, rightX, rightY, ptX, ptY, selC, cShift,
                         a, midX, midY, row, col]);

    } else {

        //controlling SCALE
        if (wait == 0 & mouseX < width/8 && mouseY < height/8){
            sizeCounter += 0.01;
        } else if (sizeCounter > 1 & mouseX > width/4 && mouseY > height*3/4){
            sizeCounter -= 0.01;
            }
        scale(sizeCounter);
        
        

        for (let i = 0; i< triList.length; i++) {
            mX = mouseX;
            mY = mouseY;
            elem = triList[i];


            fill(elem[6]);

            //controlling POSITION
            if ((mouseY > elem[2] & mouseY > elem[5]) ||
                (mouseY > elem[2] && mouseY < elem[5])){
                    elem[0] -= 0.5;
                    elem[2] -= 0.5;
                    elem[4] -= 0.5;
                    elem[9] -= 0.5;
                }

            if (inbounds(elem[0], elem[1], elem[2], elem[3], 
                         elem[4], elem[5], mX, mY)) {
                elem[7] = true;

                //controlling SHADE
                if (elem[7]){
                    for (let i = 0; i< 3; i++){
                        elem[6][i] += 10;
                    }
                }
                // controlling ROTATION  (don't move mouse during rotation - it flickers)
                if (mouseIsPressed){
                    push();
                    fill(255, 255, 255);
                    translate( elem[9], elem[10]);
                    rotate(radians(elem[8]), [elem[9], elem[10], 0]);
                    translate(-elem[9], -elem[10]);
                    triangle(elem[0], elem[1], elem[2], elem[3], elem[4], elem[5]);
                    pop();

                    elem[8] += 3;
                }
            } else {
                elem[7] = false;
            }
            if (elem[8] == 90){
                triangle(elem[0], elem[1], elem[2], elem[3], elem[4], elem[5]);
            }
        }
    }


    if (col > n){
        row ++;
        col = 0;
        if (rightY +h > height) {
        init = false;
        }
    } else {
        col ++;
    }

    if (wait > 0){
        wait --;
    }
}

Project 3: Dynamic Drawing

sketch
// Ana Furtado 
// Section E
// Project 3 -- Dynamic Drawing

var angle = 0;

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

function draw() {
    background(max(mouseX, mouseY)); // gets lighter and darker 
    fill(255); //white center rectangle
    strokeWeight(mouseX); // gets bigger as moves to the right
    rotate(radians(angle)); 
    rectMode(CENTER);
    rect(300, 225, 200, 150); //center white rectangle
    angle += (min(mouseX, mouseY)); ///spins rectangles according to mouse
    fill(255);
    //outer rectangles grow bigger and smaller and overlap
    rect(100, 75, 200, mouseY); // outer rect L1
    rect(100, 375, 200, -mouseY); //outer rect L2
    rect(500, 75, 200, mouseY); //outer rect R1
    rect(500, 375, 200, -mouseY); //outer rect R2

}

I by thinking about what could change by moving mouseX and mouseY. The most difficult part was getting the rotating around the origin to work.