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

LO2 – Generative Art

LIA’s SV01, SV15, SV04, SV08 was a generative art installation at One Culver creative space, Culver City, California, displayed on 2018/07/01 – 2018/09/30 and 2018/07/01 – 2018/12/31. Most of her contract work seems to be displayed on a large screen in large, public areas. The large scale of LIA’s art is what inspires me– it commands just the right amount of presence and has the impact to elevate the space to feel more high-end and dynamic. Though the reel showcases moving pictures that involve both angular and more fluid, blob-like shapes, they all complement the architectural elements of the space and serves as both an aesthetically-pleasing side piece but also a moment for visitors to be present in the space and admire the artwork.

I believe the algorithm that generated the work is probably dependent on layers and has a flexible system that controls transparency. Semi-transparent layers crossing over each other at a more-or-less constant pace are a recurring element in LIA’s work. LIA’s artistic sensibilities are very present in her work, as she must create a piece of work that not only matches but elevates the experience of a large space. It is functional in that way, but it is also a very abstract concept that she must translate into a tangible product.

LO-2-Generative Art

Fish Tornado by Robert Hodgin

Fish Tornado, an interactive VR experience that puts the user in the center of thousands of Big Eye Trevallie forming a toroidal bait ball, caught my attention. This generative artwork was created by Robert Hodgin and I was admired by how Hodgin wanted to see how close he could come to simulating this phenomenon with code and simulate in the Oculus VR headset. I admired this aspect because I have always wanted to know how a bait ball is formed and by the use of VR, I would be able to experience it directly.

The algorithm generated in this artwork is very cool in a way that the fish is aware of my position in the 3d world. The fish attempts to form a toroidal bait ball around me and I can stand in the center. Also, the fish responds towards me by treating me as a low threat predator and thus prevents the fish from traveling through the camera.

Hodgin further manifests his artistic sensibilities by adding a shark into the simulation. The experience of watching a fish form a toroidal bait ball around me is very relaxing with background music but its calmness breaks apart by an occasional passing of a shark.

Link

Fish Tornado

Project-02-Variable Face

sketch

var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 300;
var eyeWidth= 40;
var mouth=5;
var eyeball=10;
var nose=20;
var ear=150;
var inside=120;
var tongue=20;


 
function setup() {
    createCanvas(480, 600);
}
 
function draw() {
    background(200);// face shape
    fill(224, 211, 220);
    ellipse(width / 2, height /2, faceWidth,  faceHeight); 
    fill(252, 249, 243); //eye
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(0,0,0); //eyeball
    circle(eyeLX+5,height /2, eyeball,eyeball);
    circle(eyeRX-5,height/2,eyeball,eyeball);
    fill (0,0,0);//nose
    circle(width / 2, height /1.9, nose,nose);
    fill(224, 211, 220); //leftear
    circle(width/4,height/3,ear,ear);
    fill(224, 211, 220); //rightear
    circle(width/1.4,height/3,ear,ear);
    fill(245, 186, 227); //inside
    circle(width/3.7, height/2.8,inside,inside);
    circle(width/1.42, height/2.8,inside,inside);
    strokeWeight (2);
    fill(247, 134, 209) //mouth
    var mouth = width/7 - faceWidth * 0.5;
    ellipse( width/ 2, height/1.6, mouth, mouth/2);
    
}
 
function mousePressed() {
   
    faceWidth = random(200, 300);
    faceHeight = random(280, 300);
    eyeSize = random(20, 50);
    mouth = random(2,5);
    eyeball= random(7,19);
    hair = random(110,160);
    ear = random(140,170);
    inside = random(110,115);
}

I started off by using the original code given for this project. I randomly inserted numbers and variables to see how each code works out. Then I started to design the basic shapes and narrowed it down to the small details.

Variable Faces

The idea behind my code was to use randomization as well as variable-relations to create any number of faces on its own. The random variables include colors as well as the sizes of some aspects, like the eyes and face size. The eyes I made separately in order to create an abstract feel, along with the randomly changing background.

Abstract Faces Download

//Variable Faces

    var strokeSize = 1;

    var faceWidth = 400;
    var faceHeight = 600;
    var faceColor = 135;

    var eyeColor = 30;
    var lEyeWidth = 100;
    var lEyeHeight = 100;
    var rEyeWidth = 100;
    var rEyeHeight = 100;
    var pupilColor = 135;

    var noseColor = 200;

    var mouthColor = 185;
    var mouthWidth = 180;
    var mouthHeight = 80;

    var backTri = 220;
    var backSquare = 220;
    var backCirc = 220
    var backEllipse = 220;
    var backRect = 220;


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

