October 2022 – Page 16 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

SydneyCha-LookingOutwards-06

Dizzyline is a freelance graphic design and illustration brand based in Montpellier, France.

This piece not only has a refreshing color palette, but also a “randomized” pattern that is equal parts chaotic and structured. Though it has elements that appear to be placed randomly, there is an underlying grid that gives the piece somewhat of a finished look.

The generated elements are confined by pseudo-random numbers that limit their maximum size. For example, the medium-sized circles and crescent shapes are limited to the squares within the grid, while smaller circles are aligned in straight rows.

Pacman Clock

For this assignment, I thought it would be cool to build off last week’s wallpaper and make my Pacman a dynamic clock. It is supposed to be read left to right, then down. So the two horizontal Pacmans are the hour and minute (top and bottom) and the vertical Pacman is the seconds.

clock_asu

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  

function setup() {
  createCanvas(450,590);
}

function dotGrid() {
  var PADDING = 20;
  var ROWS =19;
  var COLUMNS =13;
  var CELL_COLOR = 'Blue'


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*34);
      var top = PADDING+(row*34.3);
      fill(random(255),random(255),random(255))
      circle(left,top,10);
    }
  }
}

function blueBaracades() {

  var PADDING = 40;
  var ROWS = 4;
  var COLUMNS = 3;
  var CELL_SIZE = 140;
  var CELL_COLOR = 'Blue'


  fill(0);
  stroke('Blue')
  strokeWeight(3);


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*CELL_SIZE);
      var top = PADDING+(row*CELL_SIZE);
      var size = CELL_SIZE - 50;
      rect(left,top,size,size);
    }
  }
}

function pacmanH(h){
  
  fill('yellow');
  noStroke();

    push()                                                //hour
    translate(10,height/3.2);
    rotate(radians(310));
    arc(h*10,h*10,35,35,radians(80),radians(35)/2);        // increments by *10 pixels to the right
    pop();
}

function pacmanM(m){

  fill('yellow');
  noStroke();

    push();                                              // minute
    translate(width,height/1.33);
    rotate(radians(140));
    arc(m*4,m*4,35,35,radians(80),radians(20)/2);        // increments by *4 pixels to the left
    pop();
}

function pacmanS(s){

  fill('yellow');
  noStroke();

    push();                                                // second 
    translate(2*width/3-7,height/26);
    rotate(radians(45));
    arc(s*6,s*6,35,35,radians(80),radians(20)/2);           // increments by *6 pixels down
    pop();

}



function draw(){
  background('Black');
  dotGrid();
  blueBaracades();

var s = second();
var h = hour();
var m = minute();

  pacmanH(h);
  pacmanM(m);
  pacmanS(s);


}

anders hoff’s recursion

Anders Hoff’s “Impossible Architecture” (2018) is an experiment in morphing a 2D, outline of a rectangle to create a completely random “floor plan”. These insane-looking pseudo-floor plans are mostly impossible to construct, but as we look at them we attempt to make sense of them. They look convincing, with the addition of more randomly generated elements – circles, line arrays, and thick lines that we perceive as columns, stairs, and thickened walls, respectively.

He explains this recursive process on his website: a randomly selected segment of a line is extruded to a random distance, which essentially adds 3 line segments to the outline. The selected line segment is then deleted, and the process repeats. This recursion speaks for Hoff’s principles of creating “interesting and complex behavior” from systems with simple rules. He takes inspiration from nature, geometry, writing systems, and – as is obvious from this experiment – architecture.

Looking Outwards 06 – Mr.Doodle

The artwork I immediately thought of was probably anything by Mr. Doodle. The earliest memory I have of seeing his work was when he had a small Instagram following about 7 years ago. His artwork is comprised of drawing lines and characters seemingly randomly across a page, or really any surface. The only rule he seems to follow is that every inch of the surface must be covered. But I think is interesting about his work is how in his randomness, you are searching for something. Almost like you are looking for a character or a pattern or any type of regulation. I think this differs from other artworks because although his work has little characters and themes, the way he approaches these pieces is still very random. He has no plan or logic of what goes where and why. I think randomness can be blurry in the art world in terms of whether or not it is a justifiable reason for a certain design choice, but in Mr. Doodle’s case, he is using that randomness to his advantage.

Link : https://www.designboom.com/art/watch-mr-doodle-mansion-black-white-cartoonish-signature-10-05-2022/

LO 06: Randomness

