Category: Section B

sketch

function setup() {
    createCanvas(480, 640);
}

function draw() {
    background(255);
    fill(255);
    stroke(0);
    ellipse(width/2, height/2, 50, 50); //outer center ring

    translate(width/2, height/2);
    for (var i = 0; i < 8; i++) { //ring of 8 diamonds

        //first ring
        push();
        var mouseDist = dist(mouseX, mouseY, width/2, height/2); //mouse distance from center
        var bright = 225 - 225 * mouseDist * 1/230; //alters shade from 0 to 225 of the diamonds to be darker as they approach center
        var scaleAmount = 1.75 - 1.75 * mouseDist * 1/230; //scales diamonds from 0 to 1.75 to be larger as they move outwards
        if (mouseX > 240) {
            rotate(-acos((mouseY - height/2)/mouseDist)/2 + TWO_PI * i/8); //sets angular distance between diamonds, and rotates proportional to mouse angle
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/2 + TWO_PI * i/8); //accounts for the face that arccos switches direction at PI/2 and 3PI/2
        }
        if (mouseDist < 230) { //expands and contracts diamonds until just before edge of canvas
           translate(100 - 100 * mouseDist * 1/230, 0); //diamonds move towards center as mouse moves away proportional to original translation
       }
        fill(bright);
        if (mouseDist < 230) { //if statement used so that scaling does not increase after value reaches zero
            scale(scaleAmount);
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //center circle
        }
        pop()
        //simplified comments will be used for further iterations of the ring of diamonds, refer to first ring for more info
        //second ring of diamonds
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/4 + TWO_PI * i/8 + PI/8);
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/4 + TWO_PI * i/8 + PI/8);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(155 - 155 * mouseDist * 1/230, 0);
       }
        fill(bright + 40); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .1); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //first half of third ring of diamonds 
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16); 
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16); 
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(210 - 210 * mouseDist * 1/230, 0); 
       }
        fill(bright + 80); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .2); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //second half of third ring of diamonds 
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16); 
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(265 - 265 * mouseDist * 1/230, 0); 
       }
        fill(bright + 80); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .2); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //fourth ring first part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16);
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(320 - 320 * mouseDist * 1/230, 0); 
       }
        fill(bright + 110); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .25); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

         //fourth ring second part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16); 
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(320 - 320 * mouseDist * 1/230, 0);
        }
        fill(bright + 110); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .25); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

        //fifth ring first part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/8);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/8);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(375 - 375 * mouseDist * 1/230, 0);
        }
        fill(bright + 120); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .3); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

        //fifth ring second part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 4*PI/16);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 4*PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(375 - 375 * mouseDist * 1/230, 0);
        }
        fill(bright + 120); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .3); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

    }
    fill(0);
    ellipse(0,0,40,40); //black circle over diamonds

}

I honestly had no idea what I was going to do with this project. Given that, the creative process was pretty interesting. Honestly, the only thing I was going off of to begin with was that I wanted the diamond shape to be a central theme of the drawing. After that, the rest of the ideas sort of haphazardly tumbled together. The diamond shape led me to a sort of stylized star/space concept, so then I knew I wanted to work with concentric circles rotating alternately. Once I started drawing those, the way the circles condensed into a tight, compact star shape made me think of a supernova. So after that, I intentionally themed the drawing around a sort of explosive, supernova idea.

Although I had the theme all figured out, achieving that idea turned out to be pretty difficult. I had no idea how I was going to get the different rows of diamonds to rotate in regards to the mouses angle to the center of the canvas, not to mention to get them to rotate at different rates related the the mouses angle. The math was pretty tricky, but also I feel like that gives the code a sense of beauty. This was definitely the first thing that I have coded that I felt the code should be seen as well as the product. The code is just as much art.

If I had more time (and I might just go back and do this on my own time) I want to develop the background more. Give it a sense of depth, like a star in space.

nayeon_DynamicDrawing

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-03 (Dynamic Drawing)


var angle = 0;
var dia = 0;


function setup() {
    createCanvas(480, 640);
    angleMode(DEGREES);
}

