sketch

var radius=40;
var shape="cir";
var startX = 120;
var startY = 40;
var coorX = 0;
var coorY = 0;
var radChange = 0;
var shade = 255;

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

function draw() {
	background(0);
	//rectangle mode
	if (shape == "rect"){
		//make a grid
    	for(var row=0;row<10;row++){
   			for(var col=0;col<10;col++){
   				coorX=startX+radius*col
           		coorY=startY+radius*row
           		//the mouse inside control the size and the color of the rectangle
 				if(mouseX<520 & mouseX>120 && mouseY<440 && mouseY>40){
 					dis = dist(coorX,coorY,mouseX,mouseY)
 					radChange = dis*0.08
 					shade = dis*0.4
 				}else{
 					radChange = radius
 					shade=shade+20
 					if (shade>=230){
 						shade=0
 					}
 				}
 				fill(shade,shade,255)
   				rect(coorX,coorY,radChange,radChange);
           	}
        }
    //circle mode
    }else{
    	for(var row=0;row<10;row++){
   			for(var col=0;col<10;col++){
           		coorX=startX+radius/2+radius*col
           		coorY=startY+radius/2+radius*row
           		//the mouse inside control the size and color of the circle
 				if(mouseX<520 & mouseX>120 && mouseY<440 && mouseY>40){
 					dis = dist(coorX,coorY,mouseX,mouseY)
 					radChange = dis*0.08
 					shade = dis*0.4
 				}else{
 					radChange = radius
 					shade=shade+20
 					if (shade>=230){
 						shade=0
 					}
 				}
 				fill(shade,shade,255)
 				ellipse(coorX, coorY,radChange);
 			}
 		}
 	}
}
    

function mousePressed() {
	//mouse press control the shape of the objects
    if (shape != "rect"){
        shape = "rect";
    } else{
        shape = "cir";
    }
}

I was inspired by the grasshopper plug-in in rhino that we are learning right now in architecture generative modeling class. Therefore, I made this interactive drawings.

Rachel Karp – Dynamic Drawing

var d = 10; // distance between triangles

/*
This drawing consists of three "modes"
1) "Old" mode, when mouseY is above the middle of the canvas
(minus variable d, the space between the triangles)
2) "Young" mode, when mouseY is below the middle of the canvas
(plus variable d, the space between the triangles)
3) "Contemplative" mode, when mouseY is within the space between the traingles
*/

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

function draw() {
    //BACKGROUND
    //set background color for "old" mode
    background(0);
    //background color changes in "young" mode
    if(mouseY>height/2+d){
        background(255, 255, 77);
    }
    //backgrond color changes in "contemplatative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        background(255);
    }

    //set outline color
    stroke(255);

    //TOP TRIANGLE
    //set color in "young" mode
    fill(255, 51, 0);
    //set color in "old" mode
    if(mouseY<height/2-d){
        fill(150);
    }
    //set color in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(255);
    }
    //draw triangle dependent on mouseY
    triangle(width/4, height/2-d, width/2, mouseY, 
        width-width/4, height/2-d);

    //BOTTOM TRIANGLE
    //set color in "young" mode
    fill(255, 51, 0);
    //set color in "old" mode
    if(mouseY<height/2-d){
        fill(150);
    }
    //set color in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(255);
    }
    //draw triangle dependent on mouseY
    triangle (width/4, height/2+d, width/2, height-mouseY, 
        width-width/4, height/2+d);

    //TOP TRIANGLE LINE (age line)
    strokeWeight(3);
    //draw line dependent on mouse Y
    line(0, mouseY, width, mouseY);

    //BOTTOM TRIANGLE LINE (age line)
    //draw line dependent on mouse Y
    line(0, height-mouseY, width, height-mouseY);

    //TEXT
    //add text in "young" mode
    if(mouseY>height/2+d){
        fill(102,102,255);
        //set font size dependent on mouseX
        //constrain font size so that "young!" will remain visible relative to mouseX
        var sizeX = constrain(mouseX, 0, 160);
        textSize(sizeX);
        textAlign(RIGHT);
        text("I feel " + mouseX + " years young!", width, mouseY);
    } 
    //add text in "old" mode
    if(mouseY<height/2-d){
        fill(107, 107, 71);
        //set font size dependent on mouseX
        //constrain font size so that "old." will remain visible relative to mouseX
        var sizeX = constrain(mouseX, 0, 300);
        textSize(sizeX);
        textAlign(RIGHT);
        text("I feel " + mouseX + " years old.", width, mouseY);
    }
    //add text in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(0);
        noStroke();
        textSize(50);
        textAlign(CENTER);
        text("I feel...", width/2, mouseY);
    }

}

