Author: rmanagad@andrew.cmu.edu

rmanagad-project07-curves

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-07

var nPoints = 850

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

function draw() {

	//color set-up
	var r = map(mouseX, 0, width, 160, 200);
	var g = map(mouseY, 0, height, 20, 60);
	var b = map(mouseY, 0, height, 20, 60);
	noFill();
	//modification of background and strokecolours
	background(2, g, b);
	stroke(r, g, 47);
	strokeWeight(0.5);
	translate(width/2, height/2);
	Hypotrochoid();
}

function Hypotrochoid (){
	// equations for recollection
	// x= (a-b)cost + hcos(((a-b)/b) * theta)
	// y= (a-b)sint + hsin(((a-b)/b) * theta)
	var x;
    var y;
    var h = 200;
    //variables to modify displacement from center.
    var a = map(mouseX, 0, width, 0, 10);
    var b = map(mouseY, 0, height, 0, 15);
    var c = map(mouseX, 0, width, 0, 5); 
    var d = map(mouseX, 0, width, 0, 50);
    beginShape();
      for(var i = 0; i < 500; i ++) {
        var theta = map(i, 0, width/2, 0, 360);
        x = (a - b) * cos(theta) + h * cos(((a - b)/b) * theta);
        y = (a - b) * sin(theta) - h * sin(((a - b)/b) * theta);
        vertex(x , y);
      }
    endShape();
    beginShape();
      for(var i = 0; i < nPoints; i ++) {
        var theta = map(i, 0, width, 0, 360);
        x = (c - d) * cos(theta) + h * cos(((c - d)/d) * theta);
        y = (c - d) * sin(theta) - h * sin(((c - d)/d) * theta);
        vertex(x + noise(2) * width/3, y + noise(2) * width/3);
      }
    endShape();
}

 

My primary goal for this project was familiarizing myself with curve equations, and their applications to existing shape structures. My first attempt with a conchoid was unsuccessful — I was not able to produce a visible result — so I moved on to hypotrochoids and applied similar plans to it. Below are curve sketches I examined to contribute to my final program:

 

rmanagad-lookingoutwards-07-sectione

Creator: Stamen Design

Title of Work: WHO Immunization Report 2016

Year of Creation: 2016

Link to Project Work: https://stamen.com/work/who-immunization-2016/

Link to Artist Bio: https://stamen.com/about/

 

The WHO Immunization Report visualization created by Stamen Design was created in an effort to improve visualization and public understanding of report data — by combining understandable text with analogous information, the report is inviting and easier to read. As a communications designer, this bridge is especially important — if information is not obviously readable, then the general public would not browse through the data in order to understand it.

The algorithms relevant to how the information was visualized was not explicitly stated by Stamen, however it can be implied that the proportions and colours of some elements (i.e. circle size) are directly affected by the size of the data (i.e. number of unvaccinated children in a country). As a company, Stamen Design creates data visualizations and maps — these algorithms are most likely duplicated and applied to each of their works.

rmanagad-project06-abstractclock

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-06

//color directory
	// background and papercrease(2, 53, 61);
	// paperlightred(187, 42, 47)
	// paperdarkred(160, 42, 56)
	// earthocean(65, 200, 225)
	// earthland(6, 181, 153);
	// earthcloudlight (204, 204, 204)
	// earthclouddark (178, 178, 178);
	// LightCometStreak(195, 215, 216);
	// medCometStreak (129, 166, 176)
	// darkCometStreak (37, 60, 84);

//earth parameters
var earthWH = 128; 
var earthX = 240;
var earthY = 240;
var landXY1 = 0;
var landXY2 = 0;
var landXY3 = 0;
var landXY4 = 0;

//movement parameters
var dirX = 1; 
var dirY = 1;
var dirXComet = 1;
var dirYComet = 1;
var speed = 0.1;
var speedComet = 0.1


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