function draw() {

//background color changing with mouse
    var bgR = map(mouseY, 0, height, 50, 100);
    var bgG = map(mouseX, 0, height, 150, 250);
    var bgB = map(mouseY, 0, height, 100, 200);

    background(bgR, bgG, bgB);

//size changing rect
    noStroke();
    fill(bgR + 100, bgG + 100, bgB + 100);
    rect(0, 0, (mouseX / 2), (mouseY / 2));
    fill(bgR - 100, bgG - 100, bgB - 100);
    rect(100, 100, (mouseX / 2), (mouseY / 2));
    fill(bgR - 50, bgG, bgB + 100);
    rect(200, 200, (mouseX / 2), (mouseY / 2));
    fill(bgR, bgG + 100, bgB + 200);
    rect(300, 300, (mouseX / 2), (mouseY / 2));


//another bg frame
    var x = 50;
    var y = 100;
    var w = 380;
    var h = 440;

    noStroke();
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
      fill(0, 250);
    } else {
      fill(255, 0);
    }
    rect(x, y, w, h);

//rotating rect
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
      fill(bgR, bgG, bgB);
    } else {
      fill(255, 0);
    }
    push();
    translate((width / 2), (height / 2));
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (mouseX / 2), (mouseY / 2));
    pop();
    angle = angle + 20;

//lines
    var wL = 50;
    var wR = 430;
    var hU = 100;
    var hB = 540;

    var xc = constrain(mouseX, wL, wR);
    var yc = constrain(mouseY, hU, hB);

    if ((mouseX > x) & (mouseX < x+w) && (mouseY> y) && (mouseY < y+h)) {
      stroke(255);
    } else {
      stroke(0);
    }

    strokeWeight(8);
    line((width / 2), (height / 2), xc, yc);
    var max = map(mouseX, 0, xc, yc, 100);
    line((width/ 2), (height / 2), max, yc);
    var max = map((mouseX * 0.5), 0, xc, yc, 200);
    line((width/ 2), (height / 2), max, yc);
    var max = map((mouseX * 2), 0, xc, yc, 50);
    line((width/ 2), (height / 2), max, yc);

// cursur - spinning rect
    push();
    rectMode(CENTER);
    if ((mouseX > x) & (mouseX < x+w) && (mouseY> y) && (mouseY < y+h)) {
      fill(255);
    } else {
      fill(0);
    }
    noStroke();
    translate(mouseX, mouseY);
    rotate(radians(angle * 10));
    rect(0, 0, 30, 30);
    pop();

//increasing circle
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
    } else {
      dia = 0;
    }
    push();
    noStroke();
    fill(255);
    ellipse((width / 2), (height / 2), dia, dia);
    dia = dia + 1;
    pop();

    fill(0);







}

I tried to implement codes I’ve learned this week. And I wanted to try something new, I started to design abstract image as much as possible only thinking about function. It was fun to do something different with I used to do it. It was fun to play with different codes!

sketch

var rectT = 300;
var rectB = 500;
var rectW = 80;
var blackH = 10;
var blackW = 80;
var boxH = 150;
var crayonPos = 10;
var windowW = 20;
var angle = 0;

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

}

