//Lan Wei
//Section D
//lanw@andrew.cmu.edu
//Project-03
var starXArray = [];
var starYArray = [];
var starRArray = [];
function setup() {
createCanvas(450, 450);
noStroke();
for (var i = 0; i < 200; i ++){
var starR = random(0.5, 2);
var starX = random(0, 2 * width);
var starY = random(0, 2 * height/3);
ellipse(starX, starY, starR, starR); // stars
starXArray.push(starX);
starYArray.push(starY); //store the positions of the stars in arrays
starRArray.push(starR); //store the size of the stars
print(starXArray);
}
}
function draw() {
background(5, 5, 32);
fill(136, 3, 11);
rect(0, 2 * height/3, width, height/3); //lower part of the city scene
//stars
for (var i = 0; i < 200; i ++){
fill(150);
ellipse(starXArray[i] - mouseX/7, starYArray[i], starRArray[i], starRArray[i]);
}
// buildings
push();
fill(136, 3, 11);
rect(-mouseX/2, 200, 50, 150);
rect(50-mouseX/2, 270, 30, 150);
rect(80-mouseX/2, 230, 70, 150);
rect(150-mouseX/2, 280, 90, 150);
rect(240-mouseX/2, 250, 50, 150);
rect(290-mouseX/2, 190, 50, 150);
rect(340-mouseX/2, 230, 20, 150);
rect(400-mouseX/2, 200, 50, 150);
rect(450-mouseX/2, 270, 30, 150);
rect(480-mouseX/2, 230, 70, 150);
rect(550-mouseX/2, 280, 90, 150);
rect(640-mouseX/2, 250, 50, 150);
rect(690-mouseX/2, 190, 50, 150);
rect(740-mouseX/2, 230, 20, 150);
pop();
//roller coaster
for (var x = 0; x < 5 * width/8; x += 0.1){ // the less thriller part
var xInSin = map(x, 0, width, 0, 4 * PI);
var y = 50 * sin(xInSin) + height/2 + 50;
fill(255);
ellipse (x, y, 1, 1);
if (x % 20 <= 0.1){ //vertical structure
push();
stroke(200);
strokeWeight(1);
line(x, height, x, y);
pop();
}
}
for (var x = 5 * width/8; x < width; x += 0.1){ //the thriller part
var xInSin = map(x, 0, width, 0, 4 * PI);
var y = 100 * sin(xInSin) + height/2;
ellipse (x, y, 1, 1);
if (x % 20 <= 0.1){ //vertical structure
push();
stroke(200);
strokeWeight(1);
line(x, height, x, y);
pop();
}
}
//carriage
if (mouseX < 5 * width/8){
y = 50 * sin(xInSin) + height/2 + 50;
fill(255, 255, 0);
var fakeX = map(mouseX, 0, width, 0, 4 * PI);
var rectY = 50 * sin(fakeX) + height/2 + 50
push();
rectMode(CENTER);
var ang = asin(sin(fakeX + PI/2));
translate(mouseX, rectY);
rotate(ang);
rect(0, 0, 20, 10);
pop();
}
if (mouseX >= 5 * width/8){
y = 100 * sin(xInSin) + height/2;
fill(255, 255, 0);
var fakeX = map(mouseX, 0, width, 0, 4 * PI);
var rectY = 100 * sin(fakeX) + height/2;
push();
rectMode(CENTER);
var ang = asin(sin(fakeX + PI/2));
translate(mouseX, rectY);
rotate(ang);
rect(0, 0, 20, 10);
pop();
}
}
I trird to make a scene of roller coaster at night, with the stars in the sky and buildings far away. The stars, buildings and roller coaster should move with different speeds (and probably different directions) with mouse moving. The hardest part is to make the roller coaster move along its track. The process is very fun.
/* Rani Randell
Section A
rrandell@andrew.cmu.edu
Project 03 */
var backcolor;
var x = 0;
var y = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
var R = mouseX;
var G = mouseY;
var B = mouseX;
backcolor = color(R, G, B);
background(backcolor); //make the background change randomly with the mouse movement
noStroke(0);
fill(161, 0, 0);
rect(mouseX, 0, 10, 400);
fill(161, 161, 0);
rect(mouseX + 40, 0, 10, 400);
fill(7, 136, 70);
rect(mouseX + 80, 0, 10, 400);
fill(162, 82, 3);
rect(mouseX + 120, 0, 10, 400);
fill(0, 33, 203);
rect(mouseX - 40, 0, 10, 400);
fill(153, 0, 77);
rect(0, mouseY, 400, 10);
fill(101, 130, 0);
rect(0, mouseY + 40, 400, 10);
fill(65, 102, 0);
rect(0, mouseY + 80, 400, 10);
fill(68, 10, 127);
rect(0, mouseY + 160, 400, 10);
}
For this project I really wanted to experiment with color when the mouse is moved around. I made a small optical illusion with both line and color. I was really inspired by Mondrian’s clean lines and geometry for this project.
]]>/* Arden Wolf
Section B
ardenw@andrew.cmu.edu
dynamic drawing */
function setup() {
createCanvas(640, 480);
}
function draw() {
background(0,24,255);
var opposite = width-mouseX// makes object go in opposite direction
//middle
fill(255);
ellipse(mouseX, 100, 60, 60);
fill(0);
ellipse(mouseX, 100, 30, 30);
fill(255);
ellipse(opposite, 200, 60, 60);
fill(0);
ellipse(opposite, 200, 30, 30);
fill(255);
ellipse(mouseX, 300, 60, 60);
fill(0);
ellipse(mouseX, 300, 30, 30);
fill(255);
ellipse(opposite, 400, 60, 60);
fill(0);
ellipse(opposite, 400, 30, 30);
fill(255);
ellipse(mouseX, 500, 60, 60);
fill(0);
ellipse(mouseX, 500, 30, 30);
//side
fill(255);
ellipse(100, mouseX, 60, 60);
fill(0);
ellipse(100, mouseX, 30, 30);
fill(255);
ellipse(400, opposite, 60, 60);
fill(0);
ellipse( 400,opposite, 30, 30);
fill(255);
ellipse(200, mouseX, 60, 60);
fill(0);
ellipse(200, mouseX, 30, 30);
fill(255);
ellipse(300, opposite, 60, 60);
fill(0);
ellipse(300,opposite, 30, 30);
fill(255);
ellipse(500, mouseX, 60, 60);
fill(0);
ellipse(500, mouseX, 30, 30);
/*
fill(255);
ellipse( 100,mouseX, 60, 60);
fill(255);
ellipse(opposite-50,200, 60, 60);
fill(0);
ellipse(opposite-100, 250, 60, 60);
fill(0);
ellipse(opposite-500, 250, 60, 60);
fill(0);
ellipse(opposite-300, 400, 60, 60);
fill(0);
ellipse(mouseX+300, 400, 60, 60);
fill(0);
ellipse(mouseX+300, 100, 60, 60);
*/
}
I created a dynamic image of floating eyes using the variable we learned with width-mouseX.
]]>Dynamic Drawing
Sean McGadden
//Sean McGadden
//Section C @ 1:30
//smcgadde@andrew.cmu.edu
//Project-03-Dyanmic Drawing
function setup() {
createCanvas(640, 480);
}
function draw() {
background(0);
noStroke();
//Size and Position Variable
var blackDot = 300;
if (mouseX > 320) {
blackDot = (320 - (mouseX - 320));
}
if (mouseX < 320) {
blackDot = ((320 - mouseX) + 320);
}
//Orange Rectangles
//Color Change
if (mouseX < 340) {
fill(129, 224, 20)
rect(blackDot, mouseX, mouseY, mouseX);
rect(blackDot, 100, mouseY, mouseX);
rect(blackDot, 200, mouseX, mouseX);
rect(blackDot, 300, mouseY, mouseX);
rect(blackDot, 400, mouseX, mouseY);
rect(blackDot, 150, mouseY, mouseY);
}
//Color Change
if (mouseX > 340) {
fill(229, 79, 20);
rect(blackDot, 250, 100, 100);
rect(blackDot, 350, 250, 350);
rect(blackDot, 350, blackDot, blackDot);
rect(blackDot, 350, mouseX, blackDot);
rect(blackDot, 350, mouseY, blackDot);
rect(blackDot, 350, blackDot, mouseX);
}
//Blue Rectangles
fill(66, 134, 244);
rect(mouseX, 240, blackDot, mouseY);
rect(mouseX, blackDot, blackDot, mouseY);
rect(mouseY, blackDot, blackDot, mouseX);
//White Rectangles
fill(255)
rect(blackDot, 60, blackDot, mouseY);
rect(mouseX, blackDot, blackDot, mouseY);
rect(mouseY, 400, blackDot, blackDot);
// White Ellipses
fill(255);
ellipse(mouseX, 100, 20, mouseX);
ellipse(mouseX, 100, 20, mouseX);
ellipse(mouseX, 100, 20, mouseX);
//Orange Ellipses
//Color Change
if (mouseY < 250) {
fill(129, 224, 20)
ellipse(blackDot, mouseY, 30, mouseY);
ellipse(mouseY, mouseY, mouseX, 100);
}
if (mouseY > 250) {
fill(229, 79, 20)
ellipse(blackDot, mouseY, 30, blackDot);
ellipse(mouseX, mouseY, 20, 20);
ellipse(blackDot, mouseY, 30, 30);
ellipse(blackDot, mouseX, 100, 100)
}
//Blue Ellipses
fill(66, 134, 244)
ellipse(blackDot, mouseX, 50, 50);
ellipse((mouseX + 50), 300, mouseY, 20);
ellipse(mouseY, blackDot, 40, 40);
}
This project was interesting to play with shapes and colors. There are many ways that mouse tracking can ultimately lend itself to input changes. I think I would’ve liked to have had slightly more control over the movement of the shapes, I think perhaps more diagonal or rotational movements would’ve been nice. This project is built from assignment 2A and as I layered more changes I seemed to have lost track of some of these changes and I believe there is some redundancy from the layering. Overall, I learned more processes of javascript which is the goal.
]]>
My initial idea was a sort of a compass or star that would rotate to always face the mouse. This was easiest as having the circle be in set positions, but grow when the mouse hovers close. I then had the idea to incorporate the “getting warmer” scheme, so that the circles would transition from one color to another as the mouse comes closer. Having 12 circles, this required extensive use of loops and arrays.
var centerx = 640/2;
var centery = 480/2;
var radius = 175;
var d = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var angles = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];
var largest = 0;
var trianglewidth = 50;
function setup() {
createCanvas(640, 480);
angleMode(DEGREES);
}
function draw() {
background('white');
noStroke();
for(i = 0; i < d.length; i++){
d[i] = (255 - dist(centerx + cos(angles[i])*radius, centery + sin(angles[i])*radius, mouseX, mouseY)) / 3;
if (d[i] < 0){
d[i] = 0;
}
if (d[i] > d[largest]){
largest = i;
}
fill(255 - d[i]*3, 0, d[i]*3);
ellipse(centerx + cos(angles[i])*radius, centery + sin(angles[i])*radius, d[i], d[i]);
}
var linecolor = dist(centerx, centery, mouseX, mouseY);
if(linecolor > 255){
linecolor = 255;
}
stroke(linecolor);
strokeWeight(4);
line(centerx, centery, centerx + cos(angles[largest])*(radius - d[largest]/2), centery + sin(angles[largest])*(radius - d[largest]/2));
}
/* Jason Zhu
Section E
jlzhu@andrew.cmu.edu
Assignment-03
*/
// This code demonstrates the Sunset!
// Easing Variables
var easing = .05
var x = 1;
var y = 1;
function setup() {
createCanvas(640,480);
}
function draw() {
// Max Min Function
noStroke();
var mX = max(min(mouseX, 640), 0);
var mY = max(min(mouseY, 480), 0);
// Background Change
var g = (480-mY)*(.309)+85;
var g2 = (480-mY)*(.309)+85;
background(255,g,100);
// Ease Sun Function
var tarY = mY;
var dy = tarY - y;
y += dy * easing;
// Sun Shadow Large
fill (360,g-20,140)
ellipse(x + width / 2,y,mouseY / .35 +20,mouseY / .35 +20);
if (y> 395) {
y=395
}
// Sun Shadow Medium
fill (330,g-20,100)
ellipse(x + width / 2,y,mouseY / .55 +20,mouseY / .55 +20);
if (y> 395) {
y=395
}
// Sun Shadow Small
fill (270,g-20,60)
ellipse(x + width / 2,y,mouseY / .9 +20,mouseY / .9 +20);
if (y> 395) {
y=395
}
// Sun
fill (250,g-40,40)
ellipse(x + width / 2,y,100,100);
if (y> 395) {
y=395
}
// Grass
var g2 = (480-mY)*(.309)+85;
fill(135,g2,100);
rect(0,410,640,120)
// Right Shade
fill(0);
rect(640, 0, -.815*y, 480);
// Left Shade
fill(0);
rect(0, 0, .815*y, 480);
}This project was incredibly hard but rewarding. For me, thins project is when concepts really came together. It was a struggle to figure out how various variables interacted, but I eventually was able to resolve most issues. I had a particularly hard time with rotations and angles. I eventually figured out how to troubleshoot some of these issues, though a few questions linger. Overall, I am fairly satisfied.
]]>// John Legelis
// Section D
// jlegelis@andrew.cmu.edu
// Project-03
// Canvas dimensions
var w
w = 480
var h
h = 640
// Houndstooth color variables
var dark
dark = 0
var light
light = 255
// Houndstooth square dimensions
var hsW
hsW = 70
var hsH
hsH = 70
// Create Canvas
function setup() {
createCanvas(w, h);
background(255);
}
function draw() {
// Vary color based on mouse Y coordinate
// Middle of canvas Y = all grey
dark = min(mouseY/h * 255, 255)
// Rotate pattern based on mouse X coordinate
rotate(mouseX/w * PI/2)
// Translate pattern based on mouse Y coordinate
translate(0, (mouseY/w * 100))
// Draw rows and colomns of houndstooth squares
//draw houndstooth pattern much larger than canvas so rotation doesnt make pattern leave
for(hsY = hsH/2 - 2000; hsY < 2000; hsY = (hsY + hsH)) {
for(hsX = hsW/2 - 2000; hsX < 2000; hsX = (hsX + hsW)) {
hTooth(hsX, hsY)
}
}
console.log(mouseX)
}
// When mouse is pressed down the color of the top left quadrant changes from standard to a greyscale value based on mouse X
function colordark() {
if (mouseIsPressed){
return( (min(255,(max(100, mouseY)))) )
}
else {
return(dark)
}
}
// function that takes Center X and Center Y and draws one houndstooth square
function hTooth(cX, cY) {
//TOP LEFT QUADRANT--------------------------------------------------------------
// Larger section of pattern
fill(colordark());
noStroke();
beginShape();
vertex((cX - (36/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 1
vertex((cX - ( 0/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 2
vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 3
vertex((cX - ( 8/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 4
vertex((cX - ( 8/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 5
vertex((cX - (18/36 *hsW/2)), (cY - (10/36 *hsH/2))); // 6
vertex((cX - (28/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 7
vertex((cX - (28/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 8
vertex((cX - (36/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 9
vertex((cX - (36/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 1
endShape(CLOSE);
// Smaller section of pattern
fill(light)
noStroke()
beginShape();
vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 1
vertex((cX - ( 8/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 2
vertex((cX - ( 8/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 3
vertex((cX - (18/36 *hsW/2)), (cY - (10/36 *hsH/2))); // 4
vertex((cX - (28/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 5
vertex((cX - (28/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 6
vertex((cX - (36/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 7
vertex((cX - (36/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 8
vertex((cX - ( 0/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 9
vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 10
endShape(CLOSE);
// BOTTOM LEFT QUADRANT ------------------------------------------------------------
// Larger section of pattern
fill(light);
noStroke();
beginShape();
vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 2
vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 3
vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 4
vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
vertex((cX - (18/36 *hsW/2)), (hsH/2 + (cY - (10/36 *hsH/2)))); // 6
vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 7
vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 8
vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 9
vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
endShape(CLOSE);
// Smaller section of pattern
fill(dark)
noStroke()
beginShape();
vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 1
vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 2
vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 3
vertex((cX - (18/36 *hsW/2)), (hsH/2 + (cY - (10/36 *hsH/2)))); // 4
vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 6
vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 7
vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 8
vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 9
vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 10
endShape(CLOSE);
// TOP RIGHT QUADRANT
// Larger section of pattern
fill(light);
noStroke();
beginShape();
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 1
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 2
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 3
vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 4
vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 5
vertex((hsW/2 + (cX - (18/36 *hsW/2))), (cY - (10/36 *hsH/2))); // 6
vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 7
vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 8
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 9
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 1
endShape(CLOSE);
// Smaller section of pattern
fill(dark)
noStroke()
beginShape();
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 1
vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 2
vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 3
vertex((hsW/2 + (cX - (18/36 *hsW/2))), (cY - (10/36 *hsH/2))); // 4
vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 5
vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 6
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 7
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 8
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 9
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 10
endShape(CLOSE);
// BOTTOM RIGHT QUADRANT-------------------------------------------------------
// Larger section of pattern
fill(dark);
noStroke();
beginShape();
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 2
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 3
vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 4
vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
vertex((hsW/2 + (cX - (18/36 *hsW/2))), (hsH/2 + (cY - (10/36 *hsH/2)))); // 6
vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 7
vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 8
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 9
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
endShape(CLOSE);
// Smaller section of pattern
fill(light)
noStroke()
beginShape();
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 1
vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 2
vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 3
vertex((hsW/2 + (cX - (18/36 *hsW/2))), (hsH/2 + (cY - (10/36 *hsH/2)))); // 4
vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 6
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 7
vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 8
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 9
vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 10
endShape(CLOSE);
}
This project was open ended in a creative sense and after looking at a few examples, I was drawn to the idea of varying a pattern. One of my favorite patterns is houndstooth as it uses negative and positive space interchangeably. I broke the pattern into the smallest replicable modules and then iterated it onto the canvas in rows and columns. I then added user inputs to vary the gradient, rotation, translation by mouse position, and click to toggle the color of a segment of the pattern.
]]>// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-03-Dynamic Drawing
function setup() {
createCanvas(640, 480);
}
function draw() {
background(7, 9, 76);
var mX = max(min(mouseX, 640), 0); // keeps mouseX between 0 - 640
var size = mX * 3 / 640
var colorR = max(min(mouseX, 244), 90);
var colorG = max(min(mouseX, 70), 1);
var colorB = max(min(mouseX, 100), 60);
mX = 640 - mX;
// shooting star
fill(248, 246, 100);
stroke(255);
strokeWeight(4);
quad(290 + 15/2, mX - 120, 290 + 8, mX - 123, 330, mX - 150, 340, mX - 135); // star tail
quad(290, mX - 100, 305, mX - 120, 290, mX - 140, 275, mX - 120); // star shape
mX = max(min(mouseX, 640), 0);
// spaceship shape setup
noFill(); // glass dome
stroke(255);
ellipse(mouseX, height * 2/3 - 30, 85, 120);
// alien colors
fill(9, 172, 20);
stroke(9, 172, 20);
rect(mouseX - 2.5, height * 2/3 - 60, 5, 7); // neck
stroke(18, 111, 25);
triangle(mouseX, height * 2/3 - 10, mouseX - 15, height * 2/3 - 50, mouseX + 15, height * 2/3 - 50); // torso
triangle(mouseX - 3/2, height * 2/3 - 74, mouseX, height * 2/3 - 80, mouseX + 3/2, height * 2/3 - 74); // antena
ellipse(mouseX, height * 2/3 - 65, 22, 15); // head
fill(0);
stroke(255);
strokeWeight(3);
ellipse(mouseX - 5, height * 2/3 - 65, 7, 6); // left eye ball
ellipse(mouseX + 5, height * 2/3 - 65, 7, 6); // right eye ball
fill(142, 142, 144); // spaceship body
stroke(0);
strokeWeight(3);
ellipse(mouseX, height * 2/3, 200, 75);
// seam on space ship
strokeCap(ROUND);
stroke(0);
fill(0);
rectMode(CENTER);
rect(mouseX, height * 2/3, 160, 1);
// Planet 1
fill(219, 34, 47);
noStroke();
ellipse(125, 125, 100 * size, 100 * size);
size = 3 - size; // reverse size for second planet
// Planet 2
fill(255, 187, 3);
ellipse(450, 200, 80 * size, 80 * size); // planet
fill(colorR, colorG, colorB); // color of ring changes with mouse
ellipse(450, 200, 130 * size, 10 * size); // ring
// stars
var starX = mouseX;
fill(249, 215, 81);
noStroke();
push(); // star 1
translate(100, 400);
rotate(starX / width * mX); // star rotates around itself as mouse moves
rectMode(CENTER);
rect(0, 0, 7, 12);
pop();
push(); // star 2
translate(20, 300);
rotate(starX / width * mX);
rectMode(CENTER);
rect(0, 0, 10, 15);
pop();
push(); // star 3
translate(260, 30);
rotate(starX / width * mX);
rectMode(CENTER);
rect(0, 0, 20, 15);
pop();
push(); // star 4
translate(500, 70);
rotate(starX / width * mX);
rectMode(CENTER);
rect(0, 0, 5, 7);
pop();
push(); // star 5
translate(600, 430);
rotate(starX / width * mX);
rectMode(CENTER);
rect(0, 0, 40, 40);
pop();
push(); // star 6
translate(210, 200);
rotate(starX / width * mX);
rectMode(CENTER);
rect(0, 0, 15, 20);
pop();
push(); // star 7
translate(450, 400);
rotate(starX / width * mX);
rectMode(CENTER);
rect(0, 0, 10, 15);
pop();
}
When writing this code I found it easy to come up with ideas of how and what I wanted to move but writing the code to implement such ideas was more difficult, and I thus had to simplify my ideas in certain areas. I am happy with how the drawing came out, looking very cartoonish how all of the variables move in conjunction to each other.
]]>var redlineend= -20;
var redlinestart= 0;
var R=[237,247,193,176];
var G=[194,240,204,196];
var B=[200,220,221,177];
var index = 0;
var angle = 0;
var R1=[198,237,159,134];
var G1 =[143,220,173,168];
var B1 =[151,173,196,136];
var a =4;
function setup(){
createCanvas(640,480);
background(R[index],G[index],B[index]);
}
function mousePressed(){
//if click mouse inside canvas
if (mouseY < height & mouseY >0 && mouseX < width && mouseX > 0 && redlinestart >= 0){
//in first quater
if(mouseX < width/2 && mouseY < height/2) {
//line gap 35
redlineend = redlineend +35;
redlinestart = redlinestart + 35;
}
//in second quater
if (mouseX > width/2 & mouseY < height/2) {
//line gap 20
redlinestart = redlinestart + 20;
redlineend = redlineend +20;
}
//in third quater
if(mouseX < width/2 & mouseY > height/2) {
//line and background color change
index = index - 1;
if (index <= 0 ){
index = 0;
}
// heavier strokeweight
a = a+1;
if (a >= 6 ){
a = 6;
}
}
//in fourth quater
if(mouseX > width/2 & mouseY > height/2) {
//line and background color change
index = index + 1;
if (index ===4){
index = 0;
}
// lighter strokeweight
a = a-1
if ( a <= 1 ){
a = 1;
}
}
}
}
function draw(){
stroke(R1[index],G1[index],B1[index]);
strokeWeight(a);
redlineend = redlineend+1;
redlinestart = redlinestart+1;
//restart line
if (redlineend >= 641){
redlineend = -20;
background(R[index],G[index],B[index]);
}
if (redlinestart >= 661){
redlinestart = 0;
background(R[index],G[index],B[index]);
}
//rotating canvas
push();
translate(width/2,height/2);
rotate(radians(angle));
line(redlineend,height/5,redlinestart,height/5);
pop();
angle = angle+15;
}
I created a line drawing controlled by the clicking of the mouse. The mouse can control the following:
1. line gap 35/20 (1st quarter/2nd quarter)
2. color of line and background (3rd quarter/4th quarter)
3. line weight (3rd quarter/4th quarter)
/*Curran Zhang
Section A
curranz@andrew.cmu.edu
project_03/
*/
var R = 0;
var G = 170;
var B = 225;
var leftwall = (75);
var rightwall = (525);
var angle = 0;
function setup() {
createCanvas(600,600);
var r = 1
var spinx = cos(angle)*r
var spiny = sin(angle)*r
var con = constrain(mouseX,leftwall,rightwall);
var skycolor = mouseX/(600/225);
}
function draw()
{
background(R,G,B);
if (mouseX > 0 & mouseX < width)
{ R = 0 - mouseX/20;
G = 150 - mouseX/4;
B = 225 - mouseX/4;
}
//Stars
if (mouseX > width/3){
push();
rotate(radians(angle));
fill('white');
ellipse(50,50,1.5,1.5);
angle = angle + 1;
pop();
push();
rotate(radians(angle));
fill('white');
ellipse(100,100,3,3);
angle = angle + 1;
pop();
push();
rotate(radians(angle));
fill('white');
ellipse(100,200,3,3);
angle = angle + 1;
pop();
push();
rotate(radians(angle));
fill('white');
ellipse(300,30,3,3);
angle = angle;
pop();
fill(255);
push();
translate(250, 75);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 2, 2);
pop();
push();
translate(400, 200);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 3, 3);
pop();
push();
translate(100, 150);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 4, 4);
pop();
push();
translate(175, 225);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 5, 5);
pop();
push();
translate(500, 180);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, 5, 5);
pop();
angle = angle + 2;
}
//Sun and Moon
fill('yellow');
var con = constrain(mouseX,leftwall,rightwall);
ellipse(con, 90, 70, 70);
if(mouseX > width/2)
{var x2 = map(mouseX, 0, width,120, 0, true);
fill(0,150 - mouseX/4,225 - mouseX/4);
strokeWeight(0);
ellipse(mouseX - x2, 90, 70, 70);
}
//Mountain
fill(178,71,154);
beginShape();
vertex(0,254);
vertex(2,252);
vertex(60,262);
vertex(148,246);
vertex(259,254);
vertex(460,195);
vertex(600,244);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);
fill(129,61,151);
beginShape();
vertex(0,327);
vertex(10,324);
vertex(31,310);
vertex(40,310);
vertex(57,308);
vertex(93,315);
vertex(133,327);
vertex(182,318);
vertex(231,314);
vertex(241,316);
vertex(325,354);
vertex(403,341);
vertex(425,337);
vertex(469,337);
vertex(518,318);
vertex(580,304);
vertex(600,296);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);
fill(77,40,119);
beginShape();
vertex(0,445);
vertex(33,435);
vertex(56,425);
vertex(70,413);
vertex(109,413);
vertex(130,420);
vertex(180,433);
vertex(227,439);
vertex(260,445);
vertex(283,436);
vertex(325,429);
vertex(335,420);
vertex(360,409);
vertex(385,396);
vertex(470,400);
vertex(485,403);
vertex(527,401);
vertex(553,396);
vertex(558,394);
vertex(584,396);
vertex(600,400);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);
fill(205,121,178);
beginShape();
vertex(12,268);
vertex(30,271);
vertex(37,277);
vertex(55,277);
vertex(46,285);
vertex(28,285);
vertex(27,280);
vertex(17,277);
endShape(CLOSE);
fill(205,121,178);
beginShape();
vertex(165,271);
vertex(179,257);
vertex(211,253);
vertex(213,261);
vertex(233,263);
vertex(242,276);
vertex(210,274);
vertex(196,268);
endShape(CLOSE);
fill(205,121,178);
beginShape();
vertex(473,209);
vertex(499,224);
vertex(528,228);
vertex(567,244);
vertex(590,251);
vertex(590,278);
vertex(573,281);
vertex(549,268);
vertex(519,267);
vertex(492,256);
vertex(472,237);
vertex(466,219);
endShape(CLOSE);
fill(54,31,86);
rect(0,575,600,50);
//Tree
fill(54,31,86);
rect(30,540,6,35);
if (mouseX > 15 & mouseX < 45) {
fill(54,31,86);
ellipse(33,530,20,40);
} else{
fill(54,31,86);
ellipse(33,540,20,40);}
rect(60,550,6,25);
if (mouseX > 45 & mouseX < 75) {
fill(54,31,86);
ellipse(63,540,20,40);
} else{
fill(54,31,86);
ellipse(63,550,20,40);}
rect(120,545,6,30);
if (mouseX > 105 & mouseX < 135) {
fill(54,31,86);
ellipse(123,535,20,40);
} else{
fill(54,31,86);
ellipse(123,545,20,40);}
rect(150,550,6,25);
if (mouseX > 135 & mouseX < 165) {
fill(54,31,86);
ellipse(153,540,20,40);
} else{
fill(54,31,86);
ellipse(153,550,20,40);}
rect(180,540,6,35);
if (mouseX > 165 & mouseX < 195) {
fill(54,31,86);
ellipse(183,530,20,40);
} else{
fill(54,31,86);
ellipse(183,540,20,40);}
rect(210,550,6,25);
if (mouseX > 195 & mouseX < 225) {
fill(54,31,86);
ellipse(213,540,20,40);
} else{
fill(54,31,86);
ellipse(213,550,20,40);}
rect(240,550,6,25);
if (mouseX > 225 & mouseX < 255) {
fill(54,31,86);
ellipse(243,540,20,40);
} else{
fill(54,31,86);
ellipse(243,550,20,40);}
rect(300,550,6,25);
if (mouseX > 285 & mouseX < 315) {
fill(54,31,86);
ellipse(303,540,20,40);
} else{
fill(54,31,86);
ellipse(303,550,20,40);}
rect(330,550,6,25);
if (mouseX > 315 & mouseX < 345) {
fill(54,31,86);
ellipse(333,540,20,40);
} else{
fill(54,31,86);
ellipse(333,550,20,40);}
rect(360,550,6,25);
if (mouseX > 345 & mouseX < 375) {
fill(54,31,86);
ellipse(363,540,20,40);
} else{
fill(54,31,86);
ellipse(363,550,20,40);}
rect(390,540,6,35);
if (mouseX > 375 & mouseX < 405) {
fill(54,31,86);
ellipse(393,530,20,40);
} else{
fill(54,31,86);
ellipse(393,540,20,40);}
rect(420,550,6,25);
if (mouseX > 405 & mouseX < 435) {
fill(54,31,86);
ellipse(423,540,20,40);
} else{
fill(54,31,86);
ellipse(423,550,20,40);}
rect(450,550,6,25);
if (mouseX > 435 & mouseX < 465) {
fill(54,31,86);
ellipse(453,540,20,40);
} else{
fill(54,31,86);
ellipse(453,550,20,40);}
rect(510,540,6,35);
if (mouseX > 495 & mouseX < 525) {
fill(54,31,86);
ellipse(513,530,20,40);
} else{
fill(54,31,86);
ellipse(513,540,20,40);}
rect(540,550,6,25);
if (mouseX > 525 & mouseX < 555) {
fill(54,31,86);
ellipse(543,540,20,40);
} else{
fill(54,31,86);
ellipse(543,550,20,40);}
rect(570,550,6,25);
if (mouseX > 555 & mouseX < 585) {
fill(54,31,86);
ellipse(573,540,20,40);
} else{
fill(54,31,86);
ellipse(573,550,20,40);
}
}
For this project, I tried to incorporate if statements into the code to create more motion. The most difficult part was getting the trees to move up and down, but the problem was solved with the help of if/else statements.
]]>