P03: Dynamic Drawing – Erin Fuller

I based my initial design off of the idea of the rotational translation we learned in our lab session. Using the mouse position you can change: the background color, sizes of the level one and level two circles, the distance of circles from the center, and the rotation of the level two circles around the level one circles.

``````//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 03

function setup() {
createCanvas(640, 460);
rectMode(CENTER);
}

function draw(){
colorMode(HSB);
backH = mouseX/width*360; // background hue change depending on mouseX
backS = mouseY/width*360; // background saturation change depending on mouseY
var c = color(backH, backS, 70);
background(c);

var eS = mouseX/10 // inner circle size change depending on mouseX
var eO = mouseX/45 // outer circle size change depending on mouseX

translate(width/2, height/2);
for (var num = 0; num < 8; num++) {
push();
rotate(TWO_PI * num / 6);
translate(mouseX/2, 0); // pushes larger circles out based on X postion
ellipse(0, 0, eS, eS); // inner circles
for (var j = 0; j < 15; j++) {
push();
var spin = mouseX/width * TWO_PI // causes smaller circles to go around the big circle
rotate(spin * j / 9);
ellipse(40, 0, eO, eO); // outer circles
pop();
}
translate()
pop();
}
}``````

Kevin Thies – Dynamic Drawing

``````
var deg = 0; // Degrees to Rotate
var x = 0; // Offset from origin
var r = 255; // Rgb Code
var b = 0; // rgB  Code
var dim = 10; // Circle Dimension

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

function draw() {

angleMode(DEGREES); // This makes things easier for later
background(220, 220, 220, 90);

push();
fill(r, 0, b); // changes fill color as mouse moves
noStroke();

translate(320, 240); // moving origin to center of screen
rotate(-deg); // 6 Counter Clockwise circles
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(60);
ellipse (0 + x, 0, dim, dim);

rotate(deg * 2); // 6 Clockwise Circles
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

rotate(-60);
ellipse (0 + x, 0, dim, dim);

pop();

/* As mouseX Increases, make the circles
- Rotate CW and CCW
- Move further away from origin
- Change Color
- Grow larger
All of these don't want to go completely offscreen
255 is a convienient number as it's used for standard rgb
To make something change slower, mouseX needed to be
ivided by a larger numbers
*/

deg = constrain (mouseX/3, 10, 255);
x = constrain (mouseX/3, 10, 255);
r = constrain (mouseX/3, 10, 255);
b = constrain (mouseX/3, 10, 255);
dim = constrain (mouseX/6, 10, 50);
}
``````

I really liked the image shown on the project page, and it made me think about loading icons. We’d just covered a lot of rotation, and a lot of loading icons are rotations, so I just followed those ideas and took a stab at it.

Eliza Pratt – Project-03

``````/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-03
*/

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

function draw() {

noStroke();

//creates color variables for background based on mouse position
var bG = (mouseX/width) * 255;
var bB = (mouseY/height) * 255;
background(100, bG, bB);

//block of color that moves with mouseX
fill(200, bG, bB);
rect(0, 0, mouseX, 480);

//starting positions for vertical and horizontal lines
var y1 = 45;
var x1 = 0;

//variables for line weight and angle based on mouse position
var hWidth = (mouseY/width) * 45
var angle = (mouseX/width) * 360
fill(255);

////////ROTATING LINES///////
push();
//transforms vertical lines to rotate about the center
translate(width/2, height/2);
//draws vertical lines
for(var i = 0; i < 20; i++) {
fill(0);
rect(x1 -50 - width/2, 0, hWidth, 800);
x1+=50;
}
pop();

/////////HORIZONTAL LINES////////
for(var i = 0; i < 9; i++) {
rect(width/2, y1, width, hWidth);
y1+=50;
}

}
``````

Compared to the last two weeks, I found this project to be the most challenging since it was so open ended. While this sketch was originally intended to be a grid with fixed horizontal and rotating vertical lines, I ended up with this just by commenting out the “recMode(CENTER) and letting the black lines do as they please! This turned out way cooler than I expected and I was pleasantly surprised with how the colors go together.

Jenny Hu — Dynamic Drawing

``````//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 03 — Dynamic Drawing

var x1 = 320; //center of first ellipse
var y1 = 240;

var x2 = 50;
var y2 = 240;

var x3 = 590;
var y3 = 240;

var maxEllipse = 50;

var startD = 10; // starting diameter
var R = 255;
var G = 0;
var B = 110;

var bR = 0;
var bB = 0;

