Tag: Project-03

Janet Peng Project 03 – Dynamic Drawing

jjpeng project 3

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

function draw() {
	background(158, 189, 204);

	// makes the ellipse size depend on the position of the mouse
	var w = mouseX / 5;
	var h = mouseY / 5;

	// makes blue of ellipse depend on mouseX and be at least 140
	// makes red of ellipse depend on mouseY and be at least 180
	var colorX = mouseX / 10 + 140;
	var colorY = mouseY / 5 + 180;

	// square rotation depends on mouseX, rows alternate between
	// clockwise and counter clockwise
	var cwR = mouseX / 5;
	var ccwR = 360 - mouseX / 5;

	// square sides are at least 50 and depend on mouseY
	var squareSide = 50 + mouseY / 10;
	var squareMove = mouseX / 10 - 60

	// squares
	fill(255);
	stroke(255);

	// row 1
	push();
	rectMode(CENTER);
	translate(160 + squareMove, 120);
	rotate(radians(cwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	push();
	rectMode(CENTER);
	translate(320 + squareMove, 120);
	rotate(radians(ccwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	push();
	rectMode(CENTER);
	translate(480 + squareMove, 120);
	rotate(radians(ccwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	// row 2
	push();
	rectMode(CENTER);
	translate(160 - squareMove, 240);
	rotate(radians(ccwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	push();
	rectMode(CENTER);
	translate(320 - squareMove, 240);
	rotate(radians(cwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	push();
	rectMode(CENTER);
	translate(480 - squareMove, 240);
	rotate(radians(ccwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	// row 3
	push();
	rectMode(CENTER);
	translate(160 + squareMove, 360);
	rotate(radians(cwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	push();
	rectMode(CENTER);
	translate(320 + squareMove, 360);
	rotate(radians(ccwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	push();
	rectMode(CENTER);
	translate(480 + squareMove, 360);
	rotate(radians(ccwR));
	rect(0, 0, squareSide, squareSide);
	pop();

	// ellipse colors
	fill(colorY, 240, colorX);
	stroke(colorY, 240, colorX);

	// ellipses
	// row 1
	ellipse(64, 0, h, w);
	ellipse(192, 0, h, w);
	ellipse(320, 0, h, w);
	ellipse(448, 0, h, w);
	ellipse(576, 0, h, w);

	// row 2
	ellipse(0, 120, w, h);
	ellipse(128, 120, w, h);
	ellipse(256, 120, w, h);
	ellipse(384, 120, w, h);
	ellipse(512, 120, w, h);
	ellipse(640, 120, w, h);

	// row 3
	ellipse(64, 240, h, w);
	ellipse(192, 240, h, w);
	ellipse(320, 240, h, w);
	ellipse(448, 240, h, w);
	ellipse(576, 240, h, w);

	// row 4
	ellipse(0, 360, w, h);
	ellipse(128, 360, w, h);
	ellipse(256, 360, w, h);
	ellipse(384, 360, w, h);
	ellipse(512, 360, w, h);
	ellipse(640, 360, w, h);

	// row 5
	ellipse(64, 480, h, w);
	ellipse(192, 480, h, w);
	ellipse(320, 480, h, w);
	ellipse(448, 480, h, w);
	ellipse(576, 480, h, w);
}

I wanted to capture a few common movements with my dynamic drawing (rotation, translation, growth/shrinking, color change). I also wanted to create a repetitive pattern that changed depending on what row it was in. My initial inspirations were a pattern with dots.

Shariq M. Shah – Dynamic Drawing – Project 03

shariqs_project-03

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// {Project - 03



var posC = 0;
var angle = 0;
var t = 'polar'

var midX = 320
var midY = 240



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

}

function draw() {

//Rotating ellipses creating void in the center

    push();
    translate(320, 240);
    rotate(radians(angle));
    noFill()
    stroke(250, mouseX, mouseY)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle + mouseY * 0.1
    posC = posC + 0.5


//Text that changes color acccording to rest of the graphic

  textSize(10);
  rectMode(CENTER)
  text('polar', midX - 10, midY);
  fill(250, mouseX, mouseY);


//If mouse is moved to center, lines become black creating vortex

  if ((mouseX > midX - 20 & mouseX < midX + 20) && (mouseY > midY - 20 & mouseY < midY + 20)) {

    push();
    translate(midX, midY);
    rotate(radians(angle));
    noFill()
    stroke(0)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle - mouseY * 0.5
    posC = posC + 0.5
  }


}

In this project, I explored geometries and mathematical aggregation of an ellipse to create highly articulated and complex patterns. Using a limited amount of code, the program is able to use the user’s input to create a variety of vibrant mandala like patterns. The geometry is calibrated to leave a perfect circle in the center of the canvas, where the text changes color according to the the lines that are being drawn.