Author: Carley

Carley Johnson Abstract Clock

sketch

/*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 secondsRadius = radius * 0.72;
  var minutesRadius = radius * 0.60;
  var hoursRadius = radius * 0.50;
  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 ) {
      x = cos(angle*i) * secondsRadius; 
      y = sin(angle*i) * secondsRadius;
      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

sketch

/*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

sketch

/*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

sketch

/*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.

View this post on Instagram

This project was made for the presentation of new chocolate Ruby. The idea was to create a set of elements (cakes) that together would form a single composition. As a result, we got algorithmically modeled cake that consisted of 81 individual cakes, every single was unique in shape. This composition was made using a graphical algorithm editor Grasshopper that can build forms from the simple to the awe-inspiring. Inspyred by Matthew Shlian we took a pyramid and changed the tilt of each object and the area of each top plane, programming and scripting the set of cakes. All of the cakes are different. Inside: mousse with chocolate Ruby and meringue, ganache Ruby. I added a berry confit to the recipe to emphasize the berry flavor of chocolate and add accent. Also the biscuit with Ruby, with raspberries and of course a crispy layer with chocolate and royalty. . Этот проект был сделан специально для презентации нового шоколада Ruby от Cacao Barry в Шанхае. Идея заключалась в том, чтобы создать множество элементов (пирожных), которые вместе будут формировать единую композицию. В итоге мы получили динамический рисунок который состоит из 81 пирожного, каждое из которых уникально по форме. Эта композиция была сделана с использованием специального графического редактора алгоритмов Grasshopper, который может генерировать формы от простых до совершенно впечатляющих. Под впечатлением работ Matthew Shlian мы взяли пирамиду и изменили наклон каждого объекта и площадь каждой верхней плоскости, программируя набор пирожных. Все они разные по форме. Внутри: мусс с шоколадом Руби и меренгой, ганаш Руби, чтобы подчеркнуть ягодный вкус шоколада и добавить акцент я добавила в рецепт ягодное конфи, также бисквит с Руби с малиной и конечно хрустящий слой с шоколадом и роялтином. @dinarakasko #grasshopper3d #rhino3d#okmycake #pastryinspiration #chocolatejewels #pastryart #cake #kharkov #харьков #chefsofinstagram #gastroart #pastryart #dinarakasko #chefstalk #pastry #chefs #instadessert #foodporn #beautifulcuisine #siliconemould #baking #cakes #dessert #cakestagram #dessertporn #parametric #art #geometry #designmilk#торт#artselect

A post shared by Dinara Kasko (@dinarakasko) on

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

View this post on Instagram

Experiment. Tart #1 These tarts were made for the new issue of SoGood Magazine @sogoodmag This work is the result of collaboration with José Margulis @j.margulis Great talented artist from Venezuela who works with Geometric abstractionism and Kinetic art. He creates different 3D sculptures, visual compositions of colorful plastic sheets. I tried to transform his creations, made of plastic, aluminum and acrylic, into something edible, using basic techniques and ingredients. Yet, I wanted to preserve his message and feel. It had to be an installation-performance where the art was created by José Margulis and then transformed by me into an edible piece of art which would be later consumed – thus disappear. Composition: streusel, almond cream, confit strawberry – red currant, mousse with white chocolate Read more on my website dinarakasko.com . Експеримент. Тарт #1 Эти тарты были сделаны для нового выпуска кондитерского журнала SoGood Magazine. Эта работа является результатом совместной работы с José Margulis @j.margulis талантливым скульптором из Венесуэлы, который работает с геометрическим абстракционизмом и кинетическим искусством. Он создает различные 3D-скульптуры, визуальные композиции из красочных пластиковых листов. Я попыталась превратить его творения, сделанные из пластика, алюминия и акрила в кондитерские изделия, используя основные техники и ингредиенты. Тем не менее, я хотела сохранить его посыл и концепцию. Это должна была быть инсталляционная работа в которой мы трансформировали, превратили объект искусства в нечто съедобное, что вскоре исчезнет, подчеркивая эфемерность искусства, его мимолетность в нашей жизни. Внутри: ореховый штройзель, выпеченный миндальный крем, конфи клубника-красная смородина, мусс с белым шоколадом. Читайте всю статью на моем сайте dinarakasko.com . #dinarakasko #cake #desserts #pastrychef #chefstalk #okmycake #pastry #pastryinspiration #cakes #kharkov #харьков #pastryart #sweets #geometry #kineticart #art #jmargulis #geometricart #sculpture #kinetic #parametric

A post shared by Dinara Kasko (@dinarakasko) on

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

Carley Johnson Project 02 Section E

sketch

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

var skinColor = 250
var headH = 175
var headW = 150
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) 
   ellipse(300, 200 , headW, headH) //Head

   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)
     headW = random(150, 200)
     headH = random(150, 200)
     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.