const angle = 360 / symmetry;

let downloadButton;

let saveFirebaseButton;

let clearButton;

let slider;

let xoff = 0;

​

let imgElements = [];

​

// firebase configuration

const firebaseConfig = {

  apiKey: 'AIzaSyAtzlISyxc_2W_qaYuth31WCXteB58bB5w',

  authDomain: 'codingtrain-snowflakes.firebaseapp.com',

  databaseURL: 'https://codingtrain-snowflakes.firebaseio.com',

  projectId: 'codingtrain-snowflakes',

  storageBucket: 'codingtrain-snowflakes.appspot.com',

  messagingSenderId: '827809813539',

  appId: '1:827809813539:web:43dcdeb3974d61ca780d96',

};

​

function setup() {

  createCanvas(500, 500);

  angleMode(DEGREES);

  background(127);

  downloadButton = createButton('save local');

  downloadButton.mousePressed(downloadSnowflake);

  saveFirebaseButton = createButton('save online');

  saveFirebaseButton.mousePressed(saveSnowflakeToFirebase);

  clearButton = createButton('clear');

  clearButton.mousePressed(clearCanvas);

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

  createElement('br');

​

  firebase.initializeApp(firebaseConfig);

  initFirebaseListner();

}

​

function downloadSnowflake() {

  save('snowflake.png');

}

​

function clearCanvas() {

  background(127);

}

​

function draw() {

  translate(width / 2, height / 2);

​

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

    const mx = mouseX - width / 2;

    const my = mouseY - height / 2;

    const pmx = pmouseX - width / 2;

    const pmy = pmouseY - height / 2;

​

    if (mouseIsPressed) {

      const hu = map(sin(xoff), -1, 1, 0, 255);

      xoff += 1;

      stroke(hu, 100);

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

        rotate(angle);

        // let d = dist(mx, my, pmx, pmy);

        // let sw = map(d, 0, 16, 16, 2);

        const sw = slider.value();

        strokeWeight(sw);

        line(mx, my, pmx, pmy);

        push();

        scale(1, -1);

        line(mx, my, pmx, pmy);

        pop();

      }

    }

  }

}

​

function initFirebaseListner() {

  firebase.database().ref('images').on('value', snap => {

    for (const ele of imgElements) {

      ele.remove();

    }

    imgElements = [];

​

    const data = snap.val() || {};

    const images = Object.values(data).reverse();

    for (const img of images) {

      const ele = createImg(img, 'snowflake');

      ele.style('width', '300px');

      imgElements.push(ele);

    }

  });

}

​

function saveSnowflakeToFirebase() {

  const canvasData = canvas.toDataURL();

  if (isCanvasBlank(canvas) || imgElements.map(e => e.elt.src).includes(canvasData)) return;

​

  firebase.database().ref('images').push(canvasData).then(() => {

    saveFirebaseButton.html('SAVED');

    setTimeout(() => {

      saveFirebaseButton.html('save online');

    }, 5 * 1000);

  })

      .catch(console.error);

}

​

function isCanvasBlank(canvas) {

  const blank = document.createElement('canvas');

​

  blank.width = canvas.width;

  blank.height = canvas.height;

  const ctx = blank.getContext('2d');

  ctx.fillStyle = 'rgb(127,127,127)';

  ctx.fillRect(0, 0, canvas.width, canvas.height);

  return canvas.toDataURL() == blank.toDataURL();

}

​