function draw() {
    var color1 = color(60,200,255);
    var color2 = color(200,212,240);
    var t = map(mouseY,0,width,0,1);
    var bgColor = lerpColor(color1,color2,t);
  // wanted to try the lerpColor function and the hues are controlled
  // by the mouseY function; supposedly represents a sky

    background(bgColor);

  //mock sun
     push();
     fill(255,240,20);
     rotate(radians(mouseX));
     rectMode(CENTER); // center rect around 0,0
     rect(10,10, 200,200);
     pop();
     angle = angle + 5;

  //windows to emulate a classroom
    fill(255);
    rect(0,0,windowW,height);
    rect(0,0,width,windowW);
    rect(height/2,0,windowW,height);
    rect(width-40,0,windowW,height);
    rect(0,height/2,width,windowW);

//these if-statements are to control the height of the specific crayon
//when the cursor is within the range of that specific crayon
//controls red crayon
    if (10<=mouseX & mouseX<=100){
      fill(255,0,0);
      rect(10, mouseY,rectW,height-boxH-mouseY);

    }
//controls orange crayon
    if (110<=mouseX & mouseX<=200){
      fill(255,165,2);
      rect(110, mouseY,rectW,height-boxH-mouseY);

//controls yellow crayon
    }
    if (210<=mouseX & mouseX<=300){
      fill(255,252,17);
      rect(210, mouseY,rectW,height-boxH-mouseY);

//controls green crayon
    }
    if (310<=mouseX & mouseX<=400){
      fill(48,201,63);
      rect(310, mouseY,rectW,height-boxH-mouseY);

//controls blue crayon
    }
    if (410<=mouseX & mouseX<=500){
      fill(45,76,255);
      rect(410, mouseY,rectW,height-boxH-mouseY);
//controls purple crayon
    }
    if (510<=mouseX & mouseX<=600){
      fill(132,21,255);
      rect(510, mouseY,rectW,height-boxH-mouseY);

//draws all the crayons by calling it (mostly for practice calling functions)
    }
    Red();
    Orange();
    Yellow();
    Green();
    Blue();
    Purple();

    //crayon box remains constant
    fill(243,201,48);
    rect(0,height-boxH,width,boxH);

    //symbol
    fill(51,141,62);
    ellipse(width/2,height-75,200,80)

    //green lines on box
    fill(51,141,62);
    rect(0,height-boxH,width,10);
    rect(0,height-boxH+20,width,10);

}

 //crayon functions:
function Red() {
  noStroke();
  fill(255,0,0);
  rect(crayonPos,height-(rectB-rectT),rectW,rectB-rectT)
  fill(0);
  rect(crayonPos,rectT+20,blackW,blackH);
}

function Orange() { //orange crayon
  fill(255,165,2);
  rect(crayonPos + 100,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+100,rectT+20,blackW,blackH);
}

function Yellow() {
  fill(255,252,17);
  rect(crayonPos + 200,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+200,rectT+20,blackW,blackH);
}

function Green() {
  fill(48,201,63);
  rect(crayonPos + 300,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+300,rectT+20,blackW,blackH);
}

function Blue() {
  fill(45,76,255);
  rect(crayonPos + 400,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+400,rectT+20,blackW,blackH);
}

function Purple() {
  fill(132,21,255);
  rect(crayonPos + 500,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+500,rectT+20,blackW,blackH);
}

I got the idea from looking at a crayon box as I was finishing the Autolab assignments and had an idea about “selecting” crayons from a crayon box. It was a little difficult to try and alter the parameter using the mouseX function so that each individual crayon will go up to mouseY height. I had wanted to use an array but decided to work with using just if statements using the “width” of crayons.
I wanted to experiment with other options with color, which using lerpColor() to combine the two rgb hues and controlling that with the mouseY.

This is the rough draft of the process. I illustrated how many crayons and listed the various r,g,b values and how where the mouse would be to trigger an event (that is, the height of the crayon).

Interactive Drawing

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-03

var mouseX
var mouseY
// Allows the location of the mouse to be a variable

var squareSide = 50
// Creates a variable to control the size of the square

function setup() {
    createCanvas(640, 480);
    // Creates a blank canvas

}

