13-02 Save Colors You Picked

let myImg, currentColor, myInput, myName; //declare new custom variables

let spacer = 150;

let savedColors = [];

​

​

function preload() {

  myImg = loadImage('./haars.jpg'); // add your own image! './yourimage.jpg'

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  displayMyImage(); // run the code inside the displayMyImage function

  drawMyBasicUI(); // run the code inside the drawMyBasicUI function

  makeButton(); // run the code inside the makeButton function

}

​

function draw() {

  myColorPicker(); // run the code inside the myColorPicker function

​

}

​

function mousePressed() {

  if(mouseY > 120){

    addColorToArray(); // run the code inside the addColorToArray function

  }

}

​

​

// ====== custom functions

​

function displayMyImage(){

  let imgRatio = myImg.height / myImg.width; //calculate the image aspect ratio

  myImg.resize(width, width * imgRatio); //resize the image to full screen size using the imgRatio

  image(myImg, 0, 0); //display the image with top left corner at 0,0 position  

}

​

function drawMyBasicUI(){

  noStroke();

  fill(255);

  rect(0, 0, width, 120); //draw white rectangle / bar at the top of the screen

  fill(170);

  textSize(18); 

  textAlign(RIGHT);

  text("Type your first name →", width-350, 47);  

  text("Type a one-word palette name e.g. Kandinsky →", width-350, 77); 

}

​

function makeButton(){

  myName = createInput();

  myName.position(width-320, 30);

  myInput = createInput();

  myInput.position(width-320, 60);

  let button = createButton('download file');

  button.position(width - 120, 50);

  button.mousePressed(downloadTheFile); // run downloadFile() function when the button is pressed.

}

​

​

function myColorPicker() {

  currentColor = (color(255));

  if(mouseY > 120){

    currentColor = myImg.get(mouseX, mouseY); // use p5js image get function to get the color values at the position of the ouse

  }

  fill(currentColor); //use the currentColor to set the fill color

  stroke(230);

  circle(60, 60, 80);

}

​

​

function addColorToArray() {

    let newColor = ['"#', hex(currentColor[0], 2), hex(currentColor[1], 2), hex(currentColor[2], 2), '"']; //hex is a p5js function that converts a number an rgb value e.g. (0,0,255) into a web friendly hex value e.g. #0000ff

    newColor = join(newColor, ''); //concatenates all the parts of an array

    let myColor = ['#', hex(currentColor[0], 2), hex(currentColor[1], 2), hex(currentColor[2], 2)]; //duplicating because p5js does not like the quotes here.

    myColor = join(myColor, ''); //concatenates all the parts of an array

    fill(myColor);

    rect(spacer, 50, 25); //add a little rectangle as signal of what is saved in the array

    spacer += 30; //Increases spacer by 30px every time you add a color so each new saved color can be displayed as a colored rectangle in a new horizontal position along the top

    savedColors.push(newColor);   //.push on arrays adds them  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

}

​

function downloadTheFile(){

  if(myInput.value() && myName.value()){

    let paletteName = myInput.value();

    let yourName = myName.value();

    let readMe = createWriter('readme-'+paletteName+'.txt');

    let theRead = `Readme file: just to let you know, the ${paletteName}.css file you just downloaded is not real css, its more like a javascript object notation (not important). What is important is that we can open it in photoshop, yay!  To do this, go to Photoshop > Window > Swatches to make sure you have the swatches window open. Click on the three lines on the top right of the swatches pane to see the menu for swatches. Click Import swatches to import the colors and select the ${paletteName}.css you just made. After opening in photoshop you can then click on the swatch or group of swatches and go to the same swatch palette menu and click "Export swatches for exchange" which will produce an Adobe ASE file which you can open in illustrator or figma via the import plugin`; 

    readMe.write(theRead);

    readMe.close();

    readMe.clear();

    let thisPalette= "{" + paletteName + ": [" + savedColors + "]}"; //puts together a javascript object from your palette

    let myWriter = createWriter(paletteName+'.css');  // creates a file with your paletteName as the file name

    myWriter.write(thisPalette); // write thisPalette info to the file

    myWriter.close(); // close the PrintWriter and save the file

    myWriter.clear();

    let albersPalette = '{ name: "' + yourName + '", paletteName: "' +  paletteName + '", cols: [' + savedColors + "]}"; 

    let sendText = createWriter(yourName + '-' + paletteName + '.txt');

    sendText.write(albersPalette);

    sendText.close();

    sendText.clear();

  }

  else{

    throw new Error('Louise’s error: Please enter your name and a name for this palette that describes its mood in the spaces provided😎');

  }

}