Tag: Section B

04-Blog Post

Sonumbra was made as an interactable space in 2006 by Loop.pH, and utilized the movements of the audience. This entire project not only was so beautiful to look at, but also so admirable in how they treated the entire aesthetic of the place, taking into account the multiple variables of a setting, including sound, placement, sizing, and lighting. I suppose the algorithms took in the movements of the visitors and paired them with the fiber lights that made up the structure as well as computer-generated sound. The creator did an excellent job creating beauty in the structure that could have otherwise been rather chaotic or ugly-looking.

Sonumbra de Vincy, Responsive Light Emitting Environment 2008

Link here

Blog 04: “Sound Machines”

By Ilia Urgen
Section B

“A visual instrument to compose and control electronic music in a comprehensive and responsible way.” – MediaArtTube, January 28, 2012. I love how this modern audiovisual concept is based on a timeless design used throughout the greater portion of the 20th Century – the record player.

I am truly fascinated and intrigued by this stunning piece of technology. As quoted by the creator, Sound Machines consist of 3 units, each unit resembling Vinyl record players. Each unit has the capacity of holding 3 tracks, just like traditional record players.

MediaArtTube, however, embodies this classical design with a 21st Century makeover. There is no direct contact of the needle to the groove in the disc in a Sound Machine. Signals received from the laser light of the “needle” is synced to a sequencer, producing a sound output.

Sound Machines are definitely a cool way to mix various digitally-transmitted tracks together, and I hope that we continue to see a greater implementation of this technology in everyday life.

(YouTube link: https://www.youtube.com/watch?v=_gk9n-2lBb8)

One of three Disc Units of a Sound Machine. Each color represents the different sound files electronically stored on the disc.

Project 04: Illuminati out of the Pyramid!

sketchDownload
// Ilia Urgen
// Section B

var numLines = 60;

function setup() {
    createCanvas (400,300); 
    
    color_1 = color (135,206,245);
    color_2 = color (253,217,181);

    // ombre 
    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    }

    stroke (0);

    // canvas border lines
    line (1,1,1,299);
    line (1,1,399,1);
    line (1,299,399,299);
    line (399,1,399,299);
} 

function draw() {
    
    for (var i = 0; i <= numLines; i += 1) {

        var x1 = 0;
        var y1 = i * width / numLines;
        var x2 = i * height / numLines;
        var y2 = 300;

        // lower eye curve
        strokeWeight(0.5);
        line (x1, y1, x2, y2);
        
        // upper eye curve and pyramid side
        line (x2, 0, 400, y1);

        // lower eye lines
        line (y1, x2 * 1.05, x1, y1 - 20);

        // pyramid face
        line (y2, x2, x1 - 2.1, y2 + 200);

        // eye line
        strokeWeight(2);
        line (0,0,382,303);
        
    }

    //illuminati eye
    push();

    translate (185, 152);
    rotate(radians(38));
    fill (0);
    ellipse (0,0,180,80);
    fill (255);
    ellipse (0,0,80);
    fill (0);
    ellipse (0,0,20);

    pop();

noLoop();
}

dynamic drawing

I wanted to explore the spinning of an object and see if I could control it or alter it in some way by using the location of the mouse.

sketch
function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
}

var g = 5;
var angle = 0;

function draw() {
    background(0);
    var r = g + mouseX
    fill(r, 255, 0);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    circle(10 + m * 190.0 / 400.0, 200.0,
         size);
    fill(255, 0, r);
    size = 350 - size;
    circle(200 + m * 190.0 / 400.0, 200.0,
         size);
    //heres some confetti yay
    
    var confettiDimention1 = 100;
    var confettiDimension2 = 150;
    var confettiDimension3 = 120;
    var confettiDimension4 = 142;
    var angleSpangle = map(mouseX,0,width,3,300);
    push();
    fill('magenta');
    translate(m / 2,200 + size);
    rotate(radians(angle));
    square(confettiDimention1,confettiDimention1,50);
    fill('green');
    square(confettiDimention1,confettiDimention1,50);
    fill('cyan');
    square(confettiDimension2,confettiDimention1,10);
    square(confettiDimension3,confettiDimension4,30);
    pop();
    angle += angleSpangle;
    //if not then square probably

}

Project 03

sketchDownload
// Ilia Urgen
// Section B

var angle = 0;

var color_1;
var color_2;

var background_lines = 0;

var triangle_1 = 1;
var triangle_2 = 2;
var triangle_3 = 3;
var triangle_4 = 4;
var triangle_5 = 5;
var triangle_6 = 6;


