Project 4 – String Art

// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
//Project-04

//gradience variables
var yaxis = 1;
var xaxis = 2;
let c1, c2;

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

    //variables for gradient background colors
    c1 = color(240); //whitegray
    c2 = color(113, 178, 200); //light blue
}

function draw() {
  //gradient background 
  setGradient(0, 0, 400, 300, c1, c2, yaxis);
  setGradient(0, 0, 400, 700, c2, c1, xaxis);

  //full moon
  noStroke();
  fill(255,255,255,200);
  ellipse(330,80,85);

  //mountains (line shapes)
  for (var i = 0; i <= 330; i += 3) {
    stroke(255);
    strokeWeight(0.35);
    line(0, i, i, 300); //first left mountain
    line(50, i, i + 50, 330); //second left mountain
    line(100, i + 50, i + 100, 300); //third left mountain
    line(200, i + 80, i + 200, 330); //fourth left mountain
  }

  //random repetition of background snowflakes (ellipses) every time you refresh the page
  for (var e = 0; e <= 50; e += 1) {
    stroke(255);
    fill(255, 255, 255, 100);
    strokeWeight(0.5);
    ellipse(random(50, 400), random(0, 300), 5);
  }

  //front snowflakes (line shapes)
  stroke(255);
  strokeWeight(0.5);

  //random repetition of the front snowflakes every time you refresh the page
  for (xx = 0; xx <= 50; xx += 1) {
    push();
    translate(random(10,400), random(10,400));
    points = 20;
    pAngle = 360 / points;
    radius = width / 75;

    for (angle = 100; angle < 500; angle += pAngle) {
      x = cos(radians(angle)) * radius;
      y = sin(radians(angle)) * radius;
      line(radius, radius, x + radius, y + radius);
    }
    pop();
  }
  noLoop();
}

//gradient background
function setGradient(x, y, w, h, c1, c2, axis) {
  if (axis == yaxis) {
    //gradience from top to bottom
    for (let i = y; i <= y + h; i += 1) {
      let int = map(i, y, y + h, 0, 1);
      let c3 = lerpColor(c1, c2, int);
      stroke(c3);
      line(0, i, 400, i);
      //reference/inspiration for gradient background: https://p5js.org/examples/color-linear-gradient.html
    }
  } 
}

function mousePressed () {
  //snow icicles attack as you click mouse (line shapes)
  stroke(255);
  strokeWeight(0.2);
  for (xx = 0; xx <= 10; xx += 1) {
    push();
    translate(random(10, 400), random(10, 400));
    points = 20;
    pAngle = 360 / points;
    radius = width / 75;

    for (angle = 100; angle < 500; angle += pAngle) {
      x = cos(radians(angle)) * radius;
      y = sin(radians(angle)) * radius;
      line(radius + mouseX, radius, x + radius, y + radius);
    }
    pop();
  }
}