- See if it's possible to pull the card details from a Google Sheet (like the Daily Nay Prompt project does) <-- was trying this with the csvload.js, but it wasn't working... not sure if this will work for images in p5 (will probably swap to RPG Maker instead to work on final version anyways)

​

- Then look into generating a loop where it'll pull the data from the first name, auto-save it out, then move on to the next one (test this with just 2 names first so it's not flooding and breaking things).

*/

​

​

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

//import {characters} from "csvload.js";

​

// Card Details (potentially pull from a Google Sheet)

//function cardDetails() {

//let cardName = characters[0].name;

let cardName = "Centrino";

let lastName = "Barlow";

let type = "Water";

let world = "Compass World";

let gender = "Male ♂";

let birthday = "🍂 Fall";

let trait1 = "💼 Leader";

let trait2 = "🔫 Guns";

let trait3 = "💢 Angry";

//}

​

// Card Element Positions

//function cardElements() {

let cardWidth = 825;

let cardHeight = 1125;

let cardX = 0;

let cardY = 0;

let textFirstX = 190;

let textFirstY = 170;

let textLastX = (cardName.length * 32) + textFirstX; // *38

let textLastY = textFirstY;

let fontFirstSize = 45; //55

let fontLastSize = 36; //46

let typeX = 95;

let typeY = 114;

let worldX = 115;

let worldY = 920;

let genderX = 215;

let genderY = 920;

let birthdayX = 315;

let birthdayY = 920;

let trait1X = 415;

let trait1Y = 920;

let trait2X = 515;

let trait2Y = 920;

let trait3X = 615;

let trait3Y = 920;

//}

​

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

​

/*async function preload() {

  data = await loadDataPromise(); 

  console.log(data);

}*/

​

function preload() {

  //cardDetails()

  //cardVariables();

  //cardElements();

}

​

function setup() {

  /*cardDetails()

  cardVariables();

  cardElements();*/

  //cardImg = loadImage("images/" + cardName + ".png");

  cardImg = loadImage("images/" + "CardBorder" + ".png");

  komika = loadFont("fonts/KomikaHand_revised.ttf");

  komikaBold = loadFont("fonts/Komika_Hand_Bold.ttf");

  // Load the specific card elements

  characterImg = loadImage("characters/" + cardName + ".png");

  typeImg = loadImage("types/" + type + ".png");

  worldImg = loadImage("worlds/" + world + ".png");

  genderImg = loadImage("genders/" + gender + ".png");

  birthdayImg = loadImage("birthdays/" + birthday + ".png");

  trait1Img = loadImage("traits/" + trait1 + ".png");

  trait2Img = loadImage("traits/" + trait2 + ".png");

  trait3Img = loadImage("traits/" + trait3 + ".png");

}

​

function draw() {

  //background("white") // Could potentially add another show image of gradient color depending on the type ("bgs/" + type + ".png") <-- this should only be done if the character is NOT going to be added in Photoshop (otherwise should add that too)

  createCanvas(cardWidth, cardHeight);

  image(characterImg, cardX, cardY);

  cardColor();

  image(cardImg, cardX, cardY);

  tint('white');

  image(typeImg, typeX, typeY);

  image(worldImg, worldX, worldY);

  image(genderImg, genderX, genderY);

  image(birthdayImg, birthdayX, birthdayY);

  image(trait1Img, trait1X, trait1Y);

  image(trait2Img, trait2X, trait2Y);

  image(trait3Img, trait3X, trait3Y);

  textSetup();

}

​

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

​

// Tints the card the color of the type. Can probably make these colors more specific to ones picked in Photoshop.

function cardColor() {

  if (type == "Dark") {

    tint('black');

  } else if (type == "Earth") {

    tint('brown');

  } else if (type == "Fire") {

    tint('orange');

  } else if (type == "Heart") {

    tint('hotpink');

  } else if (type == "Ice") {

    tint('white');

  } else if (type == "Metal") {

    tint('yellow');

    } else if (type == "Mind") {

    tint('purple');

  } else if (type == "Water") {

    tint('blue');

  } else if (type == "Wind") {

    tint('green');

  }

}

​

// Draws the text to the screen based on their name; look into positioning based on name length (to center if possible)

function textSetup() {

  fill('white');

  textFont(komikaBold);

  textSize(fontFirstSize);

  text(cardName, textFirstX, textFirstY);

  textFont(komika);

  textSize(fontLastSize);

  text(lastName, textLastX, textLastY); //470, 166);

}

​

// Saves the canvas as a PNG file. Could look into mass saving in a loop to generate all of these when everything's done

function downloadCanvas() {

  saveCanvas(cardName, "png");

}

​