function draw() {
//randomizes the color of the background square
    var colorRA = random(0, 255);
    var colorGA = random(0, 255);
    var colorBA = random(0, 225);
//randomizes the color of the background triangle
    var colorRB = random(0, 255);
    var colorGB = random(0, 255);
    var colorBB = random(0, 225);
//randomizes the color of the background circle
    var colorRC = random(0, 255);
    var colorGC = random(0, 255);
    var colorBC = random(0, 225);
//randomizes the color of the background ellipse
    var colorRD = random(0, 255);
    var colorGD = random(0, 255);
    var colorBD = random(0, 225);
//randomizes the color of the background rectangle
    var colorRE = random(0, 255);
    var colorGE = random(0, 255);
    var colorBE = random(0, 225);
//randomizes the color of the background
    var colorRF = random(0, 255);
    var colorGF = random(0, 255);
    var colorBF = random(0, 225);

//creates a random background color
    background(colorRF, colorGF, colorBF);

    noStroke();
    frameRate(3);   //slows looping speed
    fill(colorRA, colorGA, colorBA);
    square(width - 300, 0, 300);    //background square
    fill(colorRB, colorGB, colorBB);
    triangle(0, 0, 100, 200, 400, 100);   //background triangle
    fill(colorRC, colorGC, colorBC);
    circle(width - 100, height - 100, 250);   //background circle
    fill(colorRE, colorGE, colorBE);
    rect(0, height * .3, width, .4 * height);   //background rectangle
    fill(colorRD, colorGD, colorBD);
    ellipse(.25 * width, height - 80, 225, 400);    //background ellipse


    strokeWeight(strokeSize);
    stroke(0);    //makes the strokes black

//creates the face with a random strokeWeight
    fill(faceColor);
    ellipse(width / 2, height /2 , faceWidth, faceHeight);


//creates the left eye
    fill(eyeColor);
    ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, lEyeWidth, lEyeHeight);
    ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, rEyeWidth, rEyeHeight);
//creates the right eye
    fill(pupilColor);
    ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * lEyeWidth, .3 * lEyeHeight);
    ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * rEyeWidth, .3 * rEyeHeight);

//creates the nose
    fill(noseColor);
    beginShape();
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2 - .05 * faceWidth, height / 2 + .1 * faceHeight);
    curveVertex(width / 2 - .1 * faceWidth, height / 2 + .15 * faceHeight);
    curveVertex(width / 2, height / 2 + .2 * faceHeight);
    curveVertex(width / 2, height / 2 + .22 * faceHeight);
    endShape();

//creates the mouth
    fill(mouthColor);
    arc(width / 2, height / 2 + faceHeight * .3, faceWidth * .2, faceHeight * .2, 0, PI, CHORD);

}

//creates the randomization when mouse is clicked
function mouseClicked() {
    strokeSize = random(1, 5);    //randomizes the stroke size of the face

    faceWidth = random(250,400);    //randomizes face width
    faceHeight = random(250, 600);    //randomizes face height
//randomizes the color of the face
    faceColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomization of eye sizes and colors
    eyeColor = color(random(0, 255), random(0, 255), random(0, 255));
    lEyeWidth = random(20, .3 * faceWidth);
    lEyeHeight = random(20, .3 * faceHeight);
    rEyeWidth = random(20, .3 * faceWidth);
    rEyeHeight = random(20, .3 * faceHeight);
    pupilColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomizes nose color
    noseColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomizes mouth color
    mouthColor = color(random(0, 255), random(0, 255), random(0, 255));
}

Project-02-Variable-Face

My process for this project was to start with a basic face that has many changing variables, such as the eyes both independently changing from each other and same with the pupils. The background idea came from the chaotic energy given by the changing of the variable faces.

faces Download

//Anthony Prestigiacomo aprestig section:C

var eyeheightr=60;    //right eye height
var eyewidthr=60;    //right eye width
var eyeheightl=60;    //left eye height
var eyewidthl=60;    //left eye width
var facewidth=300;    //face width
var faceheight=400;    //face height
var eyel=200;    //left eye x value
var eyer=280;    //right eye x value
var pupl=200;    //left pupil x value
var pupr=280;    //right pupil y value
var pupheightl=25;    //left pupil height
var pupheightr=25;    //right pupil height
var pupsizel=25;    //left pupil width
var pupsizer=25;    //right pupil width
var facecolor=150;    //face color
var eyecolor=222;    //eye color
var pupilcolor=80;    //pupil color
var nosecolor=100;    //nose color
var nosewidth=80;    //nose width
var noseheight=60;    //nose height
var nostcolor=50;    //nostril color
var nost=20;    //nostril width
var nosthl=20;    //left nostril height
var nosthr=20;    //right nostril height
var mheight=40;    //mouth height
var mwidth=40;    //mouth width
var mcolor=25;    //mouth color

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

function draw() {
  strokeWeight(0);
  frameRate(5);
  //background colors
  var R=color(random(0,255),random(0,255),random(0,255));
  var G=color(random(0,255),random(0,255),random(0,255));
  var B=color(random(0,255),random(0,255),random(0,255));
//rectangle 1 colors
  var Rr=color(random(100,200),random(0,10),random(0,10));
  var Gg=color(random(60,220),random(0,0),random(0,25));
  var Bb=color(random(1,205),random(0,10),random(0,10));
//rectangle 2 colors
  var Rr2=color(random(0,10),random(10,250),random(0,10));
  var Gg2=color(random(0,20),random(100,230),random(0,5));
  var Bb2=color(random(1,25),random(180,210),random(0,10));
//rectangle 3 colors
  var Rr3=color(random(0,10),random(20,25),random(0,210));
  var Gg3=color(random(0,20),random(10,23),random(0,255));
  var Bb3=color(random(1,25),random(10,20),random(180,210));
  background(R,G,B);
  fill(Rr,Gg,Bb);
  rect(0,0,200,100);    //rectangle 1
  fill(Rr2,Gg2,Bb2);
  rect(70,380,200,300);   //recatngle 2
  fill(Rr3,Gg3,Bb3);
  rect(200,200,300,200);    //rectangle 3
  fill(facecolor);
  ellipse(width/2,height/2,facewidth,faceheight);    //head
  fill(eyecolor);
  ellipse(eyer,230,eyewidthr,eyeheightr);    //right eye
  ellipse(eyel,230,eyewidthl,eyeheightl);    //left eye
  fill(pupilcolor);
  ellipse(pupl,230,pupheightl,pupsizel);    //left pupil
  ellipse(pupr,230,pupheightr,pupsizer);    //right pupil
  fill(nosecolor);
  ellipse(width/2, height/2,nosewidth,noseheight);    //nose
  fill(nostcolor);
  ellipse((width/2)-20, height/2, nost,nosthl);    //left nostril
  ellipse((width/2)+20, height/2, nost,nosthr);    //right nostril
  fill(mcolor);
  arc(width/2, height/1.6, mwidth,mheight, 0, PI, CHORD);    //mouth
}

function mouseClicked() {
    facewidth = random(200, 400);
    faceheight = random(200, 600);
    eyewidthr = random(40,80);
    eyeheightr = random(40, 80);
    eyewidthl = random(40, 80);
    eyeheightl = random(40,80);
    pupheightl = random(10,40);
    pupheightr = random(10,40);
    pupsizel = random(10,40);
    pupsizer = random(10,40);
    nosewidth = random(60,120);
    facecolor = color(random(0,255),random(0,255),random(0,255));
    eyecolor = color(random(0,255),random(0,255),random(0,255));
    pupilcolor = color(random(0,255),random(0,255),random(0,255));
    nosecolor = color(random(0,255),random(0,255),random(0,255));
    nostcolor = color(random(0,255),random(0,255),random(0,255));
    noseheight = random(55,75);
    nosthl = random(15,30);
    nosthr = random(15,30);
    mheight = random(30,50);
    mwidth = random(10,100);
    mcolor = color(random(0,255),random(0,255),random(0,255));
}

Inspirational Generative Art

A project or work that I find inspirational is UCRACKING by Marius Matz.
I find these pieces to be inspirational because it was created for the Andy
Warhol Absolut art exchange. These pieces were created for an art exchange event held between Andy Warhol and Absolut vodka, who have had a long time partnership. Absolut partners with hundreds of creators helping them expose their art to the world in their gallery. Matz used subdivision algorithms (also known as cracking), and applied this to 2D and 3D triangle meshes. Watz works with abstract art, specifically visual abstraction through generative software processes. His art follows a certain pattern, of hard-edged geometrical shapes with vivid bright colors. These works range from coded and pure software to projections on buildings and walls, he even 3D prints some of his coded models.

UCracking

Generative Art

Cinemagraphs: When Face Tracking Meets Animated GIFs

Artists: William Mincy and Dr Woohoo!
Piece: “The Portrait”

