Month: October 2021

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 
    }

    











    



}