Hi,
I have a little problem with p5js. My code was working very well until I added a button to save my canvas. I don’t understand why when I add the button in the function setup, it is making my code to crash.
//QUELQUES VARIABLES
let nbColonnes = 26;
let nbLignes = 12;
let largeurCase;
let hauteurCase;
let colonneSurvol;
let ligneSurvol;
//VARIABLES POUR LES PACQUETS
let pacquet_1;
let pacquet_2;
let pacquet_3;
let pacquet_4;
let pacquet_5;
let pacquet_6;
let pacquet_7;
let pacquet_8;
let pacquet_9;
let pacquet_10;
//VARIABLE POUR LES BOITES
let boxes = [];
//VARIABLES POUR LES IMAGES
let img;
let cartes = [];
//CHARGEMENT IMAGES
function preload() {
//img= loadImage(‘data/carte1.png’)
for (let i = 0; i <= 9; i++) {
cartes[i] = loadImage(‘data/carte’ + i + ‘.png’);
}
}
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(20);
//pixelDensity(1);
largeurCase = width / nbColonnes;
hauteurCase = height / nbLignes;
//ON INITIALISE LES PACQUETS
pacquet_1 = new Pacquet('', 640,20, 0);
pacquet_2 = new Pacquet("", 710, 20, 1);
pacquet_3 = new Pacquet("", 780, 20, 2);
pacquet_4 = new Pacquet("", 850, 20, 3);
pacquet_5 = new Pacquet("", 920, 20, 4);
pacquet_6 = new Pacquet("", 990, 20, 5);
pacquet_7 = new Pacquet("", 1060, 20, 6);
pacquet_8 = new Pacquet("", 1130, 20, 7);
pacquet_9 = new Pacquet("", 1200, 20, 8);
pacquet_10 = new Pacquet("", 1270, 20, 9);
removeBtn = createButton("Save Canvas");
removeBtn.position(30, 200)
removeBtn.mousePressed(saveToFile);
}
function draw() {
background(255);
//DESSIN DE LA GRILLE
grille();
//ON CRÉÉ LES "PACQUETS"
pacquet_1.generate();
pacquet_2.generate();
pacquet_3.generate();
pacquet_4.generate();
pacquet_5.generate();
pacquet_6.generate();
pacquet_7.generate();
pacquet_8.generate();
pacquet_9.generate();
pacquet_10.generate();
//ON CRÉÉ LES BOITES
for (var i = 0; i < boxes.length; i++) {
boxes[i].generate();
}
//ON DETERMINE LES COORDONNÉES DE LA CASE AU DESSUS DE LAQUELLE LA SOURIS SE TROUVE
colonneSurvol = Math.ceil(mouseX / width * nbColonnes);
ligneSurvol = Math.ceil(mouseY / height * nbLignes);
//text(colonneSurvol + ", " + ligneSurvol, mouseX, mouseY); // DÉCOMMENTER CETTE LIGNE POUR VOIR LE NUM AU NIVEAU DU CURSEUR
}
//QUAND ON APPUIE SUR LA SOURIS
function mousePressed() {
//ON S’OCCUPE DES BOITES
for (let i = 0; i < boxes.length; i++) {
boxes[i].pressed();
}
//ON S’OCCUPE DES PACQUETS
pacquet_1.pressed();
pacquet_2.pressed();
pacquet_3.pressed();
pacquet_4.pressed();
pacquet_5.pressed();
pacquet_6.pressed();
pacquet_7.pressed();
pacquet_8.pressed();
pacquet_9.pressed();
pacquet_10.pressed();
}
function mouseReleased() {
// FIN DU DRAG
for (let i = 0; i < boxes.length; i++) {
boxes[i].released();
}
}
//DESSIN DE LA GRILLE
function grille() {
for (var x = 0; x < width; x += width / nbColonnes) {
for (var y = 0; y < height; y += height / nbLignes) {
//stroke(0);
//strokeWeight(0.1);
//line(x, 0, x, height);
//line(0, y, width, y);
}
}
}
function saveToFile() {
// Save the current canvas to file as png
saveCanvas(‘mycanvas’, ‘png’)
}Preformatted text
You could go through the code base and look for any lingering references to that variable/function name.
But actually, that’s not a bad idea. Focusing on the error messages, that is, resolving them one at a time.
But at least it’s good knowing you’re out there living the dream,