Ammar Hassonjee – Dynamic Drawing
/* Ammar Hassonjee
Section C
ahassonj@andrew.cmu.edu
Project 03 - Dynamic Drawing
*/
// Sky color variables
var sc1 = 255;
var sc2 = 255;
var sc3 = 255;
function setup() {
createCanvas(480, 640);
}
function draw() {
// Making sure the sky color changes from day to night as the mouse moves down
background(mouseY * .5, 6 + mouseY * .18, 60 + mouseY * .12);
if (mouseY > height) {
background(242, 117, 134);
}
// Changing the color of the stars to make sure they fade at dawn
noStroke();
sc2 = 255 - mouseY * .4;
sc3 = 255 - mouseY * .3;
if (mouseY > height / 2) {
sc1 = 242;
sc2 = 117;
sc3 = 134;
}
// Creating the star pattern using nested for loop
fill(sc1, sc2, sc3);
for (let a = 1; a < 7; a++) {
for (let i = 1; i < 51; i++) {
if (i % 2 === 0) {
ellipse(i * 30 - 15, 70 * a, 10, 10);
}
else {
ellipse(i * 30 - 15, 70 * a - 30, 10, 10);
}
}
}
// Drawing the mountains
var p = 0;
fill(96, 90, 114);
for(let i = 0; i < 23; i++) {
if (i % 2 === 0) {
triangle(p - 30, 640, p + 45, 500 + (mouseX * .1), p + 90, 640);
}
else {
triangle(p - 30, 640, p + 45, 460 + (mouseX * .1), p + 90, 640);
}
p += 45;
}
// Creating the shooting star
push();
// Making the star translate back and forth across the image plane
translate(mouseX, height / 3);
rotate(radians(170));
// Streaks for the star
fill(220);
triangle(384, 145, 387, 160, 665, 92);
triangle(665, 86, 384, 127, 383, 138);
// Shooting star drawing
fill('yellow');
beginShape();
vertex(339, 86);
vertex(353, 112);
vertex(379, 116);
vertex(359, 138);
vertex(364, 166);
vertex(339, 153);
vertex(314, 166);
vertex(319, 138);
vertex(299, 116);
vertex(326, 112);
endShape();
pop();
}
My inspiration for this assignment stemmed from my love of nature and landscape. I’ve always liked the scene of a shooting star in a starry sky, so I thought it would be a great dynamic drawing opportunity to have a star move across the screen while the sky color changes.
]]>//Jasmine Lee
//Section C
//jasmine4@andrew.cmu.edu
//Project-03 (Dynamic Drawing)
var r = 10;
var g = 100;
var b = 50;
var angle = 0;
var sizeX = 10;
var sizeY = 15;
var circlesize = 80;
function setup() {
createCanvas(640, 480);
}
function draw() {
//change background color
background(r + mouseX , g + mouseY, b);
noStroke();
if (mouseX > width / 2) {
rectMode(CENTER)
}
push();
translate(width / 2, height / 2);
rotate(radians(angle));
//rectangle
fill(r + mouseX - mouseY, g + mouseX, b + mouseY)
rect(mouseX, mouseY, sizeX, sizeY);
rect(mouseX + 5, mouseY + 2, sizeX + 2, sizeY + 2);
rect(mouseY - 100, mouseX - 220, sizeX, sizeY)
rect (mouseY - 150, mouseX - 130, sizeX - 30, sizeY - 30);
//rectangleset2
fill(r - mouseX + mouseY, g - mouseX, b - mouseY)
rect(mouseX + 50, mouseY - 50, sizeX / 2, sizeY / 2);
rect(mouseX - 50, mouseY - 60, sizeX / 3, sizeY / 3);
rect(mouseY - 100, mouseX - 220, sizeX / 4, sizeY / 5);
rect(mouseX - 150, mouseY - 130, sizeX - 30, sizeY - 30);
//rectangleset3
fill(r - mouseX + mouseY, g - mouseX, b - mouseY)
rect(mouseX / 2, mouseY / 2, sizeX / 2, sizeY / 2);
rect(mouseY / 5, mouseX /5, sizeX + 100, sizeY - 100);
rect(mouseX, mouseY, sizeY, sizeX);
rect(mouseX - 150, mouseY - 130, sizeX - 30, sizeY - 30);
pop();
//constraining size of the ellipses
var m = max(min(mouseX, 640), 0);
var size = m * 350.0 / 640.0;
//ellipse 1
fill(r + mouseX / 2, g + mouseX / 2, b + mouseX / 2);
ellipse(width / 2, height / 2, size, size);
//ellipse 2
fill(r + mouseX / 2, g + mouseX / 2, b + mouseX);
ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);
//ellipse 3
fill(r + mouseX, g + mouseX / 2, b + mouseX / 2);
ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);
//ellipse 4
fill(r + mouseX / 2, g + mouseX, b + mouseX / 2);
ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);
angle = angle + 0.5;
sizeX = width - (0.5 * mouseX);
sizeY = height - (0.5 * mouseY);
}I was inspired to create this dynamic drawing by the animations that show music beats. I tried to convey a bright, energetic atmosphere by using different variations of colors and undulating shapes.
]]>sketch
For this project I wanted to experiment with basic dynamic principles that varied based on mouse position including color, position, size, and distance.
let shape;
function setup() {
createCanvas(640, 480);
//shape randomly assumes Y position each time page is refreshed
shape = random(255);
}
function draw() {
background(shape, mouseX, 0);
//size of ellipse is dependent on location of mouseX
var m = max(min(mouseX, 640), 0);
var size = m * 350.0 / 400.0;
ellipse(size, shape, 50, mouseX);
}
My project was pretty tricky to make. Trying to get the ellipses to expand and stop at different points took a while, and I had to settle for them all moving at once, and there was a lot of trial and error. My end result is a Day to Night transition.
var centX = 320;//center x value
var centY = 240;//center y value
var dTopY = 335;//diamond top
var dBottomY = 145;//diamond bottom
var dRightX = 415;//diamond right
var dLeftX = 225;//diamond left
var x = 13;//slows triangles down through division
function setup() {
createCanvas(640,480);
}
function draw() {
background(6, 2, 240);//blue sky
noStroke();
//sunlight layer variables
var starAngle = mouseX;
var l1 = 190;//layer 1
var l2 = mouseX + 1 * 24;//layer 2
var l3 = mouseX + 1 * 30;//layer 3
var l4 = mouseX + 1 * 18;//layer 4
var l5 = mouseX + 1 * 47;//layer 5
var l6 = mouseX + 1 * 81;//layer 6
var l7 = mouseX + 1 * 106;//layer 7
var l8 = mouseX + 1 * 140;//layer 8
//blue layers behind sunlight layers
fill(25, 22, 240);
ellipse(320,240, 600,480);//outer
fill(38, 35, 235);
ellipse(320,240, 440,410);
fill(45, 71, 237);
ellipse(320,240, 330,320);
fill(67, 99, 240);
ellipse(320,240, 260,260);
fill(77, 137, 240);
ellipse(320,240, 245,245);
fill(103, 164, 245);
ellipse(320,240, 220,220);
//rotating stars
push();
fill(255);
translate(20,20);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(200,360);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(390,90);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(420,300);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(50,80);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(480,220);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(400,400);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(600,470);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(65,300);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(600,60);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
push();
fill(255);
translate(200,30);
rotate(radians(mouseX));
ellipse(0,0, 10,20);
rotate(radians(mouseX + 1));
ellipse(0,0, 20,10);
pop();
//yellow sunlight layers
fill(254, 255, 209);
ellipse(centX,centY, l8,l8);//outer//800
fill(255, 240, 148);
ellipse(centX,centY, l7,l7);//7//600,480
fill(255, 235, 110);
ellipse(centX,centY, l6,l6);//6//440,410
fill(255, 230, 69);
ellipse(centX,centY, l5,l5);//5//330,320
fill(255, 226, 3);
ellipse(centX,centY, l4,l4);//4//260
fill(255, 213, 3);
ellipse(centX,centY, l3,l3);//3//245
fill(255, 205, 3);
ellipse(centX,centY, l2,l2);//210
//triangles expand outward to create Sun rays
fill(252, 132, 33);
triangle(320 + mouseX / x,dTopY, dRightX + mouseX / x,240,
320 + mouseX / x,dBottomY);//triangle right
triangle(320 - mouseX / x,dTopY, dLeftX - mouseX / x,240,
320 - mouseX / x,dBottomY);//triangle left
triangle(dLeftX,240 + mouseX / x, 320,dTopY + mouseX / x,
dRightX,240 + mouseX / x);//triangle top
triangle(dLeftX,240 - mouseX / x, 320,dBottomY - mouseX / x,
dRightX,240 - mouseX / x);//triangle bottom
fill(252, 186, 3);
ellipse(centX,centY, l1,l1);//Sun
//causes gradient shift to Moon
if(mouseX <= 200){
fill(239, 189, 53);
ellipse(centX,centY, l1,l1);//darker Sun
}
if(mouseX <= 160){
fill(226, 197, 103);
ellipse(centX,centY, l1,l1);//darker Sun 2
}
if(mouseX <= 120){
fill(213, 205, 153);
ellipse(centX,centY, l1,l1);//darker Sun 3
}
if(mouseX <= 80){
fill(200, 213, 203);
ellipse(centX,centY, l1,l1);//darker Sun 4
}
if(mouseX <= 40){
fill(187, 221, 253);
ellipse(centX,centY, l1,l1);//darker Sun 5
}
if(mouseX <= 5){
fill(184, 226, 255);
ellipse(centX,centY, l1,l1);//Moon
}
}A video in case the code doesn’t load
]]>I tried many different ways to create mountains and alter them somehow with the mouse. I first attempted to create a gradient on the shapes to give a sense of the sun shining on them from different angles. Eventually, I had to settle for drawing lines along the yellow mountains to give the sense of fog crawling across them. Click the canvas then drag your mouse along it.
/* Austin Garcia
Section C
aegarcia@andrew.cmu.edu
Project - 03
*/
var x1 = 0;
var y1 = 100;
var x2 = 80;
var y2 = 100;
var x3 = 40;
var y3;
var mountain1 = 5;
var c1;
var c2;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;
var x = 300;
var y = 300;
var r
function setup() {
createCanvas(400, 100);
background(220);
y3 = random(40, 90);
c1 = ("yellow");
// triangle (x1, y1, x2, y2, x3, y3)
}
function draw() {
r = random(80);
fill(c1);
strokeWeight(4);
stroke(225);
diffx = mouseX / 2 - x;
diffy = mouseY / 2 - y;
x = x + 0.1 * diffx;
y = y + 0.1 * diffy;
line(x1, y1, x, y);
line(x2, y2, x, y);
}
function mousePressed() {
push();
translate(mountain1, 0);
strokeWeight(1)
triangle (x1, y1, x2, y2, x3, y3);
pop();
mountain1 = mountain1 + r;
y3 = r;
if (mountain1 > 400) {
strokeWeight(0);
}
}
//Zee Salman
//SECTION E
//fawziyas@andrew.cmu.edu
//PROJECT-03
function setup() {
createCanvas(600, 400);
// rectMode(CENTER);
}
function draw() {
background("pink");
//head
fill("black")
ellipse(width/2, height * .67, 100, 150);
//body
ellipse(width/2, height * .5, 80, 100);
//tummy
fill("white")
ellipse(width/2, height * .68, 82, 96);
//beak
fill("orange")
ellipse(width/2, height * .5, 10,14);
//eyes
fill("white")
ellipse(320, height * .47, 20,20);
ellipse(290, height * .47, 20,20);
//pupils
fill("red")
ellipse(320, height * .47, 10,10);
ellipse(290, height * .47, 10,10);
//goes up
if (mouseX < 300) {
width = width + 2
}
if(mouseX > 299){
width = width - 2
}
//goes down
if (mouseY < 200){
height = height +2
}
if (mouseY > 199){
height = height - 2
}
}
For this project I combined the two mouse feature to make the eyes move on way and the body move another so that when the mouse is positioned just right, it creats a pengiun.
]]>//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project-03
var oceanY = 480;
var oceanSpeed = 0.05;
var diffocean = 0;
var diffwaves = 1;
var deg = 0;
var brightness = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(220);
noStroke();
fill(34, 110, 148);
rectMode(CORNERS);
//ocean rising and falling
diffocean = mouseY - oceanY;
oceanY = oceanY + oceanSpeed * diffocean;
let conocean = constrain(oceanY, 200, 400)
rect(0, conocean, width, height);
//rain
let rainWeight = constrain(((height - mouseY) / 48), 0, 10);
strokeWeight(rainWeight);
stroke(50, 120, 147, 20);
var cloudsX = width - mouseX;
line(cloudsX + 25, 100, cloudsX + 25, conocean);
line(cloudsX + 50, 100, cloudsX + 50, conocean);
line(cloudsX + 75, 100, cloudsX + 75, conocean);
line(cloudsX + 100, 100, cloudsX + 100, conocean);
line(cloudsX + 125, 100, cloudsX + 125, conocean);
//clouds
noStroke();
rectMode(CORNER);
fill(constrain(mouseY, 50, 255));
rect(cloudsX, 50, 150, 50, 30, 30, 30);
//boat and boat variables
//bmX and bmY are boat middle X and Y
var bmX = 0;
var bmY = 0;
//bw and bh are boat height and width
var bw = 75;
var bh = 40;
//bd is displacement of left and right boat corners above bmY
var bd = 10;
//bblX and bbrX are boat base left and right X
var bblX = bmX - bw / 2;
var bbrX = bmX + bw / 2;
//boat stroke and fill
stroke('black');
strokeWeight(5);
strokeJoin(ROUND);
fill('white');
//rotation of the boat
push();
translate(width / 2, conocean);
rotate(radians(deg), bmX, bmY);
triangle(bblX, bmY, bmX, bmY, bmX, bmY - bh);
triangle(bbrX, bmY, bmX, bmY, bmX, bmY - bh);
triangle(bblX - bw / 2, bmY - bd, bblX, bmY + bh, bmX, bmY);
triangle(bblX, bmY + bh, bbrX, bmY + bh, bmX, bmY);
triangle(bbrX + bw / 2, bmY - bd, bbrX, bmY + bh, bmX, bmY);
pop();
var waves = ((height - mouseY) * 0.05);
deg += (waves / 8) * diffwaves;
if (deg > waves || deg < -waves) {
diffwaves = -diffwaves;
}
//water in front of boat
fill(34, 110, 148);
noStroke();
rect(0, conocean + 25, width, height);
//stormy filter, makes things darker
brightness = height - mouseY;
let conbrightness = constrain(brightness, 0, 100);
fill(12, 52, 68, conbrightness);
rect(0, 0, width, height);
}
For this project, I wanted to play with the idea of a boat at sea that gets caught in a storm. While I ended up simplifying the project as I went along, I still was able to experiment a little with changing position, color, stroke weight, size, and rotation. However, I struggled a lot with getting the rotation to work, and I still wasn’t able to get it to function without occasionally glitching if your mouse goes too low on the canvas.
]]>var canvasW = 480
var canvasH = 640
function setup() {
createCanvas(canvasW, canvasH);
}
function draw() {
var drinkY = 300;
var drinkH = 200;
var drinkOpacity = 200 - (mouseY / 8);
background(100 + (mouseX / 10), 150 + (mouseX / 10), 255);
// background color changes with mouseX
noStroke();
fill(255, 200, 200);
ellipse(canvasW / 2, 240, 300, 300);
noStroke();
fill(0);
ellipse(180, 160, 15, 15);
noStroke();
fill(0);
ellipse(300, 160, 15, 15);
noStroke();
fill(0);
rect(235, 190, 10, 305);
stroke(0);
strokeWeight(4);
line(210, 190, 270, 190);
noStroke();
fill(240, 130, 30, drinkOpacity);
rect(170, drinkY + (mouseY / 4), 140, drinkH - (mouseY / 10));
// drink height and opacity changes with mouseY
noStroke();
fill(60);
rect(0, 500, canvasW, canvasH - 500);
stroke(255);
strokeWeight(4);
noFill();
rect(170, 250, 140, 250);
push();
translate(0, (mouseY / 4.3));
rectMode(CENTER);
noStroke();
fill(255, 255, 255, 100);
rect(200, 292, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
pop();
push();
translate(0, (mouseY / 5));
rectMode(CENTER);
noStroke();
fill(255, 255, 255, 100);
rect(250, 320, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
pop();
push();
translate(0, (mouseY / 4.3));
rectMode(CENTER);
noStroke();
fill(255, 255, 255, 100);
rect(280, 292, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
pop();
// ice cubes change size and position
}
This project was a really interesting way to experiment with changing shapes, colors, opacity, size, and position in a piece. I really enjoyed learning some new functions, and some other things I wish I could’ve implemented are rotations (in the ice cubes) and some more complex figures.
]]>//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 3
var x = 300;
var y = 400;
var dx = 1 ;
var dy = -1;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(95, mouseX * .7, 227);
//fish head
fill(50, 162, 168);
noStroke();
push();
translate(width / 2, height / 2);
rotate(PI / 4);
rect(-50, -50, 300, 300, 30);
pop();
fill(184, 213, 214);
noStroke();
push();
translate(width / 2, height / 2);
rotate(PI / 4);
rect(-25, -25, 250, 250, 30);
pop();
//fish eyes
fill('white');
ellipse(290, 315, 50, 65);
ellipse(350, 315, 50, 65);
fill('black');
//letting the black of the eye move based on the mouse
eyeY = constrain(mouseY, 310, 330);
ellipse(290, eyeY, 35, 35);
ellipse(350, eyeY, 35, 35);
//fish mouth
fill(227, 64, 151);
noStroke();
push();
translate(320, 410);
rectMode(CENTER)
rotate(mouseX / 150); //the mouth spins based on mouseX
rect(0, 0, 100, 100, 30);
pop();
fill(120, 40, 82);
noStroke();
push();
translate(width / 2, height / 2);
rotate(PI / 4);
rect(95, 95, 50, 50, 30);
pop();
//fins
fill(209, 197, 67);
quad(460, 350, 510, 300, 510, 450, 460, 400);
quad(200, 350, 150, 300, 150, 450, 200, 400);
//bubbles
var bub = random(25, 60);
fill(237, 240, 255);
ellipse(x, y, 50, 50);
ellipse(x, y, bub, bub);
ellipse(200, y, bub, bub);
ellipse(mouseX * .5, mouseY * .5, bub, bub);
ellipse(mouseX * .25, mouseY * .25, bub, bub);
ellipse(mouseX * .75, mouseY * .75, bub, bub);
ellipse(mouseX * .5, mouseY * .25, bub, bub);
ellipse(500, y, bub, bub);
ellipse(250, 500, bub, bub);
x += dx;
y += dy;
//so that they bounce off the edges
if (x > 640) {
dx = -dx;
}
if (y < 0) {
dy = -dy;
}
if (y > 480) {
dy = -dy;
}
if (x < 0) {
dx = -dx;
dy = random(1,5);
}
}
I thought making a fish with aspects that moved based on the cursor would be a fun way of how humans normally try to get fish’s attention. I learned a lot about how certain things can be controlled and how with others it’s fun to let them just run.
]]>//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Dynamic Drawing
var a = 251; //background color
var b = 224; //background color
var c = 233; //background color
var angle = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
a, b, c = mouseX/4;
// background color change when mouse is moved
background(a, b, c);
noStroke();
push();
translate(mouseY + 75, width/2)
rotate(radians(angle));
ellipseMode(CENTER);
fill(130, 175, 255);
stroke(217, 255, 147);
strokeWeight(20);
ellipse(0, 0, 200, 500);
pop();
angle = angle + 5
// rotating oval position change; left when mouse moves up right whien mouse moves down
let circlex = width - mouseX;
let circley = height - mouseY;
fill(230, 111, 183);
ellipse(circlex, height/2, circley, circley);
// pink circle size and position change; left when mouse moves right, right when mouse moves left, big when mouse moves up, small when mouse moves down
let cirx = height - mouseY;
let ciry = width - mouseX;
fill(185, 111, 230);
ellipse(mouseX, height/2, mouseY, mouseY);
// purple circle size and position change; moves along the mouse, big when mouse moves down, small when mouse moves up
fill(111, 208, 230);
ellipse(cirx, height/2, ciry, ciry);
// blue circle size and position change; left when mouse moves down, right when mouse moves up, big when mouse moves left, small when mouse moves right
translate (mouseX + 10, height/2);
ellipseMode(CENTER);
fill(255, 147, 147);
stroke(213, 68, 98);
strokeWeight(15);
ellipse(mouseX - 150, mouseY - 200, mouseX/2, mouseY/2);
// pink orange oval shape position change; long when mouse moves down and left, wide when mouse moves up and right,
}For this project, I studied the various possibilities in the change of the shape, ellipse. Ellipse is one of my favorite shape to study because although it is a simple, single lined structure, there are so many varieties of different ellipse we can create. I tried to incorporate as many different aspects of image elements possible, like the changes in sizes, angles, colors, and position as I move the cursor around different places within the canvas.
]]>