Category: Project-03-Dynamic-Drawing

I really enjoyed combining different skill we have learned so far into this project. I started off using radial rotation which was fun to experiment with. I also utilized ‘easing’ which I think adds another level of interest to it.

Margot-dynamicdrawing

// Margot Gersing - Project 03 - Section E - mgersing@andrew.cmu.edu

// easing circle variables 
var cx = 100;
var cy = 100;
var diffx = 0;
var diffy = 0;
var targetX = 100;
var targetY = 100;

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

function draw(){
	background(1, 58, 111);

	// BACK RECTANGLES
	// rectangle's y position follows mouseY
	fill(186, 216, 227); //light blue
	rect(width / 2, mouseY, width, 300);

	// rectangle's x position follows mouseX
	fill(253, 145, 83); //orange
	rect(mouseX, height / 2, 100, height);

	// CIRCLE
	noFill();
	stroke(255);
	strokeWeight(10);

	// circle follows mouse with an ease of 0.1
	diffx = mouseX - cx;
    diffy = mouseY - cy;
    cx = cx + 0.1 * diffx;
    cy = cy + 0.1 * diffy;
    ellipse(cx, cy, 250, 250);

	noStroke();

	// if mouse is on the left side of screen fill outer rectangles with yellow
	if (mouseX < width / 2) {
		fill(255, 185, 65); //yellow
	}

	// if mouse is on the right side of screen fill outer rectangles with dark green
	if (mouseX > width / 2) {
		fill(22, 88, 51); //dark green
	}

	// OUTER RECTANGLES
	// six rectangles evenly rotated around center on circle with radius of 180
	// size controlled by mouseX / 2 and mouseY / 2

	translate(width/2, height/2);
	for (var i = 0; i < 6; i++) {
		push();
		rotate(TWO_PI * i / 6);
		rect(180, 0, mouseX / 2, mouseY / 2);
		pop();
	}

	// if mouse is in the bottom part of screen fill inner rectangles with purple

	if (mouseY < height / 2) {
		fill(150, 71, 98); //purple
	}
	
	// if mouse is in the top part of screen fill inner rectangles with red
	if (mouseY > height / 2) {
		fill(255, 104, 62); //red
	}

	// INNER RECTANGLES
	// six rectangles evenly rotated around center on circle with radius of 50
	// size controlled by mouseX / 3 and mouseY / 3

	for (var i = 0; i < 6; i++) {
		push();
		rotate(TWO_PI * i / 6);
		rect(50, 0, mouseX / 3, mouseY / 3);
		pop();
	}
}

sketch

var angle = 0;

function setup() {
    createCanvas(480,640);
}
 function draw (){
    background(500 - mouseY, 128, 224);
    //ellipse grows big and changes color
    noStroke();
    fill(800-mouseY, 400-mouseX, 15);
    ellipse(width/2, height/2, mouseX, mouseX);
    //line rotates with mouse and color changes
    push();
    translate(width/2, height/2);
    rotate(radians(mouseX/3));
    strokeCap(ROUND);
    strokeWeight(50);
    stroke(147, 190, 500-mouseX);
    line(10,10 ,mouseX, mouseY);
    pop();
    //line 1 rotate clockwise and change color
    push();
    translate(mouseX, mouseY);
    rotate(radians((angle+.5)*2));
    strokeCap(ROUND);
    strokeWeight(50);
    stroke(500-mouseX, 154, 158);
    line(10,10 ,50, 100);
    pop();
    //line 2 rotates counterclockwise and change color 
    push();
    translate(mouseX, mouseY);
    rotate(radians((angle+.5)*-2));
    strokeCap(ROUND);
    strokeWeight(50);
    stroke(220, 500-mouseX, 158);
    line(10,10 ,50, 100);
    pop();
    //line 3 rotates fastest and changes color 
    push();
    translate(mouseX, mouseY);
    rotate(radians((angle+.5)*5));
    strokeCap(ROUND);
    strokeWeight(50);
    stroke(220, 150, 500-mouseX);
    line(10,10 ,50, 100);
    pop();

     
    angle = angle +.5;
 }

sketch

