I really enjoyed this project and think this turned out cute. I especially like how the icons reinforce what the image is communicating (I really love fruit).
/*
Joan Lee
Section D
This program draws a portrait of me GRIPPING my fruit with symbols that represent me loving fruit.
*/
function preload() {
joan = loadImage("https://i.imgur.com/eMJulaO.png");
}
function setup() {
createCanvas(385, 480);
joan.resize(width, height);
background(255);
joan.loadPixels();
}
function draw() {
//want the image to be revealed where the mouse is
var pixColor = joan.get(mouseX, mouseY);
//revealing image of me GRIPPING fruit with icons that resemble fruit and my love for it
noStroke();
iLoveFruit = ["♥", "⊛", "❂"];
for(var i = 0; i < 3; i ++) {
fill(pixColor);
textSize(random(1, 10));
text(iLoveFruit[floor(random(iLoveFruit.length))], mouseX, mouseY);
}
}I found Chris Sugrue’s Delicate Boundaries compelling because of its interactive and creative nature. Chris is an artist who specializes in interactive new media installations. She earned a Master’s of Fine Arts in Design and Technology from Parsons School of Design, and now is based in Paris, where she teaches at Parson’s campus there.
This piece allows users to watch as small bug-like creatures scuttle across a darkness, and come to life when hands touch the screen. The artist definitely knows how to make bugs look appealing; even though their movement and legs clearly indicate that they are creepy crawlers, their shapes are approachable and cute. I am curious as to why these critters were chosen to be the subjects of this project. It is remarkable how well the software is able to read the locations of hands, as well as the paths to follow along the arms, and I admire its blending of virtual and physical worlds (hence the title). Since it reacts to touch and is projected from above, I assume this effect is achieved through infrared/heat sensors.
]]>This is my floral composition based on mathematical curves and reacts to the mouse’s location on the canvas.
/*
Joan Lee
Section D
This program draws an interactive floral composition with mathematical curves.
*/
var nPoints = 400;
function setup() {
createCanvas(480, 480);
}
function draw() {
background(28,92,76); //dark green
//drawing flower curve
push();
translate(width/2, height/2);
drawCardioidCurve();
pop();
//drawing leaves curve
push();
translate(width/2, height/2);
drawHypotrochoidCurve();
pop();
}
//--------------------------------------------------
function drawCardioidCurve() {
//cardioid curve
push();
translate(x, y);
rotate(radians(90));
var x = constrain(mouseX, 0, width);
var y = constrain(mouseY, 0, height);
var a = map(x, 0, width, 0, 40);
var b = a/2;
//mouse movement interaction
if (mouseY > height/2) { //color change
fill(244,52,4); //bright red
} else {
fill(252,156,132); //pink
}
//cardioid curve parametric equations
beginShape();
noStroke();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = a * (6 * cos(t) - cos(6 * t));
y = a * (6 * sin(t) - sin(6 *t));
vertex(x, y);
}
endShape(CLOSE);
pop();
}
//--------------------------------------------------
function drawHypotrochoidCurve() {
//hypotrochoid curve
noFill();
strokeWeight(1);
//mouse movement interaction
if (mouseX < width/2) { //color change
stroke(4,220,156); // bright green
} else {
stroke(204,236,228); //pale green
}
var x = constrain(mouseX, 0, width);
var y = constrain(mouseY, 0, height);
var a = map(x, 0, width, 50, 150);
var b = map(y, 0, height, 1, 6);
var h = constrain(mouseY, 50, 90);
//hypotrochoid curve parametric equations
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
x = (a - b) * cos(t) + h * cos(t * ((a - b) / b));
y = (a - b) * sin(t) - h * sin(t * ((a - b) / b));
vertex(x, y);
}
endShape(CLOSE);
}
The Search Clock by Chris Harrison stood out to me because I found the concept very interesting; mapping out data from search engines, Magellan and AOL, over the course of a typical day (from studying trends for nine weeks), and then taking it a step further by mapping the differences in searches from 1997-2000. I admire firstly how visually interesting this project is because it is radially centered and balanced, but with enough variation to keep it interesting and engaging. It makes me want to read into the smaller text, and this demonstrates the artist’s eye for composition and hierarchy. Additionally, it very clearly shows information in a well-organized way. I have been learning about and practicing the visualization of data and systems in one of my design classes, and I know how tedious it is to land on something that makes sense. Furthermore, the content itself is interesting, with a lot of risqué and humorous topics trending at certain times of the day.
Although the product is not where I wish it was visually, I will just have to improve on that in my next project. The most challenging part was refreshing my memory on radians so that I wouldn’t have to keep plugging in and checking if numbers work.
/*
Joan Lee
Section D
*/
var h = 0;
var angle = 0;
function setup() {
createCanvas(600, 450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(135 * h, 209 * h, 255 * h); //whenever the mouse moves horizontally it turns from 0 (black) to a sky blue color
//earth
noStroke();
fill(78, 92, 222);
ellipse(width / 2, height, 800, 400);
//orbit, done above both the sun and moon to apply to both the same
translate(h * width, 100); //moves the sun and moon as the mouse moves horizontally
rotate(h * QUARTER_PI); //rotates by pi/4 radians when the mouse moves horizontally
//sun
fill(255, 208, 0);
circle(-width / 2, 325, 100 * h); //grows when mouse moving to the right
//moon
fill(200);
circle(width / 2, 50, 50 * (1 - h)); //shrinks when mouse moving to the right
fill(135 * h, 209 * h, 255 * h); //same fill as the background to ensure it is invisible and hiding the rest of the moon
circle(width / 2 + 15, 50, 50 * (1 - h)); //circle that hides the rest of the moon so it looks like a crescent moon
hPosition(); //function defined below
}
function hPosition(){
h = mouseX / width; //h is btwn 0 and 1 for simplicity's sake instead of just mouseX
h = Math.min(h, 1); //stops the changes when the mouse moves 100% of the canvas horizontally
}A project I find particularly inspirational is “P_Wall” by Andrew Kudless (Matsys). I admire that it is a clearly patterned sculpture with a mathematical structure, but it has organic curves to it. I know that this is difficult to achieve because of a project I had done last year in my freshman year design studio in which a group of my classmates and I were to construct an environment with duplicates of small modules. It was difficult to form something that looked natural with pieces that were geometric, so I respect this aspect. This wall also reminds me of beef tripe, which is very soft and flabby, and contrasts the hardness of the wood used in the sculpture. I suppose that the algorithm that generated this structure was based on simple shapes and limited in size per hole. It was likely also randomized in its protruding curves or calculated based on ripples or waves seen in nature. Kudless’ artistic sensibility is seen in this piece, not just in the visually appealing pattern, but additionally in its size, which leaves the viewer with a grander impression and ability to experience the individual modules.
This project was challenging because it took a lot of trial and error. Commenting helped a lot when going back and forth between editing different things to match them up.
/*
Joan Lee
Section D
Aspects of variability
4 different expressions with mouse movement
switching hair color each click
different posture each click
background changes every click
*/
var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var shoulderHeight = 480;
var bodyColor = "white";
var on = false;
var r = 100;
var g = 74;
var b = 65;
var bgColor = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(bgColor);
//hair behind face
if(on == true){
fill(r, g, b);
} else{
fill(255 - r, 255 - g, 255 - b);
}
ellipse(width / 2, height / 2 + (faceHeight / 4), faceWidth + 50, 330);
//person
noStroke();
fill(bodyColor);
ellipse(width / 2, height, 170, shoulderHeight); //body
fill(250, 230, 180);
ellipse(width / 2, height / 2, faceWidth, faceHeight); //head
//eyes
stroke(0);
strokeWeight(1);
fill("white");
var eyeLX = width / 2 - faceWidth / 4;
var eyeRX = width / 2 + faceWidth / 4;
var x = constrain(mouseX, 20, 35); //eyes getting bigger with mouse moving right
circle(eyeLX, height / 2, x);
circle(eyeRX, height / 2, x); //whites of eyes
fill(63, 35, 11);
circle(eyeLX + 1, height / 2, 5);
circle(eyeRX - 1, height / 2, 5); //pupils considering interpupillary distance
//nose
noFill();
stroke(205, 179, 156); //shadow
strokeWeight(1);
beginShape();
curveVertex(width / 2 + 5, height / 2 + 10);
curveVertex(width / 2 + 5, height / 2 + 10);
curveVertex(width / 2, height / 2 + 20);
curveVertex(width / 2 - 5, height / 2 + 10);
curveVertex(width / 2 - 5, height / 2 + 10);
endShape();
//mouth
strokeWeight(4);
stroke(255, 200, 200);
fill(0);
var x1 = constrain(mouseX, 1, 40);
ellipse(width / 2, height / 2 + 50, 60, x1); //making mouth bigger with mouse placement
//bangs
noStroke();
if(on == true){
fill(r, g, b);
} else{
fill(255 - r, 255 - g, 255 - b);
}
arc(width / 2, height / 2 - faceHeight / 6, faceWidth + 10, faceHeight - 30, PI, 0);
//eyebrows
fill(73, 45, 35);
var y = constrain(mouseY, height / 2 - 50, height / 2 - 30);
rect((width / 2) - (faceWidth / 3), y, 30, 5);
rect((width / 2) + (faceWidth / 8), y, 30, 5); //raised vs furrowed eyebrows with mouse moving up or down
}
function mousePressed() {
bgColor = random(0, 255);
faceWidth = random(110, 160);
faceHeight = random(160, 200);
shoulderHeight = random(330, 450);
if(on == true){ //changing hair color each click
on = false;
} else{
on = true;
}
}LIA’s work draws me in because it is outstandingly compelling, and every piece has thought behind it. Her “Four Seasons” series is most interesting personally because of the shapes and colors she uses, as well as the details in movement for each season; slow, sharp, and downward movement for a snowy Winter, as opposed to the bright, warm, and growing/spiraling motion for spring, etc. The artistic sense is undeniable in LIA’s projects as her eye for color and composition as stated above is incredible.
In terms of the algorithm that generates her work, LIA’s animations are generated randomly as stated in the beginning of her videos, so there is no repetition. Moreover, it seems that she uses many variables for color, shapes, and motion because the website states that she codes with a fluidity. This implies that she may not have a specific picture in mind before coding, and declaring her own variables would allow for her to make changes to the entire piece in a convenient manner. I suppose this is especially useful in deciding colors, since I know from experience that even the slightest change in value or hue can enhance or mar the product.
The most challenging part was figuring out the math for the arc shapes and matching them up to the rest of my face.
/*
Joan Lee
Section D
*/
function setup() {
createCanvas(300, 400);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(200);
//hair behind face
noStroke();
fill(53, 25, 15);
rect(65, 100, 170, 300);
ellipse(70, 260, 70, 350);
ellipse(230, 260, 70, 350); //background hair
ellipse(115, 120, 120, 130);
ellipse(185, 120, 120, 130);
//body
fill(223, 205, 230);
triangle(150, 200, 230, 400, 70, 400);
//face
fill(250, 230, 180);
noStroke();
quad(75, 100, 225, 100, 230, 230, 70, 230); //head
quad(70, 230, 230, 230, 165, 285, 135, 285); //jaw
//eyebrows
stroke(73, 45, 35);
strokeWeight(5);
line(171, 150, 206, 152);
line(94, 152, 129, 150);
//eyes
fill(245, 245, 245);
stroke(0);
strokeWeight(3);
arc(110, 180, 35, 25, PI, TWO_PI);
arc(185, 180, 35, 25, PI, TWO_PI); //eyeballs and lash line
fill(63, 35, 11);
stroke(0);
strokeWeight(2);
circle(111, 177, 17);
circle(184, 177, 17); //pupils and irises
fill(255, 225, 215);
stroke(205, 179, 156);
strokeWeight(1);
ellipse(110, 183, 35, 7);
ellipse(185, 183, 35, 7); //undereye silkworms
//nose
triangle(148, 180, 165, 220, 132, 220);
//mouth
stroke(255, 210, 200); //lips
strokeWeight(5);
fill(255);
arc(148, 233, 70, 50, 0, PI, CHORD);
//front hair
stroke(53, 25, 15);
strokeWeight(1);
noFill();
arc(70, 100, 70, 200, TWO_PI, PI - HALF_PI);
arc(230, 100, 80, 240, PI - HALF_PI, PI);
arc(240, 100, 150, 190, PI - HALF_PI, PI);
arc(100, 100, 100, 80, TWO_PI, PI - HALF_PI);
arc(200, 100, 100, 80, PI - HALF_PI, PI); //lil baby hairs
noStroke();
fill(53, 25, 15);
arc(60, 95, 110, 170, TWO_PI, PI - HALF_PI);
arc(230, 100, 80, 170, PI - HALF_PI, PI); //side bangs
}
Just Dance is a party game staple that has reached millions of users worldwide with just one instruction: just dance! I admire the intention of the game, which is to allow users to have fun gaming without having to slouch on the couch for hours. As someone who plays various games with friends, I appreciate when they don’t cause me back and shoulder pain. Additionally, I remember being absolutely amazed by the movement tracking my first time playing, and wondering how the game knew when I was lifting the wrong arm or kicking too
late (I’m not the greatest dancer). Just Dance was created by Ubisoft Paris in six months using Perforce Helix Core, a commercial software they have been using since 2001. The creators were inspired by Dance Dance Revolution, another popular dancing game that had players stepping on arrows to the beat of music. The body tracking in this game points to the potential of technology that extends to a variety of fields, including games, animation, health, and education.
https://justdancenow.com/
Ubisoft 2009
Reference: Parkin, S. (2013, October 27). The science of just dance. Eurogamer.net. Retrieved September 2, 2022, from https://www.eurogamer.net/the-science-of-just-dance-article