## Carley Johnson Abstract Clock

``````/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project-06
*/

function setup() {
createCanvas(450, 450);
background(34, 48, 86);
}

function draw() {
strokeWeight(2);
translate(width/2, height/2);
background(34, 48, 86);

var radius = int(min(width, height) / 2);
var numPoints = 60;
var angle = TWO_PI/numPoints;

var clockDiameter = radius * 1.8;

var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;

strokeWeight(2);
stroke(255);
beginShape(POINTS);
var i = 0;
while (i < numPoints ) {
vertex(x, y);
i++;
}
endShape();

strokeWeight(2);
noFill();
ellipse(0, 0, (cos(m) * minutesRadius) * 2, (sin(m) * minutesRadius) * 2);

stroke(255, 50, 90)
strokeWeight(5);
noFill();
ellipse(0, 0, (cos(h) * hoursRadius) * 2, (sin(h) * hoursRadius) * 2);

strokeWeight(1);
noFill();
ellipse(0, 0, (cos(s) * secondsRadius) * 2, (sin(s) * secondsRadius) * 2);
}``````

This was a tough project as the map function and looping (as well as the unused array function) are still a bit new and nebulous to me. Working through it helped, though. Math was never my strong suit, so these projects are getting a lot tougher. This idea came from a nautical theme, from the colors and the circles sort of like a compass (also with the notches on the outer rim). I would’ve liked to make the shapes more complex, but I focused my energy on mapping the time instead.

## Carley Johnson Looking Outwards 06

This week I will be discussing art created by Rami Hammour, and alum of the Rhode Island School of Design. His work deals in generation and randomness, not without limitations though. Each art piece has a different set of parameters so I’ll discuss two examples.

“A Text of Random Meaning”

“This text-like visualization is a mapping of a “Register and Taps” random number generator in action. The drawing comparing three registers: 9, 11 and 13. It shows the difference in values, and counting of the generated numbers while highlighting the taps.” -Rammi Hammour

The limits of this piece are in the three different registers and the visual part of the piece is able to have some sense of flow and form because of it.

“Exhaustive Permutation and Bubble Sort”

“A 30-60-90 Triangle could meets with another identical triangle in defined 7 different ways. If no repetition occurred this will yield an exhaustive 5040 assembly. 8 triangles are needed to exhaustively have all 7 cases in each assembly, also conditional to no repetition occurring.”

Studying the purpose of ‘randomness’ in computational art is that really, it’s hard to get completely random results, as otherwise a piece might be limitless. In order to make the piece function and flow some limitation must be present. Even in the example from class with the “limitless” moving squares. They were limited by the canvas, by color, and by size though labeled random.

## Carley Johnson Project 05

``````/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 05
*/

var d = 25;

function setup() {
createCanvas(640, 480);
background(255, 228, 233);
}

function draw() {
for(var y = 0; y < 20; y += 2) {
for(var x = 0; x < 20; x += 3) {

// Bird body
fill(0, 223, 252);
stroke(0);
rect((x*d * 1.5 - 185) + y * 25,
25 + y*d * 2, d + 9, d + 2,
0, 20, 20, 20);

//Bird beak
fill(255, 178, 76);
stroke(0);
triangle((x*d * 1.5 - 152) + y * 25, 35 + y*d * 2,
(x*d * 1.5 - 152) + y * 25, 40 + y*d * 2,
(x*d * 1.5 - 140) + y * 25, 35 + y*d * 2)

//Bird eye
fill(0);
stroke(0);
ellipse((x*d * 1.5 - 160) + y * 25, 33 + y*d * 2,
3, 3)

//Bird wing
fill(154, 242, 253);
stroke(142, 216, 252);
bezier((x*d * 1.5 - 184) + y * 25, 38 + y*d * 2,
(x*d * 1.5 - 175) + y * 25, 55 + y*d * 2,
(x*d * 1.5 - 170) + y * 25, 55 + y*d * 2,
(x*d * 1.5 - 160) + y * 25, 38 + y*d * 2)

//Bird food
fill(255, 178, 76);
stroke(0);
ellipse((x*d * 1.5 - 110) + y * 25, 33 + y*d * 2,
5, 5)
}

}

}

``````

I knew I wanted to do birds, because I think birds are an adorable and eccentric pattern. (I have a rain jacket with a repeating bird silhouette pattern on it that I love, pictured above) so I chose that. For a while I was trying to create five thousand variables for each individual shape, but that was making different patterns with each shape, not following where the body was. Then I realized that I could simplify the process by using the same variables (which also unified where the objects appeared) and had to live with the retrospective embarrassment of taking so long to figure it out. But I think this is adorable, so, worth it!

## Carley Johnson Looking Outwards 5

Print Fiction was a completely digital art galley produced and curated by Micheal Seibert in 2012. He put together digital art by artists (including himself) and displayed them all in a digital gallery (about 8 rooms total) created using Unity. The person can explore the gallery using the usual controls a first-person shooter might have. All of the artists gave different “types” of digital art from 3D sculptures to flat paintings, which creates a large mass of different types of 3D graphics, some being shown as 2D images and some being explored in a 3D space as 3D physical art. I like this project, because it really does seem like “the way of the future” to start opening larger virtual art galleries, which I could see becoming a big part of the AR/VR unfolding market.

