Author: robert

Project-06 Abstract Clock

The squares measure, from inside out: seconds, minutes, hours, days, years, decades, and centuries.

sketch
//Robert Rice
//rdrice
//Section C

var today = new Date();
var years = today.getFullYear()
var months = today.getMonth();
var days = today.getDate() + months*30.42;  //calculates days based on the average number of days in each month
var hours = today.getHours()    //aproximately correct for any given day in the year
var minutes = today.getMinutes() 
var seconds = today.getSeconds();
var v = [years%1000/100, years%100/10, years%10, days, hours, minutes, seconds] //the current values for centuries, decades, years, days, hours, minutes, & seconds
var t = [10, 10, 10, 365, 24, 60, 60]   //the total number of each unit in one cycle


var r = []  //radii for centuries, decades, years, days, hours, minutes, seconds squares (calculated below)
var s = [1.902*Math.pow(10, -10), 1.902*Math.pow(10, -9), 1.902*Math.pow(10, -8), 1.902*Math.pow(10, -7), 0.0000694, 0.00167, 0.1]   //speeds, degrees per frame
var a = [0, 0, 0, 0, 0, 0, 0]  //angles, 0 by default for testing
var w = []  //stroke weight

var iw = 5  //the stroke weight of the indicator squares


function setup() {
    createCanvas(600, 600);
    background(0);
    angleMode(DEGREES);
    rectMode(CENTER);
    frameRate(60);

    r[0] = (width/2)*sqrt(2);
    w[0] = 15

    print(v);

    for (i=1; i<=6; i++) {          //calculates the inset radii based on the first radius
        r[i] = (r[i-1]/2)*sqrt(2);
    }

    for (i=1; i<=6; i++) {          //calculates the stroke weights
        w[i] = (w[i-1])/2;
    }

    for (i=0; i<=6; i++) {          //sets all the starting angles based on current date & time
        a[i] = (v[i]/t[i])*360
    }
}

function draw() {
    background(50);
    noFill();
    
    translate(width/2, height/2);
    stroke(255);

    for (i=0; i<=6; i++) {
        push();
        rotate(a[i]);   //moves the rectangle
        a[i] = a[i] + s[i];
        strokeWeight(w[i]);
        rect(0, 0, r[i], r[i]); //creates the actual rectangle

        strokeWeight(iw);   //creates an indicator rectangle to help the viewer understand where in the rotation everything is
        rect(r[i]/2 - 5 - (w[i]/2), r[i]/2 - 5 - (w[i]/2), 5, 5);   //"start" is all indicators at bottom right corner
        pop();
    }



}

LO-06 Randomness

For this week’s looking outwards, I thought I would discuss something unconventional. While we normally consider art within a narrow frame, computational art casts a much wider net and I thought this might fit. Every year for april fool’s, since the game’s release in 2011, Mojang (which develops the game) releases a joke update for Minecraft, and this year’s was extraordinary.

Using every facet of the game’s parameters for world generation, this snapshot allows players to randomly generate entire worlds. Consisting of everything from endless procedurally generated structures to maze-like worlds made entirely of sponge. This update takes the beautiful but rather utilitarian world generation of minecraft to a new level by generating endless experiential environments that often amaze with their sublime beauty. Instead of working within normal ranges for materials like dirt & stone to create a natural-looking world, the algorithm instead uses wild, extreme parameters to create dimensions out of any and all materials or structures in the game. A bit like H.R. Geiger playing god, the sheer strangeness of it all is captivating. It’s right in line with the sort of simple, sublime beauty that Minecraft has always sought to capture – from its soundtrack to its design.

-Robert

LO-05 Computer Graphics

For this week’s looking outwards, I thought I would highlight one of my favorite topics in the world of computation – non-euclidean geometry. The youtuber Code Parade makes videos showcasing their work developing rendering engines that display non-euclidean space.

These videos showcase the ability of computer graphics to show us other, possible worlds. Hyperbolica in particular shows us hyperbolic & hypobolic space: worlds where space is literally curved. Worlds where space is literally more or less dense, producing otherworldly visuals that confound the human mind. Triangles with three right angles. Seeing the back of your own head. These projects bring advanced geometry to life in a visual, visceral way.

I really admire the project because it does something that would be nigh-impossible without computation. It is difficult enough to grasp rendering flat space by hand, but curved space would be totally out of reach. These rendering engines are built from the ground up to simulate curved space & impossibly interconnected geometries.
-Robert

Project-05 Wallpaper

For this project I did several sketches before I started to draft the design & code it. I was particularly inspired by the idea of the rising sun & linear sunbeams radiating from it.

I thought the contrast between the more organic circle and the rigorous linework created an interesting composition.

The final draft before I went into to digital process. A simple tiling method turns the design into a undulating diamond grid.

-Robert

sketch
//Robert Rice
//Section C
//rdrice@andrew.cmu.edu
//Assignment-05-A


size = 100   //the side length of each hexagon

function setup() {
    createCanvas(600, 400);
    background(255);
}