function draw() {
	rectMode(CENTER);
	angleMode(DEGREES);
	var mil = millis();
	var sec = second();
	var min = minute();
	var h = hour();
	var revert = h % 12 // to make hour go back to 0 position at 12:00

	background(2, 53, 61);
	noStroke();
		fill(65, 200, 225);
		ellipse(earthX, earthY, earthWH, earthWH);
				earthX += dirX * speed/2; // motions the x cooridnate
				earthY += dirY * speed/2; // motions the y coordinate
		//constraining wiggle movement
		if (earthX > width/2 + 0.5 || earthX < width/2 - 0.5) {
			dirX = -dirX; 
		} 
		else if (earthY > height/2 + 0.5 || earthY < height/2 - 0.5) {
			dirY = random(-1, 1);
		}

	//land masses start
			push();
			translate(width/2, height/2)
			rotate(revert);
				push()
				rotate(12.45);
				fill(6, 181, 153);
				ellipse(landXY1-50, landXY1, 16.8, 39.5);
					landXY1 += dirX * (speed/2); // speed cut to modify motions
					landXY1 += dirY * (speed/2); 
				pop();
				push()
				rotate(1);
				fill(6, 181, 153);
				ellipse(landXY2-10, landXY2-25, 12.725, 21.3);
					landXY2 += -dirX * (speed/4); // directions reversed to modify motions
					landXY2 += -dirY * (speed/4); 
				pop();
				push()
				rotate(20);
				fill(6, 181, 153);
				ellipse(landXY2-13, landXY2-14, 21.21, 26.1);
				pop();
				push()
				rotate(-10);
				fill(6, 181, 153);
				ellipse(landXY2-1, landXY2-15, 15.9, 20.4);
				pop();
				push()
				rotate(0);
				fill(6, 181, 153);
				ellipse(landXY2-3.4, landXY2-7.6, 15.9, 20.4);
				pop();
				push()
				rotate(20);
				fill(6, 181, 153);
				ellipse(landXY3+36, landXY3+18.7, 30, 46.12);
					landXY3 += dirX * (speed/3); 
					landXY3 += -dirY * (speed/3); //direction reversed to modify motion 
				pop();
				push()
				rotate(-20);
				fill(6, 181, 153);
				ellipse(landXY4+30, landXY4-40, 18, 18.5);
					landXY4 += -dirX * (speed/6); // direction reversed to modify motion
					landXY4 += dirY * (speed/6); 
				pop();
			pop();

	// paper airplane start
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		for (var i = 0; i < sec/3; i++) {
		rotate(mil/30); //motion produced via rapid milliseconds
		stroke(160, 42, 56)
		strokeWeight(1)
		line(230-width/2, 140.3-height/2, 220-width/2, 140.3-height/2);
		}
		pop();
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		for (var i = 0; i < 10; i++) {
		rotate(mil/30); //motion produced via rapid milliseconds
		stroke(160, 42, 56)
		strokeWeight(2)
		line(230-width/2, 140.3-height/2, 220-width/2, 140.3-height/2);
		}
		pop();
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		rotate(sec*6); //Dividing function to rotate in a full revolution in 60 ticks
		fill(160, 42, 56)
		triangle(240-width/2, 135.8-height/2, 234-width/2, 140.4-height/2, 240-width/2, 144.8-height/2);
		fill(187, 42, 47)
		triangle(240-width/2, 130.7-height/2, 264-width/2, 140.5-height/2, 240-width/2, 150.43-height/2);
		stroke(2, 53, 61)
		strokeWeight(1)
		line(240-width/2, 140.3-height/2, 251-width/2, 140.3-height/2)
		pop();

	//comet start
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		rotate(min); //Dividing function to rotate in a full revolution in 60 ticks
		noStroke();

		//darkStreaks
		fill(129, 166, 176);
		rect(247.2-width/2, 67.3-height/2, 34.06, 2, 30);
		fill(129, 166, 176);
		rect(242.7-width/2, 73.635-height/2, 34.06, 2, 30);
		fill(129, 166, 176);
		rect(249.16-width/2, 81.05-height/2, 34.06, 2, 30);

		//lightStreaks
		fill(195, 215, 216);
		rect(252.66-width/2, 62.941-height/2, 35.35, 3.05, 30);
		fill(195, 215, 216);
		rect(230.14-width/2, 69.33-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(243.5-width/2, 78.22-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(233.8-width/2, 82.06-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(252.66-width/2, 86.25-height/2, 35.35, 3.05, 30);

		//cometBackLayer
		fill(195, 215, 216);
		ellipse(269.83-width/2, 74.6-height/2, 27.66, 26.07);

		//cometMidLayer
		fill(129, 166, 176);
		ellipse(270.8-width/2, 74.6-height/2, 22.76, 23.33);

		//cometBase
		fill(37, 60, 84)
		ellipse(272.4-width/2, 74.6-height/2, 20.64, 20.64);
			push();
			//comet craters
			translate(272.4-width/2, 74.6-height/2);
			rotate(mil/1.5); // rotates craters within the comet
			fill(195, 215, 216);
				push();
				rotate(20);
				ellipse(1.2, -7, 6, 1.6)
				pop();
				push();
				rotate(-20);
				ellipse(0.75, 8, 6, 2.5)
				pop();
				push();
				rotate(50);
				ellipse(-1, 8, 6, 2)
				pop();
			pop();
		pop();

	fill(163, 77, 47);
	textSize(15);
	text(nf(revert, [2], [0]) + " : " + nf(min, [2], [0]) + " : " + nf(sec, [2], [0]), width/2 - 35, 470); // added nf to second function to get two digits. 
}

My idea stemmed around a nuanced, playful version of the act of orbiting — I wanted to show the journey of a paper airplane flying around the world, placing it at a scale similar to a handful of satellites. The plane’s movement represents seconds, the comet’s orbit’s minutes, and the rotation of the land masses on the earth represents hours, while the smaller dashed line are a creative play on figuring out how to use milliseconds to display agile, not-jittery movement.

After sketching my initial ideas down, I used Adobe Illustrator to plan out the look of the elements as well as the program’s composition.

rmanagad-lookingoutwards-06-sectione

Creator: Felix Turner

Title of Work: Noise Field

Year of Creation: 2011

Link to Project Work: https://airtightinteractive.com/demos/processing_js/noisefield08.html

Link to Artist Bio: https://www.airtightinteractive.com/about/

 

Noise Field is an interactive, mouse-based random activity program running on p5.js. As a function, Noise Field uses Perlin Noise — a gradient-based procedural algorithm that increases the believability of computer-generated animations –and noise parameters based on mouse movement and placement to generate colored ellipses from central points. With that being said, randomness is present as clicking produces a random set of parameters for the movement of the ellipses.

This work is influential in expanding my mindset towards the possibilities of using p5.js as a communicative medium — I’d like to eventually be able to apply Processing towards the creation of interactive web-based programs that use natural elements.

rmanagad-project05-sectione

sketch

// Robert Managad
// Section E
// rmanagad@andrew.cmu.edu
// Project-05-Wallpaper


//colors

var petalGR = 47;
	petalGG = 168;
	petalGB = 144;
var petalRR = 239;
	petalRG = 119;
	petalRB = 99;

var petalXL = 15; // left petal X-co
	petalYLR = 21.5; // left petal Y-Co; right petal Y-Co
	petalXM = 21.5; // middle petals X-Co
	petalYMT = 15.5; // top middle petal Y-co
	petalYMB = 27.5; // bottom middle petal Y-co
	petalXR = 27; // right petal X-co

//size of petals

var petalW = 4.6
var petalH = 12.3

var spacingX = 30; // x-displacement between row elements
	spacingY = 30; // y-displacement between row elements

function setup() {
    createCanvas(300, 300);
    background(252, 241, 235);
    noLoop();
}

function draw() {
	for (var y  = 0; y < 12; y++) { // 12 iterations of rows
        for (var x = 0; x < 12; x++) { // 12 iterations of columns
        	if (y % 2 == 0 & x % 2 == 0) {  // only the even rows of this variant are drawn
        		var Lpy = (petalYLR + y * spacingY) * (sqrt(3)/2); 
        		var Tpy = (petalYMT + y * spacingY) * (sqrt(3)/2);
        		var Bpy = (petalYMB + y * spacingY) * (sqrt(3)/2);
        		var Rpy = (petalYLR + y * spacingY) * (sqrt(3)/2);
            	var Lpx = (petalXL + x * spacingX) - 5; 
            	var	Tpx = (petalXM + x * spacingX) - 5; 
            	var Bpx = (petalXM + x * spacingX) - 5; 
            	var Rpx = (petalXR + x * spacingX) - 5; 
            	var	petalRR = 239;
				var	petalRG = 119;
				var	petalRB = 99;
            }
            else if (y % 2 == 1 & x % 2 == 1) { // only the odd rows of this variant are drawn
            	var Lpy = ((petalYLR + y * spacingY) * (sqrt(3)/2)); 
        		var Tpy = ((petalYMT + y * spacingY) * (sqrt(3)/2));
        		var Bpy = ((petalYMB + y * spacingY) * (sqrt(3)/2));
        		var Rpy = ((petalYLR + y * spacingY) * (sqrt(3)/2));
            	var Lpx = ((petalXL + x * spacingX) - 5); 
            	var	Tpx = ((petalXM + x * spacingX) - 5); 
            	var Bpx = ((petalXM + x * spacingX) - 5); 
            	var Rpx = ((petalXR + x * spacingX) - 5); 
            	var	petalRR = 47;
				var	petalRG = 168;
				var	petalRB = 144;
            }
            	noStroke();
				fill(petalRR, petalRG, petalRB);
				ellipse(Lpx, Lpy, petalH, petalW); //left petal
				ellipse(Tpx, Tpy, petalW, petalH); // top petal
				ellipse(Bpx, Bpy, petalW, petalH); // bottom petal
				ellipse(Rpx, Rpy, petalH, petalW); // right petal
        }
    }
}

I played with several ideas for my background — from merit badges to patchwork — before settling on my final concept: clover petals. I wanted to explore using nested loops and if/else statements to control where elements would appear, and how they can be controlled to do just that. I used Illustrator to plan out my composition beforehand, in addition to primary sketches.

rmanagad-lookingoutwards-05-sectionE

Creator: Jing Zhang

Title of Work: Ford Fiesta

Year of Creation: 2016

Link to Project Work: http://www.mazakii.com/Ford-Fiesta

Link to Artist Bio: http://www.mazakii.com/About-Contact

Ford Fiesta is a commissioned illustration created by London-based Chinese designer, Jing Zhang. To develop this work, Zhang used 3/D rendering programs in Adobe Illustrator, modifying two-dimensional vector images (such as rounded rectangles) and putting them into isometric perspective. To animate the work, Zhang used keyframes in Adobe AfterEffects. Through loop-based algorithms, Adobe Illustrator creates vector-based elements that can be modified perspective-wise through the x, y, and z-axes.

As a designer focused on communications, Jing Zhang’s entire body of work serves as an influence in my work. I’m fascinated in what factors contribute to the believability and messages of two-dimensional images, as well as how concepts can be delivered and nuanced. The Ford Fiesta illustration is an example of this — Zhang emphasizes the car by shrinking the proportions of the architecture and using contrasting colors, which leads to our engagement with the images present in the animation.

Ford Fiesta — Jing Zhang

rmanagad-Project04-StringArt-SectionE

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-04

var ellipX1 = 0; //x variable of outer ellipses
var ellipX2 = -82; // x variable of inner ellipses
var ellipY1 = -88; // y variable of outer ellipses
var ellipY2 = 0; // y value of inner ellipses


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

function draw() {
	background(255);
	noStroke();
	for (var i = 0; i < 24; i++) { // creates 24 iterations of ellipses and lines
		drawCircle1(i); // created a function below for drawing each ellipse
	}
	//parabolic organism in the center
    var startpointX = 100; // initial outer constraints
    var endpointX = 200;
    var dotX1 = lerp(startpointX, endpointX, .125);
    var dotX2 = lerp(startpointX, endpointX, .25);
    var dotX3 = lerp(startpointX, endpointX, .375);
    var dotX4 = lerp(startpointX, endpointX, .625);
    var dotX5 = lerp(startpointX, endpointX, .75);
    var dotX6 = lerp(startpointX, endpointX, .875);

    var startpointY = 150 // initial outer constraints
    var endpointY = 245
    var dotY1 = lerp(startpointY, endpointY, .125);
    var dotY2 = lerp(startpointY, endpointY, .25);
    var dotY3 = lerp(startpointY, endpointY, .375);
    var dotY4 = lerp(startpointY, endpointY, .625);
    var dotY5 = lerp(startpointY, endpointY, .75);
    var dotY6 = lerp(startpointY, endpointY, .875);

    var yconver = constrain(mouseY, 150, 245); // modifies shape of organism based on mouse position
    var xconver = constrain(mouseX, 100, 200);

    //application of variables
    stroke(0);
    strokeWeight(2);
    line(dotX1, yconver, xconver, dotY3);
    line(dotX2, yconver, xconver, dotY2);
    line(dotX3, yconver, xconver, dotY1);
    line(dotX4, yconver, xconver, dotY1);
    line(dotX5, yconver, xconver, dotY2);
    line(dotX6, yconver, xconver, dotY3);
    line(dotX1, yconver, xconver, dotY4);
    line(dotX2, yconver, xconver, dotY5);
    line(dotX3, yconver, xconver, dotY6);
    line(dotX4, yconver, xconver, dotY6);
    line(dotX5, yconver, xconver, dotY5);
    line(dotX6, yconver, xconver, dotY4);

}
		
function drawCircle1(dotcount) {
	push();
	translate(width/2, height/2); // translation to center of canvas
	rotate(radians(dotcount * 15)); // rotates about the center -- 24 count of ellipses.
	rotate(mouseY);
	fill(0)
	ellipse(ellipX1, ellipY1, 8, 8);
	pop();
	push();
	translate(width/2, height/2);
	rotate(radians(dotcount * 15));
	rotate(mouseY);
	fill(0)
	ellipse(ellipX2, ellipY2, 4.75, 4.75);
	pop();
	push();
	translate(width/2, height/2);
	rotate(radians(dotcount * 15));
	rotate(mouseY);
	stroke(0);
	strokeWeight(2);
	line(ellipX1, ellipY1, ellipX2, ellipY2); // lines follow ellipses.
	pop();
}

I was inspired by the form and movement of birds during the initial ideation phase of my project, as well as animal nests. In thinking about these two concepts, I developed an interactive mouse-based string work that changes the “form” of the organism inside of the parabolic nest. As always, I used Illustrator to determine my composition (and widths, heights, coordinates) prior to starting the code.

 

rmanagad-lookingoutward-04-sectionE

Creator: K A R B O R N

Title of Work: The Wondrous Wobbulator Machine for Young and Old Like

Year of Creation: 2015

Link to Project Work: http://artwork.karborn.com/The-Wondrous-Wobbulator-Machine-for-Young-and-Old-Alike

Link to Artist Bio: http://www.karborn.com/

John Karborn, a new-media audio-visual video artist, developed The Wondrous Wobbulator Machine for Young and Old Alike by feeding geometric still frames into a custom-built wobbulator, a device that visualizes frequencies and wavelengths of a given sound. To record these, he uses analog video sequences (VHS, for example) while a given frequency is being passed through the wobbulator — what results is the geometric animation to the right. Algorithmically, the wobbulator utilizes a combination of manual control feedback and an oscillator that produces a visual representation of the image being manipulated by the given sound waves.

The Wondrous Wobbulator Machine for Young and Old Alike

 

My current work is in the field of audio-visual performance art, which makes K A R B O R N’s methodologies valuable towards my practice. As a whole, K A R B O R N’s work follow similar themes, using a combination of narratives and acting and sound and still frames to produce video works and documentations that are altered by time and noise.

rmanagad-project03-sectionE

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-03

//changes in color, position, size, and angle
//contrary behaviours in rotations.

//attributes of the wave vector "big circle"
var circleHW = 200; //height and width of circle
	circleColorR = 141;
	circleColorG = 168;
	circleColorB = 186;
	circlestrokeW = 0;

//attributes of dot rings. All rotating objects follow these conventions.
var dotcircleHW = 100;
	dotcircleStrokeW  = 0;
	dotstrokeW = 0; 

	dotcircle2HW = 200
	dotcirclestrokeW2 = 0;
	dotstrokeW2 = 0;


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

function draw(){
	background(5);
	//wave vector
	noFill();
	stroke(141, circleColorG, 186);
	strokeWeight(circlestrokeW);
		ellipse(width/2, height/2, circleHW, circleHW);
			circleHW = mouseY*4; // Size of circle gets bigger as mouse moves downward by a factor of 4.
			circleColorG = mouseX/3; // color of circle changes as mouse moves downward by a factor of 1/3.
			circlestrokeW = mouseY/25; // strokeweight of circle changes as mouse moves downward by a factor of 1/25.
	
	//dot circle outer
		noFill();
		stroke(circleColorR, 168, 186);
		strokeWeight(dotcirclestrokeW2);
			ellipse(width/2, height/2, dotcircle2HW, dotcircle2HW);
				dotcircle2HW = mouseY*8; // size of circle gets bigger as mouse moves downward by a factor of 8
				circleColorR = mouseX/3;// Red channel of circle changes as mouse moves downward by a favtor of 1/3
				dotcirclestrokeW2 = mouseY/20;// strokeweight changes as mouse moves downward by  factor of 20
	//dots outer
	fill(5);
	stroke(141, circleColorG, 186);
	strokeWeight(dotstrokeW2);
	
	push(); //performing rotations only for these elements
		translate(width/2, height/2);
		rotate(-mouseY); //negative mouseY makes element rotate counter-clockwise.
		//dotcircle is the diameter of the orbited circle, placing each dot at the edge of the circle when the other coordinate is 0.
			ellipse(dotcircle2HW/2, 0, dotcircle2HW/8, dotcircle2HW/8); 
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse(dotcircle2HW/2, dotcircle2HW/2, dotcircle2HW/8, dotcircle2HW/8);
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse(0 - dotcircle2HW/2, 0, dotcircle2HW/8, dotcircle2HW/8); 
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse(0 - dotcircle2HW/2, 0 - dotcircle2HW/2, dotcircle2HW/8, dotcircle2HW/8); 
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse(0, dotcircle2HW/2, dotcircle2HW/8, dotcircle2HW/8); 
			dotstrokeW2 = mouseY/15;
	pop();
	push(); 
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse(0, 0 -dotcircle2HW/2, dotcircle2HW/8, dotcircle2HW/8);
			dotstrokeW2 = mouseY/15;
	pop();



	//dot circle inner
	fill(5);
	stroke(circleColorR, 168, 186);
	strokeWeight(dotcircleStrokeW);
		ellipse(width/2, height/2, dotcircleHW, dotcircleHW);
			dotcircleHW = mouseY; // Expands at slower rate than first circle.
			circleColorR = mouseX/3;
			dotcircleStrokeW = mouseY/45;
	//dots inner
	fill(5);
	stroke(141, circleColorG, 186);
	strokeWeight(dotstrokeW);
	
	push(); //performing rotations only for these elements
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse(dotcircleHW/2, 0, dotcircleHW/5, dotcircleHW/5); //dotcircle is the diameter of the orbited circle.
			dotstrokeW = mouseY/80;
	pop();
	push();
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse(0 - dotcircleHW/2, 0, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop();
	push();
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse(0 - dotcircleHW/2, 0 - dotcircleHW/2, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop();
	push();
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse (0, dotcircleHW/2, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop();
	push();
		translate(width/2, height/2);
		rotate(-mouseY);
			ellipse (dotcircleHW/2, dotcircleHW/2, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop();
	push();
		translate(width/2, height/2);
		rotate(mouseY);
			ellipse (0, 0 - dotcircleHW/2, dotcircleHW/5, dotcircleHW/5);
			dostrokeW = mouseY/100;
	pop()
	

	}

My approach to this project came from motions emulated by a ship moving through space, with waves and particles approaching the person viewing the work by expanding in size. In my sketches, I explored multiple variants of rotational elements before choosing on ellipses to maintain simplicity. As always, I used Adobe Illustrator to assist me in mapping out the composition of the work.

rmanagad-sectione-lookingoutward-03

Creator: Can Pekdemir

Title of Work: Procedural Sculptures

Year of Creation: 2015

Link to Project Work: http://www.can-pekdemir.com/Procedural-Sculptures

Link to Artist Bio: http://www.can-pekdemir.com/About

Side view of Pekdemir’s procedural sculpture, which shows depths in the ridges formed.
Front view of Pekdemir’s procedural sculpture, showing its mimicry to a human bust.

Can Pekdemir is an Instanbul-based digital sculpture/video artist experimenting with the generation of bodily forms. Conventionally, his work is based in the digital and augmented reality realms where he focuses on applications of textures and morphs. The work above — part of a series titled Procedural Sculptures — are developed via procedural algorithms that mimic the pattern- and shape-making of natural-occurring forms. In his developmental process, Pekdemir focuses on modifications of the human form in ways often uncomfortable (such as headless quadrupeds) and structurally questionable  — this convention is applicable to his procedural sculptures, which only resemble a familiar outline.

As a designer, I see his work as a means of modifying human perception on figures symbolically, scientifically, representationally, and expressively — all fundamental factors of communications design. As an artist, Pekdemir adjusts the rules to develop new ways of seeing, which fascinates me — the algorithmic approach gives new way to developing forms for human utility.