This is the full space of the exhibit, separated into rooms.

## Carley Johnson Looking Outwards 04

This week I am inspired by the brief installation piece (already finished with its short run) in Berlin created by onformative called Meandering River. It was up July 28-30. I love how this piece seeks to unite the seemingly opposite feelings of nature versus technology by using sound and image (and algorithms) to show the ebbing and flowing of rivers over time. The algorithm is meant to randomize the patterns of the river, changing them and creating as they might actually exist in real time. The sound then interprets the river’s movement and so also constantly changes to mimic and complement the ever-evolving visual landscape.  In this way, the artist hopped to create a sense of moving through time, getting lost in the movement of a river created by visual art and sound. I would have loved to see this piece, as I can just imagine getting lost and spending hours listening to how the music changes and watching the visuals, knowing that each moment is being generated and changed in real time like a river. It’d be fun to spend some time near an actual rushing body of water and then see this exhibit to judge how they compare.

A photo of the visual detail created by the algorithm, which is displayed over a series of screens.

## cbjohnso line drawing

``````/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Lab 3
*/

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

function draw() {
background(200);
for (var i = 20; i < 400; i += 20) {

stroke(30, 70, 80)
line(1.2*i, 17, 5*i, 100);

line(1.5*i, 120, 1.2*i, 300);

line(.7*i, 0, 1.1*i, 30);

stroke(155, 190, 20)
line(.6*i, 0, 1.1*i, 140);

line(.7*i, 25, 1*i, 145);

line(.7*i, 30, 1.8*i, 160);

line(.8*i, 50, 2.4*i, 160);

stroke(150, 70, 10)
line(0*i, 300, 2.4*i, 160);

line(1*i, 240, 6*i, 300);

stroke(30, 50, 50)
line(0*i, 240, 2*i, 100);

line(.3*i, 200, 8*i, 100);

}

}

``````

This project was not one of my favorites, as I missed a few of the classes on for() function and had to do more in depth learn-by-doing. I also just don’t think string art is super attractive. HOWEVER, now that I know the for() function I can definitely think of other uses for it, as incrementation is really helpful and can also simplify some tedious coding.

## Carley Johnson Project 3

``````/*Carley Johnson
cbjohnso@andrew.cmu.edu
Section E
Project 3
*/

var x = 80;
var y = 30;
var w = 12;
var h = 12;
var starR = 252
var starG = 234
var starB = 109
var moonR = 236
var moonG = 236
var moonB = 236
var moonR2 = 109
var moonG2 = 110
var moonB2 = 106
var bckgrndR = 37
var bckgrndG = 21
var bckgrndB = 66

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

function draw() {
background(bckgrndR, bckgrndG, bckgrndB)

fill(252, 234, 109)
noStroke()
ellipse(mouseX, mouseY, 10, 10) //constellation

fill(moonR, moonG, moonB)
ellipse(100, 100, 80, 80) //moon

fill(moonR2, moonG2, moonB2)
ellipse(115, 100, 50, 70) //moon dark side

stroke(252, 234, 109)
line(mouseX, mouseY, pmouseX, pmouseY);
print(pmouseX + ' -> ' + mouseX); //constellation maker

noStroke()
fill(starR, starG, starB) //Begin stars for night sky
ellipse(x, y, w, h);

ellipse(x + 80, y + 310, w, h); //star 1

ellipse(30, y + 400, w, h - 2); //star 2

ellipse(x + 10, y + 190, w, h); //star 3

ellipse(x + 200, y +30, w, h); //star 4

ellipse(x + 250, y + 90, w - 2, h - 2); //star 5

ellipse(x + 270, y + 380, w, h); //star 6

ellipse(x + 180, y + 30, w - 2, h -2); //star 7

ellipse(x + 400, y + 75, w - 2, h - 2); //star 8

ellipse(x + 420, y + 300, w, h); //star 9

ellipse(x + 370, y + 130, w - 2, h - 2); //star 10

ellipse(x + 500, y + 30, w, h); //star 11

ellipse(x + 20, y + 285, w, h); //star 12

ellipse(x + 120, y + 120, w - 2, h -2); //star 13

ellipse(x + 145, y + 200, w, h); //star 14

ellipse(x + 500, y + 300, w, h); //star 15

ellipse(x + 200, y + 205, w - 2, h); //star 16

}

function mouseMoved() {
starB = starB + 3;
if (starB > 250) {
starB = 109;
}
}