var rippleHappening = false;
var whereIsRipple = 0;//this is the number that controls where
//the ripple is relative to the center
function setup() {
createCanvas(640, 480);
ellipseMode(CENTER);
}

function draw() {
//making background color variable
bR = mouseX;
bB = mouseY;
background(bR,bB,100);

//Draw the ellipses
for ( var i=0; i<maxEllipse; i++){
noFill();

//ellipse positions
var x2 = mouseY - 10;
var x3 = (width/2) - (x2-(width/2)); //make x3 move opposite of x2
var y2 = mouseX + 10;
var y3 = (height/2) - (y2-(height/2)); //mover y3 opposite of y2

//making a ripple
if(rippleHappening){
//print("in the for loop?");
if(i == int(whereIsRipple)){
strokeWeight(6);
}else{
strokeWeight(2.25);
}
}else{
strokeWeight(2.25);
}

var scale1 = (width/2-mouseX)/10; //all scale variables are to scale the space between ellipses
var scale2 = (width/2-mouseX)/10;
var scale3 = (width/2-mouseX)/10;

R = mouseX;
G = mouseX - (mouseX/2);
B = mouseY - (mouseX/2);

stroke(R, G, B);

ellipse(x1,y1, startD+(i*scale1), startD+(i*scale1)); //center ellipse
ellipse(x2,y2, startD+(i*scale2), startD+(i*scale2)); //starting left ellipse
ellipse(x3,y3, startD+(i*scale3), startD+(i*scale3)); //starting right ellipse

}
//whereIsRipple determines the ripple ellipse per set of rings
//if we mod the ripple, we limit it to how far the ripple goes
whereIsRipple = (whereIsRipple+0.5)%maxEllipse;
if(int(whereIsRipple) == (maxEllipse)){
print("is rippleHappening turned false?");
//turn boolean to false
rippleHappening = false;
}

}
function mousePressed(){
rippleHappening = !rippleHappening;
whereIsRipple = 0; //start ripple at 0

}

``````

I started this project with the intention to play with moire patterns, which is essentially patterns that come about when you overlap striped elements on top of one another (made by the gaps between the stripes). I think this was the most fun project so far because I was generated outputs I couldn’t have made without a lot more effort in other programs. It was a result that was more easily achievable via programming.

Originally, I planned the ellipsis in sketch, just to see the starting pattern, but everything else resulted from playing with the program.

You can click anywhere on the canvas to cause a continuous ripple across the ellipsis. I imagine that this can go with music one day to make a great audio visualizer! (perhaps my final project?)

special thanks to Marisa Lu, and Gautam Bose for the help.

Kevin Riordan Project-03-Dynamic-Drawing

``````/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_03*/
var lineX=0;
var lineY=0;
var colorX=0;
var colorY=0;
var colorR=0;

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

function draw() {
background(0);
//gridlines
for(var c=0; c<=640; c+=20) {
strokeWeight(0.3);
stroke(200);
line(c,0,c,480);
line(0,c,640,c);
}
//lines coming in from the edges from top and bottom
for (lineX=0; lineX<=640; lineX+=60) {
//varying the color based on where mouse is
colorX=mouseX;
colorX=constrain(mouseX,0,255);
colorY=mouseY;
colorY=constrain(mouseY,0,255);
stroke(lineX/4,colorX,colorY);
line(lineX,0,mouseX,mouseY);
line(640-lineX,640,mouseX,mouseY);
}
//lines coming in from the edges from left and right
for (lineY=0; lineY<=640; lineY+=60) {
//varying the color based on where mouse is
colorX=mouseX;
colorX=constrain(mouseX,0,255);
colorY=mouseY;
colorY=constrain(mouseY,0,255);
stroke(lineY/4,colorX,colorY);
line(0,lineY,mouseX,mouseY);
line(640,640-lineY,mouseX,mouseY);
};
//lines going out from center to positions around the mouse
for (var a=50; a<=650; a+=50) {
//varying the color based on where mouse is
colorR=(mouseX+mouseY)/2;
colorR=constrain(colorR,0,255);
colorX=255-mouseX;
colorX=constrain(mouseX,0,255);
colorY=255-mouseY;
colorY=constrain(mouseY,0,255);
stroke(colorR,colorX,colorY);
line(width/2,height/2,mouseX+a,mouseY-a);
line(width/2,height/2,mouseX-a,mouseY-a);
line(width/2,height/2,mouseX+a,mouseY+a);
line(width/2,height/2,mouseX-a,mouseY+a);
}
//large circle made up of smaller circles at certain increments
for(var b=0; b<=360; b+=5) {
colorX=(mouseX+mouseY)/2;
colorX=constrain(colorX,0,255);
fill(0,colorX,colorX);
push();
translate(width/2,height/2);
//loop used for incrementing the larger circles
for (var g=1; g<=40; g++) {
ellipse(mouseX*g,mouseY*g,5*(g/2),5*(g/2));
ellipse(mouseX/g,mouseY/g,5/g,5/g);
}
pop();
//triangular grid-like lines around circles
push();
translate(width/2,height/2);
for (var h = 1; h<=40; h++) {
triangle((mouseX+b)/h,(mouseY-b)/h,mouseX/h,mouseY/h,(mouseX-b)/h,(mouseY+b)/h);
triangle((mouseX+b)*h,(mouseY-b)*h,mouseX*h,mouseY*h,(mouseX-b)*h,(mouseY+b)*h);
}
pop();
}
//rectangles in background over gridlines
for(var d=20;d<=640;d+=40) {
//two different loops because I wanted to adjust color and placement, probably unneccessary
for(var e=0;e<=640;e+=40) {
fill(0,colorX-20,colorY-20,40);
rect(d,e,20,20);
fill(colorX-30,colorY-30,colorX-50,10);
rect(d+10,e,mouseX/10,mouseY/10);
}
for(var f=0;f<=640;f+=40) {
fill(colorX-40,colorY-40,0,50);
rect(d+10,f-10,20,20);
fill(colorY-40,0,colorY-40,60);
rect(d+30,f-10,20,20);
}
}
}
``````

