// video example https://p5js.org/examples/dom-video-capture.html

// https://p5js.org/examples/interaction-kaleidoscope.html

​

/* TODO before publishing

 * translate center of image to center of kaleidoscope while maintaining space filling nature of triangle

 * add something flashy

 */

​

let defaultSymmetry = 6;

​

let saveButton, clearButton, mouseButton, keyboardButton;

let slider, symmetrySlider, speedSlider;

let imgMask; // we'll use this to mask the image

let dim = 500;

let theta=0;

​

function getSymmetry() {

  return symmetrySlider.value();

}

​

function getAngle() {

  return 360 / getSymmetry();

}

​

function setup() {

  createCanvas(dim, dim);

  angleMode(DEGREES);

  //background(127);

  // Creating the save button for the file

  saveButton = createButton('save');

  saveButton.mousePressed(saveFile);

​

  // Creating the clear screen button

  clearButton = createButton('clear');

  clearButton.mousePressed(clearScreen);

​

  // Creating the button for Full Screen

  fullscreenButton = createButton('Full Screen');

  fullscreenButton.mousePressed(screenFull);

​

  // Setting up the slider for the thickness of the brush

  brushSizeSlider = createButton('Brush Size Slider');

  sizeSlider = createSlider(1, 32, 4, 0.1);

  // Slider for number of kaleidoscope cells

  symmetrySliderButton = createButton('Kaleidoscope Cells');

  symmetrySlider = createSlider(3, 24, defaultSymmetry, 1);

  // (min, max, [value], [step])

  // Rotation speed controller

  // todo logarithmic scale instead of linear

  speedLabel = createButton('Rotation speed');

  speedSlider = createSlider(0.2, 5, 5.0, 0.2);

  capture = createCapture(VIDEO);

  capture.size(710, 710);

}

​

// Save File Function

function saveFile() {

  save('design.jpg');

}

​

// Clear Screen function

function clearScreen() {

  background(127);

}

​

// Full Screen Function

function screenFull() {

  let fs = fullscreen();

  fullscreen(!fs);

}

​

function draw() {

  // make a triangle to mask the img with

  //background(255);

  angleMode(DEGREES);

  if (getSymmetry() > 4) {

    imgMask = createGraphics(dim, dim);

    imgMask.fill('rgba(0, 0, 0, 1)');

    console.log("angle", getAngle(), sin(getAngle()));

    imgMask.triangle(0,0, 480*sin(getAngle()),480, 0,480); // bottomleft

    //imgMask.triangle(0,0, 480,480*cos(getAngle()), 480,0) // topright complement

    capture.mask(imgMask);

  }

  // debugging

  //image(capture, 0, 0, 640, 480); return;

  translate(width / 2, height / 2);

  // let's rotate the board!

  theta += speedSlider.value();

  rotate(theta)

​

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

    rotate(getAngle());

    image(capture, 0, 0, 640, 480);

    let sw = sizeSlider.value();

    strokeWeight(sw);

    lineIfMousePressed();

    push();

    scale(1, -1);

    lineIfMousePressed();

    pop();

  }

​

}

function lineIfMousePressed() {

  if (!mouseIsPressed) { return; }

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    let mx = mouseX - width / 2;

    let my = mouseY - height / 2;

    let pmx = pmouseX - width / 2;

    let pmy = pmouseY - height / 2;

    line(mx, my, pmx, pmy);

  }

}