function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(240, 217, 156);
fill(220);
strokeWeight(2);
ellipse(200,200,395);
fill('magenta');
stroke(150,255,100);
ellipse(200,180,50);
fill(183, 156, 240);
strokeWeight(6);
arc(200,250,200,150,0,180,CHORD);
let hr = hour();
let mn = minute();
let sc = second();
strokeWeight(4);
stroke(255,100,150);
noFill();
let end1 = map(sc,0,60,0,360);
arc(120,120,35,35,0,end1);
arc(280,120,35,35,0,end1);
stroke(150,100,255);
let end2 = map(mn,0,60,0,360);
arc(120,120,28,28,0,end2);
arc(280,120,28,28,0,end2);
stroke(150,255,100);
let end3 = map(hr % 12,0,12,0,360);
arc(120,120,20,20,0,end3);
arc(280,120,20,20,0,end3);
stroke("orange");
let s = map(second(),0,60,0,360) - 180;
line(200,180,200 + cos(s)*50, 180 + sin(s)*50);
strokeWeight(2);
text('hehe: \n' + s, 100, 190);
text('hehe: \n' + s, 300, 190);
strokeWeight(1);
stroke('red');
text('Hey_time: \n' + hr + 'hours' + mn + 'minutes', 100, 50);
}
function mouseIsPressed() {
if (s % 5 == 0){
fill('blue');
strokeWeight(6);
stroke(0);
arc(200,250,200,150,0,180,CHORD);
} else {
fill(183, 156, 240);
strokeWeight(6);
stroke(0);
arc(200,250,200,150,0,180,CHORD);
}
}
This project was quite challenging. I had to search through the internet to learn how to call the numbers using javascript. It turned out to be easy. However, contextualizing my concepts to code was again very difficult. I tried to create a cute face using functions that implement the numbers of the clock. However, as always, it turned out quite differently than my sketch. I used lines on the nose and used the print function to print the time on the top left corner of the canvas.
]]>Weather Thingy by Adrien Kaeser is a sound controller that uses real-time climate-related data to produce sound art. The data is used to modify the settings of the various instruments included in the station. The station consists of three climate sensors: a rain gauge, a wind vane, and an anemometer. The data collected from the three sensors pops up to an interface that allows the user to use the information to generate sound. The device is made with various machines including the Arduino mega. The software that connects the various machines includes Arduino, C ++, and MIDI protocol. I admire the performance aspect of the piece, where the audience can experience the live process of sound generation. The machines are put together in a visually appealing way. Furthermore, openness to human control over the data implementation seems to add more creativity to the project. The artist’s design to compose music through programming, live data collection, and human interaction seems to uplift the artistic sensibility of the entire piece
.https://www.creativeapplications.net/sound/weather-thingy-real-time-climate-sound-controller/
]]>function setup() {
createCanvas(750, 450);
angleMode(DEGREES);
rectMode(CENTER);
}
function draw() {
background(200);
//LOOP OF ENTIRE PATTERN
push();
noStroke();
//fill(202,204,232);
//rect(100,80,150,120);
//fill(171,255,220);
//rect(100,20,150,10);
//rect(100,40,150,40);
pop();
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(150,0);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(300,0);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(450,0);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(-150,0);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(105,80);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(255,80);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(-45,80);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(405,80);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(-150,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(0,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(150,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(300,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////
push();
translate(450,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);
fill(255);
ellipse(55,60,20,15);
fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);
fill("brown");
rect(50,100,300,10);
fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);
fill("pink");
rect(30,80,10,30);
noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);
fill("red");
ellipse(17,37,10,10);
fill(93,245,133);
rect(90,80,10,30);
fill(114,146,252);
rect(100,75,10,40);
fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);
fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);
fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
}
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
function setup() {
createCanvas(400, 300);
background(255, 243, 79);
}
function draw() {
//reference function
for(var i = 0; i < 200; i ++){
var x1 = 0;
var x2 = i*width/25;
var y1 = i*height/50;
var y2 = height;
strokeWeight (0.5); //set thickness of the line
stroke(13, 66, 22); // right green center of the butterfly
line(200+x1,y1,x2+100, y2);
stroke(13, 66, 22); // left green center of the butterfly
line(400-(200+x1),y1,400-(x2+100), y2);
stroke(138, 233, 255); // right blue center of the butterfly
line(200+x1,y1,x2+100, y2+50);
stroke(138, 233, 255); // left green center of the butterfly
line(400-(200+x1),y1,400-(x2+100), y2+50);
stroke(209, 102, 255);
line(350+x1,y1,x2+100, y2);
stroke(209, 102, 255);
line(400-(350+x1),y1,400-(x2+100),y2);
stroke("magenta");
line(x1,y1,x2,y2);
stroke("magenta");
line(x1,300-y1,x2,300-y2);
stroke("magenta");
line(400-x1,y1,400-x2,y2);
stroke("magenta");
line(400-x1,300-y1,400-x2,300-y2);
var x1 = 0;
var x2 = i*width/25;
var y1 = i*height/70;
var y2 = height;
stroke("orange");
line(x1,y2,x2,y1);
stroke("orange");
line(400-x1,y2,400-x2,y1);
}
noLoop();
}
This is a flower kiosk designed by the British firm Archio. The ripples in the timber facade of this kiosk are demonstrative of the shapes of flower petals when viewed under a microscopic lens. Archio constructed the kiosk by integrating both digital and handmade techniques. The nano details of the petals were scanned through the electron scanning technique. Computer programming would help the transformation of the scanned image into the fabrication of the timber ripples. This project was eye-catching for its visual attractiveness and practicality. The compact and simplistic design of the kiosk seemed to successfully match its usage as a flower shop. Realizing the process to the final design, the gentle curves resonate better with the concept of flowers. The creative process of capturing the interesting form of flower petals to wooden ridges aided by computer programs highlights how the computer can be used to generate both practical and creative outcomes.
var angle = 0; //angle of rotation that will be determined by mouseX
var meow = 0; //canvas size that will be filled with cats
function setup() {
createCanvas(600, 450);
}
function draw() {
background(220);
//begin of rotate function
fill("green");
push();
angle = angle + mouseX*0.01
if (mouseX < 300){
strokeWeight(1);
rotate(radians(angle));
rect(mouseX,mouseY,600 - mouseX, 450- mouseY);
} else{
rotate(radians(angle));
strokeWeight(2);
circle(mouseX,mouseY,mouseX+50,mouseY+70);
}
pop();
//end of rotate
//begin of cat eye
strokeWeight(3);
line(mouseX,mouseY,mouseX+mouseX*0.5,mouseY-mouseY*0.5);
line(mouseX,mouseY,mouseX-mouseX*0.5,mouseY-mouseY*0.5);
line(mouseX,mouseY,mouseX,mouseY-mouseY*0.9);
strokeWeight(1);
if (mouseX < 300){
fill("magenta");
ellipse(mouseX,mouseY,mouseY,mouseX);
}else if (mouseX < 450 & mouseX > 300) {
fill("blue");
ellipse(mouseX,mouseY,mouseY,mouseX);
}else {
fill("orange")
ellipse(mouseX,mouseY,mouseY,mouseX);
}
fill(0);
ellipse(mouseX,mouseY,mouseX*0.2,mouseY*0.2);
//end of cat eye
//begin of cat
meow = 0 + mouseX*0.7
for (var x = 5; x < meow; x = x+50){
for (var y = 5; y < meow; y = y+50){
if(mouseY < 300){
push();
translate(x, y);
drawCat();
pop();
}
}
}
//end of cat
//bottom rectangle and text
fill("brown");
rect(0,400,600,50);
text("Welcome to Meow World",425,390);
}
function drawCat() {
if (mouseX>500){
fill(random(0,255),random(0,255),random(0,255));
}else{
fill("yellow")
}
triangle(7, 0, 0, 7, 14, 7);
triangle(21,0,28,7,14,7);
rect(0,7,28,25);
fill(0);
ellipse(10,10,4,7);
ellipse(18,10,4,7);
ellipse(14,19,6,4);
line(-3,11,8,15);
line(8,15,-3,21);
line(21,15,38,11);
line(21,15,38,21);
}
Walk-Through Raster by Frieder Nakes stood out to be the most inspirational due to its visual exceptionality. Walk-Through Raster is a computer-generated image that was produced under two procedures. The first process is the drawing of white, blue, red, yellow, and orange marks by a calcomp plotter output device. The second process is the regeneration of the image through silkscreen. The most admirable aspects of this piece would be composition, color, and technique. Dynamic is demonstrated through varied line density. Some areas of the canvas are highly crocheted while other areas remain in simple forms. The spectrum of colors from dark shades of red and blue to lighter shades of yellow and orange create a distinctive pattern within the canvas. The technique of plotting color and varied lines with visual respectability is also considered highly admirable since the technique was unlike any other at its current time. Frieder Nake is renowned as the pioneer of computational art. He was a mathematician, computer scientist, as well as a generative artist. As an expert in computer programming, Nake generated mathematical algorithms combined with the plotter machine to create an abundance of genuine artworks like Walk-Through Raster. Plotter machines function to produce vector graphic drawings based on computer programming. Nake must have utilized the characteristics of programming such as randomness or repetition and its manifestation through plotter machines to create interesting artworks.
https://www.artsy.net/artwork/frieder-nake-walk-through-raster-vancouver-version
]]>var faceWidth = 400;
var faceHeight = 270;
var awidth = 640; // width as a variable that can change
var aheight = 480; //height as a variable that can change
var eyeposition = 20;
var eyepositionn = 10;
var mouthheight = 300; //original position of
var mouthemotion = 1;
var sidefacewidth = 270;
var sidefaceheight = 400;
var definetheface = 1
var topfence = 0
function setup() {
createCanvas(640, 480);
}
function draw() {
//coding for first condition starts
if (0<definetheface & definetheface<1){ //first*condition
background(242,85,0);
fill(35, 89, 41);
rect(50,50, 550, 380);
fill(255,234,117);//face color
strokeWeight(1);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 - faceWidth * 0.2;
var eyeRX = width / 2 + faceWidth * 0.2;
beginShape();
noFill();
strokeWeight(2);
curveVertex(eyeLX - eyeposition, aheight/2 - eyepositionn);
curveVertex(eyeLX - eyepositionn , aheight / 2 - eyepositionn);
curveVertex(eyeLX, aheight / 2);
curveVertex(eyeLX - 2* eyepositionn , aheight /2 - eyepositionn);
curveVertex(eyeLX - 2* eyeposition, aheight /2 - eyeposition);
endShape();
beginShape();
noFill();
strokeWeight(2);
curveVertex(eyeRX - eyeposition, aheight/2 - eyepositionn);
curveVertex(eyeRX - eyepositionn , aheight / 2 - eyepositionn);
curveVertex(eyeRX, aheight / 2);
curveVertex(eyeRX - 2* eyepositionn , aheight /2 - eyepositionn);
curveVertex(eyeRX - 2* eyeposition, aheight /2 - eyeposition);
endShape();
fill(0);
strokeWeight(1);
ellipse(width / 2, height / 2, eyeposition, eyepositionn);
if(0 < mouthemotion & mouthemotion < 1){
arc(width/2, mouthheight, 100, 50, 1*Math.PI, 0*Math.PI, CHORD);
} else if (1 < mouthemotion & mouthemotion < 2){
arc(width/2, mouthheight, 100, 50, 0*Math.PI, 1*Math.PI, CHORD);
} else if (2 < mouthemotion & mouthemotion <3){
arc(width/2, mouthheight, 100, 50, 0*Math.PI, 0*Math.PI, CHORD);
}
//heart
fill(255,0,0);
strokeWeight(1);
arc(100, 100, 20, 20, PI, 0);
arc(120, 100, 20, 20, PI, 0);
triangle(90, 100, 130, 100, 110, 130);
arc(500,200,20,20, PI, 0);
arc(520,200, 20, 20, PI, 0);
triangle(490, 200, 530, 200, 510, 230);
strokeWeight(1);
fill(255,0,0);
rect(mouseX, mouseY, 50,50)
fill(0,0,230);
beginShape();
vertex(mouseX,mouseY);
vertex(mouseX+10,mouseY-30);
vertex(mouseX+25,mouseY-0);
vertex(mouseX+40,mouseY-40);
vertex(mouseX+50,mouseY-0);
endShape(CLOSE);
//coding for second condition starts
}else if (1<definetheface & definetheface<2){ //second*condition
background(255,0,106);//background color
fill(0,255,0);
ellipse(mouseX, mouseY, 40, 40);
fill(0,0,255);
strokeWeight(0);
circle(0,0,50);
circle(50,0,50);
circle(100,0,50);
circle(150,0,50);
circle(200,0,50);
circle(250,0,50);
circle(300,0,50);
circle(350,0,50);
circle(400,0,50);
circle(450,0,50);
circle(500,0,50);
circle(550,0,50);
circle(600,0,50);
circle(650,0,50);
fill(255); //color of the face
strokeWeight(1);
ellipse(width / 2, height / 2, sidefacewidth, sidefaceheight);
strokeWeight(2); //stoke of eye
if(mouthemotion<1.5){
line(250, 150, 280, 160);
line(280, 160, 250, 170);
}else{
line(260, 150, 230, 160);
line(230, 160, 260, 170);
}
fill(0); //color of the nose
ellipse(width/2 - sidefacewidth*0.5, height/2-sidefaceheight*0.1, sidefacewidth/5, sidefaceheight/7);
if(0 < mouthemotion & mouthemotion < 1){
arc((width/2-sidefacewidth/2)+10, mouthheight, 100, 50, 0*Math.PI, 0.5*Math.PI, CHORD);
} else if (1 < mouthemotion & mouthemotion < 2){
arc((width/2-sidefacewidth/2)+10, mouthheight, 100, 50, 1.2*Math.PI, 0.6*Math.PI, CHORD);
} else if (2 < mouthemotion & mouthemotion <3){
arc((width/2-sidefacewidth/2)+10, mouthheight, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);
arc((width/2-sidefacewidth/2)+10, mouthheight+20, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);
}
fill(0,255,0);
ellipse(mouseX, mouseY, 40, 40);
// coding for third condition starts
}else{ // third*condition
background(180);
strokeWeight(2);
fill(0,255,0);
//clover
circle(mouseX, mouseY, 30);
circle(mouseX+30, mouseY, 30);
circle(mouseX+15, mouseY-27,30)
noFill();
arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);
fill(255,77,0);
strokeWeight(0);
rect(0,0,30,480);
rect(610,-30,30, 480);
fill(187,240,252);//color of face
strokeWeight(1);
ellipse(width/2-sidefaceheight/2, height/2,50); //ear left
ellipse(640-(width/2-sidefaceheight/2),height/2,50); // ear right
ellipse(width/2, height/2, sidefaceheight, sidefaceheight);
fill(0);
ellipse (width/2 - sidefaceheight*0.2, 100, 20, 10); //left eye
ellipse (width/2 + sidefaceheight*0.2, 100, 20, 10); //rught eye
ellipse (width/2, height/2 - sidefaceheight*0.5, 10,10); //nose
fill(0);
if(0 < mouthemotion & mouthemotion < 1){
arc(width/2, height/2, sidefaceheight, sidefaceheight, 0*Math.PI, 1*Math.PI);
} else if (1 < mouthemotion & mouthemotion < 2){
arc(width/2, height/2, sidefaceheight, sidefaceheight, 0.25*Math.PI, 0.75*Math.PI);
} else if (2 < mouthemotion & mouthemotion <3){
arc(width/2, height/2, sidefaceheight, sidefaceheight, 1.75*Math.PI, 1.25*Math.PI);
}
strokeWeight(2);
fill(0,255,0);
circle(mouseX, mouseY, 30);
circle(mouseX+30, mouseY, 30);
circle(mouseX+15, mouseY-27,30)
noFill();
arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);
}
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
faceWidth = random(350, 450);
faceHeight = random(250, 290);
eyeposition = random (20,30);
eyepositionn = random (10,15);
aheight = random(300,500);
mouthemotion = random (0,3);
definetheface = random (0,3);
sidefacewidth = random (250,300);
sidefaceheight = random (380,470);
}
]]>
handin-01_heejins-01-project_sketch
//Heejin Son Section D
function setup() {
angleMode(DEGREES); //set up the code to work in degrees
createCanvas(910, 717);
background(96, 96, 96);
}
function draw() {
strokeWeight(1);
fill(173, 195, 232); //murky blue
rect(245, 293, 466, 426); //smaller background rectangle
ellipse(280, 506, 405, 323); //background ellipse left
ellipse(667, 506, 405, 323); //background ellpise right
ellipse(457, 538, 252, 161); //ellipse for the face
fill(36, 26, 26); //brown
ellipse(419, 524, 11, 25); //left eye
ellipse(485, 524, 11, 25); // ight eye
fill(150, 22, 22); //red
ellipse(451, 539, 10, 10); // nose
ellipse(416, 626, 35, 46); //left hand
ellipse(502, 624, 35, 46); //right hand
ellipse(389, 640, 12, 12); //paws for left hand
ellipse(410, 660, 13, 13); //paws for left hand
ellipse(440, 650, 12, 12); //paws for left hand
ellipse(476, 641, 12, 12); //paws for right hand
ellipse(499, 660, 14, 14); //paws for right hand
ellipse(526, 652, 10, 10); //paws for right hand
line(292, 506, 376, 536); //left whiskers
line(299, 582, 379,554); //left whiskers
line(520, 537, 627, 478); //right whiskers
line(518, 554, 629, 575); //right whiskers
rect(414, 401, 44, 56); //rectangle for the hat
fill(24, 159, 10); //green
triangle(458, 401, 489, 354, 512, 406); //triangle for the hat
fill(150, 22, 22); //red
triangle(512, 406, 552, 409, 535, 445); //end triangle for the hat
ellipse(343, 489, 42, 42); //circle for the bubbles
fill(196, 177, 50); //yellow
ellipse(347, 447, 20, 20); //circle for the bubbles
fill(31, 50, 85); //navy
ellipse(319, 418, 24, 24); //circle for the bubbles
fill(181, 85, 21); //orange
ellipse(106, 350, 40, 40); //outer bubbles
fill(31, 85, 48); //green
ellipse(79, 266, 70, 70); // outer bubbles
fill(196, 177, 50);
ellipse(139, 192, 40, 40); // outer bubbles
fill(31, 85, 48);
ellipse(627, 116, 50, 40); //butterfly
fill(31, 50, 85);
ellipse(645, 172, 70, 60); //butterfly
fill(150, 22, 22);
ellipse(682, 105, 30, 20); //butterfly
fill(181, 85, 21);
ellipse(717, 147, 70, 60); //butterflys
line(653, 95, 635, 72); //butterfly
line(660, 95, 667, 58); //butterfly
fill(31, 85, 48);
fill(31, 50, 85);
rect(350, 208, 160, 102); //house
fill(150, 22, 22); //red
triangle(325, 210, 530, 210, 432, 140); //house
rect(0,700, 910, 20); //bottom rectangle
}Tender breeze by Mimi Park would be the artwork that introduced me to interactive art. It is not necessarily a computer-based artwork that involves coding, but more electrical engineering involved kind of work. What I admire most about this project is the interactivity of breezing out the wind. When the audience steps toward the human figure, the fan starts to turn and blow out the wind. As the wind blows, the fabric that surrounds the fan gently sways. The method behind this interactivity is by using a range sensor that allows machines to detect how close an object is to the sensor. You can adjust the range sensor for various purposes such as for an automatic light switch. Unfortunately, not much detail is provided in her blog about the process of building the installation. Regarding its small size, it is arguable that she was the sole producer of tender breeze. This artwork inspires me to explore areas of interactive and computational work using both found objects and machines, as well as self-written codes that I will hopefully be able to do after taking 15104.
https://www.mimipark.art/tender-breeze
arduino, range sensor, plaster, concrete, fabric, air dry clay, straw cleaner, shoes, moth ball, fresh flower