Category: SectionD

sketch

var angle = 0
function setup() {
    createCanvas(450, 600);
    background(0);
}

function draw() {
    if (mouseY < height / 2){ //determines color based on mouse's vertical side of canvas
        background ("black")
    }
    else if (mouseY > height / 2) {
        background (135, 188, 222)
    }
    //if (mouse X < width / 2) {
      //background (255, 190, 11)

    noStroke();
    fill("white") // circle moves up and down
    ellipse(225, mouseY, mouseY, mouseY)


    ellipse(mouseX, 300, mouseX, 10) // ellipses moves side to side and gets longer
    ellipse(mouseX, 20, mouseX, 10)
    ellipse(mouseX, 580, mouseX, 10)
    ellipse(mouseX, 40, mouseX, 10)
    ellipse(mouseX, 560, mouseX, 10)
    ellipse(mouseX, 60, mouseX, 10)
    ellipse(mouseX, 540, mouseX, 10)
    ellipse(mouseX, 320, mouseX, 10)
    ellipse(mouseX, 280 , mouseX, 10)
    ellipse(mouseX, 80 , mouseX, 10)
    ellipse(mouseX, 100 , mouseX, 10)
    ellipse(mouseX, 120, mouseX, 10)
    ellipse(mouseX, 140 , mouseX, 10)
    ellipse(mouseX, 160 , mouseX, 10)
    ellipse(mouseX, 180 , mouseX, 10)
    ellipse(mouseX, 200 , mouseX, 10)
    ellipse(mouseX, 220 , mouseX, 10)
    ellipse(mouseX, 240 , mouseX, 10)
    ellipse(mouseX, 260, mouseX, 10)
    ellipse(mouseX, 280 , mouseX, 10)
    ellipse(mouseX, 340 , mouseX, 10)
    ellipse(mouseX, 360 , mouseX, 10)
    ellipse(mouseX, 380 , mouseX, 10)
    ellipse(mouseX, 400 , mouseX, 10)
    ellipse(mouseX, 420 , mouseX, 10)
    ellipse(mouseX, 440, mouseX, 10)
    ellipse(mouseX, 460 , mouseX, 10)
    ellipse(mouseX, 480 , mouseX, 10)
    ellipse(mouseX, 500 , mouseX, 10)
    ellipse(mouseX, 520 , mouseX, 10)

    push() // circle rotates around point
    translate(225, 300);
    fill(255,190,11)
    rotate(radians(min(mouseX, 200)));
    ellipse(100, 100, 40, 40);
    angle += 2
    if (mouseY)
    pop()
}

This project was hard because it was more open ended than the previous one’s and I had a difficult time understanding what to create and how to create it.

gnmarino-03Spacecraft Drawing

var xCord = 300;
var yCord = 225;
var intSize = 1;
//for RBG color values
var intRed = 127;
var intGreen = 0;
var intBlue = 127;

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

function draw() {
    
    background (200);

    fill(intRed, intGreen, intBlue);

    // Change Red attribute (RGB) color as mouse moves across screen

    intRed = 255 - (mouseX / 2.3529);

    // Change Blue attribute (RGB) color as mouse moves across screen

    intBlue = (mouseX / 2.3529);
    
    //changes size as mouse moves horizontally 
    intSize = xCord * .01


    //if mouse is on left side then spaceship points to the left
    if (width/2 > mouseX) {
        //draws polygon
        beginShape();
            vertex(xCord, yCord);
            vertex(xCord + (5 * intSize) , yCord - (5 * intSize));
            vertex(xCord + (15 * intSize), yCord - (5 * intSize));
            vertex(xCord + (30 * intSize), yCord - (15 * intSize));
            vertex(xCord + (30 * intSize), yCord);
        endShape(CLOSE);

        //if mouse is on right side then spaceship points to the right
    }else {
             beginShape();
                vertex(xCord, yCord);
                vertex(xCord - (5 * intSize) , yCord - (5 * intSize));
                vertex(xCord - (15 * intSize), yCord - (5 * intSize));
                vertex(xCord - (30 * intSize), yCord - (15 * intSize));
                vertex(xCord - (30 * intSize), yCord);
                endShape(CLOSE);
    }


    yCord = mouseY;

   // Don't let object go off canvas if mouseY coordinate goes off canvas
    if (yCord < 0) {
        yCord = 0;
    }

    if (yCord > 450) {
        yCord = 450;
    }

    xCord = mouseX;

   // Don't let object go off canvas if mouseX coordinate goes off canvas
    if (xCord < 0) {
        xCord = 0;
    }

    if (xCord > 600) {
        xCord = 600;
    }


} 

This project was difficult because it was hard to keep track of how the math is working and where your coordinates are, especially while trying to rotate and flip objects.

Also, at first I had a hard time finding an idea that sticks to the parameters and was constricted and always predictable.

Here is my starting drawing of trying to create my idea.

aysha-dynamic

var x = 1
var y = .75

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

function draw() {
    background(200, 100, 0); // orange background
    fill(mouseX);
    rectMode(CORNER);
    rect(0, 0, mouseX*x, mouseY*y); // top left rect
    rectMode(CORNERS);
    fill(mouseY);
    rect(450, 600, mouseX*x, mouseY*y); // bottom right rect
    fill(200, 75, 75);
    triangle(mouseX, mouseY*y, mouseX*1.25, mouseY+30,
        mouseX*.75, mouseY+30); // cursor triangle
}

It was interesting trying to find variables to incorporate other than mouseX and mouseY. I ultimately decided to go with something simple just because the layers of drawing looked cleaner.

//Julianna Bolivar
//jbolivar
//section d
var x = 305; //center petal
var y = 225;
var y1 = 140; //petals
var py1 = 0; //petal velocities
var y2 = 180;
var py2 = 0;
var y3 = 180;
var py3 = 0;
var y4 = 270;
var py4 = 0;
var y5 = 270;
var py5 = 0;

function setup() {
    createCanvas(600, 450);
    py1 = 0; //petal velocitiess
    py2 = 0;
    py3 = 0;
    py4 = 0;
    py5 = 0;
}

function draw() {
    if (mouseX > width/2){     
        background(0, 51, 102); //mouseX in right is midnight blue
    }
    else {
        background(173, 216, 230); //mouse X in left in sky blue
    } 
    
    push();
    rotate(frameCount / 50.0);
    star(100, 100, 80, 100, 20); //sun 
    pop();
    
    fill(154, 205, 50);
    noStroke();
    rect(290, 250, 30, 400); //stem
    fill(255, 105, 180);
    circle(305, y1, 100); //top petal
    circle(380, y2, 100); //upper right petal
    circle(230, y3, 100); //upper left petal
    circle(245, y4, 100); //lower left petal
    circle(370, y5, 100); //lower right petal
    y1 += py1; 
    y2 += py2; 
    y3 += py3; 
    y4 += py4; 
    y5 += py5; 
    fill(255, 215, 0);
    circle(x, y, (100 + mouseY/3)); //center gets bigger with mouseY
} 

function mousePressed() { //petals fall on click
    py1 = 10;
    py2 = 9;
    py3 = 5;
    py4 = 10;
    py5 = 6;
}

function star(x, y, radius1, radius2, npoints) { //star spin
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
    endShape(CLOSE);
}

This was so difficult. Because my idea was very simple at first it ended up looking all over the place as I added elements. Some things I never figured out, like how I wanted the petals to change as they fall.