SectionD – Page 23 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LookingOutwards-06

The randomized images with the titles that created them

This project uses random numbers to generate randomized art based on a user-input title string to seed the generation. It produces completely random psychedelic works that are featured in a constantly updated publicly available gallery. Based on the creator’s description, it seems that the process for image generation is based on the seed from the title and then random number generators use that as input to create different but categorically similar works. Some of them share similar overall compositions, materials, or color combinations. The creator’s sensibilities are manifested through how the code displays the randomness, or how the actual visual display reflects the random numbers. In some sense though, the actual art is created by the user’s name input, because this is what seeds the visual generation. The creator just created the method or tool for the translation of that text to a randomized visual output.

random-art.org
Coded by Andrej Bauer, works ‘created’ by the public

Project 6 – Abstract Clock

For Project 6, I created a rather simple 24 hr clock but displayed abstractly. I purposely duplicated multiple clocks into one composition to create visual intrigue and guide the eye through the mesmerizing movement of the seconds, minutes, and hours. I was inspired by the Apple Watch and its demonstration of time through simplicity and color.

sketch

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES);
}

function draw() {
    background(38, 84, 124);

    //clock transformation
    //total of nine clocks
    push();
    translate(80, 80);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(320, 320);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(80, 320);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(320, 80);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(200, 80);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(200, 320);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(200, 200);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(80, 200);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(320, 200);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

}

function one() {
    //seconds function
    let s = second();
    strokeCap(SQUARE);
    noFill();
    strokeWeight(50);
    stroke(6, 214, 160);
    //movement
    let secondHand = map(s, 0, 60, 0, 360);
    arc(0, 0, 100, 100, 0, secondHand);
}

function two() {
    //minute function
    let m = minute();
    strokeCap(SQUARE);
    noFill();
    stroke(255, 209, 102);
    //movement
    let minuteHand = map(m, 0, 60, 0, 360);
    arc(0, 0, 200, 200, 0, minuteHand);
}
 function three() {
    //hour function
    let h = hour();
    strokeCap(SQUARE);
    noFill();
    stroke(239, 71, 111);
    //movement
    let hourHand = map(h % 24, 0, 24, 0, 360);
    arc(0, 0, 300, 300, 0, hourHand);

 }

 function clock() {
    //entire clock
    one();
    two();
    three();
    //center of clock
    fill(255);
    noStroke();
    circle(0, 0, 50);
 }

Inspiration:

LO 06 – Randomness

Nervous System: Jessica Rosenkrantz, Jesse Louis-Rosenberg

Growing Objects (2014)

Today, I will be talking about a project called “Growing Objects” (2014), by a design studio, Nervous System (Jessica Rosenkrantz and Jesse Louis-Rosenberg). The project features 3D printed sculptures that encompass the structure and patterns present in nature. To create these mesmerizing objects, the designers used “truly” random numbers, where they adopt the logic of the pattern and formations and translating it into scientific theories and algorithms for a design using computational systems. They used posters to show the algorithmic investigations of nature to explain the math, science, and natural inspiration behind the 3D printed objects. Although the “randomness” is based on true observations from nature, these sculptures do not directly mimic specific phenomena, but rather are open-ended explorations of the mathematics and logic behind them. I admire this project because when looking at the 3D printed objects, you can get a feeling of the natural object that it was inspired by. The subtle personalities are translated to the recreated forms, yet still different in an organized, unorganized way. The creator’s artistic abilities show when they take this a step further, incorporating movement to represent “growth” when in motion to enhance user interaction.

Visit Portfolio here

Project 05: Wallpaper

My first idea when trying to create a wallpaper was using Penrose tiling, but I couldn’t find a good algorithm without directly copying code, which wouldn’t make for a very good learning exercise. My second idea, using a theme of symmetry, came in the form of recursion. I decided to loosely base a recursive wallpaper off of a Koch snowflake. I think that the resolution is a little too low for it to be properly viewed, but it is still interesting. I’d like to imagine this pattern looped across my wall, each recursive segment being repeated.

sketch

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0);
    // just the rainbow
    let colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', 
                    '#0000FF', '#4B0082', '#9400D3'];

    // move center for ease of programming
    translate(width / 2, height / 2);
    recursiveSnowflake(360, colors);

    noLoop();
}

// use default parameters for recursive depth
function recursiveSnowflake(initSize, colors, depth=0) {
    if (depth === 7) { // base case
        // do nothing
    } else { // recursive case
        fill(colors[depth]);
        drawTriCenter([0, 0], initSize, 0);
        drawTriCenter([0, 0], initSize, 180);
        
        var dAngle = 60;
        for (var i = 0; i < 6; i++) {
            push();
            rotate(radians((dAngle * i)));
            translate(0, Math.sqrt(3) * initSize / 2);
            recursiveSnowflake(initSize / 3, colors, depth+1);
            pop();
        }
    }
}

// draws an equilateral triangle, point facing up
function drawTriCenter(c, sideLength, rot) {
    // math to get tri points from center
    var distance = sideLength / Math.sqrt(3);
    let p1 = [c[0] - distance * cos(radians(90 + rot)), 
                c[1] - distance * sin(radians(90 + rot))];
    let p2 = [c[0] - distance * cos(radians(210 + rot)), 
                c[1] - distance * sin(radians(210 + rot))];
    let p3 = [c[0] - distance * cos(radians(330 + rot)), 
                c[1] - distance * sin(radians(330 + rot))];

    strokeWeight(0);
    
    triangle(p1[0], p1[1], p2[0], p2[1], p3[0], p3[1]); 
}

LO 5: 3D Computer Graphics

I’ve been interested in procedural generation for quite a while, mostly due to my interest in creating a 3D roguelike game, and as a result of this I have chosen a demonstration of a procedural generation model in 3D. The generation algorithm in this case is cellular automata, an algorithm that generates forms and structures based on rules applied to each neighboring “cell.” The use of cellular automata in the video below shows a great understanding of the algorithm, giving the various forms being shown. The 2017 video generates forms using blocks, most forms being non-descript or crystalline in structure. My personal favorite forms shown in the video are Clouds 1 and 2 because of their cave-like structures. Despite the interesting nature of the algorithms and forms generated, the creator, Softology, most likely intended this to be a demonstration for their software, Visions of Chaos.

Visualization of cellular automata algorithm.

Project Wallpaper

wallpaper Download

var x = 0
var y = 0
var side = 50

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function coolShape(x, y) {
	strokeWeight(3);
	stroke(95, 57, 1);
	fill(250, 195, 14);
	//left quad
	quad(x, y, (x + 2*(side/3)), (y + (-side/2)), (x + 2*(side/3)), (y + (side/2)), x, (y + side))
	//right quad
	quad((x + 2*(side/3)), (y + (-side/2)), (x + 4*(side/3)), y, (x + 4*(side/3)), (y + side), (x + 2*(side/3)), (y + (side/2)));
	//bottom quad
	quad(x, (y + side), (x + 2*(side/3)), (y + (side/2)), (x + 4*(side/3)), (y + side), (x + 2*(side/3)), (y + 2*side));
}

function draw() {
	background(250, 195, 14);
	for (var r = 0; r <= 400; r += (dist(x, (y + side), (x + 4*(side/3)), (y + side)))) {
		for (var i = 0; i <= 500; i += 4*(side/3)) {
			coolShape(r, i);
		}
	}
}

3D Computer Graphics

The work in 3D computer graphics that I want to talk about is the work done for Merida’s hair in the Disney/Pixar movie Brave. Because Merida’s hair is this thick mess of curls, they had to develop a new technology in order to capture its movement. That new technology is called “core curve and points.” Essentially, each “strand” of hair is represented by a spring (1,500 hand-placed curls!!). The points along the core curve include the springs, so that when Merida moves her head along the curve, the hair moves with her. I admire this project because of how this technology makes it possible to represent more identities in animated film. I also admire how much fun the team seems to have had cracking this problem? It took almost three years to finalize her hair!! That’s crazy!! I admire that they genuinely love this work so much. Claudia Chung is my source of information on this project, she was the simulation supervisor on Brave.

Here’s the website where I got my information from:
https://www.insidescience.org/news/brave-features-hair-raising-animations

Project 05 – Wallpaper

sketch


function setup() {
  createCanvas(600, 600);
  background(250,233,208);
}

function draw() {

  for (let y = 0; y < 10; y++) { //setting up array for the shapes
    for (let x = 0; x < 8; x++ ) {
        push()
        translate(x*80,y*60);
        leftsrf()
        rightsrf()
    	pop()
    }
  }

}

function leftsrf() { 
  noLoop()
  var r = random(0,250);
  var g = random(0,250);
  var b = random(0,250);
  fill(r,g,b) ;
	quad(0,0,0,40,40,60,40,20);
}

function rightsrf() { 
  noLoop()
  var r = random(0,250);
  var g = random(0,250);
  var b = random(0,250);
  fill(r,g,b)
  quad(40,20,80,0,80,40,40,60)

}

Project 04 – String Art

sketch

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 300);
    background(200);
    line(0, 0, 0, 300);
    line(300, 300, 350, 100);
    dx1 = (0-0)/numLines;
    dy1 = (300-0)/numLines;
    dx2 = (550-100)/numLines;
    dy2 = (1)/numLines;
}

function draw() {
	background(0)
    var x1 = 40;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;
    var x4 = 0;
    var y4 = 400
    for (var i = 0; i <= numLines; i += 1) {
        stroke(0,0,255);
        line(mouseX/1.7, 0, 400, y1); //blue curves
        stroke(255,0,0)
        line(mouseX-30,y1,x2,y2); //red curves
        stroke(0,255,0)
        line(mouseX/1.2,y1,y4,y2) //green curves
        x1 +=dx1
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    } 
}

Project 03 – Dynamic Drawing

sketch

var angle = 0 ;
var x=50 ; 
var y=50 ;


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

function draw() {
	background(mouseX/5,mouseY/5,(mouseY+mouseX)/10);
	stroke(0,mouseX/5,width-mouseY/5);
	strokeWeight(mouseX/100);
    for (let w=0; w<=width;w+=30){ //setting up circle grid 
    	for(let h=0;h<=height; h+=30) {
    		r = 75 * exp(((-1)*dist(mouseX, mouseY,w,h))/100); //varying size with mouse position
    		fill(width-mouseX,height-mouseY,mouseY/5) //varying color of balls with mouse positoin
    		ellipse(w,h,r) ; //circle
    	}
    }
    push();
	translate(mouseY,mouseX); 
	rotate(radians(mouseX));
	fill(mouseY);
	strokeWeight(mouseY/100);
	ellipse(x,y+100,dist(mouseX,mouseY,x,y+100)/10,dist(mouseX,mouseY,x,y+100)/10); //circle floating on top

	translate(mouseX,mouseY);
	rotate(radians(mouseY));
	ellipse (x,y, dist(mouseX,mouseY,x,y)/10, dist(mouseX,mouseY,x,y)/10) ; 
	
	translate(mouseX*0.4,mouseY*0.8);
	rotate(radians(mouseY*0.5));
	ellipse(x+80,y,dist(mouseX,mouseY,x+80,y)/10,dist(mouseX,mouseY,x+80,y)/10);
	pop();
 

}