function mousePressed() {
if ( moonR === 236) {
moonR = 252;
} else {
moonR = 236;
}

if ( moonG === 236) {
moonG = 234;
} else {
moonG = 236;
}

if ( moonB === 236) {
moonB = 109;
} else {
moonB = 236;
}

if ( moonR2 === 109) {
moonR2 = 252;
} else {
moonR2 = 109;
}

if ( moonG2 === 110) {
moonG2 = 234;
} else {
moonG2 = 110;
}

if ( moonB2 === 106) {
moonB2 = 109;
} else {
moonB2 = 106;
}

if ( bckgrndR === 37) {
bckgrndR = 108;
} else {
bckgrndR = 37;
}

if ( bckgrndG === 21) {
bckgrndG = 214;
} else {
bckgrndG = 21;
}

if ( bckgrndB === 66) {
bckgrndB = 251;
} else {
bckgrndB = 66;
}

if ( starR === 252) {
starR = bckgrndR;
} else {
starR = 252;
}

if ( starG === 234) {
starG = bckgrndG;
} else {
starG = 234;
}

if ( starB === 109) {
starB = bckgrndB;
} else {
starB = 109;
}

}

``````

This was fun! Move your mouse to make the stars twinkle and create a shooting star, and if the night isn’t your thing, click to turn the scene to daytime! It was tough juggling a lot of elements and variables, but I think this is quaint and I feel like I learned a lot twiddling with the different mouse functions.

## Carley Johnson-Looking Outwards- 03

I’m inspired this week by an Ukranian architectural chef named Dina Kasko. Kasko uses the term “architectural chef” to describe the process of her cake making. She creates 3D silicon molds for all of her cakes, coded using graphical algorithms inspired by and made with knowledge from her mathematical background. All of her molds use sharp, modern, geometrical architecture to shape beautiful and satisfying desserts.

I love this artist partly because I love dessert, but also partly because she is able to make such beautiful art using the exciting enigma that is the 3D printer. I suppose her algorithms are highly detailed and singular to each of her projects. One project (pictured bellow) required molds and calculations for 81 singular cakes to make the geometry of this full piece work the way it does. Though not minimalist in artistic style myself, I am fascinated by the satisfaction and beauty of Kasko’s sleek style.

This is her project where she used algorithms to 3D print 80+ individual cakes to create the geometric swirling effect.

Another project where the top geometric design is created from chocolate shaped from 3D molds

## Carley Johnson Project 02 Section E

``````/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Assignment 02A
*/

var skinColor = 250
var eyeColor = 226
var lipColor = 145
var lipCorner = 200
var hairLength = 220
var eyebrowH1 = 160
var eyebrowH2 = 155

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

function draw() {
background(182, 212, 115);

fill(112, 62, 40)
stroke(112, 62, 40)
rect(200, 90, 220, hairLength, 100, 100, 0, 0 ) //back hair

fill(255, skinColor, 180)
stroke(skinColor)

fill(128, eyeColor, 252)
stroke(70)
ellipse (275, 175, 10, 10) //Left Eye

fill(128, eyeColor, 252)
stroke(70)
ellipse (300, 175, 10, 10) //Right Eye

fill(255, 124, lipColor)
stroke(255, 124, 145)
bezier(275, lipCorner, 280, 210, 285, 210, 300, lipCorner) //mouth

fill(215, 106, 58)
stroke(215, 106, 58)
rect (270, 90, 125, 75, 0, 50, 0, 50) //bangs

fill(112, 62, 40)
stroke(112, 62, 40)
bezier(255, eyebrowH1, 270, eyebrowH2, 280, eyebrowH2, 280, eyebrowH1) //Left eyebrow

fill(112, 62, 40)
stroke(112, 62, 40)
bezier(290, eyebrowH1, 290, eyebrowH2, 300, eyebrowH2, 320, eyebrowH1) //right eyebrow

}

function mousePressed() {
skinColor = random(190, 250)
eyeColor = random(190, 270)
lipColor = random(60, 160)
lipCorner = random(220, 185)
hairLength = random(200, 300)
eyebrowH1= random(170, 160)
eyebrowH2 = random(160, 145)

}
``````

This was tough, a real learn-by-doing experience. Now I feel like I really understand variables and how to control them (like learning to add parameters to the ‘randomness’ under the mousePressed function) and am proud of this. It may not be the most complex face, but it definitely changes and the way the expression changes (done by changing the height of the corners of the mouth and eyebrows) which I really like.

## Carley Johnson Looking Outward 02- Section E

I was inspired by Herbert W Franke’s 1989 gallery entitled Homage A E.M. The thing that really got me inspired about this work was it’s blend of physical and digital. The series is based on real-time ballet movements, and then distorted and saturated for effect. I love when artists are inspired by the movement of the body, and blending dance and software had to be a particularly difficult challenge.

What’s exciting about this art is that it develops the primitive motion-capture software first developed by Eadweard Muybridge (whom Franke dedicated the gallery to). The performance involved both a live performer and a live software engineer, as he was motion-capturing the dancer and painting an electronic mirror image live on screen. This function reminds me of the “painting”-like command we learned in p5.js, where the computer continually draws a shape at a certain speed, following your mouse and leaving a trail.

Hommage à E.M.- 1989 by Herbert W. Franke.