Author: twrabetz@andrew.cmu.edu

Project-07 Curve Thomas Wrabetz

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-07

var CVAR = 45;
var prevX = 100;
var prevY = 100;

function cubic( x )
{
   return ( x - mouseX / 25 ) * ( x + mouseY / 25 ) * ( x + ( mouseX - width / 2 ) / 25 + ( mouseY - height / 2 ) / 25);
}

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

function draw()
{
    
    if( prevX == mouseX & prevY == mouseY ) return;
    background(220);
    prevX = mouseX;
    prevY = mouseY;
    circX = width / 3 + mouseX / 3;
    circY = height / 3 - mouseY / 5;
    fill(255);
    for( var i2 = 0; i2 < 480; i2 += random(10,14) )
    {
        i = i2;
        for( var j = 0; j < 480; j += random(10,14) )
        {
            if( j < (height / 2) - cubic( (i - 240)/10 ) / 100 ) fill( random(0,CVAR), 100 + random(0,CVAR), 175 + random(0,CVAR) );
            else fill( random(0,CVAR), 150 + random(0,CVAR), random(0,CVAR) );
            if( ( j - circY ) * ( j - circY ) + ( i - circX ) * ( i - circX ) < 1250 ) fill( 175 + random( 0, CVAR ), 175 + random( 0, CVAR ), random(0, CVAR) );
            
            ellipse( i, j, 18, 21 );
            i = random( i2-2, i2+2 );
        }
    }
}

I used a cubic function to make a hill. The sun is also there.

I used a grid of points with small random offsets and determined their color based on their relation to the equation; their color also varies slightly to create a pointillism-like effect.

Project-06 Abstract Clock twrabetz

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-05

var LAVA;
var accMillis;
var S;
var M;
var eruptionOn = false;
var eruptionCoords = [];
var eruptionV = 5;
var eruptionY;
var sec;

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

function draw()
{
    LAVA = color(195+minute(), 130, 21);
    background(220);
    drawVolcano();
    //seconds
    fill( LAVA );
    if( S != second() )
        accMillis = 0;
    S = second();
    accMillis += millis() - M;
    M = millis();
    sec = second() + accMillis / 1000;
    if( second() >= 45 )
    {
        eruption();
    }
    if( second() <= 45 )
        rect( width * 0.4, height - 75 - sec * ( height - 75 ) / 60, width * 0.2, height );
    else
        rect( width * 0.4, height - 75 - (45 * ( height - 75 ) / 60) + ( ( sec - 46 ) * ( height - 75 ) / 14 ), width * 0.2, height );
}

function eruption()
{
    if( second() == 45 )
    {
        eruptionV = 5;
        eruptionY = height / 5;
        eruptionCoords = [width * 0.45, width * 0.5, width * 0.55 ]
    }
    for( var i = 0; i < 3; i++ )
    {
        fill( LAVA );
        ellipse( eruptionCoords[i], eruptionY, 10, 10 );
        eruptionCoords[i] += (eruptionCoords[i] - width / 2) * 0.0025;
        eruptionCoords[i] += random(-0.001,0.001);
    }
    eruptionY -= eruptionV * 0.1;
    eruptionV -= 0.0125;
}

function drawVolcano()
{
    //Volcano
    fill( 50 );
    triangle( -width * 0.2, height, width * 0.4, height / 5, width * 0.4, height );
    triangle( width * 1.2, height, width * 0.6, height / 5, width * 0.6, height );
    fill( 150 );
    rect( width * 0.4, height / 5, width * 0.2, 4 * height / 5 );
    fill( LAVA );
    ellipse( width / 2, height, 200, 200 );
    //Side triangles
    for( var i = 0; i < 12; i++ )
    {
        if( i == hour() ) fill( 150 );
        angle = ( i + 1 ) * PI / 36;
        triangle( width / 2 + 100 * cos( PI - angle - 0.05 ), height - 100 * sin( PI - angle - 0.05 ),
                  width / 2 + 100 * cos( PI - angle + 0.05 ), height - 100 * sin( PI - angle + 0.05 ),
                  width / 2 + 200 * cos( PI - angle ), height - 200 * sin( PI - angle ) );   
    }
    for( var i = 12; i < 24; i++ )
    {
        if( i == hour() ) fill( 150 );
        angle = ( i - 11 ) * PI / 36;
        triangle( width / 2 + 100 * cos( angle - 0.05 ), height - 100 * sin( angle - 0.05 ),
                  width / 2 + 100 * cos( angle + 0.05 ), height - 100 * sin( angle + 0.05 ),
                  width / 2 + 200 * cos( angle ), height - 200 * sin( angle ) );   
    }
}