// Yoshi Torralva
// Section E
// yrt@andrew.cmu.edu
// Project 03

var x = 40; //  x height of plaid
var y = 40; //  y height of plaid
var dx = 0; //diagonal var / width
var dy = 40; //diagonal var / height 

function setup() {
    createCanvas(480, 640);
}
function draw() {
    background(mouseX, mouseY, 0); // changes color
//thread to the left and right 
//conditional reactive to the mouse 
if(mouseX > 0) {
    x = mouseX;
}
//conditional reactive to the mouse 
if(mouseX < 200) {
    x = mouseX;
}
//conditional reactive to the mouse 
if(mouseY > 0) {
    y = mouseY;
}
//conditional reactive to the mouse 
if(mouseY < 200) {
    y = mouseY;
}
var bxscale = constrain(mouseX, 40, 100); // scale of ellipse
var byscale = constrain(mouseY, 40, 100); // scale of ellipse 
// plaid banners — layered 
    push();
    noStroke();
    fill(187, 0, 0);
    rect(0, 40, x, 40);
    fill(0, 136, 85);
    rect(160, 0, 40, y);
    fill(0, 136, 85);
    rect(40, 0, 40, y); 
    fill(0, 136, 85);
    rect(160, 0, 40, y);
    fill(34, 68, 51);
    rect(100, 0, 40, y);
    fill(187, 0, 0);
    rect(0, 100, x, 40);
    fill(187, 0, 0);
    rect(0, 160, x, 40);
    fill(34, 68, 51);
    rect(100, 0, 40, y);
    fill(187, 0, 0);
    rect(0, 220, x, 40);
    fill(34, 68, 51);
    rect(220, 0, 40, y);
// thin gold layering 
    fill(170, 102, 0);
    rect(0, 40, x, 10);
    fill(170, 102, 0);
    rect(40, 0, 10, y); 
    pop();
// push and pop used for strokeWeight only
    push();
    stroke(color(255));
    strokeWeight(10);
    line(mouseX, mouseY, 0, 0); // top left line 
    line(mouseX, mouseY, 480, 640); // bottom right line 
    fill("white");
    ellipseMode(CENTER);
    noStroke();
    ellipse(mouseX, mouseY, bxscale, byscale); // ellipse that moves to mouseX/Y
    pop();
}

With this project, I wanted to use the interaction of the mouse to create a plaid pattern. The rectangles react to the mouse and the white lines serve as a visual guide to imply that the mouse is weaving the plaid together. The background alternates color and the cursor shifts scale diagonally.

sketch

Exploring the various ways that shapes in p5js can change with the movement of the cursor was really interesting! It was also interesting to incorporating text in different languages into my code.

/* Charmaine Qiu
   Section E
   charmaiq@andrew.cmu.edu
   Project-03-DynamicDrawing */


var angle = 0
var b = 0


function setup() {
    createCanvas(400, 400);
}