function draw() {
    background(38, 0, 77);

    for(let w = 0; w <= width/(size*0.75); w = w+1) {
        for(let v = 0; v <= height/(size); v = v+1) {
            tile(w*0.375*size, v*0.5*size, size);
            print(w, v);
        }
    }
    noLoop();
}

function tile(x, y, s) {
    push();
    
    translate(x, y);
    stroke(204, 170, 0);
    strokeWeight(1);

    line(x + 0.375*s, y + 0.5*s, x, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.188*s, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.563*s, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.750*s, y);

    line(x + 0.375*s, y + 0.5*s, x, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.188*s, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.563*s, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.750*s, y + s);

    strokeWeight(1);
    stroke(255);
    line(x, y + 0.575*s, x + 0.75*s, y + 0.575*s);

    noStroke();
    fill(255, 77, 77);
    circle(x + 0.375*s, y + 0.5*s, 0.4*s);

    strokeWeight(1);
    stroke(255);
    line(x, y + 0.625*s, x + 0.75*s, y + 0.625*s);
    
    pop();
}

LO-04: Blue Jeans and Bloody Tears

Blue Jeans and Bloody Tears is an AI-generated eurovision song written by AI, sung by Izhar Cohen, produced by Avshalom Ariel, and published online by Sweaty Machines. The creators fed AI hundreds of eurovision song lyrics & melodies to a neural network, which then created thousands of lines, licks, melodies, beats, etc. From these a few elements were then carefully selected and “welded” together to create the final piece.

The project, amazingly, produced an eerily catchy song despite its nonsensical lyrics. Commenters even inferred deep meanings from the lyrics, despite the fact that they were generated at random. Through the insanity, the instincts of the producers for selecting the catchiest beats shines through in a song that makes you suspicious that maybe AI really is coming for all of our jobs after all.

-Robert

Stringy Art (Project-04)

For this week’s project, string art, I wanted to make something that showed off how straight lines could form apparent curves. Given that, I decided the cleanest way to do that was with circles, which are both easy to code & visually simple. Four simple colors – red, blue, green, and yellow – diverge from what on the inner hemispheres, while the foreground circle remains in white.

-Robert

sketch
//Robert Rice
//Section C

function setup() {
    createCanvas(400, 300);
    background(0);
    angleMode(DEGREES);
}

angle = 0

function draw() {
    fill(255);
    strokeWeight(1);
    stroke(255);

    line(200, 0, 200, 300);

    push();
    translate(350, 150);    //changes the axis of rotation to the center of the "circle" formed by the lines
    for(let i = 1; i <= 45; i+=1) { //rotates the same line 2 degrees around the new axis of rotation, loops 45 times
        stroke(255-i*10, 255-i*10, 255);       
        rotate(2);                  //angle change per loop (this rotates 90 degrees, bc 2*45=90)
        line(-150, 0, -150, -150);  //the line being rotated each loop
    }
    pop();

    push();                 //the same code, except it arcs to the bottom right instead of the top right
    translate(350, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255-i*10, 255, 255-i*10);
        rotate(-2);
        line(-150, 0, -150, 150);
    }
    pop();

    push();                 //arcs towards the bottom left
    translate(50, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255, 255, 255-i*10);
        rotate(2);
        line(150, 0, 150, 150);
    }
    pop();

    push();                 //arcs towards the top left
    translate(50, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255, 255-i*10, 255-i*10);
        rotate(-2);
        line(150, 0, 150, -150);
    }
    pop();

    push(); //the final circle, with the origin at the center
    translate(200, 150);
    strokeWeight(2);
    for (let i = 1; i <= 180; i += 1) {
        rotate(2);
        line(-200, -150, 200, -150)
    }
    pop();

    noLoop();
}

Looking Outwards 03

“India’s New Parametric Temple to Reinterpret Vernacular Design in Koppur”

I really admire how this project uses computational processes to design something in the real world. This kind of geometry is difficult to visualize and draw, but its regularity and symmetry makes it a perfect problem for parametric design. The designers used parametric software, like grasshopper, to influence the design based on specified constraints, such as volume or height. The designers’ commitment to using sacred geometry and symmetric forms resulted in a characteristically Indian temple despite using computational processes

