//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-03
var bgRed = 0;
var bgGreen = 0;
var bgBlue = 64;
function setup() {
createCanvas(600,400);
drawSky();
}
function drawSky() {
//background color changes using mouse movement
background(bgRed,bgGreen,bgBlue);
var bgX = mouseX
//day time bgcolor(187,228,248)
if (bgX > 200 & bgX < 400) {
bgX = 200
}
//transition to night time
if (bgX >= 400) {
bgX = 200 - (mouseX-400)
}
//day time transition to blue
//bgcolor(187,228,248)
//200 is the starting point of blue sky
bgRed = bgX*((187-0)/200) + 0;
bgGreen = bgX*((228-0)/200) + 0;
bgBlue = bgX*((248-64)/200) + 64;
//call drawSky function
window.setInterval(drawSky, 100);
}
function draw() {
//sun
var sunSize = 0.4*mouseX
var sunX = mouseX
//parametric equation for path of sun
var sunY = 80 + 0.0033*Math.pow(sunX-300,2)
if (sunX <= 50) {
sunX = 50
}
if (sunX >= 550) {
sunX = 550
}
fill(255,201,14);
noStroke();
ellipseMode(CENTER);
ellipse(sunX,sunY,sunSize,sunSize);
//skyline
fill(0);
noStroke();
//left buildings
rect(0,height-200,45,200);
rect(50,height-250,75,250);
rect(55,height-260,65,10);
rect(60,height-270,55,10);
rect(65,height-280,45,10);
//disproportionate building - right
triangle(475,height-220,525,800,575,height-200);
triangle(482,height-240,525,650,570,height-260);
triangle(487,height-280,525,500,562,height-270);
//dome building
rect(150,height-110,200,110);
rect(160,height-125,180,125);
rect(165,height-130,170,130);
ellipseMode(CENTER);
ellipse(250,height-130,160,130);
rect(240,height-198,20,10);
rect(248,170,5,100);
//bottom skyline
rect(0,height-150,100,150);
rect(100,height-100,100,100);
rect(350,height-220,70,220);
rect(380,height-300,50,325);
rect(420,height-200,20,200);
rect(440,height-120,60,120);
rect(520,height-150,80,150);
//windows
fill(240);
rect(388,120,22,5);
rect(388,130,34,5);
rect(388,140,34,5);
rect(60,160,5,5);
rect(70,160,5,5);
rect(80,180,5,5);
rect(90,180,5,5);
rect(100,180,5,5);
rect(110,180,5,5);
rect(70,190,5,5);
rect(110,190,5,5);
rect(100,200,5,5);
rect(110,200,5,5);
rect(60,220,5,5);
rect(70,220,5,5);
rect(90,220,5,5);
rect(110,230,5,5);
rect(60,240,5,5);
rect(80,240,5,5);
rect(90,240,5,5);
rect(100,240,5,5);
rect(180,282,20,3);
rect(210,282,20,3);
rect(240,282,20,3);
rect(270,282,20,3);
rect(300,282,20,3);
rect(490,200,10,20);
rect(530,210,5,5);
rect(540,210,5,5);
rect(550,210,5,5);
rect(520,220,5,5);
rect(530,220,5,5);
rect(510,240,5,5);
rect(540,240,5,5);
rect(550,240,5,5);
rect(490,170,5,5);
rect(500,170,5,5);
rect(530,170,5,5);
rect(550,170,5,5);
rect(540,160,5,5);
rect(550,160,5,5);
rect(500,140,5,5);
rect(510,140,5,5);
rect(360,190,5,15);
rect(370,210,5,15);
rect(370,230,5,15);
}
The part I struggled with the most was definitely trying to come up with equations for the parabolic pathway of the sun as well as the color equation for the sky. After a lot of trial and error on paper, I was finally able to come up with something and transfer it to the computer and work from there.
//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project-03
var angle = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(mouseX-70,mouseY-30,mouseY);
//WHen the mouse is on the right side of the canvas
if (mouseX > 250) {
var length = max(min(mouseX,640),0);
var size = length * 600 / 640;
//outer left white eye + black boarder
fill(255);
strokeWeight(10);
ellipse(100 + length,170,size,size);
//inner left black iris
fill(0);
ellipse(100 + length,170,100,100);
//inner left grey pupil
fill(70);
ellipse(100 + length,170,50,50);
//outer right white eye + black baorder
fill(255);
strokeWeight(10);
ellipse(500 - length,170,size-100,size-100);
//inner right black iris
fill(0);
ellipse(500 - length,170,size-200,size-200);
//inner right grey pupil
fill(70);
ellipse(500 - length,170,size-250,size-250);
//mouth
fill(209,65,65);
triangle(250,330,340,330,300,380);
}
//When the mouse is on the left side of the canvas
if (mouseX < 250) {
//green mouth
strokeWeight(10);
fill(71,135,100);
ellipse(mouseX,mouseY,100,random(0,30));
//green eyes
fill(71,135,100);
ellipse(mouseX-50,mouseY-50,30,30);
ellipse(mouseX+50,mouseY-50,30,30);
sizeX = 50;
//red mouth
fill(198,41,88);
ellipse(mouseX+100,mouseY+200,100,random(0,30));
//red eyes
fill(198,41,88);
ellipse(mouseX+50,mouseY+150,30,30);
ellipse(mouseX+150,mouseY+150,30,30);
//blue mouth
fill(42,149,199);
ellipse(mouseX+200,mouseY,100,random(0,30));
//blue eyes
fill(42,149,199);
ellipse(mouseX+150,mouseY-50,30,30);
ellipse(mouseX+250,mouseY-50,30,30);
//line
push();
translate(mouseX,mouseY);
rotate(radians(angle));
rectMode(CENTER);
line(mouseX,mouseY,100,100);
fill(30,60,100);
rect(mouseX+50, mouseY+50, 50, 50);
fill(100,240,245);
rect(mouseX+70, mouseY+150, 70, 70);
text("BABABA", mouseX+30, mouseY+30);
pop();
angle = angle + 0.5;
}
}
For this project, I wanted to divide the drawing into two parts: left and right. I tried to integrate two different parts into a single painting and continue with the “face” theme that we have been practicing in our previous works. While working on this project, I was able to learn from my mistakes and overcome problems. Although stressful, I believe I can now understand the language better.
(The picture is straight up on my desktop, but it turns around like this as soon as I attach it…)
// Brandon Hyun
// 15-104 Section B
// bhyun1@andrew.cmu.edu
// Project 04
var increase = 15;
var xInt = 15;
var x1 = 0;
var y1 = 550;
var x2 = 550;
var y2 = 0;
var red;
var green;
var blue;
function setup() {
createCanvas(400, 300);
}
function draw() {
background (red,green,blue);
var m = 400/25;
for(var i = 0; i < m; i += 1) {
strokeWeight(1);
stroke(40,40,40);
for(var j =0; j<10; j+=1){
line(mouseX+40*j, increase * i, increase * i +40*j, y1);
}
for(var z =0; z<10; z+=1){
line(mouseY+ x2 - increase * i, y2+40*z, x1, increase * i+ 40*z);
}
}
}
function mousePressed() {
red = random(0,255);
green = random (0,255);
blue = random (0,255);
}
The most difficult part of this project was to code each strand of rain. It was more tedious than hard, but assigning random lengths and speed to each strand was definitely not easy.
You can move around the mouse to change the location of the umbrella.
I wish I could make the code take the mouseY into account as well so that the person wouldn’t smiling if the umbrella was below him/her.
/*
Jamie Ho
10:30
jamieh@andrew.cmu.edu
Project 03
*/
var rectSize = 10;
var d = 75; //distance from edges and distance between each rectangle's corner
function setup() {
createCanvas(640, 480);
rectMode(CORNER);
angleMode(DEGREES);
}
function draw() {
background(0);
fill(256);
//to create array of rectangles
for(var x = 0+d; x <= width-d; x+=d){
for(var y = 0+d; y <= height-d; y+=d){
//dis = distance between mouse pointer and rectangle
var dis = dist(x, y, mouseX, mouseY);
var inCanvas = d < mouseX & mouseX < width-d && d < mouseY && mouseY < height-d;
//CHANGING COLOURS
//if rectangles are far from mouse: rectangles are white
//far = more than half the width of canvas
if(dis > width/2 & inCanvas){
fill(256, 256, 256);
}
//if rectangles are close from mouse: rectangles flash in colour
//close = less than half the width of canvas
else if(dis < width/2 & inCanvas){
fill(random(0, 256),random(0, 256),random(0, 256));
}
//ROTATING + TRANSLATION
//Top L = "starting point"
//no rotation no translation no shear, just size change
//Top R = rotates a bit
if(mouseX > width/2 & mouseY < height/2 && inCanvas){
rotate(random(-0.05, 0.05));
}
//Bottom R = rotates double of Top R + translates
if(mouseX > width/2 & mouseY > height/2 && inCanvas){
rotate(random(-0.1, 0.1));
translate(x*random(0.005, 0.0075), y*random(0.005, 0.0075));
}
//Bottom L = rotates quadruple of Top R/double of Bottom R + translates + shears
if(mouseX < width/2 & mouseY > height/2 && inCanvas){
rotate(random(-0.2, 0.2));
translate(x*random(0.005, 0.0075), y*random(0.005, 0.0075));
shearX(PI/16);
}
//CHANGING SIZE
//if mouse is within borders of "new" canvas,
//then rectangles change size based on distance of pointer to rectangle
if(inCanvas){
rect (x, y, dis*0.1, dis*0.1);
}
//if mouse is not within canvas, then rectangles are small AND rotates
else{
rect (x, y, rectSize, rectSize)
}
}
}
}
For this project, I made use of for loops to create an array of the same shapes, then used conditional statements to make modifications. The dynamic drawing starts off static with the original rectangles, but when the mouse moves, the rectangles change in size based on each of their distances from the mouse. When the mouse moves into a different quadrant, the rectangles react differently through rotation, translation, shear. From the top left quadrant to the bottom left quadrant (clockwise), the movements to the rectangles become more dramatic. The hardest parts of this project were making the for loop work, making sure the conditional statements made sense and adjusting the numbers assigned to variables to an appropriate range so that the shapes appear on canvas.
//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 5: Wallpaper
//x and y coordinates the tip of the tear drops
var x = 0;
var y = 0;
// scale
var Large = 25;
var Medium = Large-1;
var Small = Large-5;
// for loop coordinates
var transY = 0;
var transX = 30;
function setup() {
createCanvas(480, 480);
background (243,117,117);//hot pink!
}
function draw() {
//array the pattern on the odd rows
for (var transY = 0; transY < width; transY+= Large*6+15) {
for (var transX = 0; transX < width+30; transX+= Large*2+10) {
pattern(transX,transY);
}
}
// array the pattern for even rows and offset them so they fill the gap
for (var transY = -Large*3-8; transY < width; transY+= Large*6+15) {
for (var transX = Large+5; transX < width; transX+= Large*2+10) {
pattern(transX,transY);
}
}
}
function pattern(transX,transY){
stroke(255);
strokeWeight(1);
//deep blue tear drop, aka large drop
push();
translate(transX,transY);
fill(48,78,109);
beginShape();
curveVertex(x,y);
curveVertex(x,y);
curveVertex(Large,Large*3);
curveVertex(x,Large*4);
curveVertex(x-Large, y+Large*3);
curveVertex(x,y);
curveVertex(x,y);
endShape();
pop();
//pale orange tear drop, medium drop
push();
translate(transX,transY+Large*6);
fill(237,168,131);
angleMode(DEGREES);
rotate(180);
beginShape();
curveVertex(x,y);
curveVertex(x,y);
curveVertex(Medium,Medium*3);
curveVertex(x,Medium*4);
curveVertex(x-Medium, y+Medium*3);
curveVertex(x,y);
curveVertex(x,y);
endShape();
// teal tear drop, small drop
fill(43,188,177);
beginShape();
curveVertex(x,y+10);
curveVertex(x,y+10);
curveVertex(Small,Small*3+10);
curveVertex(x,Small*4+10);
curveVertex(x-Small, y+Small*3+10);
curveVertex(x,y+10);
curveVertex(x,y+10);
endShape();
//yellow circle
fill(253,185,74);
ellipse(x,Small*5,Large,Large);
//small dark blue circle on the tip of the shape
fill(48,78,109);
ellipse(0,0,10,10);
pop();
}
I wanted to play around with rotation for this project and was inspired by stylized/ simplified representations of the solar system (or atoms). I did a few quick sketches of how I wanted the drawing to change as the mouse moved, and from there figured out how I was going to implement the design.
I think the trickiest part of this was figuring out how to change the size of all of the components with the movements of the mouse without making them too large or too small.
//Anna Anderson
//Section D
//aranders@andrew.cmu.edu
//project-03
var pbsize = 30
var pbcolor = 0
var pbposition = 275
var jellysize = 30
var jellycolor = 0
var jellyposition = 25
function setup() {
createCanvas(600, 400);
}
function draw() {
background(218, 145, 223)
noStroke();
//left bread
fill(255);
rect(50, 100, 200, 200);
ellipse(50, 125, 50, 50);
ellipse(250, 125, 50, 50);
//right bread
fill(255);
rect(350, 100, 200, 200);
ellipse(350, 125, 50, 50);
ellipse(550, 125, 50, 50);
//peanut butter color
pbcolor = min(max(0, mouseX), 100);
fill(216, 152, pbcolor);
//peanut butter position and size
pbsize = max(min(mouseX, 150));
pbposition = max(min(mouseY, 375));
rect(pbposition, 125, pbsize, pbsize);
//jelly color
jellycolor = min(max(0, mouseX), 100);
fill(225, jellycolor, 225);
//peanut butter position and size
jellysize = max(min(mouseX, 150));
jellyposition = max(min(mouseY, 75));
rect(jellyposition, 125, jellysize, jellysize);
}
I really like peanut butter and jelly and thought this was a good opportunity to digitally spread the goodness. This project went relatively smoothly and was fun to create!
var sizex = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
rectMode(CENTER);
noStroke();
R=(640-mouseX)/2;
G=(480-mouseY)/2;
B=mouseX*(0,255);
//Altering color based on mouse position
background(B,R,G);
//altering background color based on mouse position
sizex=mouseX/2;
if (sizex>160){
sizex=mouseX/-2;
};
//altering position and size based on x mouse position
sizey=mouseY/2;
if(sizey>120){
sizey=mouseY/-2;
};
//altering position and size based on y mouse position
rot=PI/(640/mouseX);
//altering rotation based on x position
fill(R, G, B);
translate(mouseX, mouseY);
rotate(rot);
rect(0, 0, sizex, sizey);
}
I was inspired by Jamie XX’s “In Colour” album artwork and visuals. I created a square that is drawn on a background where the color is altered based on mouse location – this is to mimic the spectrum in the album artwork’s background. The shape itself is a square and is altered by the mouse x and y, depending on the quadrant it is in (if you divide the canvas size into 4 parts) as I wanted the location of the shape to respond to the mouse placement as well.
//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Assignment-03-B
//variable for Bezier curvature
var Curv;
//variable for Red, Green, Blue color.
var R = 0;
var B = 0;
var G = 0;
function setup() {
createCanvas(640, 480); //setting Canvas size to 600x480
//No fill for any geometry
noFill();
//initializing Curv
Curv = 0;
}
function draw() {
//adding random number to Red for change of color when it is < 255
//adding random number to Blue for change of color when it is < 255
//adding random number to Green for change of color when it is < 255
//When any of R,G,B elements are over 255, it resets to 0.
if (R >= 255){
R = 0;
}
if (G >= 255){
G = 0;
}
if (B >= 255){
B = 0;
}
//variable for color c
var c = color(R,B,G);
//continuously assign color variable to stroke
stroke(c, 10);
//setting up standard place for x and y coordinate.
var x = width/2;
var y = height/2;
//Dividing the canvas into four difference quadrant.
if (mouseX > x & mouseY < y ) { //when mouse is on right top quadrant
Curv += mouseX/60; //Curv value goes up randomly from 1 to 5
R += mouseX/120 + mouseY/50;// Red is sum of differenct X and Y value
}
if (mouseX < x & mouseY < y){//when mouse is on left top quadrant
Curv -= mouseY/30; //Curv value goes down randomly from 4 to 12
B += mouseX/40 + mouseY/80;// Blue is sum of differenct X and Y value
}
if (mouseY > y & mouseX > x){//when mouse is on right bottom quadrant
Curv += mouseY/60;//Curv value goes up randomly from 4 to 12
}
if (mouseY > y & mouseX < x){//when mouse is on left bottom quadrant
Curv -= mouseX/30;//Curv valvue goes down randomly from 1 to 5
G += mouseX/70 + mouseY/100;// Green is sum of differenct X and Y value
}
//when Curv is larger than height or width, or less than 0 , it will reset to 0.
if ( Curv > height || Curv < 0 || Curv > width){
Curv = 0;
}
//setting background to black
background(0);
//bezier curves.
//each for statement is used to generate multiple bezier curve based on increment of i value
//bezier curve assigns, anchor points and control points to create paramatric curve.
//bezier(anchor pts, anchor pts, control pts, control pts, control pts2,control pts2, anchor pts2,anchor pts2)
for (var i = 0; i < mouseX; i += 30){
bezier(mouseX-(Curv+i/2.0), mouseY-Curv+i, Curv*2, Curv, Curv*2, Curv*2, mouseX, 0);
}
//based on the i and z constraint, number of lines are decided.
// i or z's constraints are defined by mouse X adn Y position
// all the position of the anchor points are based on the mouse X and Y
for (var z = 200; z < mouseY; z += 30){
bezier(mouseX-(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width-mouseX, 0);
}
for (var i = 0; i < height-mouseY; i += 30){
bezier(mouseX+(Curv+i/2.0), mouseY+Curv+i, Curv*2, Curv, Curv*2, Curv*2, 0, mouseY);
}
for (var z = 200; z < width-mouseX; z += 30){
bezier(mouseX+(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width, height-mouseY);
}
}
For this Dynamic art project, I focused on the movement of line in a curve form. At first, I wanted to express very light wing like motion based on the mouse position. I abstracted the initial concept and created the following digital illustration of movement. Fortunately, I found a example at p5js website that resembles part of what I imagined. I took that example and modified to create my own dynamic art.
For my project, I made a dynamic drawing that is controlled by the mouse, or the user. I varied several elements, including size, color, rotation and position.
The user can move the wrecking ball to wherever in the canvas and manipulate the size of the buildings. One can see that the size of the ball itself changes, according to position as well. The size of the wrecking ball is largest when the mouse is located on both extremes of the width. The height of the buildings decreases when approached by the ball.
As for colors, as you move the mouse from left to right, the background changes from dark to light.
Another element that the mouse controls is the particles floating in air. It could be considered stars or dust. When the mouse is in the bottom half of the canvas, the particles rotate at a faster pace than they do when the mouse is in the top half of the canvas.
I would say that some challenges came from how tedious my design was. I also wish that I could have made the windows on the buildings to change color in the same fashion that the background does to keep it more consistent.
var angle = 0;
var m = 0;
var n = 0;
var size = 0;
var sizen = 0;
var x = 0;
var z = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
x = max(min(mouseX, 255), 0);
z =max(min(mouseX, 255), 0);
background(0);
fill(x, 255, z);
ellipseMode(CENTER);
//create ellipse with color dependent on where the mouse is
m = max(min(mouseX, 640), 0);
n = max(min(mouseY, 480), 0);
// //setting the x and y coordinates to be the max value between the mouse coordinates and the canvas size
size = m * 350 / 400;
sizen = n * 350 / 400;
//settin the size of the ellipse to be a function of the position of the coordinates
push();
ellipse(mouseX, mouseY, size, sizen);
//using the variables to create an ellipse
fill(x, 255, z);
//filling the color for the ellipse based on where the mouse is on the canvas
translate(mouseX,mouseY);
//moving the ellipse based on where the ellipse is in the canvas
rotate(radians(angle));
//rotating the ellips
pop();
angle = angle +5;
}
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
