## 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
}

}
``````