It’s a volcano. The lava color is based on the minutes. The height of the lava in the tube is based on the seconds ( it is completely empty at the start of a minute ). The lava streaks around the base represent the hours.

looking outward-05: eroded terrain

This is a 3D rendered work by Chaotic Atmospheres, a Swiss artist. It was created by procedurally simulating the erosion of terrain, resulting in natural-looking reliefs and textures. I was intrigued by the idea of representing natural objects by imitating the natural processes that created them- this piece is as much a simulation as a work of art.

twrabetz-05-wallpaper

sketch

function setup() 
{
    createCanvas(480,480);
    background(50);
 
    var col;
    var size;

    for( var i = 0; i < 4; i++ )
    {
        for( var j = 0; j < 4; j++ )
        {
            col = color( random(25,75), random(25,75), random(25,75) );
            size = random( 18, 28 );
            drawSpiral( 55 + i * (width - 130) / 3, 70 + j * (height - 130) / 3,
                        0, size, col );
        }
    }

    noLoop();
}

function drawSpiral( xPos, yPos, angle, size, col )
{
    if( size < 7.5 ) return;

    push();
    translate( xPos, yPos );
    rotate( radians(angle - 90) );
    fill( col );
    rect( size * 4 / 3, 0, size, size );
    pop();
    drawSpiral( xPos, yPos, angle + 30, size * 0.935, 
                color( red(col) + 7.5, green(col) + 7.5, blue(col) + 7.5 ) );
}

The prompt asked for “a balance of geometric and organic forms” aka a clear request for shrimps made out of squares.
Note that the shrimps do not merely scale in size, but also have curly tails based on their size as should be expected of any quality shrimps.

Looking Outward 04- Ronald Jenkees

My Looking Outward for this week is Guitar Sound by Ronald Jenkees.

Guitar Sound

(I had an issue embedding the YouTube video)

Ronald Jenkees is an electronic music composer who has been making music since 2007. He has 5 albums; this song is from the second one (from 2009). Ronald Jenkees uses a combination of his own playing on synthesizers with generated tracks to create a characteristic personal sound. Although his method is not deeply algorithmic, the combination of conventional playing and electronic methods creates an effect different from both conventional songs and typical electronic music.

Project-04 Sunrise

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-04


function setup() {
    createCanvas(400, 300);
    background(220);
}
 
function draw() 
{
    strokeWeight(1);
    //Sun
    //Drawn between points along a half circle in the middle of the canvas.
    //i is an angle measure going from 0 to 90 degrees.
    stroke(200,200,50);
    for(var i = 0; i < 90; i += 5 )
    {
        line( width / 2 + 50 * cos(radians(i)), 
              height / 2 - 50 * sin(radians(i)),
              width / 2 - 50 * cos(radians(i)),
              height/2 - 50 * sin(radians(i)));
    }
 
    //Sun rays
    //Drawn along the same angles between 2 circles, 1 radius 50
    //(the edge of the sun), the other with radius 250
    stroke(221,85,119);
    for( var i = 0; i <= 180; i += 5 )
    {
        line( width / 2 + 50 * cos(radians(i)),
              height / 2 - 50 * sin(radians(i)),
              width / 2 + 250 * cos(radians(i)),
              height / 2 - 250 * sin(radians(i)));
    }

    //Sea
    //The sea is just sketched in with diagonal lines spaced out linearly
    stroke(25, 25, 150)
    for( var i = -20; i < 600; i += 10 )
    {
        line( 0, height / 2 + i, i, height / 2 );
    }

    strokeWeight( 2 );
    //Sun's reflection on the water
    //horizontal lines following a sinusoidal pattern
    stroke( 200, 200, 50 );
    for( var i = 0; i < 150; i += 5 )
    {
        line( width / 2 - 35 - i / 3 - 4 * sin(radians(i * 12)), height / 2 + i,
              width / 2 + 35 + i / 3 + 4 * sin(radians(i * 12)), height / 2 + i );
    }
}

It’s a sunrise

I used a lot of circles; the sun’s reflection on the water uses a sinusoidal pattern.

Looking Outwards 03

I really enjoyed the computational art of Andy Lomas which was referenced in Prof. Levin’s article. The logic governing his algorithm was very well described, providing a useful insight into the methods of generative art. Lomas’s patterns are created by simulating a series of virtual cells which accumulate “nutrients” based on various factors, allowing them to multiply. He notes that many of the simulations were accidentally reminiscent of various forms of life, often based on intuitive factors (such as the directional growth of plant-like simulations). While this was touted as demonstrating the capability of algorithms to approximate organisms, I found it to be a reminder that life itself is merely algorithmic.

