hreynold-variablefaces

/* 
Helen Reynolds
Section E
hreynold@andrew.cmu.edu
Project-02
*/

//shape variables
var noseWidth = 47;
var faceWidth = 304;
var faceHeight = 265;
var eyeSize = 30;
var mouthHeight = 34;
//color variables
var backgroundR = 245;
var colorR = 32;


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

function draw() {
    background(backgroundR, 229, 218);

    //face
    rectMode (CENTER);
    noStroke();
    push();
    translate(width / 2, height / 2);
    rotate(110);
    fill(218, 164, 129);
    rect(0, 0, faceWidth,  faceHeight, 132);
    pop();

    //mouth
    fill(colorR, 30, 30);
    ellipse(width / 2, height / 2 + 70, 58, mouthHeight);

    //cheeks
    fill(253, 219, 200);
    ellipse(width / 2 - 25, height / 2 + 50, 56, 56);
    ellipse(width / 2 + 25, height / 2 + 50, 56, 56);

    //ears 
    fill(218, 164, 129);
    triangle(170, 97, 251, 144, 186, 212);
    triangle(474, 97, 393, 144, 455, 212);

    //bridge of nose
    rectMode (CENTER);
    noStroke();
    fill(206, 152, 123);
    rect(width / 2, height / 2, noseWidth, 76, 18);

    //nose
    rectMode (CENTER);
    noStroke();
    fill(167, 83, 78);
    rect(width / 2, height / 2 + 27, noseWidth, 24, 9);

    //eyes
    fill(colorR, 50, 30);    
    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);

    //eyes sparkle
    fill(255);
    ellipse(eyeLX + 2, height / 2 - 2, eyeSize / 3, eyeSize / 3);
    ellipse(eyeRX + 2, height / 2 - 2, eyeSize / 3, eyeSize / 3);
}

function mousePressed() {
    faceWidth = random(290, 340);
    faceHeight = random(250, 270);
    eyeSize = random(20, 40);
    colorR = random(30, 170);
    noseWidth = random(35, 60);
    mouthHeight = random(35, 65);
    backgroundR = random(200, 255);

}

To create this kitten, I sought inspiration from Hello Kitty and real cats. Starting off, I worked primarily in Illustrator. While I could’ve taken a more imaginative route with this, I chose to make the variations in my project pretty subtle so that the cat was always relatively believable.

Nervous System: Floraform Sculptures (2014)

I think that these floraform pieces are really inspiring to me because they aim to instersect art, science, and technology. Artistic pieces inspired by the biomechanisms of growing plants and blooming flowers, these floraform sculptures are not only beautiful but also backed by research and almost feel like they’re alive. I hope to someday be able to intersect my varied interests in a fluid way, like Nervous System studio does here.

As for the algorithm itself, Nervous System states that creating these pieces was like “digital gardening”, where the “plants” are algorithms. I think it’s super cool that they were able to mimic organic growth with algorithms. I also think that the amount of thought that had to go into these pieces is crazy – lots of research had to have been done to understand exactly how plants grow, and even more had to go into effectively imitating it.

Check it out on Nervous System!

To create this self portrait, I experimented with simple shapes in Illustrator and then entered them into p5.js. Because I was able to move things around quickly in Illustrator first, I found this process more accessible and effective than just going to p5.js right off the bat. I had a lot of fun with considering what aspects of my appearance and personality I wanted to portray and how I could create them using the little coding knowledge I have.
hreynold-face

/* Helen Reynolds
Section E
hreynold@andrew.cmu.edu
hreynold-01
*/

function setup() {
    createCanvas(400, 400);
    background(140, 110, 114);
    angleMode(DEGREES);
 }

