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

Project-06: Abstract Clock

 /*
Nicholas Wong
Section A
*/


var d; //Days
var h; //Hours
var m; //Minutes
var s; //Seconds

var angle; //Angle for sin-wave frequency for pulse

function setup()
{
    createCanvas(480,480);
    angleMode(DEGREES); //Degrees instead of radians (makes mapping easier)
}
 
function draw() 
{
	translate (width/2,height/2) //Make origin at center
	rotate(-90) //Rotate -90 so starting points for most circle counters face up

	background(0); //Black background

	//Day circle (Outer circle)
	dayCircle();

	//Detail circles
	push();
	fill(0)
	strokeWeight(1)
	stroke(250,0,0);
	circle(0,0,200);
	pop();

	//Dark red circles
	push();
	noFill();
	stroke(1)
	stroke(50,0,0)
	circle(0,0)
	circle(0,0,65)
	circle(0,0,80);
	circle(0,0,100);
	circle(0,0,150);
	pop();


	//Hour circle (Second outer ring)
	hourCircle();

	//Minute circle (Tertiary rings)
	minuteCircle();

	//Second circle (Dotted inner ring)
	secondCircle();

	//Center-most pusling circle
	secondPulse();
    angle += (360/60) / 2; //1 period is 360/framerate, half makes 1 pulse/s

    
}

//Circle of 31 arcs
function dayCircle()
{
	var d = day();

	//Loop runs 31 times, the maximum number of days for any month
	for (let i=1; i<=31; i++)
	{

		push();
		noStroke();
		fill(50,0,0)
		arc(0,0,250,250,(i-1)*360/31,(i-1)*360/31 + 10.5); //Make 31 arcs

		//If the day is today, make the arc red
		if(i == d)
		{
			fill(250,0,0)
		}
		else //If not today, make arc dark red
		{
			fill(70,0,0)
		}

		//First day of month is slightly brighter red arc
		if(i==1)
		{
			fill(90,0,0)
		}

		arc(0,0,235,235,(i-1)*360/31,(i-1)*360/31 + 10.5); //Outer arc for aesthetics
		pop();

		//Additional circles for aesthetics
		noFill();
		stroke(255,0,0);
		circle(0,0,250);
		circle(0,0,200);
	}
}

//Circle with 24 segments
function hourCircle()
{
	var h = hour();

	//Loop is run for the amount of hours passed today
	for (let i=0; i<=h; i++)
	{

		push();
		noFill();
		
		stroke(200,0,0);
		strokeWeight(3)

		arc(0,0,150,150,i*15,i*15 + 6); //Add arcs for every hour that has passed today

		strokeWeight(0.35)

		push(0);
		rotate(-90)
		line(75*sin((-i*15)),75*cos((-i*15)),100*sin((-i*15)),100*cos((-i*15))) //Line drawn from arcs for aesthetics
		pop();

		stroke(255)
		strokeWeight(1)
		arc(0,0,140,140,i*15,i*15 + 6); //Secondary arc for aesthetics
		pop();
	}
}

//Circle of variable arc lengths that show minutes in an hour
function minuteCircle()
{
	var m = minute();

	let m_circle = map(m,0,60,0,360); //Map minutes in an hour to angles on a circle
    push();
    noFill();

    strokeWeight(2);
    stroke(200,0,0);

    //Creates an arc with arc length representing how many minutes has passed in this hour
   	arc(0,0,100,100,0,m_circle);

   	strokeWeight(2);
   	stroke(250,100,100);
   	arc(0,0,80,80,0,m_circle); //Aeshtetic secondary arc

   	pop();
}

//Circle of 60 segments that show seconds in a minute
function secondCircle()
{
	var s = second();

	//Loop runs for the amount of seconds passed in this minute
	for (i=0; i<=s; i++)
	{
		push();
		noFill();
		stroke(255,150,150);
		strokeWeight(1)
		arc(0,0,65,65,i*6,i*6 + 1); //Creates an arc for every second that has passed in this minute
		pop();
	}
}

//Circles in center that pulse every second
function secondPulse()
{

   	if (frameCount/60 == 1) //If the frame count is divisible by 60 (is a second)
   	{
   		angle = 180; //Angle is set to 180
   	}

    let s_diam = sin(angle) * 40; //Pulse maximum diameter

    push();

    noFill();
    strokeWeight(1)
    stroke(250,150,150)

    circle(0,0,s_diam); //Draw circle with variable diameter

    stroke(250,250,250)

    circle(0,0,s_diam * 0.75); //Second circle for aesthetics

    pop();
}

Mk2 tony diy arc reactor lamp stainless steel kit illuminant led flash light set Sale - Banggood.com

Inspired by tech stuff. Mostly Iron Man, I just re-watched Endgame.

Looking Outwards 6: Randomness

Jackson Pollock’s works are always described as being “random”, generated from “randomness”, being completely devoid of any generative structure, pattern or system. Some compare his work to a child or a madman flinging paint onto a canvas, with no consideration of composition, light, color, or any of the fundamental elements of what the masses consider “a painting”.

However, that isn’t quite true. Jackson Pollock’s paintings have been heavily analyzed, even down to the atomic level, by art critics and scientists alike. However, both agree that there is a system hidden in his work: The apparent strokes and patterns in the paintings look the same, regardless of how close an observer looks at it. In other words, there is a design containing a repeating structure of patterns. This is not so much randomness as it is chaos.

People often lump the word “chaos” with the word “random”, but they are different concepts. Chaos is present in deterministic systems whose behavior, can in principle, be predicted. Large, complex systems have deterministic laws that are highly sensitive to initial conditions. A common metaphor for this is the Butterfly Effect; A butterfly flapping its wings in China can cause a Hurricane in Texas through a cascade of events. Although the apparent cause of the hurricane in this metaphorical butterfly-hurricane system is “randomness”, there exists hints of underlying patterns, feedback loops, and self organization. The same hints of a mathematical system exist within Pollock’s work – The same system which nature uses to guide the growth of blood vessels, tree branches, and even galaxies.

Project 05: Wallpaper

sketch Download

 /*
Nicholas Wong
Section A
*/
var spacing = 6; //Spacing between waves
var offset; //Wave offset

function setup() {
    createCanvas(600,400);
    offset = 23;

}
 
function draw() 
{   

    background(20,10,15)
    //Star grid
    for (let x = 0; x <= width; x += 15) //Cols
    {
        for (let y = 0; y <= height / 2; y += 15) //Rows
        {   
            push();
            noStroke();
            fill(255)
            circle(x+(random(0,20)),y+(random(0,20)),random(0.5,1.5)) //Offsets each star X and Y by a random amount
            pop();
        }
    }

    //Wave generation
    for(let w = 0; w <= height; w += spacing) //Number of waves
    {       
        fill(0.75*w,0.15*w,0.25*w) //Color darkens with number of loops
            strokeWeight(0.25)
            stroke(w)
            wave(w, offset*w); //Offset of waves and wave pattern determined by number of loops
    }
    noLoop(); 

}
// Wave function
function wave(yOffset, offset)
{
    beginShape();
    for(let x = 0; x < width; x++)
    {
        let angle = offset + x *0.01;
        let y = map(sin(angle), -1, 1, 100, 200);
        vertex(x,y + yOffset);
    }
    vertex(width,height);
    vertex(0,height);
    endShape();

}

Looking Outwards 5: 3D Graphics and faces

3D graphics have come a long way since its inception in the late 1970s, and is prevalent everywhere today. This is most prominently seen in movie and video game industry, where new technological breakthroughs revolutionize the industry every few years. Modern hardware and software allows us to create extremely complex, photo-realistic environments through techniques such as photogrammetry and physically-based-materials. We can even somewhat accurately simulate the physics of the real world to create realistic looking fluid simulations like fire, smoke, and water.

However, despite the extreme amount of detail that can be achieved through our current technology, recreating realistic, believable CG faces remains one of the biggest challenges in the 3D graphics industry. No one can pin-point exactly what it is that makes a computer-generated face uncanny; even if every hair, every pore, every bead of sweat is generated, it will still remain in the uncanny valley.

There have been a few successes when it comes to creating fully computer-generated faces that are distinctly NOT human. The alien race from the 2012 movie Avatar is a great example of how a CG face can achieve a sense of realism and believability. More recently, Marvel’s Thanos has taken the spotlight as being one of the more successful fully-CG characters. However, these aren’t human faces, so they never come across as uncanny.

The most successful CG face that manages to cross the uncanny valley, in my opinion, is the recreation of Sean Young’s character, Rachel, in Bladerunner 2049, courtesy of the English VFX company MPC. The combination of ideal lighting conditions, high quality 3D scans, the painstaking recreation of every muscle on Sean Young’s face, and the amazing performance of body-double Loren Peta resulted in what is probably the most realistic looking CG face in movie history. And of course, a lot of credit goes to the animators that made the subtle facial expressions look absolutely flawless.

Most of MPC’s success was achieved through how the scene was filmed – camera angles, lighting trickery, and so on. The recreation of Sean Young’s character would not have looked nearly as good in any other lighting condition or environment. 3D graphics technology has yet to conquer the challenge that is the human face.

Blade Runner 2049': How VFX Masters Replicated Sean Young as Rachael | IndieWire

Project-04-String Art

sketch Download

 /*
Nicholas Wong
Section A
*/


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

    background(0)

}
 
function draw() 
{
    background(0)
    stroke(255)

    //Circle around image (follows mouse slightly)
    for (var i = 0; i <=300; i += 10) 
    {
        stroke(60)
        strokeWeight(0.5)
        line(width - i, 0.1*mouseY, width+(0.1*mouseX), height - i*2);
        line(i, height + (0.1*mouseY), -30+0.1*mouseX, i*2);
        line(width - i, height + (0.1*mouseY), width+(0.1*mouseX), i*2);
        line(i, 0.1*mouseY, -30+0.1*mouseX - 1, height - i*2);
    }

    //Double For-loop for X and Y grid coordinates
    for (let x=0;x<=width;x+=25) {
        //Columns
        push();
        stroke(255)
        strokeWeight(0.1)
        line(x,0,x,height)
        pop();

        for(let y=0;y <=height;y+=25){
            //Center point
            push();
            stroke(255)
            strokeWeight(0.05)
            line(mouseX,mouseY,x,y);

            //Rows
            push();
            stroke(50)
            strokeWeight(0.1)
            line(0,y,width,y)
            pop();

            //Right
            push();
            stroke(70,0,0)
            strokeWeight(0.15)
            line(0,mouseY,width,y)
            pop();

            //Left
            push();
            stroke(0,70,70)
            strokeWeight(0.15)
            line(width, mouseY, 0, y)
            pop();

            //Bottom
            push();
            stroke(50,50,0)
            strokeWeight(0.15)
            line(mouseX, height, x, 0)
            pop();

            //Top
            push();
            stroke(70,0,80)
            strokeWeight(0.15)
            line(mouseX, 0, x, height)
            pop();               
        }
    }


    
}

Looking Outwards 4: Audio-driven digital art

It is known that simple algorithms can generate complex visual art. Audio-driven digital art, a form of audiovisual art, is similar to generative art in that an algorithm is still responsible for generating the art, however the algorithm only converts audio input into a visual output. Sound visualization techniques are nothing new; they have been used for music videos, desktop backgrounds, and screen savers for quite some time already. Common sound visualization techniques like waveform visualization are used to add visual flare to an app or a music video, or even something as simple as a volume indicator.

Only recently has sound visualization become prevalent in art and design. Audiovisual art allows for the synthesis of both physical sensations to create fully immersive, unique experiences. Nanotak Studio’s Daydream is a mesmerizing example of audiovisual art being utilized to create a unique spatial experience. The installation consists of two series of glass panels that have images projected onto them from behind. The resulting effect creates the illusion of one being in a larger space, with the echoing sounds making the whole experience more immersive. The pushing and pulling of the projected abstract shapes and spaces coincide with the humming and soothing sounds, creating the sensation of being detached from reality. The choreography of sound and light with the use of algorithms is able to create art that provides an experience unlike any other.

Project 03: Pentachoron

Enjoy the lines and connections and gradient changes. I imagined this to be a screensaver.

sketchDownload

 /*
Nicholas Wong
Section A
*/

var triSize = 100; //Triangle size (arbitrary number)
var rectSize = 400; //Rectangle size (also arbitrary)
var colorChange = false; //True means color value decreases, false means it increases
var shadeNum = 255; //Color value to be manipulated

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

	cursor(CROSS); // Changes Cursor to a cross

	//Constrain mouse position to canvas
	let mx = constrain(mouseX, 10, width - 10)
    let my = constrain(mouseY, 10, height - 10)

    //Background gets lighter as mouse moves further from center
	background(dist(mouseX,mouseY,width/2,height/2) * 0.1);

	//Stroke properties for lines
	noFill();
    stroke(255 - (dist(mouseX,mouseY,width/2,height/2) * 0.5)) //Lines get darker as mouse moves from center
    strokeWeight(1.5)

    //Square in background moves with mouse slightly
    square(width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20, rectSize)

    //Large triangle moves with mouse slightly
    triangle(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25 , width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25, width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)

    //Lines that connect 3 corners of the larger triangle to one corner of the smaller triangle

    //Corner 1 (top left smaller triangle)
   	line(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25,width/2 - triSize*2+ my*0.25, height/2 - triSize*1.5 + mx*0.25)
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25,width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25)
    line(width/2 - mx*0.25, height/2 + triSize - my*0.25, width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)

    //Corner 2 (top right smaller triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25,width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25,width/2 - mx*0.25, height/2 + triSize - my*0.25)

    //Corner 3 (bottom smaller triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - mx*0.25, height/2 + triSize - my*0.25)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25,width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25)
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25,width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)


    //Connecting 3 corners of the rectangle to one corner of the large triangle

    //Corner 1 (top left large triangle)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 + rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20, height/2 + rectSize/2 + my*0.1 - 20)

    //Corner 2 (top right large triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 + rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 + rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)
    
    //Corner 3 (bottom large triangle)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25, width/2 + rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)


    //Pulsating gradient effect for triangle in middle
	if (shadeNum >= 255){
		colorChange = true; //Change direction of gradient change
	}
	else if (shadeNum <= 0){
		colorChange = false; //Change direction of gradient change
	}

	if (colorChange){ //Color becomes darker
		shadeNum -= 2;
	}
	else{ //Color becomes lighter
		shadeNum += 2;
	}

    //Triangle 3
    fill(shadeNum) //Pulsating gradient shade
    triangle(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25 , width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25, width/2 - mx*0.25, height/2 + triSize - my*0.25)


    //Stroke properties to lines connected to mouse
    push();
    strokeWeight(4);
    stroke(dist(mouseX,mouseY,width/2,height/2) * 0.25) // Line gets brighter as it moves further from center
    //Lines from smaller triangle that connect to mouse
    line(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25, mx, my);
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25, mx, my);
    line(width/2 - mx*0.25, height/2 + triSize - my*0.25, mx, my);
    pop();
}

Looking Outwards: Parametric Architecture

As an architecture student, parametric or generative design is a new field that is slowly gaining traction. This new method of designing allows for unexpected, novel ideas to emerge, and allows for rapid iteration with these completely original forms. The ability to use designs driven by algorithms allows one to bypass the technical constraints of designing forms with highly complex, repetitive elements. Furthermore, generative modeling allows for the creation of more organic and amorphous designs thanks to artificial intelligence being able to resolve complex issues like structural viability/stability.

Currently, parametric design is being used practically mainly for aesthetic design features such as building facades, interior light fixtures, fenestration designs, and so on. However, generative designs will eventually become integral parts of overall structural form-finding for buildings and homes.

LMN Architects’ Voxman Music Building’s ceiling is a prominent example of generative architecture being utilized. The ceiling was parametrically designed, from its organic structure to the small, triangular apertures arranged on its surface. “The design integrates acoustic reflection, stage and house lighting, audiovisual elements,, and fire suppression into a single eye-popping ceiling system” – Architect Magazine.

700-seat concert hall, Voxman School of Music

Variable-Face

VariableFaceNW Download


 /*
Nicholas Wong
Section A
*/

 //Variables
 var eyeSizeR = 50; //Right eye squint amount
 var eyeSizeL = 50; //Left eye squint amount
 var smile = false; //Smile Bool
 var lBrowHeight = 0; //Brow height modifier
 var rBrowHeight = 0; //Brow height modifier
 var browAngle = 0; // Brow Angle
  var nostrilSize = 0; //Nostril size modifier
 var circleShade = 230; //Outer Circle greyscale tone
 var bgColor = 'white' //Background of inner circle

function setup() {
	
    createCanvas(640, 480);
    text("p5.js vers 0.9.0 test.", 10, 15);

    //White Background (hah no it's black)
    background(0);

}

function draw() {

//Circles
	fill(circleShade); //Fill outer circle with variable shade
	ellipse (width/2,height/2+30,500,500); //Outer Circle

	if (bgColor == 'white'){ //Make background circle white
		fill(255);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}
	else if (bgColor == 'green'){ //Make background circle green
		fill(255);
		fill(240,255,240);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}
	else{ 	//Make background circle blue
		fill(230,230,255);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}

// I originally made my face thing 2000x2000
	scale (0.4); //Scaling drawing to fit in canvas
	translate(115,170) //Moving drawing to roughly be in center

//Neck
	noStroke();
	fill(235,190,160);
	rect(547,860,290,160);
	fill(250,205,175);
	rect(730,860,108,160);

//Face Base Shape
	noStroke();
	fill(250, 215, 172);
	beginShape();
	vertex(459,657);
	vertex(499,816);
	vertex(566,899);
	vertex(623,960);
	vertex(749,960);
	vertex(837,871);
	vertex(884,789);
	vertex(914,688);
	vertex(949,533);
	vertex(933,346);
	vertex(890,278);
	vertex(784,252);
	vertex(659,242);
	vertex(561,261);
	vertex(469,336);
	vertex(459,657);
	endShape();


	//Chin Shading
	noStroke();
	fill(250, 205, 175);
	beginShape();
	vertex(635,837);
	vertex(722,839);
	vertex(737,962);
	vertex(629,963);
	vertex(614,922);
	endShape();

	//Face Shading
	noStroke();
	fill(245, 200, 172)
	beginShape();
	vertex(469,200);
	vertex(445,606);
	vertex(499,811);
	vertex(626,960);
	vertex(686,960);
	vertex(672,852);
	vertex(610,795);
	vertex(510,527);
	vertex(538,429);
	endShape();

	//Right Eye
	noStroke();
	fill(250);
	ellipse(570,522,100,eyeSizeR);

	//Left Eye
	noStroke();
	fill(250);
	ellipse(805,522,100,eyeSizeL);

	//Left eye Shading
	noStroke();
	fill(245, 195, 162);
	beginShape();
	vertex(532,451);
	vertex(602,458);
	vertex(641,516);
	vertex(634,550);
	vertex(572,506);
	vertex(533,506);
	vertex(515,508);
	endShape();


	//Right Eye Shading
	noStroke();
	fill(245, 195, 165);
	beginShape();
	vertex(731,523);
	vertex(763,476);
	vertex(856,460);
	vertex(882,517);
	vertex(821,503);
	vertex(779,511);
	vertex(744,556);
	endShape();

	//Brows
	fill(200, 175, 175);

	quad(751,466+rBrowHeight,796,443+rBrowHeight,855,440+rBrowHeight,877,460+rBrowHeight); //Brow height variable added to Y coordinates of quad

	quad(507,438+lBrowHeight,579,437+lBrowHeight,611,461+lBrowHeight,496,454+lBrowHeight); //Brow height variable added to Y coordinates of quad

	//Nose Shading
	noStroke();
	fill(245, 200, 162);
	beginShape();
	vertex(669,573);
	vertex(613,688);
	vertex(617,713);
	vertex(638,694);
	vertex(684,689);
	vertex(674,623);
	endShape();

	//Under Nose Shading
	fill(248, 205, 170);
	quad(643,722,615,789,669,769,674,717);


	//Nostrils
	noStroke();
	fill(230,150,150);
	triangle(643-nostrilSize,695-nostrilSize,662+nostrilSize,707+nostrilSize,641-nostrilSize,707+nostrilSize); //Left
	triangle(715-nostrilSize,708+nostrilSize,739+nostrilSize,706+nostrilSize,728+nostrilSize,698-nostrilSize); //Right

	
	//Mouth
	noStroke();
	fill(245,193,172);
	if (smile) //If smile variable is true, draw smile shape for mouth
	{
		beginShape();
		vertex(595,776);
		vertex(664,784);
		vertex(690,788);
		vertex(719,784);
		vertex(790,776);
		vertex(739,820);
		vertex(693,832);
		vertex(654,820);
		endShape();

	}
	else //If smile variable is false, draw normal mouth
	{
		beginShape();
		vertex(605,792);
		vertex(664,784);
		vertex(690,788);
		vertex(719,784);
		vertex(780,793);
		vertex(739,828);
		vertex(693,832);
		vertex(654,827);
		endShape();
	}


	//Hair
	noStroke();
	fill(30,25,30);
	beginShape();
	vertex(445,644);
	vertex(364,521);
	vertex(375,402);
	vertex(393,263);
	vertex(447,201);
	vertex(563,81);
	vertex(717,45);
	vertex(793,52);
	vertex(890,107);
	vertex(935,160);
	vertex(950,226);
	vertex(950,272);
	vertex(960,308);
	vertex(970,401);
	vertex(950,478);
	vertex(948,550);
	vertex(947,584);
	vertex(935,603);
	vertex(936,451);
	vertex(925,344);
	vertex(889,278);
	vertex(778,266);
	vertex(698,261);
	vertex(599,262);
	vertex(535,292);
	vertex(464,365);
	endShape();

	//Hair Shading
	noStroke();
	fill(25,15,15);
	beginShape();
	vertex(448,607);
	vertex(461,378);
	vertex(557,286);
	vertex(651,254);
	vertex(782,260);
	vertex(920,288);
	vertex(870,189);
	vertex(764,120);
	vertex(679,126);
	vertex(593,162);
	vertex(509,205);
	vertex(426,279);
	vertex(401,409);
	endShape();


}

function mousePressed(){
	eyeSizeL = random(10,50); // Controls squint for left eye
	eyeSizeR = random(10,50); // Controls squint for right eye
	smile = random([true,false]); // Bool for smile or no smile
	lBrowHeight = random(0, -30); // Amount to increase left brow height by
	rBrowHeight = random(0, -30); // Amount to increase right brow height by
	browAngle = random(0,30); // Angle to rotate brow
	nostrilSize = random(0,5); // Amount to increase nostril size
	circleShade = random(0,255); // Greyscale tone for the outer circle in the background
	bgColor = random(['green','blue','white']); // Choose color randomly for background

}

Looking Outwards 2: Generative Art

https://gmunk.com/

Audi A5 - Pure Imagination - .www | GMUNK | Pure products, Audi a5, Imagine

GMUNK creates atmospheric, spatial, generative art that takes inspiration from science fiction, psychedelics, and architecture. His work is motivated by his desire to learn and be uncomfortable.

His work usually consist of moving, digitally generated images projected or displayed on screens, however he also utilizes programmable lighting arrays, projection mapped sculptures, and robotic choreography.

His installation works are very immersive, and transports the viewer into a mesmerizing, ominous environment created by sculptures, robotic arms, lights, and projected patterns.

A lot of his subtler, digital pieces utilize simple, recursive algorithms to create mesmerizing 3-dimensional patterns. Some aren’t entirely generated by code, however utilize particle simulations. Similarly, some rely on procedural generation techniques to create spectacularly complex environments from simple algorithms.

He is also the creator of extremely iconic wallpapers, posters, and designs, such as the Windows 10 desktop. He does a lot of promotional work for large brands.