​

// -------------------------------------------------------------------------

// Default Time Stuff

​

(function() {

    let days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

​

    let months = ['January','February','March','April','May','June','July','August','September','October','November','December'];

​

    Date.prototype.getMonthName = function() {

        return months[ this.getMonth() ];

    };

    Date.prototype.getDayName = function() {

        return days[ this.getDay() ];

    };

})();

​

let now = new Date();

​

let dayNow = now.getDayName();

let monthNow = now.getMonthName();

let date = now.getDate(); // number between 1-31

let time = now.getHours() + ":" + now.getMinutes();

let hours = now.getHours();

let minutes = now.getMinutes();

​

function updateDate() {

  now = new Date();

  dayNow = now.getDayName();

  monthNow = now.getMonthName();

  date = now.getDate();

  time = now.getHours() + ":" + now.getMinutes();

  hours = now.getHours();

  minutes = now.getMinutes();

}

​

// -------------------------------------------------------------------------

​

// AM/PM Variables

​

let standardHour;

let standardMinutes = minutes;

let period = "AM";

​

function standardTime() {

  if (hours > 12) {

    standardHour = hours - 12;

    period = "PM";

  } else if (hours == 12) {

    standardHour = hours;

    period = "PM";

  } else {

    standardHour = hours;

    period = "AM";

  }

  if (minutes < 10) {

    standardMinutes = "0" + minutes;

  }

}

​

// -------------------------------------------------------------------------

// Data from Google Sheets (File > Share > Publish to Web) https://docs.google.com/spreadsheets/d/12FikVfphnNbFgXrBMxUTdYVcYNnB8zNzF7nbu1PueoE/edit#gid=0

​

let data; // Store CSV

let url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRuLmAAt-4AAXRbl7N87z0FlQaa-uIVwOTE99TJPmgeyMay9JWevVwVe8UO3IRAJN-Rx4_G6A7hyFLe/pub?gid=1413465569&single=true&output=csv" // URL from above 

​

// -------------------------------------------------------------------------

// p5 Code Run

​

function loadDataPromise() {

  let d = loadTable(url, 'csv', 'header'); // First row will be the way to grab data from header

  return new Promise(resolve => {

    setTimeout(() => {

      resolve(d)

    }, 2000);

  });

}

​

let images = [];

​

async function preload() {

  font = loadFont("Poppins-Medium.ttf");

  fontBold = loadFont("Poppins-Black.ttf");

  data = await loadDataPromise(); 

  console.log(data);

  // Just testing loading First Character:

  console.log("url: " + data.rows[0].obj["DRAWING URL"]); // prints the URL of the first object

  images.push(loadImage(data.rows[0].obj["DRAWING URL"]));

  console.log(images[0]);

  //for (let i = 0; i < data.getRowCount(); i++) {

    //if (data.rows[i].obj["DRAWING URL"].length > 3) {

      //images.push(loadImage(data.rows[i].obj["DRAWING URL"]))

    //}

  //}

}

​

function setup() {

  createCanvas(1200,1200);

  updateDate();

  textSize(20);

  textFont(font);

  //noLoop(); // Since we're just drawing it, don't have to loop it

}

​

function currentDay() {

  fill("purple");

    if (minutes < 10) {

    text("It's currently " + dayNow + ", " + monthNow + " " + date + " and the time is " + standardHour + ":" + standardMinutes + " " + period + ".", 10, 20);

  } else {

    text("It's currently " + dayNow + ", " + monthNow + " " + date + " and the time is " + standardHour + ":" + minutes + " " + period + ".", 10, 20);

  }

}

​

function draw() {

  background("#CF9FFF");

  updateDate();

  standardTime();

  currentDay();

  if (data) {

    showData();

    //image(images[0], 100, 100);

  } else {

    console.log("Loading...");

  }

  //showNay();

  nayText();

}

​

// -------------------------------------------------------------------------

// Show the specific Daily Prompt!

​

// Text Settings

function nayText() {

  fill("purple");

  text("Today's Birthdays: ", 10, 75);

}

​

// WIP, NEXT: Show the NAD drawing in addition to the text info (from the DRAWING URL)

// THEN: Figure out why there's a weird gap between the first and the second

// THEN: Add better spacing so it grabs the image's height and adds spacing after based on that

​

