Shaper

// Week 9 - Assignment 9

// Create a user interface for your canvas sketch using the DOM library.

// The interface should control the following parameters in your sketch: size, color, animationSpeed, isAnimated.

​

​

​

// Setting array variables for the objects.

let lines = [];

let labels = [];

let buttons = [];

​

// Setting speed variable.

let speed;

​

// Setting slider variables.

let strokeSize;

let strokeColor;

let animationSpeed;

​

​

function setup() {

  createCanvas(1112, 834);

  colorMode(HSB, 360, 100, 100);

  angleMode(DEGREES);

  frameRate(60);

​

  // Creating slider to control line size.

  let labelSize = new Label('h4', 50, 0);

  labelSize.display('Size');

  strokeSize = createSlider(1, 10, 2, 1);

  strokeSize.position(labelSize.x, labelSize.y + 50);

  // Creating slider to control line color.

  let labelColor = new Label('h4', 50, 70);

  labelColor.display('Color');

  strokeColor = createSlider(0, 360, 50, 1);

  strokeColor.position(labelColor.x, labelColor.y + 50);

​

  // Creating slider to control the animation speed.

  let labelSpeed = new Label('h4', 50, 140);

  labelSpeed.display('Speed');

  animationSpeed = createSlider(0, 10, 0, 0.5);

  animationSpeed.position(labelSpeed.x, labelSpeed.y + 50);

  // Creating a button to change the speed.

  // First you adjust the speed on the slider and then you press the button to set it.

  let buttonSpeed = new Button(50, 240);

  buttonSpeed.display('Change Speed');

  buttonSpeed.action(isAnimated);

  // Creating a button to reset the sketch.

  // If not used, the sketch resets automatically when the lines array length reaches 1500.

  let buttonReset = new Button(50, 310);

  buttonReset.display('Reset Sketch');

  buttonReset.action(resetSketch);

  // Creating a button to save a screenshot.

  let buttonSave = new Button(50, 380);

  buttonSave.display('Save Screenshot');

  buttonSave.action(saveScreen);

}

​

​

function draw() {

  backgroundColor = color(223, 96, 19);

  backgroundColor.setAlpha(0.7);

  background(backgroundColor);

  translate(width / 2, height / 2);

  // Rotating the sketch. The rotation speed is controlled by the "Speed" slider And the "Change Speed" button.

  rotate(frameCount * speed);

​

  // Calling the "Line" object.

  let sketch = new Sketch();

  // Using push to populate the "lines" array only when the mouse is pressed.

  if (mouseIsPressed) {

    lines.push(sketch);

  }

  for (let i = lines.length - 1; i >= 0; i--) {

    lines[i].display();

  }

​

  // Call function to reset the sketch when the lines array length reaches 1500.

  if (lines.length > 1500) {

    resetSketch();

  }

}

​

​

// Function to reset the sketch.

function resetSketch() {

  lines.length = 0;

  speed = animationSpeed.value(0);

  strokeSize.value(2);

  strokeColor.value(50);

}

​

​

// Function to set the animation speed.

function isAnimated() {

  speed = animationSpeed.value();

}

​

// Function to save a screenshot

function saveScreen(){

  save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");

}

​

​

// Creating the "Sketch" object using the current (mouseX, mouseY) and past (pmouseX, pmouseY) mouse position to draw on the canvas.

class Sketch {

  constructor() {

    this.mouseCurrentX = mouseX - width / 2;

    this.mouseCurrentY = mouseY - height / 2;

    this.mousePastX = pmouseX - width / 2;

    this.mousePastY = pmouseY - height / 2;

​

    this.angle = 60;

  }

​

  display() {

    // Stroke colour is controled by the "Color" slider.

    stroke(color(strokeColor.value(), 100, 95));

    // Stroke weight is controled by the "Size" slider.

    strokeWeight(strokeSize.value());

    for(let i = 0; i < 12; i++) {

      scale(-1, 1); // Scaling by -1 only on one axis to create the mirrored lines.

      rotate(this.angle * i);

      line(this.mouseCurrentX, this.mouseCurrentY, this.mousePastX, this.mousePastY);

    }  

  }

}

​

​

// Creating the "Label" object. Using arguments for the type of element, its (x, y) coordinates, as well as its text value.

class Label {

  constructor(tag, x, y) {

    this.element = tag;

​

    this.x = x;

    this.y = y;

    this.color = color(255, 0, 100);

    this.size = '0.9rem';

    this.font = 'Open Sans, sans-serif';

  }

  display(labelText) {

    this.element = createElement(this.element, labelText);

    this.element.position(this.x, this.y);

    this.element.style('color', this.color);

    this.element.style('font-size', this.size);

    this.element.style('font-family', this.font);

  }

}

​

​

// Creating the "Button" object. Using arguments for the (x, y) coordinates, its text value as well as its on-click action.

// The button is styled using css properties.

class Button {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.txtColor = color(31, 85, 19);

    this.bgColor = color(49, 99, 97);

    this.size = '0.8rem';

    this.weight = 'bold';

    this.font = 'Open Sans, sans-serif';

  }

  display(btnText) {

    this.button = createButton(btnText);

    this.button.position(this.x, this.y);

    this.button.style('color', this.txtColor);

    this.button.style('background-color', this.bgColor);

    this.button.style('font-size', this.size);

    this.button.style('font-weight', this.weight);

    this.button.style('font-family', this.font);

    this.button.style('text-transform', 'Uppercase');

    this.button.style('padding', '10px');

    this.button.style('border', 'none');

    this.button.style('cursor', 'pointer');

  }

  action(actionArg) {

    this.button.mousePressed(actionArg);

  }

}

​

​

​