Project-03 Dynamic Drawing

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-03


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(200);
    noStroke();
 

    var cornerDist = dist(width, height, width/2, height/2);
    var mouseDist = min( dist(width/2, height/2, mouseX, mouseY ), cornerDist );
    var reverseDist = (cornerDist - mouseDist) / cornerDist;
    //The ellipses' sizes are proportional to the ratio of the mouse's distance 
    //from the corners to the distance of the corner from the center
    if( reverseDist >= 0 )
    {
      fill(255);
      ellipse(width/2,height/2, 960 * reverseDist, 600 * reverseDist);
      fill(50);
      ellipse(width/2,height/2, 300 * reverseDist, 300 * reverseDist);
    }
    
    //Fill value for the spiral is dependent on mouse X and Y
    var startRed = ( mouseX / width );
    var startGreen = ( mouseY / height );
    var startBlue = ( abs( mouseX - width / 2 ) + abs( mouseY - height / 2 ) ) / width;
    var fillRed = startRed;
    var fillGreen = startGreen;
    var fillBlue = startBlue;
    //Draw a spiral of circles; the curvature of the spiral depends on mouseDist
    for( offset = 1; offset < cornerDist; offset *= 1.1 )
    {
      fill(fillRed, fillGreen, fillBlue);
      push();
      translate( width/2, height/2 );
      rotate( ( 8 * PI * log(log(offset)) * ( mouseDist / cornerDist) ) );
      ellipse( offset, 0, 10 + offset / 10, 10 + offset / 10 );
      pop();
      fillRed += 3 * startRed; fillGreen += 3 * startGreen; fillBlue += 3 * startBlue;
    }
}

I worked with a spiral that unwraps based on the mouse’s distance from the center of the image.

Looking Outwards 02

Jean-Pierre Hebert, TimeStamps, 2009.

This is a piece of generative art by Jean-Pierre Hebert, a generative artist. His website/blog contains artwork in order (“structured like a book”). Many of the works on the website are organized by date (and sometimes not named in any other way), and he created the above work by seeding the algorithm with the current time: jumping off the idea of artwork being named with a time-stamp, here is artwork whose identity stems entirely from a time-stamp. I found this to be an amusing idea, as well as an illustration of the strange liberties generative artists can take with their work.

timestamps

project-02-variable-face

sketch

var faceWidth = 0.75;
var eyeColor1 = 100;
var eyeColor2 = 200;
var eyeColor3 = 100;
var eyebrowSlant = 0;
var mouthSlant = 0;

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

function draw()
{
  background(220);
  
  //Background of face
  strokeWeight(1);
  fill(255);
  ellipse(width/2, height/2, 300*faceWidth, 300);
  
  //Eye background
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);

  //Eye irises
  strokeWeight(0);
  fill( eyeColor1, eyeColor2, eyeColor3 );
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);

  //Eyebrows
  fill(0);
  triangle((width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)+(80*faceWidth)-(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);
  triangle((width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)-(80*faceWidth)+(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);

  //Mouth
  strokeWeight(3);
  noFill();
  if( mouthSlant == 0 )
  {
    line((width/2)+(80*faceWidth), (height/2)+60, (width/2)-(80*faceWidth), (height/2)+60);
  }
  else if( mouthSlant < 0 )
  {
    var posSlant = mouthSlant*-1;
    arc(width/2, (height/2)+60, 160*faceWidth, posSlant*2, PI, 0 );
  }
  else
  {
    arc(width/2, (height/2)+60, 160*faceWidth, mouthSlant*2, 0, PI ); 
  }
}

function mousePressed() 
{
  eyeColor1 = random(100,255);
  eyeColor2 = random(100,255);
  eyeColor3 = random(100,255);
  faceWidth= random(60,125) / 100;
  eyebrowSlant= random(-15,15);
  mouthSlant= eyebrowSlant * 3 * ((random(0,1)*2)-1);
}

I tried to make the variables interdependent to create a coherent face throughout variations. For example, the size of the eyes and mouth are dependent on the width of the face, and the eyebrows are always the same width as the eyes. The mouth can be upwards or downwards as can the eyebrows allowing for 5 expressions (neutral, smile, evil smile, angry, sad/afraid), however the intensity of the mouth slant will always correspond to the intensity of the eyebrow slant allowing for a coherent intensity of the expression.