// This gets data from the Ultimate Kidday Google Sheet and puts all of it into arrays:

function showData() {

  let numRows = data.getRowCount(); // get the amount of rows in the CSV

  let name = data.getColumn('NAME'); // get the column titled NAME

  //console.log(name);

  let category = data.getColumn('CATEGORY');

  let desc = data.getColumn('GENERAL DESCRIPTOR');

  let eventure = data.getColumn('FIRST EVENTURE');

  let month = data.getColumn('BDAY MONTH');

  let day = data.getColumn('BDAY #');

  let imageurl = data.getColumn('DRAWING URL');

  console.log(images[0]);

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

    characters[i] = new Nays(name[i], category[i], desc[i], eventure[i], month[i], day[i], imageurl[i], images[i], 50, 120);

    //console.log(characters[0]) // Prints data of the first character

    characters[i].y += i * 0.6; // Currently the first one prints with a bigger gap between the second... not sure why

  }

  for (let i = 0; i < characters.length; i++) {

    //characters[i].y += i * 0.09;

    //characters[i].y += 30;

    //TEST ():

    if (i == 0) {

      characters[i].show();

    }

    // ACTUAL:

    /*if (characters[i].month == monthNow && characters[i].day == date) {

      characters[i].show();

    }*/

  }

​

}

​

​

// Character & Display Settings

let characters = [];

let xLocation = 50;

​

class Nays {

  constructor(name, category, description, eventure, month, day, imageurl, loadimage, x, y)

  {

    this.name = name;

    this.category = category;

    this.description = description;

    this.eventure = eventure;

    this.month = month;

    this.day = day;

    this.imageurl = imageurl; //name.replace(/[^a-zA-Z0-9 ]/g, '') + ".png";

    this.x = x;

    this.y = y;

    this.loadimage = loadimage;

  }

  show() {

    fill("black");

    textSize(25);

    text(this.name, xLocation, this.y); // 50, 150

    fill("purple");

    textSize(20);

    text("Category: " + this.category, xLocation, this.y + 25);

    text("Description: " + this.description, xLocation, this.y + 50);

    text("First Eventure: " + this.eventure, xLocation, this.y + 75);

    //text("Image: " + this.image, xLocation, this.y + 100); // Right now this just prints the text of the URL, want to actually print the image from the URL

    image(this.loadimage, xLocation, this.y + 100);

    //image(images[0], 100, 100);

    //image(this.image, 100, 100);

  }

}

​

​

// BRAINSTORMING: Could potentially refer to this project for adding images that get preloaded in if can't figure out how to do URLs (though would require importing 1000+ images...): https://editor.p5js.org/Eevee/sketches/cKNqinTrR

​

​

​

​

​

​

​

​

​

​

​

​

​

// ================================== OLD, DELETE:

​

​

  //image1 = loadImage("https://64.media.tumblr.com/65f5374d5e8fafc36f87dbd0e283808b/tumblr_nh0okgstRG1ty96afo1_1280.png"); // This is just one specific image, need to figure out how to grab all URLs from the CSV!

  //** WIP:

  //let image = data.getColumn('DRAWING URL');

  //for (let i = 0; i < characters.length; i++) {    

    //loadImage(characters[i].image);

    //images[i] = loadImage(image);

    //loadImage(characters[i].image);

      //images[i] = characters[i].image;

      //images[i] = loadImage(characters[i].image);

      //image(image[i], 10, 10);

      //console.log(images[116]);

      //console.log(characters[1].image); // prints the url

  //}

​

      // **WIPs, these don't work:

      //loadImage(characters[i].image);

      //images[i] = characters[i].image;

      //images[i] = loadImage(characters[i].image);

      //image(image[i], 10, 10);

      //console.log(images[116]);

      //console.log(characters[1].image); // prints the url

​

  // **WIPs:

  //console.log(characters[3].image);

  //console.log(characters[112].name);

  /*images[112] = loadImage('https://64.media.tumblr.com/65f5374d5e8fafc36f87dbd0e283808b/tumblr_nh0okgstRG1ty96afo1_1280.png')

  characters[112].image = images[112];*/

  //console.log(characters[112].image);

  //image(characters[112].image, 100, 100);

​

    // **WIP:

    //images[i] = loadImage(characters[i].image);

    //console.log(characters[i].image);