SectionC – Page 11 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 5: Wallpaper

var x = 75;
var y = 75;
function setup() {
    createCanvas(600, 600);
    background(207, 241, 252);
    rectMode(CENTER);
    ellipseMode(CENTER);
}

function module(x, y) { //creating the individual circular modules
    noStroke();
    fill(255);
    ellipse(x, y, 150, 150);
    fill(207, 241, 252); //alternating fills of white and blue to create a visual pattern
    rect(x, y, (150/sqrt(2)),(150/sqrt(2)));
    fill(255);
    ellipse(x, y, 100, 100);
    fill(207, 241, 252);
    ellipse(x, y, 100, 50);
    ellipse(x, y, 50, 100);
    fill(255);
    ellipse(x, y, 80, 30);
    ellipse(x, y, 30, 80);
    fill(207, 241, 252);
    ellipse(x, y, 40, 40);
    fill(255);
    rect(x, y, (40/sqrt(2)),(40/sqrt(2)))
    fill(207, 241, 252);
    ellipse(x, y, 40, 10);
    ellipse(x, y, 10, 40);

}

function draw() {
    for (x = 75; x <= 725; x += 150) { // creating a grid to make a patterned wallpaper
        for (y = 75; y <= 725; y += 150){
            module(x, y);
        }
    }
}

I really like playing with geometry and colors, so I wanted to create something that can resemble a pattern or even a visual illusion when looked at from a distance.

Looking Outwards 05: 3D Computer Graphics

As soon as I read the prompt, I was reminded of the recent exhibition in the Miller ICA gallery by Jacolby Satterwhite.

*Jacolby Satterwhite, Reifying Desire 6,* 2014. HD digital video

Among many of his artworks in the gallery, the digital videos created by 3D computer graphics stood out to me the most. It was a very different experience from physical installations and 2D videos, because it seemed to be existing in its own world. The rotation of the camera angle and the individual movement of the characters and elements were really intriguing to me. I think the way lighting and shadow is programmed to be so natural is fascinating. I think this kind of 3D computer graphic medium is very appropriate for Jacolby Satterwhite’s work, as he as transforms existential uncertainty into a generative engine of resilience, reinvention, and celebration.

Project 5 – Wallpaper

In this work I tried to incorporate the four colors of the Korean flag: red, blue, black and white, in addition to the rectangles present on the flag, and a brief geometric shape of the national flower (Mugunghwa).

var col;
var row;
var col1;
var row1;
function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(0);
    rectangles();
    for(col = 60; col <= 600; col += 200) {
        for(row = 60; row <=600; row += 200) {
            flowers(col,row);
            print(row);
        }
        print(col);
    }
    noLoop();
    for(col1 = 150; col1 <= 600; col1 += 200) {
        for(row1 = 150; row1 <= 600; row1 += 200) {
            flowers(col1, row1);
        }
    }
}

function rectangles(){
    for(var x = 0; x<=600; x +=90){
        for (var y=20; y<=600; y +=50){
        fill(255);
        rect(x,y,55,15);    
        }
    
    }
}


function flowers(x,y) {
    push();
    translate(x,y);
    fill(255,0,0);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(255,0,0)
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(255,0,0);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    fill(230,230,250);
    ellipse(0,0,15,15);
    pop();
}

Looking Outwards – 05

The artwork that I found inspiration is called

“Gone, and Appear” by the artist Yuuki Morita.

I admire the artist and his works as they are hyperrealistic works of mythical creatures. The texture in addition to the shadow and lighting is as if the works are sculptures of the creatures he creates. The patterns on the texture of the “sculptures” create an impactful visual appeal to the audience. As an artist who started art only in 2019, I find it amazing that he can create such intricate 3d art.

Link

Project 5- Wallpaper

sketch

