Project – 06 – Clock

sketch
var angle = 0

function setup() {
    createCanvas(400, 400);
    background(220);
}

function draw() {
	background(130, 125, 187)
	var min = minute()
	var sec = second()
	var hours = hour()
	
	//gradient cirles
	push()
	translate(200, 200)
	fill(84, 62, 116)
	stroke(30, 24, 45)
	strokeWeight(0.2)
	scale(10)
	circle(0, 0, 10)
	pop()

	push()
	translate(200, 200)
	fill(120, 85, 167)
	strokeWeight(0)
	scale(10)
	circle(0, 0, 9)
	pop()

	push()
	translate(200, 200)
	fill(140, 105, 187)
	strokeWeight(0)
	scale(10)
	circle(0, 0, 8)
	pop()

	push()
	translate(200, 200)
	fill(160, 125, 207)
	strokeWeight(0)
	scale(10)
	circle(0, 0, 7)
	pop()

	//circle counting seconds
	noFill()
	push()
	translate(200, 200)
	stroke(53, 44, 43)
	strokeWeight(0.4)
	scale(sec/10)
	circle(0, 0, 10)
	pop()

	//circle counting minutes
	push()
	translate(200, 200)
	stroke(53, 44, 43)
	strokeWeight(0.2)
	scale((12 + min/20))
	circle(0, 0, 10)
	pop()

	//circle counting hours
	push()
	translate(200, 200)
	stroke(53, 44, 43)
	strokeWeight(0.2)
	scale((32 + hours/10))
	circle(0, 0, 10)
	pop()

	//large outside circle
	push()
	translate(200, 200)
	stroke(53, 44, 43)
	strokeWeight(0.3)
	scale(20)
	circle(0, 0, 10)
	pop()

	//line around outside circle
	push()
	translate(200, 200)
	stroke(49, 41, 42)
	strokeWeight(2)
	scale(25)
	circle(0, 0, 10)
	pop()

	//rotating arc
	push()
	translate(200, 200)
	stroke(100, 80, 130)
	strokeWeight(3)
	rotate(radians(angle))
	arc(0, 0, 200, 200, 0, PI, OPEN)
	pop()
	angle+=1
}

For this project, I wanted to use circles to represent time. The black circle outline in the very middle represents seconds. The circle outline outside of the purple circle represents minutes. And the final circle outline represents the hour.

Looking Outwards – 06

The piece I decided to write about is “Take Me to the Desert” by Tyler Hobbs. To create this piece, Hobbs created an algorithm that randomly places circles of different sizes and colors. The algorithm starts by placing the largest circles first and the smallest last. It finds a spot to place each circle by checking for collisions. This is done checking if the difference between two circles’ center point is larger than the sum of their radii. It will continue to insert circles until the desired number of circles is reached or until the failed attempts limit is reached. I admire this piece because despite the circles being randomly placed, it still looks clean and none of them overlap. I also really like the colorfulness of this generative art.

take-me-to-the-desert-800.jpg

Project – 05 – Wallpaper

sketch
//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-05-Project

var x = 0
var y = 0

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

function draw() {
	background(255, 205, 225)

	//calls the functions with random spacing
	 for (var x = -10; x <= width-100; x += 150) {
        for (var y = 5;y <= height; y+= 170) {
        	push()
            translate(x, y)
            rotate(radians(random(0, 20)))
            cherries()
            pop()
        }
    }

   	for (var x = 70; x <= width-100; x += random(150, 210)) {
        for (var y = 0;y <= height; y+= random(170, 200)) {
        	push()
            translate(x, y)
            rotate(radians(random(0, 20)))
            flowers()
            pop()
        }
    }

	for (var x = 20; x <= width; x += random(100, 150)) {
        for (var y = 20;y <= height; y+= random(100, 170)) {
        	push()
        	rotate(radians(random(0, 10)))
            translate(x, y)
            dots()
            pop()
        }
    }
    noLoop()
} 

//cherries drawing
function cherries() {
    noFill()
	beginShape()
	strokeWeight(2)
	stroke(95, 175, 90)
	curveVertex(80, 20)
	curveVertex(60, 20)
	curveVertex(50, 40)
	curveVertex(50, 40)
	endShape()
	beginShape()
	strokeWeight(2)
	curveVertex(60, 20)
	curveVertex(60, 20)
	curveVertex(75, 31)
	curveVertex(80, 31)
	endShape()
	strokeWeight(1)
	fill(255, 85, 150)
	strokeWeight(0)
	circle(50, 50, 20)
	circle(80, 40, 20)
	fill(95, 165, 90)
	push()
	translate(70, -30)
	rotate(radians(90))
	ellipse(50, 20, 10, 20)
	pop()
	push()
	rotate(radians(-13))
	ellipse(64, 32, 20, 10)
	pop()
} 

//flowers drawing
function flowers(){
	fill(255)
	push()
	noStroke()
	translate(50, 100)
	ellipse(0, 0, 20, 30)
	translate(15, 10)
	rotate(radians(80))
	ellipse(0, 2, 20, 30)
	translate(15, 10)
	rotate(radians(65))
	ellipse(0, 0, 20, 30)
	translate(15, 10)
	rotate(radians(70))
	ellipse(0, 0, 20, 30)
	translate(15, 10)
	rotate(radians(75))
	ellipse(0, 2, 20, 30)
	translate(15, 10)
	pop()

	fill(255, 140, 180)
	strokeWeight(0)
	ellipse(49, 115, 10, 10)
}

//random circles
function dots(){
	strokeWeight(0)
	var r = random(0, 15)
	fill(255)
	circle(0, 0, r)
}

// For this assignment, I wanted to make a design that looked similar to a phone wallpaper. 
// I wanted it to look like something I would actually used, so I added colors and shapes that I like a lot. 
// I also didn't want the shapes to have the same spacing between each other, as it makes the design look too symmetrical. So I used random to create some variation.

Looking Outwards – 05

For this Looking Outwards, I decided to cover a 3D character called Eggdog. This character was based off of a real pomeranian that looked quite similar to the shape of an egg after getting a haircut. This video of the dog became very popular over time and led to the creation of a 3D model. I assume that the 3D rendering of the dog and the videos of this character was made using a program like Blender. Within these types of programs, you can create and rig 3D models. You can also record animations and bring in other models to create an environment. What I admire about this work is that Eggdog is such a simple character, but has become so widespread and has made a lot of people laugh due to the silliness of its design.

Example video: https://twitter.com/zotakufilms/status/1242918393331752960?s=20

Original video: