Month: September 2017

Dynamic Drawing

//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Project-03-DynamicDrawing

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

}

function draw() {
    
    var Top = 480;
    var bottom = Top + 180;
    var x = 110;
    var y = 50;
    var c1 = color(0);
    var c2 = color(0);

    var mX = max(min(mouseX, 480), 0);
    var mY = max(min(mouseY, 640), 0);
    
    var mX_L = max(min(mouseX, 240), 0); // when mouse is on left side
    var mX_R = max(min(mouseX, 480), 240); // when mouse is on right side
    
    
    if (mY > height/2) {
        c1 = color(255); //change color from black to white
        strokeWeight(20);
    }
    
    background(c1);
    
    //Blue Stripe Pattern when mouse hovers below than half of height
    for (var r = 0; r < 40; r += 1) {
        
        if (r % 2 == 0) {
            
            if (mY > height/2) {
                c2 = color(0, 41, 149); //change color from black to blue
            } 
            stroke(c2);     
        } 
        line(-50, height/10 * r - 560 + mY, width + 50, height/10 * r - 260 - mY);
    } 
    
    //outline of cube 
    strokeJoin(ROUND);
    strokeWeight(5);
    stroke(255);
    
    //outline of cube disappears when mouse hovers below than half of height
    if (mY > height/2) {
        strokeWeight(0);
    }
    
    
    for (i = -4; i < 4; i+=1) {
        
    fill(237, 10, 124); // Magenta, Top Side of Cube
    quad(mX, Top + 2*y + (mX_R - mX_L)/10, 
    mX_L - x, Top + y, 
    width/2, Top - (mX_R - mX_L)/10, 
    mX_R + x, Top + y);

    fill(14, 198, 184);  // Green, Left Side of Cube
    quad(mX, Top + 2*y + (mX_R - mX_L)/10, 
    mX_L - x, Top + y, 
    mX_L - x, bottom, 
    mX, bottom + y + (mX_R - mX_L)/10);

    fill(255, 241, 0); // yellow, Right Side of Cube
    quad(mX, Top + 2*y + (mX_R - mX_L)/10, 
    mX_R + x, Top + y, 
    mX_R + x, bottom, 
    mX, bottom + y + (mX_R - mX_L)/10);
        
    Top = Top - 210 + mY/5.5;
    bottom = bottom - 210 + mY/5.5;
    }

}

It was a process to consider the relationship among graphic elements and explore the way execute in coding. The more I learn about p5.js the more challenging project comes. But, actually, that means also I can create more complex and dynamic graphics in p5.js.

mjnewman-dynamic-drawing

//Meredith Newman
//Section A
//mjnewman@andrew.cmu.edu
//Project-02-Dynamic-Drawing

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

function draw() {
	//clean slate
	background(255);

	//sliding blue rectangle used for background when mouse is full width
	fill(32, 24, 135);
	noStroke();
	rect(0, 0, mouseX, 480);

	//white lines behind diagonal red lines
	stroke(255);
	strokeWeight(90);
	if (mouseX <= width) {
		line(0, 0, mouseX, 480);
		line(0, 480, mouseX, 0);
	}

	//red diagonal lines
	stroke(230, 24, 30);
	strokeWeight(30);
	if (mouseX <= width) {
		line(0, 30, mouseX, 450);
		line(30, 480, mouseX - 30, 0);
	}

	noStroke();
	//white stripes on cross
	fill(255);
	rect(0, 150, mouseX, 180);
	rect(270, 0, 100, mouseY);

	//red stripes on cross
	fill(230, 24, 30);
	rect(0, 190, mouseX, 100);
	rect(290, 0, 60, mouseY);

	//changing of color to colour
	if (mouseX < width* 0.75){
		textSize(70);
		fill(13, 202, 89);
		textStyle(BOLD);
		text("Color", 230, 265);
	} else if (mouseX > width * 0.75){
		textSize(70);
		fill(32, 24, 135);
		textStyle(BOLD);
		text("Colour", 230, 265);
	}
}

I wanted to approach my project not just with the idea of of dynamic drawings, but also of dynamic words. I also wanted to add a little humor (or humour) to the project, the changing of color from green is a slight nod to the “right way” of spelling the word. If I had more time, I would have found a way to incorporate more words that are translated differently from culture to culture, but in the same language.

sketch.js

// Jessica Nip
// Section A
// jknip@andrew.cmu.edu
// Project-03

var R = 0;
var G = 0;
var B = 0;
var R2 = 0;
var G2 = 0;
var B2 = 0;
var R3 = 0;
var G3 = 0;
var B3 = 0;
var R4 = 0;
var G4 = 0;
var B4 = 0;

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

function draw() {
    background(255,215,122);
    fill(R,G,B); // control rect color explicitly
    noStroke();
    var m = max(min(mouseX, 480), 0);
    var size = m * width / height/2;
    rect(m, mouseY, size, size);
    rect(m/2.2, mouseY, size/2, size/2);
    rect(m/7, mouseY, size/3, size/3);

	fill(R2,G2,B2);
    rect(m, mouseY/3, size, size);
    rect(m/7, mouseY/3, size/3, size/3);
    rect(m/2.2, mouseY/3, size/2, size/2);
   
   	fill(R3,G3,B3);
    rect(m, mouseY/1.6, size, size);
    rect(m/7, mouseY/1.6, size/3, size/3);
    rect(m/2.2, mouseY/1.6, size/2, size/2);

	fill(R4,G4,B4);
    rect(m, mouseY*1.5, size, size);
    rect(m/7, mouseY*1.5, size/3, size/3);
    rect(m/2.2, mouseY*1.5, size/2, size/2);

    stroke(255);
    strokeWeight(12);
    line(450, 0, mouseX, mouseY); // White line
    stroke(50);
    var mx = map(mouseX, 0, width, 180, 250);
    line(120, 0, mx, mouseY); // Black line

    if (mouseX > width/2) {
 		R = 146; //purple
 		G = 129;
 		B = 159;
 		R2 = 6; //blue
 		G2 = 67;
 		B2 = 90;
 		R3 = 45; //dark purple
 		G3 = 35;
 		B3 = 56;
 		R4 = 231; //peach
 		G4 = 165;
 		B4 = 150;

    } else if (mouseX > width/3) {
    	R = 196; //mauve/pink
    	G = 155;
    	B = 168;
    	R2 = 101; //lighter blue
 		G2 = 128;
 		B2 = 139;
 		R3 = 74; //purple
 		G3 = 48;
 		B3 = 76;
 		R4 = 231;// rich peach
 		G4 = 165;
 		B4 = 130;

    } else if (mouseX > 0 < width/3) {
    	R = 196; //light purple grey
    	G = 176;
    	B = 174;
    	R2 = 190; //lightest blue
 		G2 = 200;
 		B2 = 230;
  		R3 = 110; //pinkish purple
 		G3 = 66;
 		B3 = 87;
 		R4 = 231; //dark peach
 		G4 = 165;
 		B4 = 110;
    }

}

In this project, I wanted to play with ascending shapes in scale and gradients. I would love to incorporate more complex motion into this set in the future.