![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
var angle = 0;
var m = 0;
var n = 0;
var size = 0;
var sizen = 0;
var x = 0;
var z = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
x = max(min(mouseX, 255), 0);
z =max(min(mouseX, 255), 0);
background(0);
fill(x, 255, z);
ellipseMode(CENTER);
//create ellipse with color dependent on where the mouse is
m = max(min(mouseX, 640), 0);
n = max(min(mouseY, 480), 0);
// //setting the x and y coordinates to be the max value between the mouse coordinates and the canvas size
size = m * 350 / 400;
sizen = n * 350 / 400;
//settin the size of the ellipse to be a function of the position of the coordinates
push();
ellipse(mouseX, mouseY, size, sizen);
//using the variables to create an ellipse
fill(x, 255, z);
//filling the color for the ellipse based on where the mouse is on the canvas
translate(mouseX,mouseY);
//moving the ellipse based on where the ellipse is in the canvas
rotate(radians(angle));
//rotating the ellips
pop();
angle = angle +5;
} Category: Section D
ghou-project-03-DynamicDrawing
//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 03
var br;
var bb;
var bg;
var ss;
function setup(){
createCanvas(640,480);
rectMode(CENTER);
background(255);
//base text
br = width/6 + 30;
bb = height/4 + 100;
bg = 200;
//setting colour of the text so it blends in with that region of colour
textSize(30);
fill(br,bb,bg);
text("drag mouse to draw",200,400);
}
ss = 0;
//creating the heart
function draw(){
fill(255);
noStroke();
// heart changes size when drawing (mouse is pressed)
// heart creates gradient colour the bigger it is
if (mouseIsPressed){
if (ss < 1.5){
ss = ss +0.005;
fill(255,255-ss*170,255-ss*170)
}
}
//creates gradient when heart shrinks
else if (ss >0){
ss = ss - 0.02;
fill(255,255-ss*200,255-ss*200)
}
// heart is red when at largest and text appears to tell audience to let go of the mouse
if (ss >= 1.5){
push();
fill(255);
text("let go!!",280,70);
pop();
fill(255,0,0);
}
push();
translate(width/2,height/2);//so the posotion doesnt get messed up as it scales
scale(ss);
ellipse(-55,-30,130,150);
ellipse(55,-30,130,150);
triangle(-105,19,0,130,0,0);
triangle(105,19,0,130,0,0);
pop();
}
//drawing with the mouse (in gradient colour)
function mouseDragged(){
br = mouseX/6 + 30;
bb = mouseY/4 + 100;
bg = 200;
noStroke();
fill(br,bb,bg);
ellipse(mouseX,mouseY,80,80);
}
in my sketchbook I included some sketches on how to do the layering so that the text hides behind the “drawing”.
This dynamic drawing is inspired with social media “Likes”, I had originally wanted my audience to double-click for the heart to appear, as it represents a double tap on social platforms. However, I could not get the doubleClicked() function to work and it could be something in the DOM file that I’m not knowledgable enough to get into. I figured the gradient is a pretty way to impress the audience.
ENwandu-Looking Outwards-03-Silk Pavilion
Silk Pavilion – MIT Media Lab
Director of Project – Neri Oxman
Team Members: Markus Kayser, Jorge Duro-Royo, Jared Lauks
The silk pavilion is a very intriguing (slightly disgusting) project, not simply because of its computational fabrication, but its connection to biology. The research carried out by the group focused on the integration of computational form finding techniques with biologically inspired formations. Inspired by the way silk worms weave delicate cocoons, the pavilion was created using a base of robot-woven threads wrapping a steel frame. Ultimately, the structure was completed by unleashing 6500 live silkworms onto the primary structure. Before the primary structure was built, the team involved with the project delved into some painstaking research, into the silkworm’s interaction with their environment, and methods of weaving their cocoons. This involved observing them in a variety of 3D spaces under different ambient conditions to utilizing motion tracking equipment to examine the construction process. The patterns computed by tracking the silk worms directly influenced the path the CNC mill would take when fabricated the primary structure. The pavilion’s overall geometry was created using an algorithm that assigns a single continuous thread across patches, providing various degrees of density
I really admire this project, because of the bio-mimicry involved. The project is one that truly encompasses the ideas of information technology and biology. We see the geometric frames used, alongside a technologically interpreted natural process. Both species involved with the project have a voice, but its intriguing how seamless they are. The researchers’ eve observed that the “blind instinct of the silk worm is sometimes almost machine-like”. I see projects like this becoming influential in a conversation about what art, architecture, and design can become in the future, by considering how natural order, and processes can inform our design decisions.
rkondrup-Looking-Outwards-03
Students at MIT have developed what they call “Interactive Robogami,” a project which allows users to 3D print motorized origami creations which can move, walk, or roll. The design consists of an easy-to-use user interface which allows participants to design a structure with features like legs and wheels, while the program calculates speed, direction, and timing of moving parts internally. Completed designs were then sent to the 3D printer for fabrication. Designs were printed as a flat bunch of pieces which are then assembled or “folded” into the desired shape to produce a functional object.
This project is very interesting to me because it combines many different technologies into a single experience. The Robogami consists of complex software, friendly user interface, digital fabrication, origami, and moving parts; this requires a large amount of thinking and collaboration. In addition, I am very interested in how this technology could be scaled up over time, possibly to the transportation or housing level in the far future. This project gives amazing design power to consumers which has never been available before – perhaps in the future users will be able to custom-design their own headphones, cars, or even homes, and have built-in interactive features automatically integrated into the design.
cespinoz-Looking Outwards 02
For this assignment I chose Memo Akten’s Fight (2017). Fight uses Virtual Reality and Binocular Reality and transforms it into interpret art right in front of the eye. I chose this piece because virtual reality, to me, is one of the most fascinating advances in technology. I vividly remember my first experience with virtual reality, and always yearn to experience it again when possible. What I particularly like about this piece though, is its variability aspect in which each viewer has a different visual experience despite the images displayed being the same every time.
Though I’m not quite sure on how Atken made the images, I know that at a basic level, virtual reality works by using a stereoscopic display that allows eyes to see depth into the images projected. The images that Atken chooses for this piece are ones that do not directly match our expectations of the outside world.
Attached is a video of one of infinite visual experiences from Fight
In his interviews, Atken draws his main purpose of this piece is to think about perception. He writes, “perception, including vision, is an active process, it requires action and integration”. More information about Memo Atken’s Fight can be found here: http://www.memo.tv/fight/
cespinoz-project-02
var cheekWidth = 125
var cheekHeight = 125
var leftEyeX = 285
var rightEyeX = 365
var leftEyeY = 170
var rightEyeY = 170
var toothHeight = 40
function setup() {
createCanvas(640,480);
}
function draw() {
background(255,217,223);
noStroke();
fill(139,69,19) //squirrel tail
rect(345,150,200,325,90,10,95,0)
fill(153,102,51); //face and body color
ellipse(320,200,200,200) //top head
ellipse(320,280,160,190) //CHIN
ellipse(260,275,cheekWidth,cheekHeight) //left cheek
ellipse(380,275,cheekWidth,cheekHeight) //right cheek
triangle(240,80,240,140,280,120) // left ear
triangle(400,80,400,140,360,120) // right ear
rect(250,335,140,225,10,10) //body
fill(145,95,50) //color for feet
ellipse(250,475,100,75) //left foot
ellipse(385,475,100,75) //right foot
ellipse(250,375,60,60) //left hand
ellipse(385,375,60,60) //right hand
fill(97,65,38) //acorn
triangle(260,375,375,375,320,420)
rect(310,355,20,20,5,5)
fill(112,84,59)
rect(260,365,115,15,10,10)
//squirrel face
fill(256);
ellipse(280,180,65,65)
ellipse(360,180,65,65) //white eyes
fill(0);
ellipse(285,180,55,60) //left color eye
ellipse(365,180,55,60) //right color eye
fill(256);
ellipse(leftEyeX,leftEyeY,30,30) //left pupil
ellipse(rightEyeX,rightEyeY,30,30) //right pupil
fill(0) //nose
ellipse(320,250,75,25) //round nose
rect(315,250,10,40,5,5) //nose vertical line
ellipse(320,290,125,5) //mouth
fill(256) //teeth
rect(290,292,29,toothHeight,5,5) //left tooth
rect(320,292,29,toothHeight,5,5) //right tooth
}
function mousePressed() {
cheekHeight = random(100,150);
cheekWidth = random(100,150); //cheeks change
leftEyeX = random(275,295) //now eyes change
rightEyeX = random (355,375)
leftEyeY = random(170,190)
rightEyeY = random(165,190)
toothHeight =random(30,50)
}I decided to use a squirrel for my variable-changing face project. To begin, I sketched out an idea of the main head and face onto notebook paper as shown here: 
As I started coding, I got more confident with the axes and began to do a fast guess and check as my program got more detailed. I then chose to have the variables of the teeth, pupils, and cheeks change.
ghou-lookingoutwards-03
Parametric World Online
Parametric World is a tumblr blog created by artist Marta Krivosheek. The work she shares on this blog among other online platforms are of the technological, generative nature. [Pintrest|Generative Nature Blog|Twitter]. Parametric World collects works of multiple artists in similar fields and compiles them on this blog; with the organized posts and a big follower-base, this blog is easily discovered and helps artists find inspiration and introduces them to other artists’ work of the same nature through this platform. Many works have useful descriptions in the caption stating the technology used to create the piece.
here are some examples of the type of work that goes on Parametric World Tumblr. It is definitely a go-to blog for inspiration on generative art.
danakim_Project-02
//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-02
//Background Colors
var b1= "#E87B3D";
var b2= "#F37C90";
var b3= 265;
var colors= [b1, b2, b3];
//Face colors
var fc1= "#AA723F";
var fc2= "#3A3A3A";
var facecolors= [fc1, fc2];
//eyes
var eyecolor1= "#A91E22";
var eyecolor2= "#2C1A0E";
var eyecolor3= "#FFFFFF";
var eyecolors= [eyecolor1, eyecolor2, eyecolor3];
var eyes= 1;
var eyetype= [1,2];
//ears; iec= interior ear color
var iec1= 0;
var iec2= "#FF8DB0";
var iec3= "#4C330F";
var intearcolors= [iec1, iec2, iec3];
//piercings
var pierce= 1;
var plocation= [1,2];
//Nose
var n1= "#1E1D1D";
var n2= "#70411B";
var nosecolor= [n1, n2];
function setup() {
createCanvas(640, 480);
}
function draw() {
//determines background color
background(b3);
//Head
noStroke();
fill(fc2);
ellipse(315, 232, 278, 232);
beginShape();
curveVertex(401, 208);
curveVertex(439, 225);
curveVertex(458, 246);
curveVertex(465, 267);
curveVertex(466, 283);
curveVertex(464, 304);
curveVertex(457, 318);
curveVertex(446, 334);
curveVertex(440, 343);
curveVertex(433, 352);
curveVertex(423, 369);
curveVertex(418, 381);
curveVertex(410, 402);
curveVertex(397, 419);
curveVertex(377, 432);
curveVertex(359, 438);
curveVertex(327, 443);
curveVertex(311, 442);
curveVertex(288, 441);
curveVertex(264, 435);
curveVertex(241, 423);
curveVertex(223, 401);
curveVertex(217, 386);
curveVertex(211, 371);
curveVertex(196, 347);
curveVertex(180, 329);
curveVertex(172, 317);
curveVertex(167, 295);
curveVertex(167, 277);
curveVertex(180, 244);
curveVertex(207, 223);
endShape(CLOSE);
//Nose
fill(n1);
beginShape();
curveVertex(318, 327);
curveVertex(322, 327);
curveVertex(330, 327);
curveVertex(333, 327);
curveVertex(337, 328);
curveVertex(340, 329);
curveVertex(344, 329);
curveVertex(348, 331);
curveVertex(354, 333);
curveVertex(357, 335);
curveVertex(360, 337);
curveVertex(363, 338);
curveVertex(367, 341);
curveVertex(371, 344);
curveVertex(374, 347);
curveVertex(376, 350);
curveVertex(383, 358);
curveVertex(389, 364);
curveVertex(392, 369);
curveVertex(393, 371);
curveVertex(396, 377);
curveVertex(399, 383);
curveVertex(401, 388);
curveVertex(402, 392);
curveVertex(403, 394);
curveVertex(403, 401);
curveVertex(404, 406);
curveVertex(404, 409);
curveVertex(402, 415);
curveVertex(400, 418);
curveVertex(395, 425);
curveVertex(387, 431);
curveVertex(380, 435);
curveVertex(371, 438);
curveVertex(359, 440);
curveVertex(348, 441);
curveVertex(335, 442);
curveVertex(327, 442);
curveVertex(316, 442);
curveVertex(299, 441);
curveVertex(285, 440);
curveVertex(273, 439);
curveVertex(264, 437);
curveVertex(261, 435);
curveVertex(255, 433);
curveVertex(249, 430);
curveVertex(243, 426);
curveVertex(239, 423);
curveVertex(233, 416);
curveVertex(229, 409);
curveVertex(227, 403);
curveVertex(227, 395);
curveVertex(228, 388);
curveVertex(230, 379);
curveVertex(235, 369);
curveVertex(238, 364);
curveVertex(243, 358);
curveVertex(251, 351);
curveVertex(261, 343);
curveVertex(270, 339);
curveVertex(383, 334);
curveVertex(294, 331);
curveVertex(301, 329);
curveVertex(310, 327);
endShape(CLOSE);
//nostrils
fill(0);
//left nostril
beginShape();
curveVertex(302, 378);
curveVertex(299, 381);
curveVertex(290, 385);
curveVertex(283, 386);
curveVertex(276, 386);
curveVertex(268, 384);
curveVertex(263, 381);
curveVertex(258, 375);
curveVertex(256, 368);
curveVertex(260, 360);
curveVertex(267, 356);
curveVertex(274, 359);
curveVertex(278, 362);
curveVertex(283, 367);
curveVertex(288, 373);
curveVertex(295, 376);
endShape(CLOSE);
//right nostril
beginShape();
curveVertex(336, 378);
curveVertex(337, 377);
curveVertex(340, 377);
curveVertex(343, 376);
curveVertex(346, 375);
curveVertex(348, 374);
curveVertex(350, 373);
curveVertex(352, 371);
curveVertex(354, 369);
curveVertex(356, 366);
curveVertex(357, 364);
curveVertex(361, 361);
curveVertex(364, 358);
curveVertex(366, 357);
curveVertex(367, 356);
curveVertex(369, 356);
curveVertex(371, 356);
curveVertex(374, 357);
curveVertex(375, 358);
curveVertex(377, 359);
curveVertex(378, 361);
curveVertex(379, 362);
curveVertex(381, 365);
curveVertex(381, 366);
curveVertex(381, 370);
curveVertex(381, 373);
curveVertex(380, 375);
curveVertex(378, 377);
curveVertex(376, 380);
curveVertex(374, 381);
curveVertex(372, 383);
curveVertex(370, 384);
curveVertex(366, 384);
curveVertex(362, 386);
curveVertex(358, 386);
curveVertex(354, 386);
curveVertex(349, 384);
curveVertex(345, 384);
curveVertex(342, 383);
curveVertex(339, 381);
endShape(CLOSE);
//eyes
fill(eyecolor1);
//eyes1
if(eyes == 1){
//right eye
ellipse(402, 296, 45, 45);
//left eye
ellipse(227, 297, 45, 45);
//"eyebrows"
stroke(eyecolor1);
strokeWeight(6);
line(374, 283, 432, 264);
strokeWeight(6);
line(256, 284, 198, 266);
}
//eyes2
if(eyes == 2){
//Left eye
beginShape();
curveVertex(261, 299);
curveVertex(254, 297);
curveVertex(247, 297);
curveVertex(237, 301);
curveVertex(229, 302);
curveVertex(222, 300);
curveVertex(217, 296);
curveVertex(214, 290);
curveVertex(213, 283);
curveVertex(215, 277);
curveVertex(219, 271);
curveVertex(224, 267);
curveVertex(231, 265);
curveVertex(237, 264);
curveVertex(243, 266);
curveVertex(249, 270);
curveVertex(254, 276);
curveVertex(259, 286);
curveVertex(261, 295);
endShape(CLOSE);
//right eye
beginShape();
curveVertex(370, 299);
curveVertex(369, 294);
curveVertex(372, 286);
curveVertex(374, 280);
curveVertex(376, 276);
curveVertex(382, 270);
curveVertex(388, 266);
curveVertex(394, 265);
curveVertex(399, 265);
curveVertex(406, 267);
curveVertex(412, 271);
curveVertex(416, 276);
curveVertex(418, 283);
curveVertex(417, 290);
curveVertex(413, 296);
curveVertex(408, 300);
curveVertex(402, 302);
curveVertex(393, 301);
curveVertex(384, 297);
curveVertex(377, 297);
endShape(CLOSE);
}
//horns
fill(265);
stroke(0);
strokeWeight(5);
//right horn
beginShape();
curveVertex(524, 29);
curveVertex(532, 47);
curveVertex(536, 70);
curveVertex(535, 97);
curveVertex(529, 117);
curveVertex(519, 135);
curveVertex(505, 150);
curveVertex(475, 166);
curveVertex(429, 184);
curveVertex(420,185);
curveVertex(412, 182);
curveVertex(397, 169);
curveVertex(384, 144);
curveVertex(384, 130);
curveVertex(391, 124);
curveVertex(434, 125);
curveVertex(464, 122);
curveVertex(490, 115);
curveVertex(506, 106);
curveVertex(513, 98);
curveVertex(517, 91);
curveVertex(522, 67);
curveVertex(522, 41);
endShape(CLOSE);
//left horn
beginShape();
curveVertex(104, 33);
curveVertex(106, 47);
curveVertex(107, 76);
curveVertex(115, 101);
curveVertex(127, 113);
curveVertex(142, 120);
curveVertex(165, 125);
curveVertex(196, 128);
curveVertex(232, 187);
curveVertex(240, 128);
curveVertex(244, 133);
curveVertex(244, 145);
curveVertex(237, 162);
curveVertex(226, 177);
curveVertex(216, 185);
curveVertex(206, 188);
curveVertex(169, 176);
curveVertex(153, 169);
curveVertex(122, 152);
curveVertex(109, 138);
curveVertex(99, 119);
curveVertex(93, 100);
curveVertex(92, 73);
curveVertex(97, 46);
endShape(CLOSE);
//ears
noStroke();
fill(fc2);
beginShape();
//exterior right ear
curveVertex(566, 194);
curveVertex(562, 211);
curveVertex(550, 225);
curveVertex(533, 239);
curveVertex(510, 251);
curveVertex(490, 257);
curveVertex(472, 259);
curveVertex(454, 257);
curveVertex(441, 249);
curveVertex(428, 234);
curveVertex(422, 218);
curveVertex(423, 206);
curveVertex(429, 195);
curveVertex(446, 186);
curveVertex(471, 179);
curveVertex(496, 176);
curveVertex(514, 177);
curveVertex(546, 184);
curveVertex(560, 189);
endShape(CLOSE);
//exterior left ear
beginShape();
curveVertex(67, 202);
curveVertex(75, 216);
curveVertex(88, 229);
curveVertex(101, 239);
curveVertex(114, 247);
curveVertex(140, 256);
curveVertex(162, 259);
curveVertex(176, 258);
curveVertex(193, 249);
curveVertex(205, 236);
curveVertex(212, 218);
curveVertex(211, 206);
curveVertex(206, 198);
curveVertex(195, 189);
curveVertex(162, 179);
curveVertex(143, 176);
curveVertex(126, 176);
curveVertex(88, 184);
curveVertex(75, 188);
curveVertex(67, 194);
endShape(CLOSE);
//interior right ear
fill(iec1);
beginShape();
curveVertex(457, 249);
curveVertex(453, 235);
curveVertex(456, 220);
curveVertex(465, 209);
curveVertex(473, 204);
curveVertex(487, 200);
curveVertex(510, 199);
curveVertex(527, 198);
curveVertex(546, 195);
curveVertex(562, 194);
curveVertex(567, 196);
curveVertex(565, 206);
curveVertex(562, 211);
curveVertex(555, 221);
curveVertex(530, 241);
curveVertex(508, 251);
curveVertex(490, 257);
curveVertex(476, 260);
curveVertex(466, 259);
endShape(CLOSE);
//interior left ear
beginShape();
curveVertex(66, 196);
curveVertex(72, 194);
curveVertex(89, 196);
curveVertex(123, 199);
curveVertex(146, 200);
curveVertex(152, 201);
curveVertex(162, 205);
curveVertex(171, 212);
curveVertex(177, 220);
curveVertex(179, 228);
curveVertex(180, 236);
curveVertex(178, 245);
curveVertex(173, 254);
curveVertex(167, 259);
curveVertex(159, 260);
curveVertex(144, 257);
curveVertex(115, 247);
curveVertex(94, 235);
curveVertex(79, 221);
curveVertex(71, 211);
curveVertex(66, 202);
endShape(CLOSE);
//piercings
fill(239, 202, 44);
//piercing1
if(pierce == 1){
strokeWeight(6);
strokeCap(SQUARE);
stroke(239, 202, 44);
noFill();
arc(317, 403, 69, 69, QUARTER_PI, PI+QUARTER_PI);
}
//piercing2
if(pierce == 2){
triangle(531, 216, 511, 250, 551, 250);
ellipse(531, 216, 20, 20);
}
}
function mousePressed() {
// when the user clicks the mouse, these variables are reassigned
// to preset values at random.
b3= random(colors);
fc2= random (facecolors);
eyecolor1= random(eyecolors);
eyes= random(eyetype);
n1= random(nosecolor);
iec1= random(intearcolors);
pierce= random(plocation);
}
The process took a bit of time because I used curveTexture() to create a lot of the shapes I needed. It was a very inefficient process and I’m sure that there is a more efficient and concise way that I could have executed the script. Overall, the project itself was really fun. I wasn’t able to execute all the features I wanted to put into it but I’m still pleased with the overall outcome. Below are the reference drawings that I had made before starting the script.
aboyle-Looking Outwards-02
Above: Growth by Aggregation, by Andy Lomas
For this blog post, I have chosen to discuss a series of works by Andy Lomas titled “Aggregation.” His website can be found here: www.andylomas.com, and this series in particular can be found here: http://www.andylomas.com/aggregationImages.html. I believe the images were created in 2005.
First and foremost, I admire the complexity of the end result. He provides a pixel image at ½ the full resolution on his website and it is still stunning. I think that the math behind the project actually enhances the appeal of the final image, lending it a sense of calculated spontaneity. The second reason I admire the series is its resemblance to plants and coral. It draws on nature as an inspiration, forcing the viewer to think about the incredibly complex processes behind the creation of living things. Ultimately, it is not only pleasing to look at, but also interesting to think about.
Above: Aggregation 6, by Andy Lomas
The images in “Aggregation” are gradually created by “simulating the paths of millions of particles randomly flowing in a field of forces”. By building on top of a simple foundation, the algorithms involved were able to create incredibly complex structures. My knowledge is rudimentary, but I’d imagine the algorithms involved are fairly complicated. However, there are aspects of repetition that aesthetically improve the final images and presumably simplify the algorithms somewhat.
I also did a little research into Lomas, and I discovered that he has a passion for morphogenesis, which is the biological process that causes an organism to develop its shape. This clearly impacts his work, specifically the aggregation series. The process of accretion in his work is similar to those found in the natural world, and as a result the final images resemble plants and coral. Lomas is very upfront about this influence; he quotes D’arcy Wentworth Thompson, a pioneer of mathematical biology, as an inspiration. As I mentioned before, I admire his passion and I believe it resulted in harmonious and thought-provoking work. I hope that artists and mathematicians will continue looking to the natural world for inspiration.
Jihee_Project2(Face Variables)
jiheek1_project2(faceVariables)
//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project2 face variables
//section D
var pupilRed = 226;
var pupilGreen = 172;
var pupilBlue = 75;
var ribbonRed = 255;
var ribbonGreen = 160;
var ribbonBlue = 228;
var lashHeight = 320;
var mouthWidth = 41;
var mouthHeight = 28;
var earLoc = 360;
function setup() {
createCanvas(480, 640);
}
function draw() {
background(242, 187, 205);
//these variables will allow the mouse to control the pupils within the eyeball (white area)
var x = constrain(mouseX, 203.5, 216.5);
var y = constrain(mouseY, 263.5, 276.5);
//ears
noStroke();
fill(239, 220, 228);
ellipse(width/2-80, earLoc, 20, 20);
ellipse(width/2+80, earLoc, 20, 20);
//face
noStroke();
fill(239, 220, 228);
ellipse(width/2, height/2+40, 160, 160);
//legs
fill(239, 220, 228);
rect(width/2-15, height/2+200, 8, 8); //left leg
rect(width/2+8, height/2+200, 8, 8); //right leg
//eyes shape (white area)
fill(255);
noStroke();
ellipse(210, 350, 35, 35); //left eye
ellipse(270, 350, 35, 35); //right eye
//pupils shape
fill(pupilRed, pupilGreen, pupilBlue);
noStroke();
ellipse(x, 354, 22, 22); //left eye
ellipse(y, 354, 22, 22); //right eye
//mouth
fill(0);
noStroke();
ellipse(240, 396, mouthWidth, mouthHeight);
//clothes
fill(255);
quad(width/2-50, height/2+200, width/2-15, height/2+120, width/2+15, height/2+120, width/2+50, height/2+200); //under dress
fill(ribbonRed, ribbonGreen, ribbonBlue);
quad(width/2-15, height/2+120, width/2-50, height/2+200, width/2+15, height/2+120, width/2+50, height/2+200); //cape
ellipse(width/2-22.5, height/2-40, 45, 45); //ribbon_left
ellipse(width/2+22.5, height/2-40, 45, 45); //ribbon_right
ellipse(width/2-11, height/2+208, 8, 8); //left shoe
ellipse(width/2+12, height/2+208, 8, 8); //right shoe
//lashes
fill(0);
stroke(0);
strokeWeight(1);
line(204, 332, 200, lashHeight+5); //left_first
line(210, 332, 210, lashHeight); //left_second
line(216, 332, 220, lashHeight+5); //left_third
line(264, 332, 260, lashHeight+5); //right_first
line(270, 332, 270, lashHeight); //right_second
line(276, 332, 280, lashHeight+5); //right_third
}
function mousePressed() {
pupilRed = random(200, 250);
pupilGreen = random(160, 230);
pupilBlue = random(60, 180);
lashHeight = random(295, 320);
ribbonRed = random (100, 255);
ribbonGreen = random (0, 180);
ribbonBlue = random (150, 240);
mouthWidth = random (0, 41);
mouthHeight = random (0, 41);
earLoc = random (360, 370);
}
To begin with, I sketched a faces that I wanted to code just to visualize some possible variations and used Adobe Illustrator to get the approximate dimensions. In this project, I varied the sizes and colors of facial elements and apparels. I also incorporated constrains to make the pupils more interactive.