function draw() {
    background(125);
    // Creates a blue background

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(0, height / 2, 30, height);
    // Creates a vertical rectangle to the far left

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the left

    fill(mouseX / 2.5 - mouseY / 1.9, mouseX / 2.5, mouseY / 1.9);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, height);
    // Creates a vertical rectangle that splits the canvas

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the right

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(width, height / 2, 30, height);
    // Creates a vertical rectangle to the far right

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 0, width, 30);
    // Creates a horizontal rectangle at the top

    fill(mouseX / 2.5 - mouseY / 1.9, mouseY / 1.9, mouseX / 2.5);
    rectMode(CENTER);
    rect(width / 2, height / 2, width, 30);
    // Creates a horizontal rectangle that splits the canvas

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 480, width, 30);
    // Creates a horizontal rectangle at the bottom

    fill(125);
    rectMode(CENTER);
    rect(0, 0, 30, 30);
    // Creates a gray square in the upper left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 4, 0, 30, 30);
    // Creates a gray square in the left quarter  top

    fill(125);
    rectMode(CENTER);
    rect(width / 2, 0, 30, 30);
    // Creates a gray square in the middle top

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, 0, 30, 30);
    // Creates a gray square in the quarter right top

    fill(125);
    rectMode(CENTER);
    rect(width, 0, 30, 30);
    // Creates a gray square in the upper right corner

    fill(125);
    rectMode(CENTER);
    rect(0, height / 2, 30, 30);
    // Creates a gray square in the far left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, 30);
    // Creates a gray square in the middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter right middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height / 2, 30, 30);
    // Creates a gray square in the far right middle

    fill(125);
    rectMode(CENTER);
    rect(0, height, 30, 30);
    // Creates a gray square in the quarter far left bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height, 30, 30);
    // Creates a gray square in the lower left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height, 30, 30);
    // Creates a gray square in the middle bottom of the canvas

    fill(125);
    rectMode(CENTER);

    rect(3 * width / 4, height, 30, 30);
    // Creates a gray square in the quarter right bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height, 30, 30);
    // Creates a gray square in the upper right corner

    fill(0, 0, 255);
    ellipse(width / 4, height / 2, mouseX / 5, mouseX / 5);

    fill(255, 0, 0);
    ellipse(3 * width / 4, height / 2, width / 5 - mouseX / 5, width / 5 - mouseX / 5);

    fill(255);
    rectMode(CENTER);
    rect(mouseX, height - mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseX and opposes mouseY

    fill(255);
    rectMode(CENTER);
    rect(width - mouseX, mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseY and opposes mouseX

    fill(0);
    rectMode(CENTER);
    rect(width - mouseX, height - mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that opposes location of mouse

    fill(0);
    rectMode(CENTER);
    rect(mouseX, mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that follows the mouse
}

This project was fairly difficult for me. Apart from struggling with how to make it interactive, it was very hard for me to come up with something to create. I ended up making a transforming light show.

sketch

// the height of the moon&lines stay constant.
//the lines and day and night should change colors.
var start = 20;
var angle = 0;
var y = 100;
var night = (0, 0, 0);
var r = 25; // colors for the background.
var g = 25;
var b = 112;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(r,g,b);
    noStroke();
    //largest ring
    fill(255);
    ellipse(pmouseX, y, 700, 700);
    fill(night);
    ellipse(pmouseX, y, 698, 697);
    //pink ring
    fill("pink");
    ellipse(pmouseX, y, 310, 310);
    fill(night);
    ellipse(pmouseX, y, 303, 303);
    //smaller white ring
    fill(255);
    ellipse(pmouseX, y, 300, 300);
    fill(night);
    ellipse(pmouseX, y, 299, 299);
    //blue ring
    fill("skyblue");
    ellipse(pmouseX, y, 150, 150);
    fill(night);
    ellipse(pmouseX, y, 149, 149);
    //moon
    fill(255,250,205);
    ellipse(pmouseX, y, 50, 50);
    fill(night);
    arc(pmouseX+30, y-10, 50,50,0,PI+QUARTER_PI, PIE);
    //mountains at night. some change colors randomly.
    fill(pmouseX, pmouseY, 255);
    triangle(120, 300, 0, 480, 240, 480);
    fill(pmouseX, pmouseY, 210);
    triangle(520, 480, 620, 205, 700, 500);
    fill("blue");
    triangle(400, 480, 520, 210, 640, 480);
    fill("skyblue");
    triangle(520, 210, 520, 480, 640, 480);
    fill("white");
    triangle(140, 480, 250, 225, 500, 480);
    fill("lavender");
    triangle(250, 225, 250, 480, 500, 480);
    //bug in left
    push();
    translate(300,250);
    rotate(radians(angle+90));
    fill("yellow")
    ellipse(-start, start, 3, 3);
    pop();
    angle = angle + 1;
    start = start + .05;
    //bug in the middle
    push();
    translate(100,100);
    rotate(radians(angle));
    fill("white")
    ellipse(start, -start, 5, 5);
    pop();
    angle = angle + 1;
    start = start + .05;
    //bug on the right
    push();
    translate(500,80);
    rotate(radians(angle));
    fill("yellow")
    ellipse(start, start, 5, 5);
    pop();
    angle = angle + 0.2;
    start = start + .0003;
    //bugs with changing colors with mouse movement.
    push();
    translate(320,200);
    rotate(radians(angle));
    fill(pmouseX, pmouseY, 213);
    ellipse(-start, start, 5, 5);
    pop();
    angle = angle + 0.2;
    start = start + .001;

    push();
    translate(600,76);
    rotate(radians(angle));
    fill(pmouseX, pmouseY, 143);
    ellipse(start, -start, 5, 5);
    pop();
    angle = angle + 0.2;
    start = start + .00001;
    // as mouse moves to the right, night changes to day.
    if (pmouseX >= night+320) {
     night = night + 5;
    }
    if (pmouseX < night+320) {
     night = night - 2;
    }
    //background changes color along with the movement of the moon.
    if (pmouseX >= 320) {
     r = 230;
    }
    if (pmouseX >= 320) {
     g = 230;
    }
    if (pmouseX >= 320) {
     b= 250;
   }
    if (pmouseX < 320) {
     r = 25;
   }
   if (pmouseX < 320) {
    g = 25;
   }
   if (pmouseX < 320) {
    b = 112;
  }

}

I used color transitions and the spiral rotation that we learned this week to create the image. The moon is created with an arc and ellipse.

At first I really wanted to make something symmetrical but that just wasn’t working for me. So I decided to make a scribble star. It was a challenge working with the curves. I find myself constantly comparing the capabilities of p5 with Photoshop, which just makes me miss Photoshop. I did my best to hint at the qualities of stars while constrained to childlike scribbles.

sketch

// atraylor@andrew.cmu.edu
// Project 03 section B 


function setup() {
    createCanvas(480, 640);

}

function draw() {

    var color1 = color(255, 249, 0); //first color for background
    var color2 = color(101, 25, 204); // second color
    var num = map(mouseX, 0, width, 0, .80); // making a number based on mouse
    var backColor = lerpColor(color1, color2, num); // lerp between color 1 and 2

    background(backColor); // color from above

    // first squiggle star
    var bend = map(mouseX, 0, width, -5, 5); //setting the mouseX output to a new scale from -5 to 5
    curveTightness(bend); // a value from -5 to 5 determines curve for vertex points
    noFill();
    stroke(255, 249, 0);
    beginShape();
    curveVertex(204,89);
    curveVertex(102, 515);
    curveVertex(462, 251);
    curveVertex(102, 515);
    curveVertex(204, 89);
    curveVertex(378, 515);
    curveVertex(18, 251);
    curveVertex(462, 251);
    curveVertex(102, 515);

    endShape();

    //second star
    push();
    var sScale = map(mouseX, 0, width, 0, -60);
    var bend2 = map(mouseX, 0, width, 5, -5); //setting the mouseX output to a new scale from -5 to 5
    curveTightness(bend2); // a value from -5 to 5 determines curve for vertex points
    noFill();
    stroke(255, 249, 0);
    beginShape();
    curveVertex(204,89 - sScale); //transforming points based on sScale variable
    curveVertex(102 - sScale, 515 + sScale);
    curveVertex(462 + sScale, 251);
    curveVertex(102 - sScale, 515 + sScale);
    curveVertex(204, 89 - sScale);
    curveVertex(378 + sScale, 515 + sScale);
    curveVertex(18 - sScale, 251);
    curveVertex(462 + sScale, 251);
    curveVertex(102 - sScale, 515 + sScale);
    endShape();
    pop();

    // first square
    push();
    var rot = map(mouseY, 0, height, 45, 360); // rotation based on mouseY
    var recScale = map(mouseX, 0, width, 1, .75); // scale from 1 to .75 based on mouseX
    stroke(255, 249, 0);
    rectMode(CENTER);
    translate(240, 320);
    scale(recScale);
    rotate(radians(rot));
    rect(0,0,400,400);
    pop();
    //second square
    push();
    var rot2 = map(mouseY, 0, height, -45, -360);
    stroke(255, 249, 0);
    rectMode(CENTER);
    translate(240, 320);
    scale(recScale);
    rotate(radians(rot2));
    rect(0,0,400,400);
    pop();
    // ellipse
    push();
    var cScale = map(mouseX, 0, width, 1, .75);// scale based on mouseX
    stroke(255, 249, 0);
    fill(255, 249, 0, 40);
    translate(240, 320);
    scale(cScale);
    ellipse(0, 0, 410, 410);
    pop();



}