I started by making the gridlines, and then started using loops to put in shapes, changing the color and position based on where the mouse was. I originally made it 800×800, but changed it to 640×480 at the end.

Carley Johnson Project 3

``````/*Carley Johnson
cbjohnso@andrew.cmu.edu
Section E
Project 3
*/

var x = 80;
var y = 30;
var w = 12;
var h = 12;
var starR = 252
var starG = 234
var starB = 109
var moonR = 236
var moonG = 236
var moonB = 236
var moonR2 = 109
var moonG2 = 110
var moonB2 = 106
var bckgrndR = 37
var bckgrndG = 21
var bckgrndB = 66

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

function draw() {
background(bckgrndR, bckgrndG, bckgrndB)

fill(252, 234, 109)
noStroke()
ellipse(mouseX, mouseY, 10, 10) //constellation

fill(moonR, moonG, moonB)
ellipse(100, 100, 80, 80) //moon

fill(moonR2, moonG2, moonB2)
ellipse(115, 100, 50, 70) //moon dark side

stroke(252, 234, 109)
line(mouseX, mouseY, pmouseX, pmouseY);
print(pmouseX + ' -> ' + mouseX); //constellation maker

noStroke()
fill(starR, starG, starB) //Begin stars for night sky
ellipse(x, y, w, h);

ellipse(x + 80, y + 310, w, h); //star 1

ellipse(30, y + 400, w, h - 2); //star 2

ellipse(x + 10, y + 190, w, h); //star 3

ellipse(x + 200, y +30, w, h); //star 4

ellipse(x + 250, y + 90, w - 2, h - 2); //star 5

ellipse(x + 270, y + 380, w, h); //star 6

ellipse(x + 180, y + 30, w - 2, h -2); //star 7

ellipse(x + 400, y + 75, w - 2, h - 2); //star 8

ellipse(x + 420, y + 300, w, h); //star 9

ellipse(x + 370, y + 130, w - 2, h - 2); //star 10

ellipse(x + 500, y + 30, w, h); //star 11

ellipse(x + 20, y + 285, w, h); //star 12

ellipse(x + 120, y + 120, w - 2, h -2); //star 13

ellipse(x + 145, y + 200, w, h); //star 14

ellipse(x + 500, y + 300, w, h); //star 15

ellipse(x + 200, y + 205, w - 2, h); //star 16

}

function mouseMoved() {
starB = starB + 3;
if (starB > 250) {
starB = 109;
}
}

