![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2023/09/stop-banner.png)
During this project, I decided to make circles expand and contract as it follows the mouse. Then the background color would change gradually to black but back to white with a click of the mouse. Also, every time the mouse was clicked left or right of the canvas the rotating squares would be moving towards the left top corner or the bottom right corner.
Category: Project-03-Dynamic-Drawing
Project 03: Dynamic Drawing
sketchDownload
var angle;
var rStart = 209;
var rSlope = -186/400;
var bStart = 237;
var bSlope = -173/400;
var gStart = 255;
var gSlope = -163/400;
var oSlope = 235/400;
function setup() {
createCanvas(300, 400);
background(220);
}
function get_color(mouseY) { //background color
if (mouseY <= 400) {
var r = rStart + (mouseY*rSlope);
var g = bStart + (mouseY*bSlope);
var b = gStart + (mouseY*gSlope);
return [r, g, b];
}
else { //if mouse exceeds bounds
return [23, 64, 92]; //keep color same
}
}
function get_opacity(mouseY) { //flower opacity
if (mouseY <= 400) {
var opacity = 255 - (mouseY*oSlope);
return opacity;
}
else { //if mouse exceeds bounds
return 20; //keep opacity same
}
}
function get_grass(mouseX) { //????
if (mouseX <= 300) {
if (mouseX <= 150) {
var grR = ((65/150)*(mouseX) + 56);
return [grR, 121, 18];
}
else {
var grG = ((-37/150)*(mouseX-150) + 121);
return [121, grG, 18];
}
}
else { //if mouse exceeds bounds
return [121,84,18]; //brown
}
}
function draw() {
var rgb = get_color(mouseY);
var opacity = get_opacity(mouseY);
var [gr,gg,gb] = get_grass(mouseX);
background(rgb[0], rgb[1], rgb[2]);
//flower
noFill();
stroke(143, 167, 65, opacity);
strokeWeight(8)
bezier(135,225,180,230,190,300,158,380); //leftstem
bezier(224,168,250,180,220,320,150,370); //rightstem
noStroke();
fill(178, 123, 210, opacity); //lightpurple
ellipse(130,210,30);
ellipse(150,220,30);
ellipse(143,243,30);
ellipse(120,235,30); //end of flower left
ellipse(220,150,30);
ellipse(243,160,30);
ellipse(233,183,30);
ellipse(210,175,30); //end of flower right
noStroke();
fill(223, 186, 244, opacity);
ellipse(224,168,15) //topflowermiddle
fill(223, 186, 244, opacity);
ellipse(135,225,15); //bottomflowermiddle
//leaves
noStroke();
fill(143,167,65, opacity);
arc(175,280,190,190, 0, PI/2, OPEN); //rightleafright
fill(143,167,65, opacity);
arc(270,375,190,190, PI,-PI/2, OPEN); //rightleafleft
noStroke();
fill(143,167,65, opacity);
arc(79,375,190,190, -PI/2, 0,OPEN); //leftleafright
fill(143,167,65, opacity);
arc(174,280,190,190, PI/2, PI, OPEN); //leftleafleft
//grass
dy = 0
if(mouseY > 300){
dy = -30
}
noStroke();
fill(gr,gg,gb); //greengrasscolor
triangle(0,dy+400,25,dy+400,0,dy+330); //blades of grass from left to right
triangle(8,dy+400,35,dy+400,18,dy+290);
triangle(15,dy+400,30,dy+400,30,dy+305);
triangle(30,dy+400,50,dy+400,45,dy+305);
triangle(45,dy+400,75,dy+400,68,dy+320);
triangle(70,dy+400,100,dy+400,80,dy+330);
triangle(80,dy+400,110,dy+400,95,dy+320);
triangle(108,dy+400,135,dy+400,118,dy+300);
triangle(115,dy+400,130,dy+400,130,dy+315);
triangle(130,dy+400,150,dy+400,145,dy+315);
triangle(130,dy+400,150,dy+400,145,dy+305);
triangle(145,dy+400,175,dy+400,168,dy+320);
triangle(170,dy+400,200,dy+400,180,dy+330);
triangle(180,dy+400,210,dy+400,195,dy+320);
triangle(200,dy+400,225,dy+400,220,dy+320);
triangle(180,dy+400,200,dy+400,195,dy+305);
triangle(215,dy+400,245,dy+400,238,dy+320);
triangle(240,dy+400,270,dy+400,260,dy+310);
triangle(250,dy+400,275,dy+400,270,dy+315);
triangle(270,dy+400,290,dy+400,285,dy+325);
triangle(285,dy+400,300,dy+400,297,dy+310);
rect(0,dy+395,300,dy+100);
fill(212, 220, 192);
noStroke();
textSize(12);
textAlign(CENTER);
text("ISAIAH 40:8",262,393);
//bible
rotate(angle - QUARTER_PI);
noStroke();
fill(75, 45, 20);
rect(35,40,150,90);
noStroke();
fill(255, 239, 226);
ellipse(125,49,35);
ellipse(95,49,35);
noFill();
strokeWeight(3);
stroke(255, 239, 226);
bezier(45,50,70,60,90,10,110,48); //toplineleft
bezier(45,120,70,130,90,90,110,120); //bottomlineleft
line(45,50,45,120);
line(175,50,175,120);
bezier(110,120,130,90,150,130,175,120); //bottomlineright
bezier(110,48,130,10,150,60,175,50); //toplineright
fill(255, 239, 226); //biblefill
quad(45,51,45,107,175,107,175,51);
quad(45,120,45,105,100,105,55,120); //bottomleftcorner
quad(175,120,175,105,120,105,165,120); //bottomrightcorner
triangle(61,50,80,40,70,100); //toplefttri
triangle(155,48,132,38,70,100); //toprighttri
triangle(110,120,85,90,135,90); //bottomtri
noStroke();
fill(224, 211, 184);
quad(110,40,110,122,120,110,120,32);
push();
//biblerotate
if (mouseX > 115 & mouseX < 205){
angle = mouseX * (1/200);
}
}
Sad Face – Project 3
This is my dynamic drawing which rotates and scales objects in the canvas. The dynamic drawing ends up making a sad face when the mouse is placed in the right x and y position.
Looking Outwards: Computational Fabrication
I found the project of digital fabrication to design a bookshelf very appealing. It was done by using a Lamella system assembly integrated in freeform geometry to create a system of shelves that are interdependent on each other. It uses 5-axis CNC swarf cutting to maintain consistency for the surface at joints and the connecting points. I really like the flowing over all visual that is created by the rigid modular structure of the shelves. The irony within this is something that I really enjoy. It was done by the Ahtehha firm that used these shelves within a library that they were designing.
Project 3: Dynamic Drawing
//ELise Chapman
//ejchapma
//Section D
function setup() {
createCanvas(450,600);
rectMode(CENTER);
}
var stormSize=1;
var rainPos=200;
var rainV=1;
function draw() { //cloud
noStroke();
background(149,209,216);
//as the mouse moves down, the sky gets darker
if (mouseY<100) {
background(149,209,216);
stormSize=1;
} else if (mouseY>=100 & mouseY<200) {
background(121,176,190);
stormSize=2;
} else if (mouseY>=200 & mouseY<300) {
background(85,137,157);
stormSize=3;
} else if (mouseY>=300 & mouseY<400) {
background(62,103,124);
stormSize=4;
} else if (mouseY>=400 & mouseY<500) {
background(52,82,102);
stormSize=5;
} else {
background(43,63,81);
stormSize=6;
}
//as the mouse moves left and right, the wind blows
push();
rotate(-radians(mouseX/50));
//as the mouse moves down, the rain gets heavier
fill(90,195,255);
rect(width/2,rainPos,5+mouseY/50,25+mouseY/20,80,80,80,80);
rect(width/2+25,rainPos+50,5+mouseY/50,25+mouseY/20,80,80,80,80);
rect(width/2+50,rainPos+250,5+mouseY/50,25+mouseY/20,80,80,80,80);
rect(width/2+75,rainPos+150,5+mouseY/50,25+mouseY/20,80,80,80,80);
rect(width/2+100,rainPos+75,5+mouseY/50,25+mouseY/20,80,80,80,80);
rect(width/2-25,rainPos+100,5+mouseY/50,25+mouseY/20,80,80,80,80);
rect(width/2-50,rainPos-5,5+mouseY/50,25+mouseY/20,80,80,80,80);
rect(width/2-75,rainPos+200,5+mouseY/50,25+mouseY/20,80,80,80,80);
rect(width/2-100,rainPos+75,5+mouseY/50,25+mouseY/20,80,80,80,80);
if (stormSize==1) {
rainPos=rainPos;
rainV=3;
} else if (stormSize==2) {
rainPos=rainPos;
rainV=5;
} else if (stormSize==3) {
rainPos=rainPos;
rainV=6.5;
} else if (stormSize==4) {
rainPos=rainPos;
rainV=7;
} else if (stormSize==5) {
rainPos=rainPos;
rainV=8.25;
} else if (stormSize==6) {
rainPos=rainPos;
rainV=9.5;
}
rainPos += rainV;
if (rainPos>height+100) {
rainPos=200;
}
//as the mouse moves down, the cloud gets smaller and darker
pop();
if (stormSize==1) {
fill(207,215,218);
} else if (stormSize==2) {
fill(170,180,184);
} else if (stormSize==3) {
fill(137,154,162);
} else if (stormSize==4) {
fill(128,144,151);
} else if (stormSize==5) {
fill(104,118,124);
} else if (stormSize==6) {
fill(96,105,109);
}
ellipse((width/2)+25,(110+mouseY/50),(150-mouseY/10));
rect(width/2,160,(300-mouseY/10),(100-mouseY/20),80,80,80,80);
ellipse((width/2)-50,(125+mouseY/50),(100-mouseY/30));
ellipse((width/2)-20,130,50+mouseY/20);
ellipse((width/2)+60,140,40+mouseY/20);
//when the rain is hard and the mouse is clicked, lightening strikes
if (mouseIsPressed) {
if (stormSize==5 || stormSize==6) {
stroke(260);
strokeWeight(10);
line(225,200,125,350);
line(125,350,250,400);
line(250,400,200,710);
}
}
}
When thinking of things to make, I started by thinking about natural processes. I love watching the rain and how varied rain occurs, so I decided to move with that. I knew I wanted the rain to get bigger as the mouse moved down, along with the sky and cloud growing darker to simulate heavier rain. I also knew I wanted to include lighting on a click – just because lighting is fun. I think I went in with a clear idea in mind of what I wanted, so at that point it was just writing the program.
Project 03: Dynamic Drawing
var minSize = 0.6;
var maxSize = 3;
function setup() {
createCanvas(450, 600);
strokeWeight(10);
}
function draw() {
if (mouseX < width/2 & mouseY < height/2) {
background(23,48,107);
} else if (mouseX < width/2 & mouseY > height/2) {
background(204,102,0);
} else if (mouseX > width/2 & mouseY < height/2) {
background(153,204,255);
} else {
background (255,204,255);
}
//main circle
fill(255);
stroke(51,102,0);
circle(225,300, mouseX, mouseY);
//green line
stroke(23,112,44);
line(225, 300, mouseX, mouseY);
//light green line
stroke(154,185,158);
var mx = map(mouseX, 0, width, 60, 180);
line(225, 300, mx, mouseY);
//orange circle
if (mouseX < 225 & mouseY > 300) {
fill(255,178,102);
ellipse(mouseX, mouseY, 50, 50);
//blue circle and rotating blue circles
} else if (mouseX > 225 & mouseY < 300) {
fill(178,202,243);
ellipse(mouseX, mouseY, 50, 50);
push();
translate(337.5,150);
rotate(radians(mouseY));
ellipse(-50,50,40,40);
ellipse(-50,-50,40,40);
ellipse(50,50,40,40);
ellipse(50,-50,40,40);
pop();
//light purple circle and sheer circles
} else if (mouseX > 225 & mouseY > 300) {
fill(146,98,178);
ellipse(mouseX, mouseY, 50, 50);
fill(255,150);
ellipse(mouseX, height/2, mouseY, mouseY);
fill(255,150);
ellipse(width - mouseX, height/2, height - mouseY, height - mouseY);
}
//dark blue circle and scattering white dots
else {
for (let y = 0; y < 100; y++) {
randomSize = random(minSize, maxSize);
randomX = random(width);
randomY = random(height);
fill(0,76,153);
stroke(154,185,158);
ellipse(mouseX, mouseY, 50, 50);
noStroke();
fill(255);
ellipse(randomX, randomY, randomSize, randomSize);
}
}
}I wanted to create a sort of clock through the white circle and green clock hands that lengthened or shortened depending on the mouse. The upper left quadrant has a busy background to represent how that time period (9am- 12pm) is when my schedule usually feels the most hectic. Admittedly the other quadrants are a bit more random, but I definitely wanted to try out the push and pop functions we recently learned, so I incorporated these with the rotating light blue circles.
Project 3: Dynamic Drawing
function setup() {
createCanvas(600, 450);
}
function draw() {
background(79, 88, 161); //dark blue
noStroke();
fill(252, 243, 199); //light yellow
ellipse(300, 225, 100, 100); //main center circle
// restricing the x and y coords of the mouse
var x = max(min(mouseX, 600), 0);
var y = max(min(mouseY, 450), 0);
var d = dist(x, y, 300, 225);
var size = 60 - 0.16 * d;
fill(255 - 0.65 * d, 204, 204); //pink
ellipse(300, 150 - 0.5 * d, size, size); //circles in clockwise order
ellipse(350 + 0.5 * d, 170 - 0.5 * d, size, size);
ellipse(375 + 0.5 * d, 217, size, size);
ellipse(362 + 0.5 * d, 267 + 0.5 * d, size, size);
ellipse(320 + 0.1 * d, 297 + 0.5 * d, size, size);
ellipse(268 - 0.3 * d, 293 + 0.5 * d, size, size);
ellipse(232 - 0.6 * d, 257 + 0.4 * d, size, size);
ellipse(228 - 0.5 * d, 205, size, size);
ellipse(255 - 0.5 * d, 165 - 0.5 * d, size, size);
}
I thought this project was really fun because I got to be super creative with it. The circles move away from the big circle when you move your cursor as well as the size and color.
Dynamic Drawing
function setup() {
createCanvas(480,640);
background(0);
}
function draw() {
var shapeWidth;
shapeWidth = Math.abs(mouseX - 240) / 2 + 80;
background(0);
fill(255, mouseY / 2.5, 0);
ellipse(240, 180, shapeWidth, 200);
fill(0, 255, mouseY / 2.5);
ellipse(120, 440, shapeWidth, 200);
fill(mouseY / 2.5, 0, 255);
ellipse(360, 440, shapeWidth, 200);
}
I drew three circles that change color and width based on the mouse position. First I drew the circles and changed the colors, and then I decided that wasn’t complicated enough. Now they look super cool!
Project 3: Dynamic Drawing
var angle = 0
function setup() {
createCanvas(450, 600);
background(0);
}
function draw() {
if (mouseY < height / 2){ //determines color based on mouse's vertical side of canvas
background ("black")
}
else if (mouseY > height / 2) {
background (135, 188, 222)
}
//if (mouse X < width / 2) {
//background (255, 190, 11)
noStroke();
fill("white") // circle moves up and down
ellipse(225, mouseY, mouseY, mouseY)
ellipse(mouseX, 300, mouseX, 10) // ellipses moves side to side and gets longer
ellipse(mouseX, 20, mouseX, 10)
ellipse(mouseX, 580, mouseX, 10)
ellipse(mouseX, 40, mouseX, 10)
ellipse(mouseX, 560, mouseX, 10)
ellipse(mouseX, 60, mouseX, 10)
ellipse(mouseX, 540, mouseX, 10)
ellipse(mouseX, 320, mouseX, 10)
ellipse(mouseX, 280 , mouseX, 10)
ellipse(mouseX, 80 , mouseX, 10)
ellipse(mouseX, 100 , mouseX, 10)
ellipse(mouseX, 120, mouseX, 10)
ellipse(mouseX, 140 , mouseX, 10)
ellipse(mouseX, 160 , mouseX, 10)
ellipse(mouseX, 180 , mouseX, 10)
ellipse(mouseX, 200 , mouseX, 10)
ellipse(mouseX, 220 , mouseX, 10)
ellipse(mouseX, 240 , mouseX, 10)
ellipse(mouseX, 260, mouseX, 10)
ellipse(mouseX, 280 , mouseX, 10)
ellipse(mouseX, 340 , mouseX, 10)
ellipse(mouseX, 360 , mouseX, 10)
ellipse(mouseX, 380 , mouseX, 10)
ellipse(mouseX, 400 , mouseX, 10)
ellipse(mouseX, 420 , mouseX, 10)
ellipse(mouseX, 440, mouseX, 10)
ellipse(mouseX, 460 , mouseX, 10)
ellipse(mouseX, 480 , mouseX, 10)
ellipse(mouseX, 500 , mouseX, 10)
ellipse(mouseX, 520 , mouseX, 10)
push() // circle rotates around point
translate(225, 300);
fill(255,190,11)
rotate(radians(min(mouseX, 200)));
ellipse(100, 100, 40, 40);
angle += 2
if (mouseY)
pop()
}
This project was hard because it was more open ended than the previous one’s and I had a difficult time understanding what to create and how to create it.
Project 3: Dynamic Drawing
//Jacky Lococo
//jlococo
//Section C
var Rc = 255 // color variables for the moving cirlce, top rectagle, small circles
var Gc = 193
var Bc = 193
var angle = 0
var Rr = 0
var Gr = 60
var Br = 255
var colorChange = 1
var strokeOpacity = 255
function setup() {
createCanvas(600, 600);
}
function draw() {
background(255);
strokeWeight(0);
fill(Rr, Gr, Br);
ellipse(160, 160, 200, 200);
fill(255, 239, 239);
rect(0, 300, 600, 300); //pink rectangle
strokeWeight(0);
fill(Rc, Gc, Bc, 100);
ellipse(mouseX + 10, mouseY + 10, min (mouseX, 200), min (mouseX,200));
//shadow of ellipse that follows mouse
fill(255, 239, 239);
ellipse(mouseX, mouseY, min (mouseX, 200), min (mouseX,200));
//pale pink circle behind main ellipse
fill(Rc, Gc, Bc, 200);
ellipse(mouseX, mouseY, min (mouseX, 200), min (mouseX,200));
//ellipse that follows the mouse and grows smaller at x=200
fill(Rr, Gr, Br, 200);
rect(0, 0, 600, 300)
strokeWeight(0);
fill(255, 239, 239);
ellipse(150, 150, 200, 200);
fill(Rc, Gc, Bc, 200);
push(); //for top rotating tiny circles
translate(150, 150)
rotate(radians(angle));
ellipse(50, 50, 50, 50);
angle += 1
rotate(radians(angle));
ellipse(50, 50, 50, 50);
angle += 0.5
rotate(radians(angle));
ellipse(50, 50, 50, 50);
angle +=0 // on circle slower at 0 speed
if(mouseY > 300){
angle += 1
}
pop();
push(); // for mouse following rotating cirlces
translate(mouseX, mouseY);
rotate(radians(angle));
ellipse(50, 50, 50, 50);
angle += 1
rotate(radians(angle));
ellipse(50, 50, 50, 50);
angle += 0.5
rotate(radians(angle));
ellipse(50, 50, 50, 50);
angle += 0
if(mouseY > 300){
angle += 1
}
pop()
strokeOpacity = mouseX - 150
//line that moves - starting from bottom of canvas
strokeWeight(7)
stroke(255, 255, 255, strokeOpacity);
line(100, 0, 100, 600)
//line that moves - starting from top of canvas
strokeWeight(7)
stroke(255, 255, 255, strokeOpacity);
line(140, 0, 140, 600)
//colors alternating with each press if the mouse
if (colorChange == 1){
Rc = 255
Gc = 193
Bc = 193
Rr = 0
Gr = 60
Br = 255
}
if (colorChange == 2){
Rc = 0
Gc = 60
Bc = 193
Rr = 255
Gr = 193
Br = 193
}
//text that follows the mouse
strokeWeight(0);
fill(255);
textSize(15)
text('p r e s s', mouseX, mouseY);
}
//mouse pressed function that switches the colors
function mousePressed () {
colorChange = colorChange + 1
if (colorChange == 3)
colorChange = 1
print(colorChange.toString);
}
This project was a bit challenging at first, but I think once I had a clear sketch and idea for it, the tasks and process became a lot more manageable.
Sketch:
