let url =

  "https://docs.google.com/spreadsheets/d/e/2PACX-1vQyTvwCE_BGP9YWOpkzLvx-S4dz8THGlFSbN936iGJyhUX7Oni1xuVdAP9n48CJhAp59QnO6xK_edp-/pubhtml";

let table;

// Global array to hold all flor objects

let flores;

​

// Store mouse press position so that a flor can be created there

let mousePressX = 0;

let mousePressY = 0;

​

// Remember whether flor is currently being created

let creatingFlor = false;

​

// Put any asynchronous data loading in preload to complete before "setup" is run

function preload() {

  fondo = loadImage("/assets/desierto.png");

  // data = loadTable(url, 'csv', 'header')

  table = loadTable("/assets/flor.csv", "header", loadData);

  //table = loadTable(url, 'header', loadData);

}

​

// Convert saved Flor data into Flor Objects

function loadData(table) {

  flores = [];

  let tableRows = table.getRows();

  for (let row of tableRows) {

    // Get position, diameter, name,

    let x = row.getNum("x");

    let y = row.getNum("y");

    let radius = row.getNum("radius");

    let name = row.getString("name");

​

    // Put object in array

    flores.push(new Flores(x, y, radius, name));

  }

}

​

function setup() {

  let p5Canvas = createCanvas(640, 360);

  // createCanvas(1000, 500);

  image(fondo, 0, 0, width, height, 0, 0, fondo.width, fondo.height, COVER);

  //background(image, [fondo])

​

  // When canvas is clicked, call saveMousePress()

  p5Canvas.mousePressed(saveMousePress);

​

  //ellipseMode(RADIUS); // aquí es donde creo que hay que poner flores emoji

  text("🌸", RADIUS); //flower

  textSize(20);

​

  // Add download button and call downloadFlorData() when pressed

  let downloadButton = createButton("Descargar desierto florido");

  downloadButton.mousePressed(downloadFlorFile);

​

  // Add load button to load downloaded data file

  let loadButton = createFileInput(loadFlorFile);

​

  // Only accept files with .csv extension

  loadButton.attribute("Aceptar", ".csv");

​

  describe(

    "When the cursor clicks on the canvas, drags, and releases, a black outline circle representing a flor appears on the white background. A prompt asks to name the flor, and this name appears under the circle when the cursor hovers over it."

  );

}

​

function draw() {

  //background(255);

​

  // Display all flores

  for (let flor of flores) {

    flores.display();

  }

​

  // Display flor in progress

  if (creatingFlores === true) {

    let radius = dist(mousePressX, mousePressY, mouseX, mouseY);

    noFill();

    stroke(0);

    strokeWeight(4);

    circle(mousePressX, mousePressY, radius);

  }

​

  // Label directions at bottom

  textAlign(LEFT, BOTTOM);

  fill(0);

  noStroke();

  text("Haz click que florezca una flor", 10, height - 10);

}

​

// Save current mouse position to use as next flor position

function saveMousePress() {

  mousePressX = mouseX;

  mousePressY = mouseY;

  creatingFlor = true;

​

  // Add a flor if in the process of creating one

function mouseReleased() {

  if (creatingFlor === true) {

    addFlor();

    creatingFlor = false;

    }

​

// Create a new Flor

function addFlor() {

  // Create a new row

  let row = table.addRow();

​

  // Add radius and label to flor

  let radius = dist(mousePressX, mousePressY, mouseX, mouseY);

  let name = prompt("Nombra esta flor");

​

  // Set the values of that row

  row.setNum("x", mousePressX);

  row.setNum("y", mousePressY);

  row.setNum("radius", radius);

  row.setString("name", name);

​

  flores.push(new Flor(mousePressX, mousePressY, radius, name));

    }

​

//Load flor data from CSV file

function loadFlorFile(file) {

 loadTable(file.data, "csv", "header", loadData);

   }

​

// Download flor data as CSV file

function downloadFlorFile() {

   saveTable(table, "flor.csv");

   }

​

// Flor class //tal vez aquí se pone el emoji

  class Flor {

    constructor(x, y, radius, name) {

      this.x = x;

      this.y = y;

      this.radius = radius;

      this.name = name;

      }

​

// Check if mouse is over the flor

    mouseOver() {

      let mouseDistance = dist(mouseX, mouseY, this.x, this.y);

      return mouseDistance < this.radius;

      }

​

// Display the flor

    display() {

      stroke(0);

      noFill();

      strokeWeight(4);

      circle(this.x, this.y, this.radius);

      if (this.mouseOver() === true) {

      fill(0);

      noStroke();

      textAlign(CENTER);

      text(this.name, this.x, this.y + this.radius + 30);

        }

      }

    }

  }

}

​