function mousePressed() {
if ( moonR === 236) {
moonR = 252;
} else {
moonR = 236;
}

if ( moonG === 236) {
moonG = 234;
} else {
moonG = 236;
}

if ( moonB === 236) {
moonB = 109;
} else {
moonB = 236;
}

if ( moonR2 === 109) {
moonR2 = 252;
} else {
moonR2 = 109;
}

if ( moonG2 === 110) {
moonG2 = 234;
} else {
moonG2 = 110;
}

if ( moonB2 === 106) {
moonB2 = 109;
} else {
moonB2 = 106;
}

if ( bckgrndR === 37) {
bckgrndR = 108;
} else {
bckgrndR = 37;
}

if ( bckgrndG === 21) {
bckgrndG = 214;
} else {
bckgrndG = 21;
}

if ( bckgrndB === 66) {
bckgrndB = 251;
} else {
bckgrndB = 66;
}

if ( starR === 252) {
starR = bckgrndR;
} else {
starR = 252;
}

if ( starG === 234) {
starG = bckgrndG;
} else {
starG = 234;
}

if ( starB === 109) {
starB = bckgrndB;
} else {
starB = 109;
}

}

``````

This was fun! Move your mouse to make the stars twinkle and create a shooting star, and if the night isn’t your thing, click to turn the scene to daytime! It was tough juggling a lot of elements and variables, but I think this is quaint and I feel like I learned a lot twiddling with the different mouse functions.

Min Jun Kim -Project 3 Dynamic Drawing Section B

``````/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 3
*/

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

function draw() {

strokeWeight(3);
push();
background(mouseX);
translate(width/2,height/2);
rotate(mouseX/-100);
pop();

//the oval representing the eye
push();
fill(mouseX);
translate(width/2,height/2)
ellipse(0,0,mouseX*1.9,mouseX*1.3)
pop();

//red circle in middle
push();
translate(width/2,height/2);
fill(mouseX*255/640,10,10);
ellipse(0,0,mouseX,mouseX);
pop();

//a ring around the spinning reverse quads
push();
translate(width/2,height/2);
fill(mouseX*255/640,10,10)
ellipse(0,0,mouseX/1.3,mouseX/1.3);
pop();

translate(width/2,height/2);
push();
fill(0);
rotate(mouseX/-300);
pop();

push();
fill(mouseX*255/640,10,10)
rotate(mouseX/-400);
pop();

push();
fill(0);
rotate(mouseX/-500);
pop();

push();
fill(mouseX*255/640,10,10)
rotate(mouseX/-600);
pop();

push();
fill(0);
rotate(mouseX/-700);
pop();

//spinning rect 1
push();
fill(0);
rotate(mouseX/30-0.4);
rect(mouseX/4,mouseX/4,mouseX/20,mouseX/20);
pop();

//spinning rect 2
push();
fill(0);
rotate(mouseX/30+1.6);
rect(mouseX/4,mouseX/4,mouseX/20,mouseX/20)
pop();

//spinning rect 3
push();
fill(0);
rotate(mouseX/30-2.5);
rect(mouseX/4,mouseX/4,mouseX/20,mouseX/20)
pop();

//upper black cover
push();
fill(1);
noStroke();
rect(-400,-100+mouseX*2,1000,1000);
pop();

//lower black cover
push();
noStroke();
fill(1);
rect(-400,-200-mouseX*2,800,300)
pop();

}

}

``````

The project is based on dynamically drawing when mouse is moved across the horizontal axis (mouseX).
All in all, I had a lot of fun figuring things out for this project.

Judy Li-Project-03-Dynamic-Drawing

``````/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-03
*/

var angle = 0;
var x = 1;

function setup() {
createCanvas(640, 480);
x = random(1,5);
}

function draw() {
background(0,0,0);
//otherobjects
fill(255,255,102);
noStroke();
var m = max(min(mouseX, 640), 0);
var size = m * 200.0 / 640.0;
//foreground
if (mouseX < width/2) {
background(153,204,255);
ellipse(175, 200.0, 200, 200);
}
else background(0,76,153);
fill(224,224,200);
ellipse(350 + m * 120.0/640.0, 200.0, size, size);
if (mouseX < width/2) {
noFill();
}
else fill (255,255,155);
push();
translate(100, 50);
scale(x/.5);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(250, 100);
scale(x/2);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(400, 150);
scale(x);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(550, 200);
scale(x/3);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(100, 150);
scale(x/1.5);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(250, 200);
scale(x/.5);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(400, 250);
scale(x/2);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(550, 300);
scale(x);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(100, 250);
scale(x/3);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(250, 300);
scale(x/1.5);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(400, 350);
scale(x/.5);
triangle(10, 7.5, 2.5, 20, 17.5, 20);
triangle(10, 25, 2.5, 12.5, 17.5, 12.5);
pop();
push();
translate(550, 400);
scale(x/2.5);