``````//Robert Managad
//Section E
//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:

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/

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.

``````//Robert Managad
//Section E
//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.

Creator: Felix Turner

Title of Work: Noise Field

Year of Creation: 2011

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

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.

``````// Robert Managad
// Section E
// 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.

Creator: Jing Zhang

Title of Work: Ford Fiesta

Year of Creation: 2016

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

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.

``````//Robert Managad
//Section E
//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(mouseY);
fill(0)
ellipse(ellipX2, ellipY2, 4.75, 4.75);
pop();
push();
translate(width/2, height/2);
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.

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.

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.

``````//Robert Managad
//Section E
//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.

Creator: Can Pekdemir

Title of Work: Procedural Sculptures

Year of Creation: 2015

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