Uncategorized – Page 4 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 6: Abstract Clock

function setup() {
    createCanvas(480, 480);
    noStroke();
}

function draw() {

    //set variables as time
    var sc = second();//second of clock
    var mt = minute();//minute of clock
    var hr = hour();//hour of clock
    var yh = hr*20;//y position of hour ellipse

    //color change

    background(0,0,0)

     if (yh >= 400 & yh < 420){//20:00 - 21:00
        background(99,30,80);
    } else if (yh >= 420 & yh < 480){//21:00-00:00
        background(57,25,84);
    } else if (yh >= 0 & yh < 80){//00:00-04:00
        background(1,8,79);
    } else if (yh >= 80 & yh < 120){//04:00-06:00
        background(0,173,255);
    } else if (yh >= 120 & yh < 160){//06:00-08:00
        background(252,255,181);
    } else if (yh >= 160 & yh < 240){//08:00-12:00
        background(255,255,112);
    } else if (yh >= 240 & yh < 300){//12:00-15:00
        background(255,221,64);
    } else if (yh >= 300 & yh < 360){//15:00-18:00
        background(255,121,84);
    } else if (yh >= 360 & yh < 400){//18:00-20:00
        background(167,60,90);
    }
   

    fill(233, 236, 239);
    //text(hr + ':' + mt + ':' + sc, 30, 300);//clock for reference

    push();
    stroke(233, 236, 239);
    strokeWeight(5);
    line(50,0,50,sc*8);
    line(200,0,200,mt*8);
    line(400,0,400,yh);
    pop();

    //clock hands
    ellipse(50,sc*8,60,60);//second
    ellipse(200,mt*8,90,90);//minute
    ellipse(400,yh,135,135);//hour


}

I enjoyed looking at the different approaches to keep time. I showed the passing of time through the movement of the circles and the changes in the background color. The left, middle, and right circles depict seconds, minutes, and hours, respectively. As the hour circle moves up and down, the background color also changes, reflecting the day’s time.

Clock Project

sketch

var fall;
var spring;
var winter;
var summer;

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
    textAlign(CENTER);
    rectMode(CENTER);
    fall = {r1:108, g1:12, b1:12, 
            r2:75, g2:28, b2:0, 
            r3:189, g3:81, b3:19};
    winter = {r1:253, g1:249, b1:231, 
            r2:202, g2:213, b2:255, 
            r3:21, g3:54, b3:186};
    spring = {r1:177, g1:244, b1:249, 
            r2:253, g2:217, b2:73, 
            r3:255, g3:204, b3:255};
    summer = {r1:123, g1:227, b1:243, 
            r2:255, g2:145, b2:145, 
            r3:250, g3:244, b3:228};
}

function draw() {
    background(220);
    translate(240, 240);
    date();
    rotate(-90);

    let hr = hour();
    let mn = minute();
    let sc = second();

    strokeWeight(30);
    noFill();

    if (m==3 || m==4 || m==5) {
        secondscircle(sc, spring);
        minutescircle(mn, spring);
        hourscircle(hr, spring);
    }
    else if (m==6 || m==7 || m==8) {
        secondscircle(sc, summer);
        minutescircle(mn, summer);
        hourscircle(hr, summer);
    }
    else if (m==9 || m==10 || m==11) {
        secondscircle(sc, fall);
        minutescircle(mn, fall);
        hourscircle(hr, fall);
    }
    else {
        secondscircle(sc, winter);
        minutescircle(mn, winter);
        hourscircle(hr, winter);
    }

}
function date() {
    stroke(0);
    strokeWeight(9);
    fill(255);
    rect(0,0, width/2,height/3,20);
    m = month();
    d = day();
    y = year();
    textSize(50);
    fill(0);
    strokeWeight(1);
    stroke(0);
    textFont('Orbitron')
    text(m + '.' + d + '.' + y, 0,15);

}

function secondscircle(sc, coloring) {
    stroke(coloring.r1,coloring.g1,coloring.b1);
    let secondsAngle = map(sc, 0, 60, 0, 360);
    arc(0, 0, 450, 450, 0, secondsAngle);
}

function minutescircle(mn, coloring) {
    stroke(coloring.r2,coloring.g2,coloring.b2);
    let minutesAngle = map(mn, 0, 60, 0, 360);
    arc(0, 0, 385, 385, 0, minutesAngle);
}

function hourscircle(hr, coloring) {
    stroke(coloring.r3,coloring.g3,coloring.b3);
    let hoursAngle = map(hr % 24, 0, 24, 0, 360);
    arc(0, 0, 320, 320, 0, hoursAngle);
}

Some challenges I faced were trying to use objects as a system of carrying the different color schemes for the different seasons in the year. Once I got the hang of using objects, I realized how useful and helpful they can be.

Random Time

I must say this design happened a bit by accident. I was trying to make it so that based on my clock motions, particularly of the dot that represents the second hand, that I would have moving dots around it that would change position using noise. During this process because of how I was doing my rotations using frameCount, I ended up creating this instead. I liked it so much on the second hand I used it for my hour and minute to create the moving circles. They move very fast but sometimes it will show down and the hour and minute circles will intersect and I think it is very beautiful.

sketch file

//Georgia Miller
//15-104
//section d

var w; 
var seconds; 
var minutes;
var hours;

function setup() {
    createCanvas(480, 480);
    background(220);
    var radius = min(width, height) / 2;
    seconds = radius * 0.71; //radius measurements for circle shape
    minutes = radius * 0.5;
    hours = radius * 0.5;
    w = width / 2;
}


function draw() {
    background(255);
    var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI; //for second
    var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; //for minute
    var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI; //for hour
    push();
for(var elhour = 0; elhour < 50; elhour++){ //create circles around hour circle
        //frameRate(30);
        translate(w + cos(h) * hours, w + sin(h) * hours);
        rotate(frameCount/1000);
        stroke(0)
        fill(120, 0, 120);
        ellipse(35, 0, 30, 30);
        fill(140, 0, 140);
        ellipse(0, 35, 30, 30);
        fill(160, 0, 160);
        ellipse(35, 35, 30, 30)
        fill(160, 0, 160);
        ellipse(-35, -35, 30, 30);
        fill(180, 0, 180);
        ellipse(0, -35, 30, 30);
        fill(200, 0, 200);
        ellipse(-35, 0, 30, 30);
        fill(220, 0, 220);
        ellipse(35, -35, 30, 30);
        fill(240, 0, 240);
        ellipse(-35, 35, 30, 30);
}
pop();
push();
    for(var elmin = 0; elmin < 50; elmin++){ //create circles around minute circle
        translate(w + cos(m) * minutes, w + sin(m) * minutes);
        rotate(frameCount/800);
        stroke(0)
        fill(150, 75, 0);
        ellipse(25, 0, 20, 20);
        fill(200, 100, 0);
        ellipse(0, 25, 20, 20);
        fill(250, 130, 0);
        ellipse(25, 25, 20, 20)
        fill(255, 150, 50);
        ellipse(-25, -25, 20, 20);
        fill(150, 75, 0);
        ellipse(0, -25, 20, 20);
        fill(200, 100, 0);
        ellipse(-25, 0, 20, 20);
        fill(255, 130, 0);
        ellipse(25, -25, 20, 20);
        fill(255, 150, 50);
        ellipse(-25, 25, 20, 20);
}
pop();
    push();
    for(var elsec = 0; elsec < 50; elsec++){ //create circles around second circle
        translate(w + cos(s) * seconds, w + sin(s) * seconds);
        rotate(frameCount/500);
        stroke(0)
        fill(100, 0, 0);
        ellipse(15, 0, 10, 10);
        fill(120, 0, 0);
        ellipse(0, 15, 10, 10);
        fill(140, 0, 0);
        ellipse(15, 15, 10, 10)
        fill(160, 0, 0);
        ellipse(-15, -15, 10, 10);
        fill(180, 0, 0);
        ellipse(0, -15, 10, 10);
        fill(200, 0, 0);
        ellipse(-15, 0, 10, 10);
        fill(220, 0, 0);
        ellipse(15, -15, 10, 10);
        fill(240, 0, 0);
        ellipse(-15, 15, 10, 10);
    }
    pop();
     stroke(0);
    fill(255);
    ellipse(w + cos(s) * seconds, w + sin(s) * seconds, 10, 10); //second circle
    ellipse(w + cos(m) * minutes, w + sin(m) * minutes, 20, 20); //minute circle
    ellipse(w + cos(h) * hours, w + sin(h) * hours, 30, 30); //hour circle
}

Looking Outwards-06

In looking at the application of randomness in generative art this week, I looked at Rami Hammour’s work on A Text of Random Meaning. It’s a visualization mapping out 18 columns of a “Register and Taps” random number generator in action. I found it interesting the way the final visualization simulates the look of long columns of text, but once viewers zoom in they find that the randomly generated lines are not actually representative of anything. I found the irony in this interaction very interesting. However, one of the interesting points I came across in my research was that technically in it’s simulated nature, there is no such thing as true randomness. In descriptions of Rami Hammour’s project, it is described as a “systematic cycle for producing randomness”.

Looking Outwards 5: 3D Graphics

Alexey Kashpersky’s work is really inspiring. I was especially awe-inspired by her work “Heart Of Inflammation.” In this visualisation, Kashpersky uses animations and 3D visuals to produce an iteration of what the central role of the inflammatory cytokine IL-1 in recurrent pericarditis. I really enjoy the idea that Alexey uses such an advanced digital art form with such elegance to give out information on biological processes in the human body and diseases that humans face. The colours that she uses are absolutely gorgeous with perfectly contrasting features and communicative aspects. 3D rendering softwares like cinema 4D could have been used.

https://kashpersky.com/heart-of-inflammation

Project 5: Wallpaper

sketch



//i was inspired by beaches and shells that found there cause i am from Socal

var wValue= []; 
var e = 100;
var j = e;

function setup() {
  var canvas = createCanvas(600, 220);  
 
  for (let x = 0; x <= width + 990; x += e) {
    for (let y = 0; y <= height + 200; y += j) {

      var object = {};
      
      //colors
      object.r = random(0, 255);
      object.g = random(0,255);
      object.b = random(0, 255);
      //sizes
      object.s = random(40, 50);
      
            wValue.push(object);
    }
  }
}

function draw() {
  pattern();
}

function pattern() {

  background(0, 0, 0);


  var counter = 0; 
  for (let x = 0; x <= width + 990; x += e) {
    for (let y = 0; y <= height + 200; y += j) {

      //colors
      let val = wValue[counter];
      counter++; // count to next object for next loop
      
      let r = val.r;
      let g = val.g;
      let b = val.b

      //sizes
      let s = val.s;

      push();
      scale(0.4);
      translate(x, y + 80);
      stroke(r, g, b);
      strokeWeight(5);
      noFill();
      for (let i = 0; i < 10; i++) {
        fill(255);
        ellipse(9, 20, s, s); //shell
        rotate(PI / 4);
      }
      pop();
      
       
    }
  }
}

Project-05

sketch

//Nami Numoto
//Section A
//mnumoto

var x = 0;
var y = 0;

function setup() {
    createCanvas(600, 300);
    background(191, 231, 242); //pastel blue
}

function kirby(x, y) {
    stroke(0); //black outline
    fill(224, 0, 91); //kirby feet pink! (feet come first because layers)
    ellipse(x + 20, y + 35, 40, 20);
    ellipse(x - 20, y + 35, 40, 20);
    fill(243, 165, 170); //kirby main body/face pink! + arms as well
    ellipse(x + 40, y + 10, 30, 25); //right arm ellipse
    ellipse(x - 40, y + 10, 30, 25); //left arm ellipse
    ellipse(x, y, 80, 80); //face ellipse
    fill(235, 104, 150); //kirby blush pink!
    ellipse(x - 20, y, 10, 5);
    ellipse(x + 20, y, 10, 5);
    //eyes going like ^^
    line(x + 8, y - 5, x + 12, y - 15); //right
    line(x + 12, y - 15, x + 16, y - 5);
    line(x - 8, y - 5, x - 12, y - 15); //left
    line(x - 12, y - 15, x - 16, y - 5);
    //i don't think i like the mouth actually, not with the ^^ eyes.. leave it off
}

function draw() {
    //set of loops for more-unit columns
    for(let i = 0; i <= 3; i += 1) {
        for(let column = 0; column <= 4; column += 1) {
            kirby(x + (200 * column), y + i * 100);
        }
    }
    //set of loops for less-unit columns
    for(let i = 0; i <= 2; i += 1) {
        for(let column = 0; column <= 3; column += 1) {
            kirby(x + (200 * column) + 100, y + i * 100 + 50);
        }
    }
}

I’ve made a Kirby wallpaper – I didn’t want to copy Kirby in his original form exactly, so I made him smiling with his eyes 🙂

This was a lot of fun, I hope to make more drawings like this.

Project 5: Wallpaper

luca wallpaper

var xp = 50;//startingx
var yp = 50;//startingy


function setup() {
    createCanvas(600, 600);
    angleMode(DEGREES);//using degrees instead of radians
}

function draw(){
    background(237, 224, 212);
    noStroke();
    for (var row = 0; row <= 10; row++){
        for (var col = 0; col <= 10; col++){
            drawCougar(row*90, col*90);//loop drawing
        }

    function drawCougar(x, y){
            push();
            translate(x-20, y-20);
            fill(221, 184, 146);
            ellipse(xp-20,yp-15,20,30);
            ellipse(xp+20,yp-15,20,30);
            
            fill(127, 85, 57);
            ellipse(xp,yp+20,35,30);//front mouth
            ellipse(xp-20,yp-15,20,30);
            ellipse(xp+20,yp-15,20,30);


            fill(176, 137, 104);
            ellipse(xp,yp,60,60);//head
            
            push();
            translate(10,10);
            rotate(7);
            fill(221, 184, 146);
            ellipse(xp-10,yp+5,20,27);//left mouth
            pop();

            push();
            rotate(353);
            fill(221, 184, 146);
            ellipse(xp,yp+25,20,27);//right mouth
            pop();

            fill(0);
            ellipse(xp-20,yp,5,10);//left eye
            ellipse(xp+20,yp,5,10);//right eye
            ellipse(xp,yp+5,20,10);//nose
            pop();
    }

 }   

}

I started the project by sketching out ideas. Then, I moved to p5.js and created one drawing, and embedded a loop to make it repeat, creating the pattern and effect. I think figuring out how to employ a for loop was the most challenging for me. However, I really liked how my wallpaper turned out in the end. The project provided me with a better understanding of loops and functions.

Project 5: Wallpaper

kstargio proj 05 Download

// Katherine Stargiotti, kstargio, B

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

//draws a randomized flower-covered wallpaper with vines and leaves. 
//color, placement, flower style, size, and rotation are all randomized to 
//produce a completely new wallpaper each time the program runs:
function draw() {
	for (l=random(25); l<width; l+=50) {		//vines go accross the entire canvas
	    drawVine(l, random(20));				//each vine is drawn before the flowers
	    for (d=0; d<2; d+=1) {	            	// density of the flowers
	        for (h=random(45); h<height+25; h+=random(45,75)) {		//parameters randomized to create variability throughout the piece
		        drawFlowerHead(l+random(-5, 5), h, random(.35, 1.25), int(random(4, 7)), int(random(3)));
	        } 
        }
    }
}

//draws a vine; random() used to add variation for weight, color, curve.
function drawVine(x, y) {
    push();
    translate(x, y);
	vineColor = color(random(100, 150), random(150,200), random(100,150));
	stroke(vineColor);
	strokeWeight(random(1,2));
	noFill();
	den = random(10, 20)			
	beginShape();
	    curveVertex(0, -20);
	    curveVertex(0, -20);
	    curveVertex(3, height/den);
	    curveVertex(0, 2*height/den);
	    curveVertex(-3, 3*height/den);
	    curveVertex(0, 4*height/den);
	    curveVertex(3, 5*height/den);
	    curveVertex(0, 6*height/den);
	    curveVertex(-3, 7*height/den);
	    curveVertex(0, 8*height/den);
	    curveVertex(3, 9*height/den);
	    curveVertex(0, 10*height/den);
	    curveVertex(-3, 11*height/den);
	    curveVertex(0, 12*height/den);
	    curveVertex(3, 13*height/den);
	    curveVertex(0, 14*height/den);
	    curveVertex(-3, 15*height/den);
	    curveVertex(0, 16*height/den);
	    curveVertex(3, 17*height/den);
	    curveVertex(0, 18*height/den);
	    curveVertex(-3, 19*height/den);
	    curveVertex(0, height);
	    curveVertex(0, height);
	endShape();
	drawLeaves(0, vineColor);
	pop();
}

//draws leaves onto a vine using the vineColor and x placement:
function drawLeaves(x, vineColor) {
	fill(vineColor);
	for (f=0; f<height; f+=random(45, 65)) {
		drawLeaf(x, f);
	}
}

//draws one leaf of random size at point x,y:
function drawLeaf(x, y) {
	let leafSize = random(1, 3);
	x += random(-.5, .5);
	//if the leaf is to the left of the vine it faces left; to the right is pointed right:
	if (x>0) {
		beginShape();
			vertex(x+(8*leafSize), y);
	   		curveVertex(x+(7*leafSize), (y-.2));
	   		curveVertex(x+(6*leafSize), (y-.5));
	   		curveVertex(x+(4.5*leafSize), (y-1.2));
	   		curveVertex(x+(3*leafSize), (y-2.1));
	    	curveVertex(x+(2.2*leafSize), (y-2.25));
	   		curveVertex(x+(1.5*leafSize), (y-2));
	   		curveVertex(x, (y-1.1));
	   		curveVertex(x, y);
	   		curveVertex(x, (y+1.1));
	   		curveVertex(x+(1.5*leafSize), (y+2));
	   		curveVertex(x+(2.2*leafSize), (y+2.25));
	   		curveVertex(x+(3*leafSize), (y+2.1));
	   		curveVertex(x+(4.5*leafSize), (y+1.2));
	   		curveVertex(x+(6*leafSize), (y+.5));
	   		curveVertex(x+(7*leafSize), (y+.2));
	   		vertex(x+(8*leafSize), y);
		endShape(CLOSE);
	} else {
		beginShape();
			vertex(x-(8*leafSize), y);
	   		curveVertex(x-(7*leafSize), (y-.2));
	   		curveVertex(x-(6*leafSize), (y-.5));
	   		curveVertex(x-(4.5*leafSize), (y-1.2));
	   		curveVertex(x-(3*leafSize), (y-2.1));
	    	curveVertex(x-(2.2*leafSize), (y-2.25));
	   		curveVertex(x-(1.5*leafSize), (y-2));
	   		curveVertex(x, (y-1.1));
	   		curveVertex(x, y);
	   		curveVertex(x, (y+1.1));
	   		curveVertex(x-(1.5*leafSize), (y+2));
	   		curveVertex(x-(2.2*leafSize), (y+2.25));
	   		curveVertex(x-(3*leafSize), (y+2.1));
	   		curveVertex(x-(4.5*leafSize), (y+1.2));
	   		curveVertex(x-(6*leafSize), (y+.5));
	   		curveVertex(x-(7*leafSize), (y+.2));
	   		vertex(x-(8*leafSize), y);
		endShape(CLOSE);
	}
	
}

//draws a flowerhead using petals:
function drawFlowerHead(x, y, flowerSize, petalNum, style) { 
	push();
	translate(x, y);		//centers flower at (0,0)
	//colors randomized in a specific range to create a cohesive pallet:
    var c = color(random(170,225), random(100,180), random(130,200)); 
	var co = color(130, 110, 140);		// purpley used for all flowers
	var rot = random(180);				// flowers start at different angles
	// drawing petals:
	for (q=0; q<petalNum; q++) {
		rotate(rot);
		if (style == 0) { drawPetalA(flowerSize*2, 0, c, co, flowerSize) }
		else if (style == 1) {drawPetalB(flowerSize*2, 0, c, co, flowerSize) }
		else { drawPetalC(flowerSize*2, 0, c, co, flowerSize) }
        rot = 2*PI/petalNum;			// rotation value based on number of petals
    }
    // center of flower drawn on top of petals:
    fill(120, 100, 110);
    circle(0, 0, flowerSize*5);
    fill(127, 100, 110);
    circle(0, 0, flowerSize*3);
    fill(135, 100, 110);
    circle(0, 0, flowerSize);
    pop();
}

// draws a petal in the FIRST[0] style. (pointy)
function drawPetalA(x, y, petalColor, outerColor, petalSize) {
    petalSize = petalSize/5;
	noStroke();	
	fill(outerColor);
	beginShape();
		vertex((x+85)*petalSize, y*petalSize);
	    curveVertex((x+70)*petalSize, (y-2)*petalSize);
	    curveVertex((x+60)*petalSize, (y-5)*petalSize);
	    curveVertex((x+45)*petalSize, (y-12)*petalSize);
	    curveVertex((x+30)*petalSize, (y-21)*petalSize);
	    curveVertex((x+22)*petalSize, (y-22.5)*petalSize);
	    curveVertex((x+15)*petalSize, (y-20)*petalSize);
	    curveVertex((x+5)*petalSize, (y-11)*petalSize);
	    curveVertex(x, y);
	    curveVertex((x+5)*petalSize, (y+11)*petalSize);
	    curveVertex((x+15)*petalSize, (y+20)*petalSize);
	    curveVertex((x+22)*petalSize, (y+22.5)*petalSize);
	    curveVertex((x+30)*petalSize, (y+21)*petalSize);
	    curveVertex((x+45)*petalSize, (y+12)*petalSize);
	    curveVertex((x+60)*petalSize, (y+5)*petalSize);
	    curveVertex((x+70)*petalSize, (y+2)*petalSize);
	    vertex((x+85)*petalSize, y);
	endShape(CLOSE);
	fill(petalColor);
	beginShape();
		vertex((x+75)*petalSize, y*petalSize);
	    curveVertex((x+60)*petalSize, (y-3)*petalSize);
	    curveVertex((x+45)*petalSize, (y-9)*petalSize);
	    curveVertex((x+30)*petalSize, (y-17)*petalSize);
	    curveVertex((x+15)*petalSize, (y-17)*petalSize);
	    curveVertex((x+5)*petalSize, (y-9)*petalSize);
	    curveVertex(x, y);
	    curveVertex((x+5)*petalSize, (y+9)*petalSize);
	    curveVertex((x+15)*petalSize, (y+17)*petalSize);
	    curveVertex((x+30)*petalSize, (y+17)*petalSize);
	    curveVertex((x+45)*petalSize, (y+9)*petalSize);
	    curveVertex((x+60)*petalSize, (y+3)*petalSize);
	    vertex((x+75)*petalSize, y);
	endShape(CLOSE);
	fill(outerColor);
	beginShape();
	    curveVertex(x, y);
	    curveVertex(x+petalSize*15, y+7);
	    curveVertex(x+petalSize*35, y+2);
	    curveVertex(x+petalSize*15, y+6);
	endShape(CLOSE);
	beginShape();
	    curveVertex(x, y);
	    curveVertex(x+petalSize*10, y+12);
	    curveVertex(x+petalSize*30, y+9);
	    curveVertex(x+petalSize*15, y+12);
	endShape(CLOSE);
	beginShape();
	    curveVertex(x, y);
	    curveVertex(x+petalSize*15, y-7);
	    curveVertex(x+petalSize*35, y-2);
	    curveVertex(x+petalSize*15, y-6);
	endShape(CLOSE);
	beginShape();
	    curveVertex(x, y);
	    curveVertex(x+petalSize*10, y-12);
	    curveVertex(x+petalSize*30, y-9);
	    curveVertex(x+petalSize*15, y-12);
	endShape(CLOSE);
	beginShape();
	    curveVertex(x, y);
	    curveVertex(x+petalSize*17, y-.5);
	    curveVertex(x+petalSize*40, y);
	    curveVertex(x+petalSize*17, y+.5);
	endShape(CLOSE);
	noLoop();
}

// draws a petal in the SECOND[1] style. (squiggled)
function drawPetalB(x, y, petalColor, outerColor, petalSize) {
    petalSize = petalSize/5;
	noStroke();	
	fill(outerColor);
	beginShape();
		vertex((x+80)*petalSize, y*petalSize);
	    curveVertex((x+70)*petalSize, (y-7)*petalSize);
	    curveVertex((x+60)*petalSize, (y-12)*petalSize);
	    curveVertex((x+45)*petalSize, (y-18)*petalSize);
	    curveVertex((x+30)*petalSize, (y-22)*petalSize);
	    curveVertex((x+22)*petalSize, (y-22.5)*petalSize);
	    curveVertex((x+15)*petalSize, (y-20)*petalSize);
	    curveVertex((x+5)*petalSize, (y-12)*petalSize);
	    curveVertex(x, y);
	    curveVertex((x+5)*petalSize, (y+12)*petalSize);
	    curveVertex((x+15)*petalSize, (y+20)*petalSize);
	    curveVertex((x+22)*petalSize, (y+22.5)*petalSize);
	    curveVertex((x+30)*petalSize, (y+22)*petalSize);
	    curveVertex((x+45)*petalSize, (y+18)*petalSize);
	    curveVertex((x+60)*petalSize, (y+12)*petalSize);
	    curveVertex((x+70)*petalSize, (y+7)*petalSize);
	    vertex((x+80)*petalSize, y);
	endShape(CLOSE);
	fill(petalColor);
	beginShape();
		vertex((x+70)*petalSize, y*petalSize);
	    curveVertex((x+60)*petalSize, (y-2)*petalSize);
	    curveVertex((x+57)*petalSize, (y-4)*petalSize);
	    curveVertex((x+53)*petalSize, (y-2)*petalSize);
	    curveVertex((x+50)*petalSize, (y-4)*petalSize);
	    curveVertex((x+47)*petalSize, (y-9)*petalSize);
	    curveVertex((x+44)*petalSize, (y-12)*petalSize);
	    curveVertex((x+37)*petalSize, (y-10)*petalSize);
	    curveVertex((x+30)*petalSize, (y-17)*petalSize);
	    curveVertex((x+15)*petalSize, (y-17)*petalSize);
	    curveVertex((x+5)*petalSize, (y-9)*petalSize);
	    curveVertex(x, y);
	    curveVertex((x+5)*petalSize, (y+9)*petalSize);
	    curveVertex((x+15)*petalSize, (y+17)*petalSize);
	    curveVertex((x+30)*petalSize, (y+17)*petalSize);
	    curveVertex((x+37)*petalSize, (y+10)*petalSize);
	    curveVertex((x+44)*petalSize, (y+12)*petalSize);
	    curveVertex((x+47)*petalSize, (y+9)*petalSize);
	    curveVertex((x+50)*petalSize, (y+4)*petalSize);
	    curveVertex((x+53)*petalSize, (y+2)*petalSize);
	    curveVertex((x+57)*petalSize, (y+4)*petalSize);
	    curveVertex((x+60)*petalSize, (y+2)*petalSize);
	    vertex((x+70)*petalSize, y);
	endShape(CLOSE);
	noLoop();
}

// draws a petal in the THIRD[2] style. (rounded)
function drawPetalC(x, y, petalColor, outerColor, petalSize) {
    petalSize = petalSize/5;
	noStroke();	
	fill(outerColor);
	beginShape();
		vertex((x+70)*petalSize, y*petalSize);
	    curveVertex((x+68)*petalSize, (y-6)*petalSize);
	    curveVertex((x+65)*petalSize, (y-10)*petalSize);
	    curveVertex((x+60)*petalSize, (y-15)*petalSize);
	    curveVertex((x+45)*petalSize, (y-22)*petalSize);
	    curveVertex((x+30)*petalSize, (y-25)*petalSize);
	    curveVertex((x+22)*petalSize, (y-24)*petalSize);
	    curveVertex((x+15)*petalSize, (y-22)*petalSize);
	    curveVertex((x+5)*petalSize, (y-11)*petalSize);
	    curveVertex(x, y);
	    curveVertex((x+5)*petalSize, (y+11)*petalSize);
	    curveVertex((x+15)*petalSize, (y+22)*petalSize);
	    curveVertex((x+22)*petalSize, (y+24)*petalSize);
	    curveVertex((x+30)*petalSize, (y+25)*petalSize);
	    curveVertex((x+45)*petalSize, (y+22)*petalSize);
	    curveVertex((x+60)*petalSize, (y+15)*petalSize);
	    curveVertex((x+65)*petalSize, (y+10)*petalSize);
	    curveVertex((x+68)*petalSize, (y+6)*petalSize);
	    vertex((x+70)*petalSize, y);
	endShape(CLOSE);
	fill(petalColor);
	beginShape();
		vertex((x+60)*petalSize, y*petalSize);
	    curveVertex((x+58)*petalSize, (y-6)*petalSize);
	    curveVertex((x+45)*petalSize, (y-15)*petalSize);
	    curveVertex((x+30)*petalSize, (y-17)*petalSize);
	    curveVertex((x+15)*petalSize, (y-15)*petalSize);
	    curveVertex((x+5)*petalSize, (y-9)*petalSize);
	    curveVertex(x, y);
	    curveVertex((x+5)*petalSize, (y+9)*petalSize);
	    curveVertex((x+15)*petalSize, (y+15)*petalSize);
	    curveVertex((x+30)*petalSize, (y+17)*petalSize);
	    curveVertex((x+45)*petalSize, (y+15)*petalSize);
	    curveVertex((x+58)*petalSize, (y+6)*petalSize);
	    vertex((x+60)*petalSize, y);
	endShape(CLOSE);
	noLoop();
}

I was inspired by flowers for this project. I did not sketch out any patterns before programming, but I knew that I wanted to create a few different types of petals that could be turned into many unique flowers. By starting with the petals and smaller units of the images, I was able to randomize parameters to produce completely different flowers each time the program is run. I also recorded my screen while creating this project and condensed the progress into a short video embedded below.

15-104 Project 05 video (google drive link)

Looking Outwards 05: 3D Computer Graphics

The project I have chosen for this blog post is “Artifacts of the Noisefield: Advection of points based on a math noise” by the artist ChaoticAtmospheres. According to the artist, the goal of the piece was to explore noise advection, which is the displacement of a point according to a mathematical equation. Starting with simple shapes, ChaoticAtmospheres used a computer algorithm to visually represent noise in 3-dimensional graphics. The resulting images are beautiful. They have clear resemblances to images in nature (especially insects). This comparison brings to light the deep connection between nature’s reaction to waves and the way humans can manipulate and use waves to produce entirely new artifacts of art & science. I admire the artist’s use of sound in their visual work, and their use of digital programming to bring the concept to life.

Artifacts of the Noisefield: Advection of points based on a math noise.
ChaoticAtmospheres