function setup() {
    stroke (2);
    createCanvas (800, 800);
    color_1 = color (255,140,0);
    color_2 = color (63,191,191);

    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    }
}                                                                  
function draw() {
    
    delta_x = mouseX/6;
    delta_y = mouseY/6;

    frameRate(30);

    stroke (2);
    push();

    translate(400, 400);
    rotate(radians(angle));

    if (background_lines == 0) {
        line (0,0, width, height);
        line (width, 0, 0, height);
        angle += 25; 
    }

    if (triangle_1 == 1) {
        // changes 1st darkest color gradient
        fill (132-mouseX/4, 0, 132-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 100), delta_y + 150, (delta_x + 100), delta_y + 150);
        angle += 5;
    }

    if (triangle_2 == 2) {
        // changes 2nd darkest color gradient
        fill (152-mouseX/4, 0, 152-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 80), delta_y + 120, (delta_x + 80), delta_y + 120);
        angle -= 15;
    }

    if (triangle_3 == 3) {
        // changes 3rd darkest color gradient
        fill (176-mouseX/4,0,176-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 60), delta_y + 90, (delta_x + 60), delta_y + 90);
        angle += 200;
    }

    if (triangle_4 == 4) {
        // changes 4th darkest color gradient
        fill (204-mouseX/4, 0, 204-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 40), delta_y + 60, (delta_x + 40), delta_y + 60);
        angle -= 150;
    }
    
    if (triangle_5 == 5) {
        // changes 5th darkest color gradient
        fill (232-mouseX/4,0,232-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 20), delta_y + 30, (delta_x + 20), delta_y + 30);
        angle += 100;
    }

    if (triangle_6 == 6) {
        // changes 6th darkest color gradient
        fill (255-mouseX/4,0,255-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x), delta_y, (delta_x), delta_y);
        angle -= 55;
    }

    pop();
}

Blog 03: “Twisted Belly Vase”

By Ilia Urgen
Section B

Twisted Belly Vase is a 3D printed object created on April 25th, 2022 by Instagram artist namu3d. The original size of the figure was 80mm by 60mm, but the model was printed 60% larger. Altogether, the print took around one-and-a-half, which is the average print time for a model of this size.

There are many features that make the Twisted Belly vase stick out, and my favorite design feature is the flow of the rather-vertical lines around the vase’s upper and lower diameters. The thinning neck around the center of the vase gives off the hourglass aesthetic, with the “belly” of the vase greatly expanding in proportion and then once again, returning to its original diameter size.

The software used to 3D print this vase was MakerBot, a highly ubiquitous design program. It allows the creator to explore various vector scales, rotations, and linear parallel lines, which are just three of many possible functions and variables when it comes to computational fabrication.

The creators of Twisted Belly Vase, namu3d, has made other aesthetically-pleasing vases, bowls, and cylindrical elements. His design style involves simple, yet complex-looking geometric shapes and unusual rotations. I have a deep appreciation of namu3d’s design style because I too, find beauty in the simplest geometric shapes found in the world around us.

“Twisted Belly Vase”
@namu3d on Instagram

Project 2

Work to test out variable colour, ratio, shapes and size of facial features.

Project 2 image

var eyeSize = 20;
var faceWidth = 110;
var faceHeight = 150;
var mouthWidth = 30;
var mouthHeighth = 10;
var earSize =30;
var bodyWidth =200;
var bodyHeight = 300;
var shirtColour= 90;
var faceTone= 220;
var eyeTone=115;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    fill(208,223,250)
    strokeWeight(0);
    rect(0,0,640,200)
    stroke(139,163,187);
    strokeWeight(5);
    line(0,200,640,200)
//background 

    strokeWeight(2);
    stroke(22, 62, 104);
    fill(11,31,shirtColour)
    ellipse(width / 2, height / 1.10, bodyWidth,  bodyHeight);
//body 

    stroke(11, 31, 52);
    fill(255,faceTone,faceTone)
    var earLX = width / 1 - faceWidth * 1.5;
    var earRX = width / 1 + faceWidth * 1.5;
    ellipse(width/2.4, height / 1.9, earSize, earSize);
    ellipse(width/1.7, height / 1.9, earSize, earSize);
//ear

    strokeWeight(2);
    stroke(11, 31, 52);
    fill(255,faceTone,faceTone)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    noFill();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(eyeTone,80,30)
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
//face and eye

    fill(255,140,85)
    square(width / 2.09, height / 1.9, mouthWidth);
    var mouth = width / 1.1 - faceWidth * 0.5;
//mouth
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(100, 145);
    faceHeight = random(120, 200);
    eyeSize = random(10, 28);
    mouthWidth = random(20,30);
    mouthHeighth = random(5,15);
    earSize= random(25,40);
    bodyWidth= random(200,300);
    bodyHeight= random(300,370);
    shirtColour= random (20,350);
    faceTone= random (190,225);
    eyeTone= random (70,150);
}

Project 02: Faces and Variables

Within my project, what I wanted to do was to examine what we call faces. What exactly are the processes by which we determine what is a face or not? In such, I attempted to use the most chaotic combinations by randomizing virtually every color combination on screen possible.

sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var x = 1;
var y = 255;
var z = 2;
var mouth = 1
var hair = 1



 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    strokeWeight(3);
    stroke(y,x,z);
    fill(x,y,z);
    background(y - 100, x + 30, z + 5);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(x - 80, y - 80, z - 80);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    if (mouth == 1) {
        //happy mouth
        arc(width / 2, (height / 2) + 25, faceWidth - 40, faceHeight / 2, 0, radians(180));
    }
    if (mouth == 2) {
        //sad face
        noFill();
        arc(width / 2, (height / 2) + 50, faceWidth - 40, faceHeight / 2, radians(180), 0);
    }
   if (mouth == 3) {
        //shocked mouth
        fill(255,102,102);
        ellipse(width / 2, (height / 2) + 50, faceHeight / 2, faceWidth / 2);
    }
    if (hair == 1) {
        //party hat
        fill(z,x,y);
        triangle((width / 2) - (faceWidth / 2), (height / 2) - (faceHeight / 2), width / 2, (height / 4) - 70, (width / 2) + (faceWidth / 2), (height / 2) - (faceHeight / 2));
    }
    if (hair == 2) {
        //beret
        fill(0);
        ellipse(width / 2, (height / 2) - 70, faceWidth + 20, faceHeight / 2);
    }
   if (hair == 3) {
        //bowl cut
        fill(z,y,x + 10);
        arc(width / 2, (height / 2) - (faceHeight / 2) + 30, faceHeight - 15,(faceWidth / 2) + 30, radians(180), 0);
        rect((width / 2) - (faceWidth / 1.5), (height / 2) - (faceHeight / 2) + 30, faceWidth / 3, faceHeight / 2);
        rect((width / 2) + (faceWidth / 3), (height / 2) - (faceHeight / 2) + 30, faceWidth / 3, faceHeight / 2);
    }

}
 
function mousePressed() {
    if (mouseIsPressed == true) {
        x = random(0,255);
        y = random(0,255);
        z = random(0,255);
        fill(x,y,z);
        }
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    faceColor = random(0,255);
    hair += 1;
    if (hair > 3) {
        hair = 1;
    }
    mouth += 1;
    if (mouth > 3) {
        mouth = 1;
    }
}

LookingOutwards-02

Climate change is a topic that is seriously important, yet often overlooked despite its devastating impact on every single aspect of living, especially for lower income communities who often contribute the least to the destruction of the planet. My Climate 2050, created by Mitchell Whitelaw in 2018 demonstrates the drastic impact of climate change in a way that is both personal and easy to understand. Dr. Whitelaw utilized a unique program that took in all the data about predicted temperature trends in the near future and used color coordination to match a temperature to a color, creating a glance at a year in Brisbane impacted by climate change. Dr. Whitelaw’s understanding of simplicity and color theory allowed him to create a diagram that was very easy to understand, as he used reds to signify hotter temperatures and greens to signify cooler temperatures. He also utilized the impact of the red circle to represent the cycle by which it will only get worse. This allows the viewer to truly understand just how horrendous the impacts of climate change will be.

Dr. Whitelaw’s work

^^My Climate 2050, Mitchell Whitelaw (2018)

Blog

Artist:Lia

The most attractive aspects of these works are the vivid variety of colors and how each tone compliments each other, forming patterns that make me think of decorative art. Once painters use to even stick gold to create the golden yellow they were it’s rather interesting how digitally colors are presented compared to hand-worked arts.

Lia: Summer

This specific work from her installation Summer is composed of colors from imagery of summer; as she describe as  blue sea, sand dunes, striped parasols and beach chairs. Using patterns that utilizes stripes, shapes that are made of patches and blocks of colors. The image is a capture of a continuous video that does not repeat but continues to create new random images.

Lia also has 3d installations that bring out code and algorithms into physical products- it is a real ting in real life. I know that the works are rated to minimalist qualities and she codes for her installations or images. The way she cooperates the freeness and fluid characteristic of art works – for example paintings or sketches- along with the structured characteristic of coding seems to bridge between traditional mediums and Digital algorithms.

Lia: Silver Ratio

Additionally, adding sound elements is another dimension to add on art works. It brings in the sensory sound helping to create a mode, reenforcing the impact of an art piece. It isn’t necessarily music of her own creation but is a collaborative act; in this specific work, sound from Damian Stewart.