Mignonmi – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project-06-Abstract-Clock

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.

LO 04: Sound Art

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/

Project-05-Wallpaper

sketch

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






  }

Project-04-String-Art

sketch

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();
}

LO 03: Computational Fabrication

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.

https://www.dezeen.com/2014/01/23/undulating-timber-slats-surround-london-flower-kiosk-by-archio-ltd/

Project-03-Dynamic-Drawing

sketch

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);
}

LO 02: Generative Art

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

Project-02-Variable-Face

sketch

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);
}

Project-01-My Self Portrait

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




    
}

LO: My Inspiration

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