alchan-Project 06-abstract clock

abstract clock

function setup() {
    createCanvas(240, 480);
    angleMode(DEGREES);
    noStroke();
}

function draw() {
  var m = month();
  var d = day();
  // map the current hour, minute, & second
  // to an r, g, or b value
  var hr = map(hour(), 0, 23, 0, 255);
  var min = map(minute(), 0, 59, 0, 255);
  var sec = map(second(), 0, 59, 0, 255);
  var clock = {r: min, g: sec, b: hr};

  // assign colors to minute and second
  // (hour is present in both as the blue value)
  var minColor = color(clock.r, 0, clock.b);
  var secColor = color(0, clock.g, clock.b);

  // draw gradient; the top color represents the minute
  // & the bottom represents the second
  // (hour is the blue value)
  for (var c = 0; c <= height; c += 5) {
    var amt = map(c, 0, height, 0, 1);
    var gradient = lerpColor(minColor, secColor, amt);
    fill(gradient);
    rect(0, c, width, 5);
  }

  // draw a number of equally spaced lines dependant on month
  // (the month is how many sections the area is divided into)
  // day of month is represented by the y position of the lines
  for (var i = 0; i <= m; i++) {
    var monthDiv = width / m;
    var dayPos = map(d, 0, 31, 0, height-10);
    fill(255);
    rect(monthDiv + i*monthDiv, dayPos, 1, 10);
  }
}

I played around with a few different ideas in my sketches (I thought about doing something related to lunar phases, a clock that represented time by randomly scattering dots on a grid, and a more representational clock that showed time by the growth of a flower).

I really wanted to create a clock that was abstract enough to almost be without a focal point, and decided to play around with color as a representation of time. I originally just had the r, g, and b values of the background assigned to the hour, minute, and second. This was a little boring for anyone who didn’t watch the clock for a long period of time, so I decided to play around with gradients and also incorporate the day and month

In the final clock, the top color represents the current minute, while the bottom color represents the current second. The hour is the blue value present in both colors. Month is represented by the number of divisions created by the white lines, and the y-position of the lines is roughly equivalent to the day of the month.

gyueunp – Looking Outwards 06

Nicholas Sassoon is a French-born artist who currently lives and works in Vancouver, Canada. He uses early computer imaging techniques to create his works that demonstrate the possibility of expressing dimensions of the physical realm through digital images.

Sassoon’s Drift is a work with an oddly celestial quality that captivated me. The random alterations of the elements create a fascinating effect that displays a sense of motion. Ultimately, the random movements of the visual elements create a simultaneously mesmerising and unsettling effect. They separate and merge together to create scenes of nature or those that convey a sense of narrative. Additionally, the auditory element enhances the overall experience of the piece.

Nicholas Sassoon’s website

juyeonk-LookingOutwards-06

