Author: jennyzha@andrew.cmu.edu

jennyzha – project 07

sketch

// Jenny Zhang
// Section D
// jennyzha@andrew.cmu.edu
// Project 07 

//http://mathworld.wolfram.com/Epitrochoid.html

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

function draw() {
  background(255, 200, 200);
  translate(width/2, height/2);  // moving the drawing to center 

  drawEpitrochoid();
}

function drawEpitrochoid() {

    var n = 1500;          
    noFill();
    stroke(255);

    var x;
    var y;
    var h = constrain(mouseX, 0, 480); //distance between radius of smaller circle to the curve drawn (contrained and varied between left and right borders)
    var a = 300;    //radius of bigger circle
    var b = a/constrain(mouseY, 0, 480);  //radius of smaller circle (constrained to the left and right borders)


    beginShape();
        for (var i=0; i < n; i++) {

            var t = map(i, 0, n, 0, TWO_PI);

            var x = (a + b) * cos(t) - h * cos (((a+ b)/b)*t); //epitrochoid equation
            var y = (a + b) * sin(t) - h * sin (((a+ b)/b)*t); //epitrochoid equation
           
            vertex(x, y);
        }  
    endShape();
}

I really enjoyed playing around with all of the possible varying numbers in this project and am very pleased with the outcome. Moving your mouse very slowly throughout the canvas you’re able to see so many different beautiful designs made by the epitrochoid curves.

jennyzha-Project 06

sketch

// Jenny Zhang
// Section D
// jennyzha@andrew.cmu.edu
// Project 06

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;
var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
        millisRolloverTime = 0;
}

function draw() {
    background(255,250,200);

	// Fetch the current time
	var H = hour();
	var M = minute();
	var S = second();

	if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);

    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);

    noStroke();
    fill(255, 200, 200);
    ellipse(width/2, height/2, hourBarWidth, hourBarWidth);
    var eyeLX = width/2 - hourBarWidth*0.25;
    var eyeRX = width/2 + hourBarWidth * 0.25;
    fill(0,90,150);
    ellipse(eyeLX, height/2, minuteBarWidth/3, minuteBarWidth/3);
    ellipse(eyeRX, height/2, minuteBarWidth/3, minuteBarWidth/3);
    fill(226,43,42);
    var mouth = width/2 
    ellipse(mouth, height-height/4, secondBarWidthChunky/3, secondBarWidthChunky/3)
}

This project was inspired by our third project, the variable faces, where I made the head the hour, the eyes the minute, and the mouth a function of the seconds. I enjoyed going back to my previous project and reviewing, improving, and understanding my past code on a deeper level as I refined it into an abstract clock for this project.

jennyzha-LookingOutwards 06

4900 Colours was a monumental piece of work by Gerhard Richter. Crafted with 196 square panels of 25 bright monochrome colored squares, arranged in a grid formation the piece ultimately created sheets of kaleidoscop-like colors. The patterns were configured to a number of random variations, all from one large-scale piece to multiple, smaller paintings. When preparing for presentation in the Serpentine gallery, Richter specially crated a version with 49 paintings.

Richter’s works are especially interested to me as that in reality it is a simple concept, really, but together it helps to make something so intricate. the history and inspiration for the project are truly intricate as they came out of the south transept window of Cologne Cathedral, replacing the stained glass that had been destroyed in the Second World War.

jennyzha, Project-05-Wallpaper

sketch

//Jenny Zhang
//Section D
//jennyzha@andrew.cmu.edu
//Project 05: Wallpaper

var tw = 0;
var th = 0;
var oy = 0;
var ox = 0;

function setup() {
	createCanvas(480,480);
	background(179, 217, 255);
}	

function draw() {
	background(180, 215, 255);
	var tw = 55;
	var th = 55;
	var oy = 45;
	var ox = 45;
	
	for (var x = 0; x < width; x = x + 1) {
		for (var y = 0; y < 8; y += 1) {
		stroke(255);
		point(x, (y * 100) + 60 - 50 * sin(radians(x)));
		stroke(255, 255, 0);
		point(x, (y * 100) + 60 - 50 * cos(radians(x)));
		}
	}

	for (var y = 0; y < 7; y += 2) { //writes the code for the circles on every odd x and y value 
		for (var x = 0; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			fill(185,145,255);
			noStroke();
			rect(px, py, 50, 50);
			noStroke();
			rect(px, py, 60, 60);
		}
	}
	for (var y = 0; y < 7; y += 2) { //writes the code for the circles on every odd x and y value 
		for (var x = 0; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			fill(255);
			noStroke();
			rectMode(RADIUS);
			rect(px, py, 25, 25);
			rectMode(RADIUS);
			noStroke();
			rect(px, py, 25, 25);
		}
	}
	for (var y = 0; y < 7; y += 2) { //writes code for the circles of every even value -- these two loops help to create the honeycomb-like off-set grid
		for (var x = 1; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			noStroke();
			fill(255, 255, 225);
			ellipse(px, py, 30, 30);
		}
	}
		for (var y = 0; y < 7; y += 2) { //writes code for the circles of every even value -- these two loops help to create the honeycomb-like off-set grid
		for (var x = 1; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			noStroke();
			fill(255);
			ellipse(px, py, 15, 15);
		}
	}
	noLoop();
}