The project Sprawl by Mark J. Stock intrigues me with the correlation between randomness and naturalistic inspired art. Mark J. Stock is a generative artist who combines nature and computation in his work. In this project, he creates an organic branching structure growing on a regular array of blocks. The algorithm used sets particles at specific points and uses a random walk algorithm to let them grow until they strike a part of the existing block structure. The generated art creates a natural like growth pattern but it is interesting to see how randomness can contrast and interact with regulated forms such as the block array. I find it intriguing that some parts of the grown pattern can become restrained and seem not random but other parts are chaotic and sparatic. Stock claims that “this contrast refers to the creeping growth of our built environment”.

Link

Mug Clock

I was inspired by the coffee mugs that change based on the temperature of the liquid inside. However instead of temperature this mug changes based on time. The color depends on the hour of the day, the height depends on the minute and the steam depends on the second.

sketch

//Nakshatra Menon
//Section C

var cupHeight; 

function setup() {
    createCanvas(480, 480);
    background(246, 242, 240);
}



function draw() {
    push();
    colorMode(HSB);
    background(180, hour()*2, 42);         
    pop()
    fill(44, 28, 7);
    noStroke();
    rect(0, 300, width, 200);             
    cup(240, 300);
}


function cup(x,y){ // draws cup
    cupHeight = -minute();                           // makes the cup taller with the min  
    push();
    translate(x,y)                                   // center of the liquid becomes the origin 
    // cup handle
    strokeWeight(10);
    stroke(170);
    noFill(); 
    ellipse(70, cupHeight+40, 48-cupHeight, 44);

    // saucer
    strokeWeight(1);
    noStroke();
    c();                               // color 
    ellipse(0, 75, 120, 20);
    fill(0, 0, 0, 50);                // shadow 
    ellipse(0, 75, 100, 15); 
 
    // body of cup 
    strokeWeight(1); 
    noStroke();
    c();                               // color 
    beginShape();
        curveVertex(-76, cupHeight);
        curveVertex(-76, cupHeight);
        curveVertex(-62, 27);
        curveVertex(-38, 60);
        curveVertex(0, 75);
        curveVertex(38, 60);
        curveVertex(62, 27);
        curveVertex(76, cupHeight);
        curveVertex(76, cupHeight);
    endShape();

    // liquid
    strokeWeight(5);
    stroke(170);
    fill(110, 69, 17);
    ellipse(0, cupHeight, 150, 20);
    pop();

    // steam 
    push();
    translate(x, y-45)                      
    steam();
    pop();
}
    
function c(){ // changes the color based on the hour 
    // rounds up the number
    var f = ceil(hour()/2)                            
    var f2 = ceil(hour()/3)
    var f3 = ceil((hour()-12)/2)
    var f4 = ceil((hour()-12)/3) 

    // color changes based on hour 
    if(hour()>= 0 & hour()<= 4){                   // color goes from red to green
        fill((255-63*hour()),63*hour(), 0)
    }

    if (hour() > 4 && hour() <= 8){                 // color goes from green to blue
        fill(0,(255-63*f),43*f)
    }

    if(hour()> 8 && hour()<= 12){                   // color goes from blue to red
        fill(43*f2, 0, (255-43*f2))
    }

    if(hour()> 12 && hour()<= 16){                // color goes from red to green
        fill((255-43*(hour()-12)),43*(hour()-12), 0)
    }

    if (hour() > 16 && hour() < 20){             // color goes from green to blue
        fill(0,(255-43*(f3)),43*(f3))
    }

    if(hour()>= 20 && hour()<= 24){             // color goes from blue to red
        fill(43*(f4), 0, (255-43*(f4)))
    }   
}


function steam(){ // steam changes based on second 
    if (second()<=30){                           // when sec less/equal than 30
        fill(255, 255, 255, 120-2*second());    // the opacity changes depending on the second 
        beginShape()                            // shape 1 
            curveVertex(0, -12);
            curveVertex(0, -12);
            curveVertex(-16+second(), -34);
            curveVertex(-53+second(), -57);
            curveVertex(-52+second(), -107);
            curveVertex(21+second(), -119);
            curveVertex(10+second(), -158);
            curveVertex(47, -171);
            curveVertex(54-second(), -108);
            curveVertex(18-second(), -80);
            curveVertex(42-second(), -43);
            curveVertex(13-second(), -24);
            curveVertex(0, -12);
            curveVertex(0, -12);
        endShape();
    }
    if (second()>30){                           // when sec greater than 30
        fill(255, 255, 255, 120-2*second());   // opacity changes based on second 
        beginShape()                           // shape 2 
            curveVertex(0, -12);
            curveVertex(0, -12);
            curveVertex(-16-second(), -34);
            curveVertex(-53-second(), -57);
            curveVertex(-52-second(), -107);
            curveVertex(21-second(), -119);
            curveVertex(10-second(), -158);
            curveVertex(47, -171);
            curveVertex(54+second(), -108);
            curveVertex(18+second(), -80);
            curveVertex(42+second(), -43);
            curveVertex(13+second(), -24);
            curveVertex(0, -12);
            curveVertex(0, -12);
        endShape();
    }
}

Looking Outwards 06: Randomness

For my blog I chose to look at Rami Hammour’s “A Text of Random Meaning.”

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

As a person who loves orthography and considerations of language, this idea of a meaningless or random meaning text is fascinating. Semantics being such an important part of the way we understand language, how can we confront the randomness of meaning to a computer? How do we subconsciously assign meaning to these things? I think these questions are interesting to ponder, and while looking at this piece I found myself thinking quite a bit about that. It reminds me of similar pieces which attempt to recreate “language” in random forms. For instance the Library of Babel project, or Vulgarlang. Similarly, the use of random number generation (while not present in the Library of Babel or Vulgarlang) creates a sense of interconnected forms from which one might attempt to derive meaning. That is perhaps the most interesting part of randomness to me, to try to derive meaning from the noise, because undoubtedly what you find will never be the same twice.

looking-outwards 06

Clare Katyal

I am inspired by the randomness in the piece 4900 Colours: Version II by Gerhard Richter. Richter used a computer program to randomly assign a color to each 5×5 square, which is then put together with other squares in forty-nine 10×10 displays. The colors were randomly selected from a palette of 25 colors. This piece is very interesting because it was created in order to demonstrate the joy of looking at objects that at first glance, do not have any meaning other than being squares. And yet, the random colors and the patterns created by randomness can provoke deeper thought from viewers and inspire them to question how often colors appear randomly together. The arrangement of the panels was not done randomly, but by the artist. This makes one wonder if art is ever truly random, or if there is always a slight oversight or bias from the artist creating the art.

https://plus.maths.org/content/understanding-uncertainty-pure-randomness-art

Gerhard Richter, 2007

egg time(r)

hours = yolks in the pan. minutes = rotation of pan. month = eggs in carton. this one hurt my brain the most so far!

sketch

// jaden luscher
// jluscher@andrew.cmu.edu
// section a
// project-06: abstract clock
// EGG CLOCK
// the egg clock counts hours as eggs cracked in the pan,
// months as eggs in the carton, and minutes as the rotation of the pan.

// INITIATING VARIABLES
var xYolk = 0;    // first yolk starts north-facing
var yYolk = 40;   // distance between yolk and center of pan
var hr;
var mo;

function setup() {
  createCanvas(400, 300);
  noStroke();
  angleMode(DEGREES);
  frameRate(10);
}

function draw() {
  background(240);
  translate(150, 150);  // center of pan

  hr = hour() % 12; // convert 24 hour clock to 12
  mo = month();

  stovetop();

  // EGG WHITE
  fill(255);
  ellipse(0, 0, randomGaussian(110,1));

  // EGG YOLK
  push();
  for (var i = 0; i <= hr; i++) {
    eggYolk(xYolk, yYolk);
    rotate(360 / hr);
  }
  pop();

  // EGG CARTON
  eggcarton();
  monthcounter();
}

function stovetop() {
  // SHADOWS
  push();
  fill(220);
  rect(90, 90, -15, -240);
  rect(-90, 90, -15, -240);
  rect(90, 90, -240, -15);
  // GRATES
  noFill();
  strokeWeight(4);
  stroke(120);
  line(-150, 90, 90, 90);
  line(-150, 0, 90, 0);
  line(-150, -90, 90, -90);
  line(90, 90, 90, -150);
  line(0, 90, 0, -150);
  line(-90, 90, -90, -150);
  pop();
  // PAN
  push();
  fill(150);    // grey for pan
  rotate(minute()*6);
  minutecounter();
  ellipse(0, 0, 140);   // pan outer circle
  fill(120);
  ellipse(0, 0, 130);    // pan inner circle
  pop();
}

function eggYolk(xYolk, yYolk) {
  fill(255, 180, 0);
  ellipse(xYolk + noise(-1, 1), yYolk + noise(-1, 1), random (18, 20));
}

// PAN HANDLE ROTATES 360 DEGREES BY THE HOUR
function minutecounter() {
  push();
  fill(220, 20, 20);
  rect(-8, -80, 16, -50);
  ellipse(0, -130, 16);
  pop();
  rect(-6, 0, 12, -80);
}

function eggcarton() {
  push();
  fill(240, 230, 210);  // light grey
  rect(145, -95, 70, 190);
  fill(220, 220, 210);  // darker grey
  rect(215, -95, 35, 190);
  translate(165, -75);
  var x = 0;
  var y = 0;

  // EMPTY EGG CARTON (GREY DOTS)
  for (var j = 0; j < 2; j++) {
    for (var i = 0; i < 6; i++) {
      ellipse(x, y, 28);
      y += 30;
    }
    y = 0;
    x += 30;
  }
  pop();
}