var col1;
var row1;
var col2;
var row2;
var col3;
var row3;
function setup() {
    createCanvas(600, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(88,24,69);
    for (col2 = 50; col2 <=600; col2 += 100) {
        for(row2 = -50; row2 <= 400; row2 += 100) {
            stroke(218,247,166);
            noFill();
            ellipse(col2, row2 + 50, 100, 100);
        }
        noLoop();
    }
    for(col1 = 50; col1 <= 600; col1 += 200) {
        for(row1 = 50; row1 <=600; row1 += 200) {
            flower(col1,row1);
            print(row1);
        }
        print(col1);
    }
    noLoop();
    for(col3 = 150; col3 <= 600; col3 += 200) {
        for(row3 = 150; row3 <= 600; row3 += 200) {
            flower(col3, row3);
        }
    }
}

function flower(x,y) {
    fill(199,0,57);
    stroke(255,131,105);
    push();
    translate(x,y);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    fill(199,0,57);
    stroke(199,0,57);
    ellipse(0,0,10,10);
    pop();
}

Looking Outwards- 3D Rendering

After exploring some different kinds of 3D generated art, I chose to focus on architectural rendering. The image above is from Archicgi, an architectural rendering studio. Here’s a great article about their process: https://archicgi.com/3d-architectural-rendering-101-a-definitive-guide/

These types of renderings are very interesting to me because of the level of detail, as well as the realism that they present. The article mentions their use of various softwares, including Maya and Blender, which are popular 3D rendering tools that I’ve heard of before. But they also mention some that I haven’t heard of such as V-Ray, Cinema 4D, and Revit. I would be interested to explore these a little more.

I’m sure there are teams of artists that go into creating these images, but I think there is a lot to say about artistic vision in the process. The architecture firm can send the studio their draftings of the building, but I believe the studio is responsible for making it look good. For example, the lighting in the image above has a huge impact on the building, and makes it look very dramatic. If the lighting were flat, the building probably wouldn’t look as interesting.

LO-3D Computer Graphics

The project I choose for this week LO is a light-jet print that reflects the artist’s love-hate relationship with suburbia, called Touring Suburbia/number one, by Dolores Kaufman in 2005. It basically applies the technique of digital painting to create a 2D art that captures a 3D dreamlike scene. The artist applies two contradictory color, blue and pink, to represent his love and hate. Also, the repetitive patterns successfully showcase a scene that gives the audiences a sense of realness, instead of a dull collage. Using digital tools, the creator, Dolores Kaufman was able to re-visualize that dream, to begin to imagine Versailles from individual efforts. Touring Suburbia represents an attempt to recapture a dream once glimpsed.

Looking Outwards-05: 3D Computer Graphics

This week, I took a look at Daniel Danielsson, a graphic motion designer who has worked for a number of independent clients. I wanted to dive deeper into his work with About Time, a design agency with the goal of creating delightful experiences. The motion graphic he created for their rebranding was a series of different interactions revolving around a small ball; it is passed around this joyful mechanism that alters the ball using various interactions and colors to create a very warming and positive experience. I found this work really interesting because the animation does its job of communicating About Time’s rebranding initiative so well with a relatively simple animation. There isn’t a lot happening on the screen that it becomes overwhelming, but it stays engaging as you follow the entire experience of the ball. Everything is very refined, smooth, and sleek.

Daniel Danielsson The X

Project 5: Wallpaper

sketch

//Anthony Pan
//Section C


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

function draw() {
    var dx = 0; 
    var dy = 0;
    var dx1 = 0;
    var dy1 = 0;
    background(232, 249, 255); //sky blue background
    branches(dx, dy); //call branches function inputing dx and dy to create pattern
    cherryBlossom(dx1, dy1); //call cherryBlossom function to create 6 flowers on each branch


    noLoop();
}


function branches(dx, dy) {
    strokeWeight(3);
    stroke(0);

    for(var column = 0; column < 10; column += 1) {
        
        for(var row = 0; row < 9; row +=1) {
            line(50 + dx, 55 + dy, 55 + dx, 85 + dy); //bottom of main branch
            line(35 + dx, 40 + dy, 50 + dx, 55 + dy); //middle of main branch
            line(10 + dx, 20 + dy, 35 + dx, 40 + dy); //top of main branch
            line(15 + dx, 35 + dy, 35 + dx, 40 + dy); //small branch below top main branch
            line(15 + dx, 5 + dy, 25 + dx, 32 + dy); //small branch above top main branch
            line(55 + dx, 20 + dy, 45 + dx, 50 + dy); //small branch right of middle main branch
            line(60 + dx, 35 + dy, 50 + dx, 40 + dy); //smallest branch right of middle main
            dy += 65; 
        }
        dx += 80;
        dy = 0;
    }
    
}

function cherryBlossom(dx1, dy1) {
    strokeWeight(1);
    var color = random(120, 230); //random shade of pink - yellow 
    var color1 = random(120, 230); //random shade of pink - yellow
    var color2 = random(120, 230); //random shade of pink - yellow
    var r = 8; //radius of outer petals 
    var r1 = 4; //radius of center petal

    for(var c = 0; c < 10; c += 1) {
        for(var row1 = 0; row1 < 9; row1 += 1) {
            fill(252, color, 174); //pink fill for flowers random shades of pink
            ellipse(15 + dx1, (10 - r1) + dy1, r, r); //top petal
            ellipse((15 + r1) + dx1, 10 + dy1, r , r); //right petal
            ellipse(15 + dx1, (10 + r1) + dy1 , r, r); //bottom petal
            ellipse((15 - r1) + dx1, 10 + dy1, r, r); //left petal

            fill(252, 174, 174);
            ellipse(15 + dx1, 10 + dy1, r1, r1); //center petal

            fill(252, color1, 174);
            ellipse(25 + dx1, (25 - r1) + dy1, r, r);
            ellipse((25 + r1) + dx1, 25 + dy1, r, r);
            ellipse(25 + dx1, (25 + r1) + dy1, r, r);
            ellipse((25 - r1) + dx1, 25 + dy1, r, r);

            fill(252, 174, 174);
            ellipse(25 + dx1, 25 + dy1, r1, r1); //center petal

            fill(252, color2, 174);
            ellipse(11 + dx1, (35 - r1) + dy1, r, r);
            ellipse((11 + r1) + dx1, 35 + dy1, r, r);
            ellipse(11 + dx1, (35 + r1) + dy1, r, r);
            ellipse((11 - r1) + dx1, 35 + dy1, r, r);

            fill(252, 174, 174);
            ellipse(11 + dx1, 35 + dy1, r1, r1); //center petal

            fill(252, color, 174);
            ellipse(40 + dx1, (40 - r1) + dy1, r, r);
            ellipse((40 + r1) + dx1, 40 + dy1, r, r);
            ellipse(40 + dx1, (40 + r1) + dy1, r, r);
            ellipse((40 - r1) + dx1, 40 + dy1, r, r);

            fill(252, 174, 174);
            ellipse(40 + dx1, 40 + dy1, r1, r1); //center petal

            fill(252, color1, 174);
            ellipse(55 + dx1, (20 - r1) + dy1, r, r);
            ellipse((55 + r1) + dx1, 20 + dy1, r, r);
            ellipse(55 + dx1, (20 + r1) + dy1, r, r);
            ellipse((55 - r1) + dx1, 20 + dy1, r, r);

            fill(252, 174, 174);
            ellipse(55 + dx1, 20 + dy1, r1, r1); //center petal

            fill(252, color2, 174);
            ellipse(60 + dx1, (35 - r1) + dy1, r, r);
            ellipse((60 + r1) + dx1, 35 + dy1, r, r);
            ellipse(60 + dx1, (35 + r1) + dy1, r, r);
            ellipse((60 - r1) + dx1, 35 + dy1, r, r);

            fill(252, 174, 174);
            ellipse(60 + dx1, 35 + dy1, r1, r1); //center petal

            dy1 += 65;

        }
        dx1 += 80;
        dy1 = 0; //reset dy1 when it hits bottom of column 
    }

    











    



}

Project 05: Wallpaper

sketch Download

var b; //x position for badfruit
var c; //y position for badfruit

function setup() {
    createCanvas(600, 600);
    background(180, 199, 137);
}


function goodfruit(x,y) {
    stroke(241, 240, 217);
    bezier(x,y+5,x-35,y-25,x-15,y+45,x,y+25); //leftside
    bezier(x,y+5,x+35,y-25,x+15,y+45,x,y+25); //rightside
}


function vine(x) {

    //vines
    noStroke();
    fill(241, 240, 217);
    rect(x-12,0,24,600);
    triangle(x,505,x,540,x+60,460); //bottomright
    triangle(x,480,x,445,x-60,400); //bottomleft
    triangle(x,360,x,325,x+60,280); //middleright
    triangle(x,300,x,265,x-60,220); //middleleft
    triangle(x,180,x,145,x+60,100); //topleft
    triangle(x,120,x,85,x-60,40); //topright

    //branches
    triangle(x+42,480,x+38,545,x+46,545); //bottomright
    goodfruit(x+42,535);
    triangle(x-42,420,x-38,485,x-46,485); //bottomleft
    goodfruit(x-42,475);

    triangle(x+42,300,x+38,365,x+46,365); //middleright
    goodfruit(x+42,355);
    triangle(x-42,240,x-38,305,x-46,305); //middleleft
    goodfruit(x-42, 295);

    triangle(x+42,120,x+38,185,x+46,185); //topright
    goodfruit(x+42,175);
    triangle(x-42,60,x-38,125,x-46,125); //topleft
    goodfruit(x-42, 115);

}

function badfruit(b,c) {
    stroke(96, 93, 42);
    fill(96, 93, 42);
    triangle(b,c-10,b-2,c+4,b+2,c+4); //stem
    bezier(b,c+5,b-35,c-25,b-15,c+45,b,c+25); //leftside
    bezier(b,c+5,b+35,c-25,b+15,c+45,b,c+25); //rightside
}


function draw() {

    vine(300);
    vine(480);
    vine(120);

    for (var b=35; b<=600; b+=176.5) { //increase from first to fourth row
       for(var c=25; c<=600; c+=176.5)  { //count from first to fourth column
        badfruit(b,c);
    }
}


//bible verse
fill(241, 240, 217);
    noStroke();
    textSize(12);
    textAlign(CENTER);
    text("JOHN 15:5",560,590);

}