function draw() {
//square that follows the cursor
    fill(b);
    b = random (0, 255);
    strokeWeight(0);
    rectMode(CENTER);
    push();
    translate(mouseX, mouseY);
    background(0);
    rotate(radians(angle));
    rect(0, 0, 50, 50);
    pop();
    angle += 5;

//rectangle outlines in the center
    noFill();
    stroke(255);
    strokeWeight(5);
    push();
    translate(width / 2, height / 2);
    rect(0, 0, mouseX, mouseY);
    pop();

    stroke(b);
    strokeWeight(1);
    rect(width * 0.5, height * 0.5, mouseY, mouseX);

//dancing lines in the center
    stroke(255);
    strokeWeight(1);
    line(width / 2 - 40, height / 2, width / 2 - 40, mouseY + 50);
    line(width / 2 - 30, height / 2, width / 2 - 30, mouseY);
    line(width / 2 - 20, height / 2, width / 2 - 20, mouseY - 20);
    line(width / 2 - 10, height / 2, width / 2 - 10, mouseY + 40);
    line(width / 2, height / 2, width / 2, mouseY);
    line(width / 2 + 10, height / 2, width / 2 + 10, mouseY + 60);
    line(width / 2 + 20, height / 2, width / 2 + 20, mouseY + 10);
    line(width / 2 + 30, height / 2, width / 2 + 30, mouseY);
    line(width / 2 + 40, height / 2, width / 2 + 40, mouseY - 30);

//When the mouse move to the left side of the canvas
    if (mouseX <= width / 2){
      push();
      translate(mouseX - 50, mouseY - 50);
      rotate(radians(angle));
      rectMode(CORNER);
      rect(20, 20, 20, 20);
      pop();
      angle = angle + 0.5;

      push();
      translate(mouseX + 50, mouseY + 50);
      rotate(radians(angle));
      rect(0, 0, 10, 10);
      pop();
      angle = angle - 0.5

      //text
      textSize(15);
      text('WooHooo!!!', 20, 90);
      textSize(30);
      text('哦耶!', 280, 180);

    } else { //When the mouse move to the right side of the canvas
      fill(0);
      strokeWeight();
      push();
      translate(mouseX, mouseY);
      rotate(radians(angle));
      rectMode(CENTER);
      rect(0, 0, 30, 30);
      pop();
      angle = angle + 5

      //text
      textSize(20);
      fill(255);
      text('야호!', 280, 50);
      textSize(25);
      text('ヤッホ〜ー', 70, 350);

    }


}

sketch

//Caroline Song
//Section E
//chsong@andrew.cmu.edu
//Project 03 - Dynamic Drawing

var speed = 3;
var distX = 0;
var distY = 1;
var rectX = 300;
var rectY = 300;
var rectWidth = 50;
var rectHeight = 300;

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

function draw(){
//change background color when mouse cursor is on lower half of canvas
    if(mouseY > height/3){
        background(255, 96, 71);
       } else{
       background ("black");
       }

//constantly moving yellow rectangle
    rect(rectX, rectY, rectWidth, rectHeight);
    fill(245, 236, 66);
    noStroke();
    rectX = rectX + distX * speed;
    rectY = rectY + distY * speed;

    if (rectY >= height){
        rectY = -rectHeight;
    }

//when mouse pressed, shapes change from circle to rectangle. 
//shapes will also change colors
    push();
    if(mouseIsPressed){

        //yellow rectangle following mouse cursor when mouse pressed
        rectMode(CENTER);
        rect(mouseX, mouseY, 100, 100);
        fill(245, 149, 66);
        noStroke();

        //blue rectangle when mouse pressed
        rectMode(CENTER)
        rect(400 - mouseX, 300 + mouseY, 75, 75);
        fill(66, 135, 245);
        noStroke();

        //purple rectangle when mouse pressed
        rectMode(CENTER);
        rect(width/2 + mouseX, height/2 - mouseY, 300, 300);
        fill(188, 66, 245);
        noStroke();

        //orange rectangle when mouse pressed
        rectMode(CENTER);
        rect(480, 400, 60, 60);
        fill(245, 236, 66);
        noStroke();

        //yellow rectangle in corner when mouse pressed
        rectMode(CENTER);
        rect(0, 0, 300, 300);
        fill(71, 255, 169);
        noStroke();

    } else {

        //yellow circle
        ellipse(mouseX, mouseY, 200, 200);
        fill(66, 245, 135);
        noStroke();

        //pink circle
        ellipse(400 - mouseX, 300 + mouseY, 300, 300);
        fill(232, 152, 245);
        noStroke();

        //blue circle
        ellipse(width/2 + mouseX, height/2 - mouseY, 100, 100);
        fill(152, 245, 228);
        noStroke();

        //orange circle
        rectMode(CENTER);
        rect(480, 400, mouseX, mouseY);
        fill(245, 236, 66);
        noStroke();

        //yellow rectangle
        rectMode(CENTER);
        rect(0, 0, mouseX, 300);
        fill(71, 255, 169);
        noStroke();

    }
    pop();

}

Coming up with an idea for my dynamic drawing was one of the most challenging parts for me, because there seemed to be so many things to choose from that I didn’t know where to start. However, once I began, I decided to focus on how shapes can interact and flow together in a single piece, creating my final dynamic drawing.