I had a hard time coming up with a concept for this project. I knew I wanted to experiment with triangles because I thought I hadn’t made myself work with them much before, and I knew I wanted to experiment with text. I ended up with this. I like the “age lines” that track age based on mouseX, and I like that I got to learn about constrain().

Move your mouse over the image from the top left corner to the bottom right corner. If you move just outside the bottom right corner, something colorful will happen!

I apologize for not using the 640 x 480 canvas size, that caused my program not to work last time I posted.

My program changes color, and fades into the background,
The lines (Which are rectangles) change size and end-location,
The squares rotate with the mouse location.

I hope I satisfied all the requirements! 🙂

sketch

//variable created to the size of the canvas
//(I used numbers here because width/height
//can't be input into global variables, I think
var blockW = 480/6;
var blockH = 480/6;

//The different fade variables I created
//to make each rotating square fade into
//the background seperately from each other
var fade = 255;
var fade1 = 255;
var fade2 = 255;
var fade3 = 255;
var fade4 = 255;
var fade5 = 255;
var angle = 0;
var side = 0;
var red = 255;
var blue = 255;

function setup() {
    createCanvas(480, 480);
}
 
function draw() {
    background(0); //black background
    noStroke();


    //The lines are now strobe-party-effected ONLY
    //when the mouse is beyond the bottom right edge 
    //of the canvas
    if ((mouseX > 6*blockW) & (mouseY > 6*blockH)) {
        fill(random(0,255), random(0,255), random(0,255));
    } else {
        fill(255);
    }

    //These are all the vertical lines
    rect(blockW, 0, 5, 2*mouseY);
    rect(2*blockW, 0, 5, 2*mouseY);
    rect(3*blockW, 0, 5, 2*mouseY);
    rect(4*blockW, 0, 5, 2*mouseY);
    rect(5*blockW, 0, 5, 2*mouseY);

    //These are all the horizontal lines
    rect(0, blockH, 2*mouseX, 5);
    rect(0, 2*blockH, 2*mouseX, 5);
    rect(0, 3*blockH, 2*mouseX, 5);
    rect(0, 4*blockH, 2*mouseX, 5);
    rect(0, 5*blockH, 2*mouseX, 5);

    rectMode(CENTER);
    side = min(blockH/2, blockW/2);
    //The side of the rotating squares is based off the
    //length of the smallest


    //This is the rotating square in box 1x1
    if ((mouseX > blockW) & (mouseY > blockH)) {
        fill(fade); 
        push();
        rectMode(CENTER);
        translate(blockW/2, blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop();
        fade -= 1;
    } else {
        fade = 255;
    }

    //This is the rotating square in box 2x2
    if ((mouseX > 2*blockW) & (mouseY > 2*blockH)) {
        fill(fade1); 
        push();
        rectMode(CENTER);
        translate(3*blockW/2, 3*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade1 -= 1;
    } else {
        fade1 = 255;
    }


    //This is the rotating square in box 3x3
    if ((mouseX > 3*blockW) & (mouseY > 3*blockH)) {
        fill(fade2); 
        push();
        rectMode(CENTER);
        translate(5*blockW/2, 5*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade2 -= 1;
    } else {
        fade2 = 255;
    }


    //This is the rotating square in box 4x4
    if ((mouseX > 4*blockW) & (mouseY > 4*blockH)) {
        fill(fade3); 
        push();
        rectMode(CENTER);
        translate(7*blockW/2, 7*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade3 -= 1;
    } else {
        fade3 = 255;
    }


    //This is the rotating square in box 5x5
    if ((mouseX > 5*blockW) & (mouseY > 5*blockH)) {
        fill(fade4); 
        push();
        rectMode(CENTER);
        translate(9*blockW/2, 9*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade4 -= 1;
    } else {
        fade4 = 255;
    }


    //This is the rotating square in box 6x6
    if ((mouseX > 6*blockW) & (mouseY > 6*blockH)) {
        fill(fade5); 
        push();
        rectMode(CENTER);
        translate(11*blockW/2, 11*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade5 -= 1;
    } else {
        fade5 = 255;
    }

    //The red square in the cell 2x5
    if ((mouseX > 2*blockW) & (mouseY > 5*blockH)) {
        fill(red, 0, 0); 
        push();
        rectMode(CENTER);
        translate(3*blockW/2, 9*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        red -= 1;
    } else {
        red = 255;
    }

    //The blue square in the cell 5x2
    if ((mouseX > 5*blockW) & (mouseY > 2*blockH)) {
        fill(0, 0, blue); 
        push();
        rectMode(CENTER);
        translate(9*blockW/2, 3*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        blue -= 1;
    } else {
        blue = 255;
    }
}

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-03
var a;
var x = 400;
var y = 400;
var cloud = 100;
var dir = 1;
var dir2 =1;
var speed = 4;
var speed2 = 1;
var diam = 50;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(168,204,239);
    //sunny background
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        background(124,146,181);
    }
    //cloudy background
    noStroke();
    fill(150,234,148);
    rect(0,390,640,height - 350);
    //sunny ground
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(107,145,106);
        rect(0,390,640,height - 350);
    }
    //cloudy ground


    fill(206,166,124);
    strokeWeight(1);
    stroke(255);
    rect(width/2 - 4,height/2 - 4,8,200);
    stroke(255);
    //1st windmill stick


    push();
    translate(width/2,height/2);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(a);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(255,105,113);
    }
    else {fill(100);}
    triangle(-50,-50,0,-50,0,0);
    triangle(-50,-50,-100,0,0,0);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(118,135,255);
    }
    else {fill(100);}
    triangle(0,0,0,-100,50,-50);
    triangle(0,0,50,-50,50,0);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(118,255,118);
    }
    else {fill(100);}
    triangle(0,0,100,0,50,50);
    triangle(0,0,50,50,0,50);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(255,242,118);
    }
    else {fill(100);}
    triangle(0,0,0,100,-50,50);
    triangle(0,0,-50,50,-50,0);
    pop();

    fill(0);
    ellipse(width/2,height/2,10,10);
    //center windmill clockwise


    push();
    translate(width/2 - 200, height/2 + 100);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(-a);
    if (dist(mouseX,mouseY,width/2,height/2)<=50) {
        fill(158,118,255);
    }
    else {fill(100);}
    triangle(-25,-25,0,-25,0,0);
    triangle(-25,-25,-50,0,0,0);
    triangle(0,0,0,-50,25,-25);
    triangle(0,0,25,-25,25,0);
    triangle(0,0,50,0,25,25);
    triangle(0,0,25,25,0,25);
    triangle(0,0,0,50,-25,25);
    triangle(0,0,-25,25,-25,0);
    pop();
    //left windmill counterclockwise 

    push();
    translate(width/2 + 200, height/2 + 100);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(-a);
    if (dist(mouseX,mouseY,width/2,height/2)<=50) {
        fill(155,189,115);
    }
    else {fill(100);}
    triangle(-25,-25,0,-25,0,0);
    triangle(-25,-25,-50,0,0,0);
    triangle(0,0,0,-50,25,-25);
    triangle(0,0,25,-25,25,0);
    triangle(0,0,50,0,25,25);
    triangle(0,0,25,25,0,25);
    triangle(0,0,0,50,-25,25);
    triangle(0,0,-25,25,-25,0);
    pop();
    //right windmill counterclockwise


    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        x = mouseX; 
        y = mouseY; 
        noFill();
        strokeWeight(5);
        stroke(65,95,183);
        beginShape ();
        curveVertex(x,y);
        curveVertex(x,y);
        curveVertex(x + 25, y +25);
        curveVertex(x + 50, y);
        curveVertex(x + 75, y +25);
        curveVertex(x + 100, y);
        curveVertex(x + 100, y);
        endShape();
        beginShape ();
        curveVertex(x,y + 20);
        curveVertex(x,y + 20);
        curveVertex(x + 25, y +45);
        curveVertex(x + 50, y + 20);
        curveVertex(x + 75, y +45);
        curveVertex(x + 100, y +20);
        curveVertex(x + 100, y +20);
        endShape();
        beginShape ();
        curveVertex(x,y + 40);
        curveVertex(x,y + 40);
        curveVertex(x + 25, y + 65);
        curveVertex(x + 50, y + 40);
        curveVertex(x + 75, y + 65);
        curveVertex(x + 100, y + 40);
        curveVertex(x + 100, y + 40);
        endShape();
    }
    //wind 


    fill(178,119,119);
    stroke(255);
    strokeWeight(2);
    ellipse(0,0,200,200);
    //sunny sun 


    if (dist(mouseX,mouseY,width/2,height/2)>=100){
        fill(249,143,143);
        ellipse(0,0,200,200);
    }
    //cloudy sun 


    if (dist(mouseX,mouseY,width/2,height/2)<=100){
        fill(220);
        ellipse(0,100,50,50);
        ellipse(30,110,40,40);
        ellipse(50,70,70,70);
        ellipse(70,100,50,50);
        ellipse(100,90,50,50);

        ellipse(200,100,50,50);
        ellipse(230,110,40,40);
        ellipse(250,70,70,70);
        ellipse(270,100,50,50);
        ellipse(300,90,50,50);

        ellipse(400,100,50,50);
        ellipse(430,110,40,40);
        ellipse(450,70,70,70);
        ellipse(470,100,50,50);
        ellipse(500,90,50,50);

        ellipse(600,100,50,50);
        ellipse(630,110,40,40);
        ellipse(650,70,70,70);
        ellipse(670,100,50,50);
        ellipse(700,90,50,50);
}
    //cloud


    fill(255);
    noStroke();

    ellipse(x,100,diam,diam);
    ellipse(x - diam/2,100-diam/3,diam,diam);
    ellipse(x + diam/2,100-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4,100-diam/4,diam,diam);
//cloud 1
    ellipse(x - 100,150,diam,diam);
    ellipse(x - diam/2 - 100,150-diam/3,diam,diam);
    ellipse(x + diam/2 -100,150-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4 -100,150-diam/4,diam,diam);
//cloud 2
    ellipse(x + 100,150,diam,diam);
    ellipse(x - diam/2 + 100,150-diam/3,diam,diam);
    ellipse(x + diam/2 +100,150-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4 +100,150-diam/4,diam,diam);
//cloud 3
    x += dir*speed;
    if (x > width - 25 || x < 25) {
        dir = -dir;
    }

    if (diam > 50) {
        dir2 = -dir2;
    }

    if (diam < 10){
        dir2 = -dir2;
    }

    if (mouseX < width/2 + 50 || mouseX > width/2 - 50) {
        diam += dir2 * speed2;
    }
    //moving clouds

}