The project in general uses still images and animates them to create interesting and artistic effects. I admire the specific piece as it takes a famous still painting and puts a modern and unique twist on it. The website states the
algorithms used to create the various pieces of art use face tracking technology to pinpoint areas that can be animated. The technology makes lines and joints that can be manipulated to create motion. Additionally, the technology can put overlays of animation over areas of the still art. In my opinion, the artists are using technology in an attempt to modernize and update both pictures and old artwork. The technology is similar to filters on my social media platforms, but the artists use it on various mediums (i.e. pictures, paintings, etc.) with more extravagant uses. The artist states the project is similar to that of GIFs, but can be made using any face and can have any level of animation added. The technology is common among platforms but I admire the specific art pieces chosen and the extent to which they are modified.

Project 2- Variable Faces

For this week’s project, I started off by creating a rough sketch on photoshop so I can refer back to the points when I code the image. My goal for myself this week with the project was to create something that was fun and colorful, which I thought fit perfectly with the changing features.

chris variable project

var eyewhite=15
var eyeblack=10
var hairheight=300
var hairwidth=250
var cheek=30
var lips=20
var glasseswidth=55
var glassesheight=40

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

function draw() {
	background(220,255,254);
	noStroke();
	fill(68,27,85); //dark purple
	ellipse(325,300,hairwidth, hairheight); //hair right
	ellipse(290,260,hairwidth, hairheight); //hair left
	fill(42,15,53);//dark shadow purple
	ellipse(313,300,160,220); //shadow hair
	noFill();
	stroke(248,50,143);
	ellipse(245,330,cheek);//left earring
	ellipse(385,330,cheek);//right earring
	noStroke();
	fill(242,183,169); //neck culture
	rect(290,350,50,74); //neck
	fill(255,208,197); //light peach
	ellipse(313,260,160,185); //top circle head
	triangle(241,301,385,301,315,391); //chin
	fill(248,50,143); //pink
	rect(146,410,335,150,50);//shirt
	fill(68,27,85); //dark purple
	ellipse(257,200,138,150); //bang1
	ellipse(354,215,114,118); //bang2
	fill(255);
	ellipse(285,285,eyewhite);//left white eye
	ellipse(340,285,eyewhite);//right white eye
	fill(0);
	ellipse(289,285,eyeblack);//left black eye
	ellipse(344,285,eyeblack);//right black eye
	fill(255,172,152);
	ellipse(314,310,20);//nose
	ellipse(260,310,cheek);//left cheek
	ellipse(370,310,cheek);//right cheek
	fill(248,50,143);//pink
	ellipse(311,345,lips);
	ellipse(319,345,lips);
	noFill();
	stroke(116,251,218); //turquoise
	strokeWeight(2);
	rect(250,266,glasseswidth,glassesheight,10); //glasses
	rect(320,266,glasseswidth,glassesheight,10); //glasses
}

function mousePressed(){
    eyewhite = random(15,45);
    eyeblack = random(10,25);
    hairheight = random(300,500);
    hairwidth = random(250,450);
    cheek = random(30,50);
    lips = random(5,30);
    glassesheight = random(30,50);
    glasseswidth = random(50,65);
}

Looking Outwards 2: Generative Art

A project I chose to highlight is Robert Hodgin’s Traffic simulation. What I found so interesting about this particular project is how it was able to really capture the human element through a computer program. Typically Hodgin’s work reflects animal phenomenons but the traffic simulation really stood out to me.

Unlike his other portfolio pieces, it captures the unique human aspect of personality. The “drivers” each have their own aggressiveness which is reflected in their driving decisions among the whole simulation. Unlike other visual traffic simulations, the cars aren’t moving in a uniform stream. Some drive faster than others and some cut others off or rush yellow lights.

In his portfolio, Robert Hodgin mentions what went into dictating the algorithm and what traffic rules were taken into account. Apart from the expected traffic lights, some drivers choose to turn left or right and shift lanes. Still what I think is the artistic element of this generative artwork is the aggressiveness factor that drivers have.

Section C, Looking Outwards-02

3D VectorField Animation – Step 3. Mathematic from JeongHo Park on Vimeo.

The work I found to be inspirational was done by an artist named JeongHo Park. The two works I will be referring to were actually done very recently, September 2020. Inspired by science and mathematics, he created a program that is composed of grids, lines, and dots. Most of his work reflects 3D space and while the dots and lines seem chaotic at first, all move together to suggest space and form. There is rhythm and cohesion in the way the dots and the lines all move together all while catching the viewer’s eye individually. I really admire how Park was able to control all the lines and dots and give each part of the program personality and flair. Park used openframework to create this project and he used 3D models to get the general idea of the movements. I think the small things like color, stroke weight, and even the momentum of the dots rushing past the canvas are all artistic choices Park made to personalize his work more.

gravity_photon from JeongHo Park on Vimeo.