Some different forms produced by the architects, rat[[LAB] studio and Shilpa Architects

https://www.archdaily.com/946233/indias-new-parametric-temple-to-reinterpret-vernacular-design-in-koppur?ad_source=search&ad_medium=search_result_all

Project_3_Dynamic_Drawing

Its an atom.

sketch
//andrewid rdrice
//section c

var bgV = 0
var fVr = 255
var fVg = 255
var fVb = 255
var angle = 0   //starting angle for the electron
var speed = 0.1

var x = 100     //photon position
var y = 100
var xVel = 1    //starting horizontal velocity of the photon
var yVel = 1    //starting vertical velocity of the photon
var bSize = 20  //diameter of the photon

function setup() {
    createCanvas(600, 450);
    background(0);
}

function draw() {
    background(bgV);
    noStroke();
    fill(fVr, fVg, fVb);
    text("p5.js vers 0.9.0. rdrice. 'Hydrogen with Photon'", 10, 15);
    angleMode(DEGREES);

    var scale = dist(width/2, height/2, mouseX, mouseY); //scaling nucleus
    ellipse(width/2, height/2, min(scale, 250));

    x += xVel   //Reycled this script from assignment a
    y += yVel   //keeps the 'photon' moving
    ellipse(x, y, bSize);    //draws a circle at x, y

    if (x > width-bSize/2) {    //checks to see if photon is in x bounds
        xVel = xVel*(-1)        //reverses velocity if its not
    } else if (x < bSize/2) {
        xVel = xVel*(-1)}
    if (y > height-bSize/2) {   //does the same as above, but for y
        yVel = yVel*(-1)
    } else if (y < bSize/2) {
        yVel = yVel*(-1)}       //end recycled script

    translate(width/2, height/2);   //rotating electron
    angle = angle+speed
    rotate(angle);
        ellipse(100,100, min(500*(10/scale), 100));
}

function mousePressed() {
    if (bgV == 0){  //toggles bgV (background) between b&w
        bgV = 255;
    } else if (bgV == 255) {
        bgV = 0}

    if (fVr == 255 & fVg == 255 && fVb == 255){   //random fill value
        fVr = random(0,255);
        fVg = random(0,255);
        fVb = random(0,255);
    } else {    //toggles back to white
        fVr = 255
        fVg = 255
        fVb = 255}

    speed = random(-1, 1);  //new random speeds for moving objects
    xVel = random(-10,10);
    yVel = random(-10,10);
}

click to change colors and particle velocities.

rdrice_sectionC_Project 2_FACE

sketch
//Robert Rice
//Section C

var gender = 0  //"gender", determines eyelashes
var eyeSize = 10    //sets eye diameter
var eyeSquint = 1   //how squinted the eyes are
var eyebrowLength = 70  //how long the eyebrows are
var mouthLength = 90    //how long the mouth is
var mouthPosition = 0   //adjust how high up the mouth is
var noseX1 = 250    //adjusts the base of the nose
var noseY1 = 230
var noseX2 = 270       //adjust the tip of the nose
var noseY2 = 220

function setup() {
    createCanvas(400, 400);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES); //degrees bc i'm bad at math
}

function draw() {
    background(0)   //black background

    noFill();
    stroke(255);    //white lines bc the background is black
    
    strokeWeight(3);    //draws the basic face shape
    strokeJoin(ROUND);
    line(140,270, 127,220);
    arc(193,202, 136,136, 165, 73.38);
    line(212,268, 232,288);

    strokeWeight(2);    //stroke weight for facial features

    if (gender>0.5) {   //Gives the face eyelashes if it's 'female'
        line(186,180, 172,180); //does nothing if the face is 'male'
        line(186,180, 174,173);
        line(186,180, 180,168);

        line(186+97,180, 172+97,180);
        line(186+97,180, 174+97,173);
        line(186+97,180, 180+97,168);
    }

    noStroke();     //Makes the pupils
    fill(255);
    ellipse(186,180, eyeSize, eyeSize / eyeSquint); //pupils squint based on
    ellipse(186+97,180, eyeSize, eyeSize / eyeSquint);  //eyeSquit variable

    stroke(255);    //makes the eyebrow arcs, which move with the eyes
    strokeWeight(2);
    noFill();
    arc(201,6-((eyeSize/eyeSquint)/2), 351,351, eyebrowLength, 94.91);  
    //left eyebrow arc
    arc(201+97,6-((eyeSize/eyeSquint)/2), 351,351, eyebrowLength, 94.91);   
    //right eyebrow arc

    arc(246,78 - mouthPosition, 342,342, mouthLength,111.06);  //mouth

    noStroke();
    fill(255);
    triangle(255,188, noseX1,noseY1, noseX2,noseY2);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 
    gender = random(0,1);   //variables defined at top of code
    eyeSize = random(6,20);
    eyeSquint = random(1,2);
    eyebrowLength = random(69.42, 82.17);
    mouthLength = random(79.13, 104.53);
    mouthPosition = random(0,35);
    noseX1 = random(247, 260);
    noseY1 = random(200, 238);
    noseX2 = random(270, 290);
    noseY2 = random(199, 232);
}

Dillenberger, Hansmeyer, And the Parametric Grotto

https://www.archdaily.com/868540/this-mysterious-3d-printed-grotto-challenges-boundaries-of-computational-geometry-and-human-perception

Digital Grotesque II, by Dillenberger & Hansmeyer. Commissioned by the Centre Pompidou

Dillenberger & Hansmeyer’s 3D printer grotto is a perfect representation of that possibilities that computation and digital fabrication can bring to architecture. Inhumanly complex and detailed, its Gaudi-esque surface was generated using algorithms and built in sandstone using 3D printers. It leaves the limitations of the human ability to craft and even to design in the dust, relying purely on the now super-human abilities of our machines.

Works such as this one inevitably force people like me to ask hard questions about what design is worth. These algorithms and machines designed and built an object much more complex than I ever could, even given another thirty years to master design and a team of master stonemasons to work with. If this is what can be done with machines alone, what in what space are people like me left to work?

-Robert