sketch

/*
    Bo Yang
    byang2@andrew.cmu.edu
    SectionA
    Project-04
*/

var y = 0;
var x = 0;
var angle = 0;
var angle1 = 0;
function setup() {
    createCanvas(300, 300);
}

function draw() {
    background(0);

    push();
    translate(width / 2, height / 2);
    rotate(radians(angle));
    fill(255, 255, 0);
    ellipse(mouseX, 0, 8, 8);
    pop();
    angle = angle + 30;

    push();
    translate(width / 2, height / 2);
    rotate(radians(angle1));
    ellipse(mouseX, 0, 8, 8);
    pop();
    angle1 = angle1 + 15;


    for (var i = 0; i < width; i += 15){
        stroke(255);
        strokeWeight(0.5);
        line(i, 0, i + mouseX, 300);
        line(i + mouseX, 0, i, 300);
    }

    for(var i = 0; i < width; i += 8){
        stroke(0, 153, 153);
        line(i, 300, 0, i - mouseX);
        line(300, i, i - mouseX, 0);
    }
}

In this program, I use the line drawing a background. When you move your mouse, it can open and close. And also, I’m draw the line like an eye. That is why, I also draw two ellipses, making it looks more like an eye.

sketch

/*
    Bo Yang
    Section A
    byang2@andrew.cmu.edu
    Project-03-Dynamic-Drawing
*/

var angle1 = 0;
var angle2 = 0;
var angle3 = 0;
var angle4 = 0;
var position = 0;


function setup() {
    createCanvas(600, 600);
}

function draw() {
    //background changes color from black to white
    background(mouseX, mouseY);
    noStroke(0);

    //rotating rectangle
    push();
    translate(200, 200);
    rotate(radians(angle2));
    fill(200, mouseX, mouseY);
    rectMode(CENTER);
    rect(0, 0, mouseX, mouseY - 20);
    pop();
    angle2 = angle2 + 5;

    //rotating rectangle
    push();
    translate(180, 180);
    rotate(radians(angle3));
    fill(mouseX, mouseY, 255);
    rect(0, 0, mouseX + 20,  mouseY);
    pop();
    angle3 = angle3 + 15;

    //rotating black ellipse
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle4));
    fill(0);
    ellipse(0, 0, mouseX, mouseY);
    pop();
    angle4 = angle4 + 30;
    

    //rotating ellipse
    push();
    translate(width - 50, height - 50);
    rotate(radians(angle1));
    fill(random(0, 255), random(0, 255), random(0, 255));
    ellipseMode(CORNER);
    ellipse(position, 0, mouseX, mouseY);
    pop();
    position = position + 1; 
    angle1 = angle1 + 10;

}

This is my Dynamic Drawing. To be fancy, I make them all can change colors. The background can change colors from black to white when you moving your mouse. And the two rectangles also can change color, one is blue, the other is red. And also, when you moving your mouse, it can also change size. The two ellipses, one is black and cannot change color. The other one can change all the colors by itself.

sketch

/*
    Bo Yang
    Section A
    byang2@andrew.cmu.edu
    Project-02-Variable-Face
*/

    var eyeSize = 25;
    var faceWidth = 120;
    var faceHeight = 180;
    var mouth = 55;
    let color = "#86592d";
    let colors = ["#33cccc", "#ccccff", "#cc6600", "##993333"];


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    var eyeL = width / 2 - faceWidth * 0.25;
    var eyeR = width / 2 + faceWidth * 0.25;
    background(color);
 

    //face
    noStroke();
    fill("#006622");
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    ellipse(width / 2, height * 0.6, faceWidth * 1.5, faceHeight);

    //black eyes
    fill("black");
    ellipse(eyeL, height / 3, eyeSize / 3, eyeSize / 3);
    ellipse(eyeR,height / 3, eyeSize / 3, eyeSize /3);

    //eyes
    ellipse(eyeL, height / 3, eyeSize, eyeSize);
    ellipse(eyeR, height / 3, eyeSize, eyeSize);

    //pupil
    fill(255);
    ellipse(eyeL, height / 3, eyeSize / 2, eyeSize / 2);
    ellipse(eyeR, height / 3, eyeSize / 2, eyeSize / 2);

    //cheeks
    fill("#ff99bb");
    ellipse(eyeL - 8, (height / 3) + 40, eyeSize * 1.2, eyeSize * 1.2);
    ellipse(eyeR + 8, (height / 3) + 40, eyeSize * 1.2, eyeSize * 1.2);

    //mouth
    fill("#ff4d4d"); 
    arc(width / 2, height * 0.6, mouth, mouth, TWO_PI, PI);

    
}
 
function mousePressed() {
    
    faceWidth = random(30, 120);
    faceHeight = random(100, 200);
    eyeSize = random(15, 35);
    mouth = random(25, 60);
    color = random(colors);
    eyeL = random(width / 2, width / 2 - faceWidth * 0.25);
}

In this program, I draw a frog in the different background color. The frog’s body shape and eyes size will change when you click it. Before I draw it, I just noticed the face shape is more like a frog’s body shape. It use variables on the face, eyes, mouth and background.

I was play Electronic Organ when I was in undergraduate university in China. This instrument is very popular among children because it contains thousands of sounds in one instrument.

The first electronic organ made by an American named Thaddeus Cahill in 1904. Until now, YAMAHA is the biggest company producing this instrument.

Electronic Organ seems like a harpsichord, piano size but has a foot-keyboard. Electronic Organ is a modern electronic keyboard instrument which combines high technology. It originates from classical pipe organ and is similar to the structure of the classical pipe organ. But the electronic organ has its own musical form, which is just like a music synthesizer but need a performer to run the whole organ. It contains thousands of instruments inside one electronic organ and it can show symphony when performer plays it. Even I play this instrument for 8 years, I still do not know how does it run. All the information online is about teach how to play it but no one to show how can produce one.

From my experience, the electronic organ function just likes the music synthesizer but more than one. It can process thousands of instruments in one time.

However, the sound of this instrument is not very adjective sometimes. It’s like fake not true. It inspire me to learn more about computing music and what is computing music. I love my instrument and I wandering maybe I can do more about this project. Like, making this instrument become more productive or making the sounds more adjective. Then chamber music can just need one instrument not a lot of instruments.

In the beginning, I want to draw a little girl with fringe. However, I’m not a good painter. It is more like a cartoon here. And I love the two colors I made it.

Bo-sketch

/*
    Bo Yang
    byang2@andrew.cmu.edu
    Section A
    This program draws a self portrait.
*/

function setup() {
    createCanvas(300, 300);
}

function draw() {
    background(180,60,80);
    if (mouseX < (width / 2)) {
        background(60, 100, 150);
    }
  
    //body
    line(180, 180, 225, 300); 
    line(120,180,75,300);
  
    //face
    fill(255,200,200);
    ellipse(150, 150, 120, 100); {
      
    //left eye
    fill(0);
    noFill();
    strokeWeight(7.0);
    strokeCap(ROUND);
    beginShape();
    curveVertex(100, 250);
    curveVertex(135, 150);
    curveVertex(115, 150);
    curveVertex(143, 250);
    endShape();
      
    //right eye
    strokeJoin(MITER);
    beginShape();
    vertex(180, 135);
    vertex(170, 143);
    vertex(180, 150);
    endShape();
      
    //nose
    point(150, 160);
      
    //mouth
    fill(255, 0, 0);
    arc(150, 175, 15, 25, 0, PI, CHORD);
      
    //hair
    noFill()
    arc(150, 150, 160, 180, 84, 76, OPEN);
    line(185, 190, 215, 201);
    line(95, 210, 109, 192);
      
    //earring
    fill(255, 204, 0);
    triangle(80, 155, 99, 155, 91, 176);
    triangle(205, 155, 224, 155, 215, 176);
      
    //headwear
    ellipseMode(RADIUS); 
    fill(180, 200, 50); 
    ellipse(200, 90, 28, 28); 

    ellipseMode(CENTER); 
    fill(255, 204, 0); 
    ellipse(200, 90, 25, 25); 
  }
}