function draw() {
	noStroke();

	//hair rect
	rectMode (CENTER);
	fill(36, 31, 23);
	rect(195, 204, 283, 191); //(x, y, w, h, radius of every corner)

	//hair circle
	ellipseMode (CENTER);
	fill(36, 31, 23);
	ellipse(193, 103, 185, 185);

	//shirt rect
	fill(173, 152, 157);
	rect(194, 335, 269, 71);

	//shirt circle
	fill(173, 152, 157);
	ellipse(194, 303, 269, 121);

	//neck circle
	fill(229, 203, 190);
	ellipse(194, 245, 77, 52);

	//hair cover rect left
	fill(140, 110, 114);
	rect(55, 150, 90, 135);

	//hair cover circle left
	fill(140, 110, 114);
	ellipse(52, 213, 97, 97);

	//hair cover rect right
	fill(140, 110, 114);
	rect(330, 150, 90, 135);

	//hair cover circle right
	fill(140, 110, 114);
	ellipse(334, 214, 97, 97);

	//neck rect
	fill(229, 203, 190);
	rect(194, 223, 78, 53);

	//shadow ellipse
	fill(201, 177, 167);
	ellipse(194, 204, 78, 52);

	//face rounded rect
	fill(229, 203, 190);
	rect(193, 125, 147, 176, 73);

	//bubblegum ellipse
	fill(234, 143, 188);
	ellipse(194, 193, 53, 53);	

	//bubblegum sparkle
	fill(255);
	ellipse(204, 178, 7, 7);

	//left eyebrow black ellipse
	noStroke ();
	fill(36, 31, 23);
	ellipse(165, 112, 33, 20);

	//left eyebrow beige ellipse
	fill(229, 203, 190);
	ellipse(165, 117, 36, 20);

	//left eyebrow beige rect
	fill(229, 203, 190);
	rect(180, 113, 14, 23);	

	//right eyebrow black ellipse
	noStroke ();
	fill(36, 31, 23);
	ellipse(221, 111, 33, 20);

	//right eyebrow beige ellipse
	fill(229, 203, 190);
	ellipse(222, 115, 36, 20);

	//right eyebrow beige rect
	fill(229, 203, 190);
	rect(205, 111, 14, 23);	

	//left eye
	fill(36, 31, 23);
	ellipse(163, 132, 17, 17);

	//left eye sparkle
	fill(255);
	ellipse(167, 129.5, 7, 7);

	//left eye top eyelash
	stroke (0);
	strokeWeight (2);
	line(157, 118, 160, 125);

	//left eye middle eyelash
	stroke (0);
	strokeWeight (2);
	line(153, 122, 157, 126);

	//left eye bottom eyelash
	stroke (0);
	strokeWeight (2);
	line(150, 127, 156, 129);

	//right eye
	noStroke ();
	fill(36, 31, 23);
	ellipse(220, 131, 17, 17);

	//right eye sparkle
	fill(255);
	ellipse(223, 129, 7, 7);

	//right eye top eyelash
	stroke (0);
	strokeWeight (2);
	line(226, 118, 224, 124);

	//right eye middle eyelash
	line(231, 122, 226, 126);

	//right eye bottom eyelash
	line(234, 126, 228, 128);

	//nose shadow rect
	noStroke ();
	fill(201, 177, 167);
	rect(192, 144, 18, 40, 9);

	//nose top rect
	fill(229, 203, 190);
	rect(189, 141, 18, 40, 9);

	//freckle 1, left to right
	stroke (195, 147, 121)
	strokeWeight (2);
	point(150, 145);

	//freckle 2
	stroke (195, 147, 121)
	strokeWeight (2);
	point(154, 150);

	//freckle 3
	stroke (195, 147, 121)
	strokeWeight (2);
	point(156, 154);

	//freckle 4
	stroke (195, 147, 121)
	strokeWeight (2);
	point(159, 148);

	//freckle 5
	stroke (195, 147, 121)
	strokeWeight (2);
	point(161, 153);

	//freckle 6
	stroke (195, 147, 121)
	strokeWeight (2);
	point(165, 157);

	//freckle 7
	stroke (195, 147, 121)
	strokeWeight (2);
	point(164, 149);

	//freckle 8
	stroke (195, 147, 121)
	strokeWeight (2);
	point(168, 152);

	//freckle 9
	stroke (195, 147, 121)
	strokeWeight (2);
	point(173, 148);

	//freckle 10
	stroke (195, 147, 121)
	strokeWeight (2);
	point(212, 148);

	//freckle 11
	stroke (195, 147, 121)
	strokeWeight (2);
	point(216, 151);

	//freckle 12
	stroke (195, 147, 121)
	strokeWeight (2);
	point(220, 156);

	//freckle 13
	stroke (195, 147, 121)
	strokeWeight (2);
	point(220, 148);

	//freckle 14
	stroke (195, 147, 121)
	strokeWeight (2);
	point(222, 152);

	//freckle 15
	stroke (195, 147, 121)
	strokeWeight (2);
	point(226, 148);

	//freckle 16
	stroke (195, 147, 121)
	strokeWeight (2);
	point(228, 154);

	//freckle 17
	stroke (195, 147, 121)
	strokeWeight (2);
	point(230, 150);

	//freckle 18
	stroke (195, 147, 121)
	strokeWeight (2);
	point(233, 144);

	//hair left ellipse
	noStroke();
	push();
	translate(167, 60);
	rotate(-25.5);
	fill(36, 31, 23);
	ellipse(0, 0, 121, 63);
	pop();

	//hair right ellipse
	noStroke();
	push();
	translate(245, 70);
	rotate(320);
	fill(36, 31, 23);
	ellipse(0, 0, 36, 75);
	pop();

}

The Cat Explorer is a virtual reality demo that allows the user to explore the anatomy of a cat.

The user moves their hand around to navigate the virtual setting, revealing the virtual cat’s skin, muscles, organs, vascular system, and skeleton. I admire this program because I see it as providing a window of opportunity to using virtual reality for interactive education in fields (such as healthcare or life sciences) that I wouldn’t have expected. The demo is engaging, cute, and deceivingly informative, which I believe makes for an effective learning experience. I hope to explore code and design to create interactive programs that are engaging and informative like this one.

See more here: https://www.thisiscolossal.com/2018/06/virtual-reality-cat-explorer/

sketchysketch

function setup() {
    createCanvas(200, 200);//x, y
    background(0, 30, 0);//rgb values, go from 1 to 255, 000 is darkest color, 4th is alpha (opacity)
}

function draw() {
	background(0, 30, 0); //makes it so that the background covers circles so there's no trail
	fill(255, 200, 200); //fill of circle
	stroke(0, 255, 20); //stroke of circle
	ellipse(mouseX, mouseY, 50, 50);


}

note to future me: gifs gotta be full size