(Example of a minuet created by using Mozart’s K.516f.

Title: K.516f

Creator: Wolfgang Amadeus Mozart

Year of Creation: 1787

Link to the Article: http://www.pianonoise.com/Article.dice.htm https://en.wikipedia.org/wiki/Musikalisches_W%C3%BCrfelspiel

Link to the Bio of the Artist: https://www.biography.com/people/wolfgang-mozart-9417115

K.516f is a minuet composed by Mozart in 1787 according to his own version of Musikalische Würfelspiele. Musikalische Würfelspiele (translated: musical dice game) describes any type of game / means of composing musical pieces that involves rolling one or more dices to randomly generate the notes or measures, and it was popular among the composers in the 18th century Europe. It was supposed to offer a fun alternative way of composing, even for the amateurs who were not familiar with the basic rules of composition. Its exact origin or inventor is unknown, but the very first example dates back to 1757, when Johann Philipp Kirnberger wrote Der allezeit fertige Menuetten- und Polonaisencomponist (German for “The Ever-Ready Minuet and Polonaise Composer”). Other famous versions include the ones by C.P.E Bach (J.S. Bach’s fifth son).

The most well-known version of Musikalische Würfelspiele and its product were published by Mozart in 1787. Composition K.516f included the instruction of the game and the pres-made measures to choose from.

Here’s how Mozart’s version works:

There are 176 pre-written measure to choose from if one is to compose a Minuet; 96 if Trio. Two six-sided dices are then rolled to determine which measure comes next. Using the instruction sheet, one could determine which dice roll corresponds to which measure put next.

It’s impressive how the composition sounds so put together and well thought-out even though the measures are randomly arranged. Maybe it’s just Mozart’s brilliance that he was able to compose individual measures that would sound coherent no matter how they are arranged.

alchan-Looking Outwards 06

John Pound’s Ran Dum LOOP (1999) is a collection of code that randomly generates comic- and cartoon-style art. (An example of one of the randomly-generated pieces is shown below).

Pound wrote the code entirely in PostScript. The program does have some elements that are not randomly determined, but I wasn’t able to find out what those were or what type of randomness Pound was using.

I chose this project because I was drawn to the idea of randomly generating something that doesn’t seem like it would work well as a randomly generated piece. The viewer has to try to make sense of the generated panels and images, and I like the idea of being able to “see” an overarching narrative in a random sequence of images.

rmanagad-lookingoutwards-06-sectione

Creator: Felix Turner

Title of Work: Noise Field

Year of Creation: 2011

Link to Project Work: https://airtightinteractive.com/demos/processing_js/noisefield08.html

Link to Artist Bio: https://www.airtightinteractive.com/about/

Noise Field is an interactive, mouse-based random activity program running on p5.js. As a function, Noise Field uses Perlin Noise — a gradient-based procedural algorithm that increases the believability of computer-generated animations –and noise parameters based on mouse movement and placement to generate colored ellipses from central points. With that being said, randomness is present as clicking produces a random set of parameters for the movement of the ellipses.

This work is influential in expanding my mindset towards the possibilities of using p5.js as a communicative medium — I’d like to eventually be able to apply Processing towards the creation of interactive web-based programs that use natural elements.

svitoora – 05 Looking Outwards

World Within: Colored Scanning Electron Microscopes (SEM)

SEM scans of various plant seeds colorized

Colored Electron Microscope Scans are amazing! These were photos I would stare at in the science textbook as a kid. Recently, I came across one of these Scanning Electron Microscope (SEM) scans at the Miller Gallery in the exhibit World Within. Scientifically and algorithmically these scans are generated by using a beam of an electron to scan the surface of the object. In comparison to a beam of visible photons, the electrons’ wavelength is 10,000 times shorter thereby enabling higher precision in vision. The SEM has an electron optical lens which works similarly to a light camera lens to capture the reflected electrons, and afterward through some image processing algorithm, a SEM image emerges. While SEM, allows us to see the world at a whole different level, it only allows us to see that world in black and white because of the nature of electrons’ micro wavelength. Without the artist’s sensibility, these scans would just be mere black and white photos. Today, the common practice of coloring a SEM photo is still via Photoshop or other feature detection software.

Tongue of a domestic cat

Tardigrade

PHOTOSHOP FOR THE SCIENTIST:
https://www.youtube.com/watch?v=pp0sisFQ53M

svitoora – 05 – Recursive Sakura Wallpaper

sketch

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Cherry Blossoms: Recusively generate a forest of Sakura.
// Using a Lindenmayer system, each plant grows towards the sun.

var w = 400;
var h = 400;

// Global Variable
var PLANT;
var segment_l = h * .1;
var r = h * .05 * .5;
var common_ratio = .618033 //Golden Ratio
var food;

// Recursively generates a plant model
var max_i = 7; // Max iteration depth
var cur_i = 0;
var DRAW_i = 0; // DRAW's iteration depth

///// MODEL /////
// Creates the sun for plants to grow towards
function food_create(x = w / 2, y = -h * 2) {
	this.x = x;
	this.y = y;
}

// Creates plants node. Nodes that have .child are branches,
// and nodes without .child are leaves.
function create_plant_node(x, y) {
	this.x = x;
	this.y = y;
	this.x0 = this.x;
	this.y0 = this.y;
	this.child = [];
	this.x1 = null;
	this.y1 = null;
}

// Grows plant by making plant seek sunlight
function grow(plant, cur_i) {
	// Using the golden ratio, plant's branch size is a geometric sequence
	l = segment_l * (common_ratio ** (cur_i))
		// Randomly generate the next node via reducing
		// distance from plant ro sun
	do {
		angleMode(DEGREES);
		if (cur_i == 0) {
			angle = 5;
			theta = random(-90 - angle, -90 + angle);
		} else {
			theta = random(0, 360);
		}
		plant.x1 = plant.x0 + (l * cos(theta));
		plant.y1 = plant.y0 + (l * sin(theta));
		d_new = dist(plant.x1, plant.y1, food.x, food.y)
		d_old = dist(plant.x0, plant.y0, food.x, food.y)
	}
	// Keep generating until the new distance is less than the current one
	while (d_new > d_old)
	plant.child = [];
	// Randomly decide how many children(branches) a node should have
	for (var x = 0; x < random(1, 4); x++) {
		plant.child.push(new create_plant_node(plant.x1, plant.y1));
	}
}

// Recursively generates plant
function generate_plant(PLANT, cur_i, max_i) {
	// Break Base
	if (cur_i == max_i) {
		return
		// Continue case
	} else {
		grow(PLANT, cur_i);
		cur_i++;
		for (i in PLANT.child) {
			generate_plant(PLANT.child[i], cur_i, max_i)
		}
	}
}

///// DRAW /////
// Recursively draws plant
function draw_PLANT(plant, DRAW_i) {
	DRAW_i++; // Increases DRAW's Depth counter
	stroke(255 * .3);
	strokeCap(SQUARE);
	strokeWeight((h * .0125) * (common_ratio ** DRAW_i))
		// Break case: Flowers
		// If node has no children; draw leaf.
	if (plant.child.length == 0) {
		fill(255, 255, 255);
		ellipse(plant.x, plant.y, (2 / 600) * w, (2 / 600) * w);
		return
	} // If node has chldren; draw branches
	else {
		r = r ** common_ratio;
		for (i in plant.child) {
			line(plant.x, plant.y,
				plant.child[i].x, plant.child[i].y)
			draw_PLANT(plant.child[i], DRAW_i);
		}
	}
}

///// SETUP /////
function setup() {
	createCanvas(w, h);
	background("#a5d3e5");
	food = new food_create();

	// Row Cols Controller
	num_tree = 3;
	num_row = 3;
	y_pos = 0;

	// Translates Row and Col of Trees
	push();
	translate((w / num_tree) * .5, (h / num_row)*.825);
	// Rows
	for (var x = 0; x < num_row; x++) {
		y_pos = x * (h / num_row);
		// Cols
		for (var i = 0; i < num_tree; i++) {
			PLANT = new create_plant_node(i * (w / num_tree), y_pos);
			generate_plant(PLANT, cur_i, max_i);
			draw_PLANT(PLANT, DRAW_i);
		}
	}
	pop();
    textAlign(RIGHT);
    textSize(10);
    fill(255 * .3);
    text("Please click to regnerate",w*.975,h*.985)
	print("Final:", PLANT);
}

function mouseClicked() {
	setup()
}

Using a Lindenmayer system, each plant grows towards the sun. Every plant starts with a seed, and randomly generates branches to reduce its distance towards the sun at (width/2, -height*2) for a maximum recursion depth of 7. A number of sub-branches (children) each branch (node) generates is random between 1-4.

rmanagad-project05-sectione

sketch

// Robert Managad
// Section E
// rmanagad@andrew.cmu.edu
// Project-05-Wallpaper


//colors

var petalGR = 47;
	petalGG = 168;
	petalGB = 144;
var petalRR = 239;
	petalRG = 119;
	petalRB = 99;

var petalXL = 15; // left petal X-co
	petalYLR = 21.5; // left petal Y-Co; right petal Y-Co
	petalXM = 21.5; // middle petals X-Co
	petalYMT = 15.5; // top middle petal Y-co
	petalYMB = 27.5; // bottom middle petal Y-co
	petalXR = 27; // right petal X-co

//size of petals

var petalW = 4.6
var petalH = 12.3

var spacingX = 30; // x-displacement between row elements
	spacingY = 30; // y-displacement between row elements

function setup() {
    createCanvas(300, 300);
    background(252, 241, 235);
    noLoop();
}

function draw() {
	for (var y  = 0; y < 12; y++) { // 12 iterations of rows
        for (var x = 0; x < 12; x++) { // 12 iterations of columns
        	if (y % 2 == 0 & x % 2 == 0) {  // only the even rows of this variant are drawn
        		var Lpy = (petalYLR + y * spacingY) * (sqrt(3)/2); 
        		var Tpy = (petalYMT + y * spacingY) * (sqrt(3)/2);
        		var Bpy = (petalYMB + y * spacingY) * (sqrt(3)/2);
        		var Rpy = (petalYLR + y * spacingY) * (sqrt(3)/2);
            	var Lpx = (petalXL + x * spacingX) - 5; 
            	var	Tpx = (petalXM + x * spacingX) - 5; 
            	var Bpx = (petalXM + x * spacingX) - 5; 
            	var Rpx = (petalXR + x * spacingX) - 5; 
            	var	petalRR = 239;
				var	petalRG = 119;
				var	petalRB = 99;
            }
            else if (y % 2 == 1 & x % 2 == 1) { // only the odd rows of this variant are drawn
            	var Lpy = ((petalYLR + y * spacingY) * (sqrt(3)/2)); 
        		var Tpy = ((petalYMT + y * spacingY) * (sqrt(3)/2));
        		var Bpy = ((petalYMB + y * spacingY) * (sqrt(3)/2));
        		var Rpy = ((petalYLR + y * spacingY) * (sqrt(3)/2));
            	var Lpx = ((petalXL + x * spacingX) - 5); 
            	var	Tpx = ((petalXM + x * spacingX) - 5); 
            	var Bpx = ((petalXM + x * spacingX) - 5); 
            	var Rpx = ((petalXR + x * spacingX) - 5); 
            	var	petalRR = 47;
				var	petalRG = 168;
				var	petalRB = 144;
            }
            	noStroke();
				fill(petalRR, petalRG, petalRB);
				ellipse(Lpx, Lpy, petalH, petalW); //left petal
				ellipse(Tpx, Tpy, petalW, petalH); // top petal
				ellipse(Bpx, Bpy, petalW, petalH); // bottom petal
				ellipse(Rpx, Rpy, petalH, petalW); // right petal
        }
    }
}

I played with several ideas for my background — from merit badges to patchwork — before settling on my final concept: clover petals. I wanted to explore using nested loops and if/else statements to control where elements would appear, and how they can be controlled to do just that. I used Illustrator to plan out my composition beforehand, in addition to primary sketches.

LookingOutwards05-jooheek

Creative Miniworld: By Jan Reeh

This is a 3D art piece made by 3D artist Jan Reeh through a computer graphics program. I was very impressed by how much detail the artist portrays in his artwork. No matter how much you zoom, you can see every detail, and the artwork looks so alive. It’s impressive how through computer graphics, you can get art that could look so real and like a photograph. Through computer graphics, you can more detail than you can ever get by drawing or making by hand.

Jan Reeh also shows in a video about this project how he made a 3D template first and overlayed color and visuals over that 3D template, just like how when you physically sculpt something, you make the scaffold first and then overlay color, texture, etc. This made me realize how art does not always have to be about physical making but it can also be made through technology and computers, although the process is the same.

Sheenu-Looking Outwards-05

https://www.behance.net/Filiphds

These are multiple abstract images created by a freelance artist online named Filip Hodas in 2015.

These images were made using Cinema 4D, Octane, Zbrush, World Machine, and Xparticles. While the images were mostly made by hand using 3D modeling, some organic and natural looking parts of some of the images were made using a noise function. Mountains, germs, or particles were made using a noise function.

What I absolutely love about these images is not only the abstract shapes and imaginative transformations of nature, but also the colors, lighting and shading. These pictures all use such vibrant, colorful, modern, and eye-catching color palettes that I absolutely love. The abstractions look so real and almost believable as if these were physically made with clay rather than on a computer. What makes these pictures great is how eye-catching and eye pleasing they are. It’s definitely something that deserves to be hung on a wall.