CaLLING LISTS
original
This was the final project wherein we were asked to expand upon one idea we had, and pushing further with coding.
I had chosen the to go down the vein on interactive asset creation applying a small narrative to it (you're having someone enchant your equipment in a game of dungeons and dragons)
each button is bound to one string of text from an excel spreadsheet and then called at random using the modifier Index as a sort of call number.
a paragraph is also generated in the HTML of this file allowing people to copy and paste text that pops up, something not readily accessible through javascript.
the original version of this project had interactivity but its buttons were not as responsive and the items they generated were incoherent.
where the original code succeeded was its ability to modify images and text through button presses, however, it wasn't clear why it did so so the person using it. so while it was fun to code it was not ideal for narrative.
and a tiny shortcoming of the latest version aside from its inability to be viewed in mobile is that all the text is lifted from a generic list however that should be easy to edit for anyone with the files.
here's the code that I used to generate this
let button = [];
var index = 0;
let deer = [];
//call my info
function preload() {
table = loadTable('assets/ENCH.csv', 'csv', 'header');
song = loadSound('assets/Chest2.mp3');
doodot = loadSound('assets/item.wav');
img = loadImage('assets/chest.png');
mute = loadImage('assets/volOFF.png');
unMute = loadImage('assets/volON.png');
}
function setup() {
song.play();
song.loop();
createCanvas(640, 360);
volCont = unMute;
col = color(0, 0, 0, 90);
bgcol = color(0, 0, 0);
lessE = table.getColumn('Lesser Enchantments');
medE = table.getColumn('Medium Enchantments');
magE = table.getColumn('Major Enchantments');
legE = table.getColumn('Legendary Enchantments');
// my parameters
textAlign(CENTER, CENTER);
buttX = ((width / 13) + 10);
buttY = ((height / 4) - 10);
background(img, 640, 360);
allButtons();
reC();
push();
textSize(35);
fill(103, 133, 100)
stroke(0, 0, 0);
strokeWeight(4);
text("RADULF'S UNRELIABLE FORGE", width/2, 25);
pop();
muteButton();
}
//
function draw() {
}
//make a list of for all version, perhaps make a forloop here so it's dependant on what is pressed as towhich called oject is called
function resetTbl1() {
rstQ();
caLess();
}
function resetTbl2() {
rstQ();
caMed();
}
function resetTbl3() {
rstQ();
caMag();
}
function resetTbl4() {
rstQ()
caLeg();
}
function rstQ() {
doodot.play();
clear();
push();
background(img, 640, 360);
pop();
push();
textSize(35);
fill(103, 133, 100)
stroke(0, 0, 0);
strokeWeight(4);
text("RADULF'S UNRELIABLE FORGE", width/2, 25);
pop();
}
function caLess() {
index = floor(random(lessE.length));
//console will log not only the item that is called, but also the number
//it was listed under in the doc
console.log(lessE[index]);
console.log(index);
if (index == lessE.length) {
index = 0;
};
message = (lessE[index]);
messageBeep();
}
function caMed() {
index = floor(random(medE.length));
console.log(medE[index]);
console.log(index);
if (index == medE.length) {
index = 0;
};
message = (medE[index]);
messageBeep();
}
function caMag() {
index = floor(random(magE.length));
console.log(magE[index]);
console.log(index);
if (index == magE.length) {
index = 0;
};
message = (magE[index]);
messageBeep();
}
function caLeg() {
index = floor(random(legE.length));
console.log(legE[index]);
console.log(index);
if (index == legE.length) {
index = 0;
};
message = (legE[index]);
messageBeep();
}
//buttons live here
function allButtons() {
button[0] = createButton('Lesser Forge (50GP)');
back();
button[0].size(100);
button[0].position(buttX, buttY);
button[0].mousePressed(resetTbl1);
button[1] = createButton('Medium Forge (100GP)');
back();
button[1].size(100);
//this structure binds all future buttons to button[0]s position
button[1].position(button[0].x, button[0].y + button[0].height);
button[1].mousePressed(resetTbl2);
button[2] = createButton('Major Forge (500GP)');
back();
button[2].size(100);
button[2].position(button[1].x, button[1].y + button[1].height);
button[2].mousePressed(resetTbl3);
button[3] = createButton('Legendary Forge (1000GP)');
back();
button[3].size(100);
button[3].position(button[2].x, button[2].y + button[2].height);
button[3].mousePressed(resetTbl4);
}
//calls the same button viarables
function back() {
//make it so the code with all buttons in string
for (let j = 0; j < button.length; j++) {
button[j].style('background-color', col);
button[j].style('color', 'white');
button[j].style("font-family", "Palatino");
button[j].style('border-radius', '15px');
button[j].style('padding', '5px');
}
}
//creates a paragraph in the html that allows the
//text to be hilighted
function messageBeep() {
jar = createDiv(message)
jar.position(buttX + 100, buttY);
jar.style('background-color', bgcol);
jar.size(width - 300, 140);
jar.style('color', 'white');
jar.style('padding', '30px');
jar.style('stroke-color', 'black');
jar.style('border-radius', '20px');
jar.style('font-size', '12px');
}
function reC(){
//hyperlink to my source for making items
lin = createA('https://www.dndbeyond.com/sources/dmg/between-adventures#CraftingaMagicItem',
'want to make your own items?');
lin.position(20,325);
lin.style('color', 'white');
lin.style('font-size','17px');
}
function muteButton(){
vol= createButton('Music');
vol.position(580,330);
vol.mousePressed(muteSound);
}
function muteSound(){
if (song.isPlaying()) {
song.stop();
} else {
song.play();
}
}
// ATTEMPT AT MAKING A TEST BACKGROUND TO SEE HOW
//THINGS RESIZE, DOES NOT BUT THAT'S BECAUSE IT'S
//DONE THROUGH PROSSESSING resizing is just a thing i can call
// function testsq(){
// push();
// fill('red');
// rect(0,0,1920,1080);
// pop();
// for (let i = 0; i < 800; i+=100){
// rect(i, 0, 20, height);
// }
// }