var R=255;
var G=153;
var B=203;
var x=380;
var y=280;
function setup(){
createCanvas(600, 450);
background(0);
}
function draw() {
background(0);
stroke(0);
line(600,0,mouseX,mouseY);
//change angle
var angle=mouseX;
push();
//change origin
if(mouseY>225){
translate(200,225);
}
else{translate(400,225);
}
rotate(radians(angle));
fill(R,G,B);
var x=mouseX;
var y=mouseY;
circle(x,y,200);
circle(x+30,y-160,50);
circle(x-160,y+30,70);
circle(x-140,y+50,30);
//change color
if(mouseY<150){
R=0,
G=255;
B=255;
}
else if(mouseY>300){
R=255;
G=255;
B=102;
}
else{
R=255;
G=153;
B=203;
}
//change scale
if(mouseX<200){
scale(0.6);
fill(R,G,B);
circle(x,y,300);
circle(x+30,y-160,50);
circle(x-160,y+30,70);
circle(x-140,y+50,30);
}
else if(mouseX>400){
scale(0.4);
fill(R,G,B);
circle(x,y,300);
circle(x+30,y-160,50);
circle(x-160,y+30,70);
circle(x-140,y+50,30);
}
else{
scale(0.2);
fill(R,G,B);
circle(x,y,300);
circle(x+30,y-160,50);
circle(x-160,y+30,70);
circle(x-140,y+50,30);
}
pop();
}
When I first started this dynamic drawing, I have no idea what to do. Therefore, I simply drew 4 circles, and then changed their color, rotating position, scaling size, and rotating angle. I encountered several difficulties on making my drawing move by my logic, because I didn’t fully understand how certain function work in computer logic. As I look at detailed instructions on these function, I made it work eventually, and I had a more comprehensive understanding of these functions.
function setup() {
createCanvas(600, 450);
background(230, 230, 250);
text("p5.js vers 0.9.0 test.", 10, 15);
rectMode(CENTER)
}
var xa = 300 //coordinates for rectangles a, b, and c
var ya = 225
var xb = 215
var yb = 140
var xc = 500
var yc = 425
function draw() {
background(230, 230, 250);
var m = max(min(mouseX, 600), 0); //constrain mouseX in canvas
var size = dist(xa,ya,mouseX,mouseY) //size changes with distance between mouse and center
var fillR = (dist(300,225,mouseX,mouseY)*0.3) //color changes with distance between mouse and center
var fillG = (dist(300,225,mouseX,mouseY)*0.4)
var fillB = (dist(300,225,mouseX,mouseY)*0.6)
fill(fillR, fillG, fillB) //paint sqaure
strokeWeight(5)
stroke(25, 25, 112)
rect(xa,ya,size/1.5,size/1.5) //draws the rectangles
rect(xb,yb,size/3,size/3)
rect(xc,yc,size/0.75,size/0.75)
push();
translate(300,225) //move origin to center
rotate(radians(mouseX)) //rotate according to position of mouseX
ellipse(50,50,30,30) //draws the ellipses
ellipse(-50,-50,30,30)
ellipse(50,-50,30,30)
ellipse(-50,50,30,30)
ellipse(100,100,30,30)
ellipse(-100,-100,30,30)
ellipse(100,-100,30,30)
ellipse(-100,100,30,30)
ellipse(100,0,30,30)
ellipse(-100,0,30,30)
ellipse(0,100,30,30)
ellipse(0,-100,30,30)
ellipse(150,150,30,30)
ellipse(-150,-150,30,30)
ellipse(150,-150,30,30)
ellipse(-150,150,30,30)
ellipse(150,0,30,30)
ellipse(-150,0,30,30)
ellipse(0,150,30,30)
ellipse(0,-150,30,30)
pop();
fill(255) //writes the text in black
text("): This project is so hard :( SOS", mouseX, mouseY)
}
var x;
var y;
var strokeValue;
var mx;
var my;
var dragging
function setup() {
createCanvas(600, 450);
background(0);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
//center point variables
let x = width/2;
let y = height/2;
//stroke color variable
let strokeValue = 255;
//map of black screen ellipse
let mx= map(mouseX, 0, width, 0, 600);
//allows for ellipse to drag (which I just realized
//is pointless for this code)
if(dragging == true) {
x=mouseX;
y=mouseY;
}
//redraws ellipse with no background
if (mouseIsPressed) {
stroke(strokeValue);
noFill();
ellipse(x, y, (mouseX), (mouseY));
fill(0);
//draws two ellipses on black screen, one is mapped
} else {
background(0)
stroke(mouseX,0,mouseY);
noFill();
ellipse(mouseX, mouseY, mouseX, mouseY);
ellipse(mx, y, mouseX, mouseY);
text('press :)', mouseX, mouseY);
}
}
//changes background value to current value of mouseX,mouseY
function mousePressed() {
background(mouseX,0,mouseY);
dragging = true;
}
//changes dragging to false
function mouseReleased() {
dragging = false;
}
Originally, I wanted to do something really cool with infinitely generating circles. That idea morphed into this fun, interactive circle drawing. You can click anywhere on the canvas to generate a new background color based on the location of your mouse, and draw cool circles!
I’ll admit I struggled a lot with this project, but overall I am happy with what I came up with. I know it’s maybe not as complex as what we’re aiming for, however I learned a lot by creating it.
//Catherine Liu
//jianingl@andrew.cmu.edu
//Section D
// bee follows cursor and creates flowers when it gets near stems
var x = 300;
var y = 200;
var dx = 0;
var dy = 0;
var angle = 0;
function setup() {
createCanvas(600, 450);
background(204,255,255);
}
function draw() {
noStroke()
//bee follows mouse
dx = mouseX - x;
dy = mouseY - y;
x = x + 1*dx;
y = y + 1*dy
background(204,255,255);
//sun rotates according to mouse
fill(0,153,0)
push();
fill(255,128,0);
translate(300,450/2);
rotate(radians(abs(mouseX/3)));
ellipse(-200,-70,100,100)
pop();
rect(0,height-40,width,40);
fill(0,255,0); //flower stems
rect(445,370,10,80);
rect(295,370,10,80);
rect(145,370,10,80);
if (dist(mouseX, mouseY, 450, 350) < 50) {
if (dist(mouseX, mouseY, 450, 350) < 25) {
fill(255,153,255); // flower petal is pink
} else {
fill(255,0,0) // flower petal is red
}
ellipse(450, 350, max(mouseX-340,mouseY-340), max(mouseX-340,mouseY-340));
fill(255,255,0); // flower center
ellipse(450, 350, max(mouseX-380,mouseY-380), max(mouseX-380,mouseY-380)); //make right flower bigger
fill(255,0,0); // flower petal
ellipse(300, 350, 250-(max(mouseX-250,mouseY-250)), 250-(max(mouseX-250,mouseY-250)));
fill(255,255,0); // flower center
ellipse(300, 350, 180-(max(mouseX-290,mouseY-290)), 180-(max(mouseX-290,mouseY-290))); //make middle flower smaller
fill(255,0,0); // flower petal
ellipse(150, 350, 250-(max(mouseX-250,mouseY-250)), 250-(max(mouseX-250,mouseY-250)));
fill(255,255,0); // flower center
ellipse(150, 350, 180-(max(mouseX-290,mouseY-290)), 180-(max(mouseX-290,mouseY-290))); //make left flower smaller
} else if (dist(mouseX, mouseY, 300, 350) < 50) {
if (dist(mouseX, mouseY, 300, 350) < 25) {
fill(255,128,0); // flower petal is orange
} else {
fill(255,0,0) // flower petal is red
}
ellipse(300, 350, max(mouseX-250,mouseY-250), max(mouseX-250,mouseY-250));
fill(255,255,0); // flower center
ellipse(300, 350, max(mouseX-290,mouseY-290), max(mouseX-290,mouseY-290)); // make middle flower bigger
fill(255,0,0); // flower petal
ellipse(450, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
fill(255,255,0); // flower center
ellipse(450, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make right flower smaller
fill(255,0,0); // flower petal
ellipse(150, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
fill(255,255,0); // flower center
ellipse(150, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make left flower smaller
} else if (dist(mouseX, mouseY, 150, 350) < 50) {
if (dist(mouseX, mouseY, 150, 350) < 25) {
fill(178,102,255); // flower petal is purple
} else {
fill(255,0,0) // flower petal is red
}
ellipse(150, 350, max(mouseX-250,mouseY-250), max(mouseX-250,mouseY-250));
fill(255,255,0); // flower center
ellipse(150, 350, max(mouseX-300,mouseY-300), max(mouseX-300,mouseY-300)); // make left flower bigger
fill(255,0,0); // flower petal
ellipse(450, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
fill(255,255,0); // flower center
ellipse(450, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); //make right flower smaller
fill(255,0,0); // flower petal
ellipse(300, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));
fill(255,255,0); // flower center
ellipse(300, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290)));//make middle flower smaller
}
fill(255)
ellipse(x-20,y-30,20,40); //bee wing
ellipse(x-10,y-30,20,40); //bee wing
fill(255,174,66);
ellipse(x-15,y,50,25); //bee body
fill(0)
ellipse(x,y,5,5); // bee eye
rect(x-55,y-5,20,10); // bee stinger
}
It took a while coming up with an idea but in the end I decided to do something fun and interactive like a game. When you move the bee close to the flower stems, a flower “blooms” while the others get smaller. I spent a long time making sure the sizes and numbers were correct but I’m happy with the end result.
//Nami Numoto
//Section A
function setup() {
createCanvas(600, 450);
background(0);
}
function draw() {
background(0); // initialize background
fill(255, 255, 0); // yellow
var m = max(min(mouseX, 600), 0); //restrict x to the canvas (600)
var size = m * 350.0 / 400.0; // manipulate sizes of the circles
ellipse(mouseX, mouseY, size, size); //yellow dot that follows mouse
fill(0, 0, 255); // blue
size = 400 - size;
ellipse((width - mouseX), (height - mouseY), size, size); //blue dot that follows mouse inversely sort of
}
// everything the mouse 'draws' or hovers (yellow dot) should be mirrored about the y axis by the blue dot
// make them change size contrarily
I wanted to go off of the example while keeping it original. I’ve always been intrigued by mirror images and reflections, so I decided to reflect the user’s mouse trails about the y-axis and practice using contrary sizing.
I’ve noticed that the blue ellipse is not showing up, although it works in my index.html file… trying to work that out still
function setup() {
createCanvas(600, 450);
}
function draw() {
var positionY = constrain(mouseY, 80, 400); //relative Y position for everything that is constrained so the sun doesnt shoot off into the sky etc
background(139,214,241);
fill(21,8,29, mouseY - 80); //transitions background to night sky by decreasing transparency with mouseY position
rect(0,0,600,300);
var rainbowAlpha = map(constrain(mouseY,80,400), 80, 250, 255, 0); //variable to control transparency of the rainbow as it goes down
noStroke();
fill(255,0,0,rainbowAlpha); //the rainbow: red
ellipse(300, positionY + 100, 700, 200);
fill(254,98,48,rainbowAlpha); //orange
ellipse(300, positionY + 120, 700, 200);
fill(255,246,2,rainbowAlpha); //yellow
ellipse(300, positionY + 140, 700, 200);
fill(1,179,2,rainbowAlpha); //green
ellipse(300, positionY + 160, 700, 200);
fill(4,1,119,rainbowAlpha); //blue
ellipse(300, positionY + 180, 700, 200);
fill(35,3,114,rainbowAlpha); //violet
ellipse(300, positionY + 200, 700, 200,);
fill(139,214,241); //"clear" ellipse that is the same color as the day background
ellipse(300, positionY + 220, 700, 200,);
fill(21,8,29, mouseY - 80); //"clear" ellipse that tranistions to night sky same why the regular background does
ellipse(300, positionY + 220, 700, 200);
fill(255,246,2); //sun
circle(150, positionY - 50, 50);
fill(241,222,150); //moon
circle(390, positionY - 325, 30);
fill(233,233,255,mouseY - 250); //stars
circle(40,96,10);
circle(250,15,10);
circle(330,62,10);
circle(470,340,10);
circle(580,70,10);
circle(346,54,10);
circle(200,30,10);
circle(475,120,10);
circle(175,60,10);
circle(275,115,10);
circle(430,50,10);
circle(20,20,10);
circle(100,40,10);
circle(270,50,10);
circle(80,130,10);
circle(500,25,10);
circle(400,100,10);
circle(150,85,10);
circle(500,55,10);
var positionX = constrain(mouseX,35,565);
fill(141,196,39); //green "field"
rect(0,300,600, 150);
var oppositeX = map(positionX, 0, 600, 600, 0);
fill(103,62,16); //left dog
ellipse(positionX, 350,30,15); //body
circle(positionX + 15, 345,15); //head
ellipse(positionX-10,355, 5,8); //leg
ellipse(positionX + 10, 355, 5, 8); //leg
ellipse(positionX-15,350,15,5); //tail
triangle(positionX+9,340,positionX+12,335,positionX+16,340); //ear
triangle(positionX+14,340,positionX+17,335,positionX+20,340); //ear
fill(0);
circle(positionX+16,343,2); //eyes
circle(positionX+19,343,2);
fill(103,62,16); //right dog
ellipse(oppositeX, 390,30,15); //body
circle(oppositeX - 15, 385,15); //head
ellipse(oppositeX + 10,395, 5,8); //leg
ellipse(oppositeX - 10, 395, 5, 8); //leg
ellipse(oppositeX + 15,390,15,5); //tail
triangle(oppositeX - 9,380,oppositeX - 12,375,oppositeX - 16,380); //ear
triangle(oppositeX - 14,380,oppositeX - 17,375,oppositeX - 20,380); //ear
fill(0);
circle(oppositeX - 16,383,2); //eyes
circle(oppositeX - 19,383,2);
}
I had difficulty with this project. I had a hard time coming up with something to draw. Once I had an idea I really enjoyed coming up with ways as to how I could incorporate dynamic elements into it. One thing, in particular, I am proud of is figuring out that the map function can work backwards, with the higher value being the start point and the lower value being the stop point, which allows you to invert the value of a variable in a sense.
// Yash Mittal
// Section D
var r = 100;
var g = 60;
var b = 150;
var angle = 30;
var sizeX = 70;
var sizeY = 70;
function setup() {
createCanvas(600, 450);
}
function draw() {
background (r + mouseX, g + mouseY / 2, b + 10);
frameRate(50);
push(); //rectangle 1
fill (r + mouseX - mouseY, g + mouseX, b + mouseY);
translate (width / 2, height / 2);
rotate (radians(angle));
rectMode(CENTER);
rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
angle += 2;
pop();
push(); //rectangle 2
fill (r + mouseX / 3 - mouseY / 2, g + mouseX + 50, b + mouseY - 100);
translate (width / 2, height / 2);
rotate (radians(angle) + 10);
rectMode(CENTER);
rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
angle += 2;
pop();
push(); //rectangle 3
fill (r - mouseX + mouseY * 2, g - mouseX + 10, b + mouseY / 2 + 100);
translate (width / 2, height / 2);
rotate (radians(angle) + 30);
rectMode(CENTER);
rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
pop();
push(); // rectangle 4
fill (r - mouseY - mouseX * 4, g - mouseX + 40, b + mouseX / 5 + 200);
translate (width / 2, height / 2);
rotate (radians(angle) - 10);
rectMode(CENTER);
rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
pop();
push(); // rectangle 5
fill (r - mouseY + 40 - mouseX * 7, g + mouseX / 2 + 200, b + mouseX + mouseY - 200);
translate (width / 2, height / 2);
rotate (radians(angle) - 30);
rectMode(CENTER);
rect (mouseX / 2 , mouseY / 2, sizeX + mouseX / 2, sizeY + mouseY /2 );
pop();
noStroke();
var m = max(min ( mouseX, 600 ), 0 );
var size = m * 350 / 600;
fill(r + mouseY / 4, g - mouseY / 2, b + mouseY); // bigger circle fill
ellipse (width / 2, height / 2, size); // bigger circle
fill(r - mouseY /2 + mouseY, g + mouseY / 4, b + mouseX); // smaller circle fill
ellipse (width / 2, height / 2, size - 50); // smaller circle
var size1 = m * 350 / 600; // size for movaeble circle
var w = constrain (mouseX, width / 2 - 1, width / 2 + 1); // x constrain
var z = constrain (mouseY, 200, 250); // y constrain
fill(r + mouseX, g - mouseY * 4, b + 20); // moveable circle fill
ellipse (w, z, size1 - 100); // moveable circle
}
This project was really fun but also significantly harder. The part I struggled with the most was trying to get all the elements in the composition to be symmetrical and rotate / move at the same speed.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
fill(255, 255, 0);
var m = max(min(mouseX, 400), 0);
var size = m * 350.0 / 400.0;
ellipse(10 + m * 190.0 / 400.0, height/4, size, size); //yellow circle
fill(255, 0, 0);
ellipse(200 + m * 190.0 / 400.0, 3*height/4, size, size); //red circle
size = 350 - size;
fill(0, 0, 255);
ellipse(200 + m * 190.0 / 400.0, height/4, size, size); //blue circle
fill(0,255,0);
ellipse(10 + m * 190.0 / 400.0, 3*height/4, size, size); //green circle
}
I really liked the live movements of the squares in the example, so I took my own spin-off of it using circles. The trickiest part was figuring out how to make it change size diagonally.
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