function monthcounter() {
  push();
  translate(165, -75);
  fill(255);
  var x = 0;
  var y = 0;
  // EGGS FOR JANUARY TO JUNE
  for (var j = 0; j < constrain(mo, 0, 6); j++) {
    ellipse(x, y, 22);
    y += 30;
  }
  // EGGS FOR MONTHS JULY TO DECEMBER
  y = 0;
  x += 30;
  for (var j = 6; j < mo; j++) {
    ellipse(x, y, 22);
    y += 30;
  }
  pop();
}

Project 06- Abstract Clock

Graham Murtha

Section A

For this project, I wanted to document time with an apple tree/ deciduous tree. As the minute passes, the leaves change color from green to red, and at the end of each minute wilt off and blow away. As the hour passes, the ground that the tree is on grows more and more red as the leaves/apples fall to the ground. As the day passes, the background color (sky) gets darker and darker, until the last hour of the day, where it goes totally black. There is also a person under the tree trying to collect the falling foliage/apples.

sketch

// Graham Murtha
//Section A
//gmurtha@andrew.cmu.edu
//Project 06 Abstract Clock


// IF YOU STICK AROUND FOR A BIT THE LEAVES WILL WILT AND BLOW AWAY!!

var y = 0
function setup() {
    createCanvas(420, 480);
    background(200,200,255);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES);
}

function draw() {

    //background color of sky// CHANGES THROUGHOUT THE DAY- DARKEST AT THE 24TH HOUR
    var h = hour()
    var sky = map(h,0,24,255,0)
    background(50,100,sky);

    // outline
    stroke(200)
    noFill();
    strokeWeight(.5);
    ellipse(width/2,height/2.75, 300);

    // Tree trunk
    noStroke();
    fill(100,60,0)
    rect((width/2)-10,height-100,20,-210)
    triangle(width/2,height-130,(width/2)-20,height-100,(width/2)+20,height-100)


    //GROUND COVER - CHANGES WITH EVERY HOUR- BECOMES MORE RED AS THE HOUR CONTINUES

    var m = minute()
    var g = map(m,0,60,0,255) // red for ground fill
   
    fill(g,255-g,0);
    rect(0,height-100,width,100);


//recentering origin to the middle of the tree circle
   translate(width/2,height/2.75);


//APPLE PICKER
    var s1 = second()
    var p = map(s1,0,60,-100,100) // changing position under the tree
    fill(10)
    rect(p,150,20,40);
    ellipse(p+10,140,20);
    strokeWeight(3);
    stroke(10);
    line(p+2,190,p,210)
    line(p+18,190,p+20,210)
    line(p,150,p-12,170)
    line(p+20,150,p+33,170);
   
    //basket
    strokeWeight(1);
    fill(255,255,140);
    rect(p-15,170,50,20);


// BRANCHES (STATIC)
    stroke(100,60,0);
    strokeWeight(6);
   

    line(0,0,150,0);
    line(100,0,150,-30);
    line(100,0,150,30);

    line(0,0,-150,0);
    line(-100,0,-150,-30);
    line(-100,0,-150,30);

    push(); //top left quad
    rotate(120);
    line(0,0,150,0);
    line(100,0,150,-30);
    line(100,0,150,30);
    pop();

   push(); // top right quad
   rotate(60);
   line(0,0,150,0);
     line(100,0,150,-30);
    line(100,0,150,30);
   pop();

   push(); // bottom right quad
    rotate(-60);
   line(0,0,150,0);
    line(100,0,150,-30);
    line(100,0,150,30);
   pop();

   push(); // bottom left quad
   rotate(240)
   line(0,0,150,0);
    line(100,0,150,-30);
    line(100,0,150,30);
   pop();



//APPLES

    var s = second()
    var rg = map(s,0,60,0,255) // changing color (red-green)
    var x = 150
    var r = .2 // fall rate

    for (var i= 0 ; i < 30 ; i++) {
        //base geometry for apples
        rotate(15); 
        x -= r*sin(15);
        noStroke();
        fill(rg,255-rg,0);
        ellipse(x,y,30,15);
        ellipse(x-50,y,15,10);
        
        // falling geometry for apples (wilting)
        if(s>50 & s<60){
            rotate(15);
            noStroke();
            fill(rg,255-rg,0);
            ellipse(x,y,30,15);
            ellipse(x-50,y,15,10);
            x -= r*sin(15);
            y+=r
          }
    }


}