For this assignment I created windmills generated by mouse movement. As the middle windmill rotates clockwise, the other windmills on both sides rotates counterclockwise. Weather condition is also controlled by the mouse movement.

sketch

var bg = 0;
var angle = 30;

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

function draw() {
    //constrain mouse values to be within canvas limits
    var mX = constrain(mouseX, 0, width);
    var mY = constrain(mouseY, 0, height);
    
    //positional variables for circles and squares
    var h1 = height/6;
    var h2 = height/2;
    var h3 = 5 * height/6;
    var w1 = width/8;
    var w2 = 3 * width/8;
    var w3 = 5 * width/8;
    var w4 = 7 * width/8;
    var maxD = 3 * width/8;
    var minD = width/8;
    var diag = dist(w1, h1, w2, h2);
    
    //background gets brighter as mouse moves right
    bg = 255 * (mX/width);
    background(bg);
    
    fill(255 - bg); //opposite color of background
    //enlarge circles as mouse moves near them  //row 1
    var d1 = constrain(maxD - dist(mX, mY, w1, h1), minD, maxD);
    var d2 = constrain(maxD - dist(mX, mY, w2, h1), minD, maxD);
    var d3 = constrain(maxD - dist(mX, mY, w3, h1), minD, maxD);
    var d4 = constrain(maxD - dist(mX, mY, w4, h1), minD, maxD);
    //row 2
    var d5 = constrain(maxD - dist(mX, mY, w1, h2), minD, maxD);
    var d6 = constrain(maxD - dist(mX, mY, w2, h2), minD, maxD);
    var d7 = constrain(maxD - dist(mX, mY, w3, h2), minD, maxD);
    var d8 = constrain(maxD - dist(mX, mY, w4, h2), minD, maxD);
    //row 3
    var d9 = constrain(maxD - dist(mX, mY, w1, h3), minD, maxD);
    var d10 = constrain(maxD - dist(mX, mY, w2, h3), minD, maxD);
    var d11 = constrain(maxD - dist(mX, mY, w3, h3), minD, maxD);
    var d12 = constrain(maxD - dist(mX, mY, w4, h3), minD, maxD);
    //circles //row 1
    ellipse(w1, h1, d1, d1);
    ellipse(w2, h1, d2, d2);
    ellipse(w3, h1, d3, d3);
    ellipse(w4, h1, d4, d4);
    //row 2
    ellipse(w1, h2, d5, d5);
    ellipse(w2, h2, d6, d6);
    ellipse(w3, h2, d7, d7);
    ellipse(w4, h2, d8, d8);
    //row 3
    ellipse(w1, h3, d9, d9);
    ellipse(w2, h3, d10, d10);
    ellipse(w3, h3, d11, d11);
    ellipse(w4, h3, d12, d12);

    //square setup
    noFill();
    strokeWeight(3);
    stroke(255 - bg);
    rectMode(CENTER);   
    //squares rotate when mouse moves up and down
    angle = (mY / height) * 360;  
    //left outside column (of squares)
    push();
    translate(-w1, -h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();  
    push();
    translate(-w1, h2);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    push();
    translate(-w1, height + h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //first column
    push();
    translate(w1, h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();   
    push();
    translate(w1, h3);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //second column
    push();
    translate(w2, -h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();   
    push();
    translate(w2, h2);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();   
    push();
    translate(w2, height + h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //third column
    push();
    translate(w3, h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    push();
    translate(w3, h3);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //fourth column
    push();
    translate(w4, -h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    
    push();
    translate(w4, h2);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();

    push();
    translate(w4, height + h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    //right outside column
    push();
    translate(width + w1, h1);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    push();
    translate(width + w1, h3);
    rotate(radians(angle));
    rect(0, 0, diag, diag);
    pop();
    
    //center ellipse setup
    fill(bg);
    noStroke();
    var dInner = 30;
    //positional variables, use map to restrict center ellipse to inside circle //row 1
    var x1 = map(mX, 0, width, w1 - d1/2 + dInner, w1 + d1/2 - dInner);
    var y1 = map(mY, 0, height, h1 - d1/2 + dInner, h1 + d1/2 - dInner);
    var x2 = map(mX, 0, width, w2 - d2/2 + dInner, w2 + d2/2 - dInner);
    var y2 = map(mY, 0, height, h1 - d2/2 + dInner, h1 + d2/2 - dInner);
    var x3 = map(mX, 0, width, w3 - d3/2 + dInner, w3 + d3/2 - dInner);
    var y3 = map(mY, 0, height, h1 - d3/2 + dInner, h1 + d3/2 - dInner);
    var x4 = map(mX, 0, width, w4 - d4/2 + dInner, w4 + d4/2 - dInner);
    var y4 = map(mY, 0, height, h1 - d4/2 + dInner, h1 + d4/2 - dInner);
    //row 2
    var x5 = map(mX, 0, width, w1 - d5/2 + dInner, w1 + d5/2 - dInner);
    var y5 = map(mY, 0, height, h2 - d5/2 + dInner, h2 + d5/2 - dInner);
    var x6 = map(mX, 0, width, w2 - d6/2 + dInner, w2 + d6/2 - dInner);
    var y6 = map(mY, 0, height, h2 - d6/2 + dInner, h2 + d6/2 - dInner);
    var x7 = map(mX, 0, width, w3 - d7/2 + dInner, w3 + d7/2 - dInner);
    var y7 = map(mY, 0, height, h2 - d7/2 + dInner, h2 + d7/2 - dInner);
    var x8 = map(mX, 0, width, w4 - d8/2 + dInner, w4 + d8/2 - dInner);
    var y8 = map(mY, 0, height, h2 - d8/2 + dInner, h2 + d8/2 - dInner);
    //row 3
    var x9 = map(mX, 0, width, w1 - d9/2 + dInner, w1 + d9/2 - dInner);
    var y9 = map(mY, 0, height, h3 - d9/2 + dInner, h3 + d9/2 - dInner);
    var x10 = map(mX, 0, width, w2 - d10/2 + dInner, w2 + d10/2 - dInner);
    var y10 = map(mY, 0, height, h3 - d10/2 + dInner, h3 + d10/2 - dInner);
    var x11 = map(mX, 0, width, w3 - d11/2 + dInner, w3 + d11/2 - dInner);
    var y11 = map(mY, 0, height, h3 - d11/2 + dInner, h3 + d11/2 - dInner);
    var x12 = map(mX, 0, width, w4 - d12/2 + dInner, w4 + d12/2 - dInner);
    var y12 = map(mY, 0, height, h3 - d12/2 + dInner, h3 + d12/2 - dInner);
    //center ellipses move corresponding to where mouse is //row 1
    ellipse(x1, y1, dInner, dInner);
    ellipse(x2, y2, dInner, dInner);
    ellipse(x3, y3, dInner, dInner);
    ellipse(x4, y4, dInner, dInner);
    //row 2
    ellipse(x5, y5, dInner, dInner);
    ellipse(x6, y6, dInner, dInner);
    ellipse(x7, y7, dInner, dInner);
    ellipse(x8, y8, dInner, dInner);
    //row 3
    ellipse(x9, y9, dInner, dInner);
    ellipse(x10, y10, dInner, dInner);
    ellipse(x11, y11, dInner, dInner);
    ellipse(x12, y12, dInner, dInner);
}

Oh boy, this took some time, mainly because I was trying to get something to work which never did.  I wanted to focus on basic geometric changes, and I’m excited about how it turned out.