For this project, I was inspired by assignment 05B for this week’s deliverables. I wanted to gain a deeper understanding of how the program worked and added a couple more shapes, lines, and colors to make it my own and make it into a more aesthetically pleasing wallpaper.

jennyzha- looking outwards 05

http://www.miagui.cc/#/about/

*link to about page*

Focused on advertising images, Miagui is an creative production studio. Their main goals include creativity, quality, innovation, and stepping outside of the limits around the creative process.

Because of their goals, Miagui oftentimes will utilize CGI in their works, such as the attached, to create unique pieces for their clients. This is a point the studio is clearly proud of, seeing that as you flip through their different pieces, you may view the percent CGI that was involved in the creation of that work.

http://www.miagui.cc/#/work/67

*link to photo*

This particular piece for “Dentro Do Filme So Dentro Do Filme So,” uses only 30% per piece within this two-part work. My particular favorite part is how seamlessly they were able to integrate the hands into their surreal environments.

 

 

jennyzha-Project 04

sketch

//project

var yspace = 10;
var xspace = 25; 
var x1 = 1;
var y1 = 299;
var x2 = 399;
var y2 = 1; 

function setup(){
	createCanvas(400, 300);
	background(0);
}

function draw() {
	for(var i = 0; i < 100; i +=1){
		strokeWeight(0.01);
		stroke(255);
		line(x1, height - yspace * i, xspace * i, y2);
		line(x1, yspace * i, xspace * i, y1);
		line(xspace * i, y1, x2, height - yspace * i); 
		line(x2, yspace * i, xspace * i, y2); 
	}
}

 

This was a really cool project for me, I think my favorite part is that when you refresh the page you can almost see the loop working as it draws up. The math behind the concepts of this code are also super interesting.

jennyzha – Looking Outwards 04

Carsten Nicolai is a german artist and musician based in berlin. He often incorporates mathematic patterns such as grids and codes, as well as error, random and self-organizing structures.

For his musical attributes he uses the pseudonym alva noto; leading his sound experiments into the field of electronic music by creating his own code of acoustics and visual symbols.

Reflektor distortion is a rotating, basin filled with water – is inspired by the shape of a parabolic mirror that ‘rotates’ water. The installation consists of the three main parts including mirror, reflection and distortion. Both the curve and distortion of the water is affected by speed and integrated resistors that generate a permanently new and re-organizing mirror reflection. The water surface will be affected by the speaker due to the low sound frequencies. Therefore, the water shows the distorted reflection; ultimately personifying a distorted reality.

http://www.carstennicolai.de/ 

jennyzha – looking outwards – 03

3-D Printable Connectors

diy table surface supports

This project uses 3D printers and materials to lend a hand to more hands on projects that link computational projects to physical DIY projects. Overall, what I love is that this project solves is the common problem of the complexities involving dIY furniture construction; therefore only enhancing a non-computer activity, rather than entirely replacing it.

Not only does this project help the building part of furniture construction, but it also has goals in more efficient packaging, given that the larger wooden pieces can be flat-packaged with these connectors.Even more, buyers would be able to create their own furniture from scratch if desired with these easy to use parts.

diy furniture connector plastic

Although I am not sure about what the artists inspirations were or what algorithms were used, I do know that the solution uses strong triangular shapes for structural support and requires only the most basic screwdrivers to finish the product.

jennyzha-project-03

sketch

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;
}

jennyzha – project 02 – variable faces

my-sketch

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;

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

function draw() {
    background(180);
    fill(r, b, g);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var eyeLX = width/2 - faceWidth*0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    fill(e1, e2, e3);
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize);
    var mouth = width/2 
    ellipse(mouth, height/2+30, mouthSizeW, mouthSizeH)
} 

function mousePressed() {
	faceWidth = random(75,150);
	faceHeight = random(100,200);
	eyeSize = random(10,30);
	r = random(0, 255);
	b = random(0, 255);
	g = random(0, 255);
	e1 = random(0, 255);
	e2 = random(0, 255);
	e3 = random(0, 255);
	mouthSizeW = random(5, 50);
	mouthSizeH = random(10, 55);
}

While making this project I decided to play with color so I assigned random variables for the eyes and mouth and the face.