Cycling through Images with an Array


#1

Okay. I watched the Pet Store Card video about 100000 times and after some modifications I have come up with the following code:

==================================

//store the factCard textures in an array
let facts = [symbol.controllers.factCard.elements.Fact1,
symbol.controllers.factCard.elements.Fact2,
symbol.controllers.factCard.elements.Fact3,
symbol.controllers.factCard.elements.Fact4];

//variable used in the random calculation directly below and in the changeFact function on line 93
let fact = 3;

//calculate a random number from 0-5 corresponding with a texture state from the facts array
let randomfact = Math.floor((Math.random() * fact));

//activate a random fact each time the card is scanned
parent.on(“ready”, function () {
facts[randomfact].activate();
});

//change the fact’s skin texture when the user presses fact card
symbol.nodes.factoid.on(“pointerdown”, (e) => {
changeFact();
});

//change the fact’s texture when it’s tapped on, called from the pointerdown event handler function above
function changeFact() {
fact += 1;
if (fact >= facts.length) {
fact = 0;

}

}

What is working in this script:

  1. A Random fact is being loaded each time the zapcode is scanned.

What is not working in this script:
The user ability to tap the card to change the fact.

I have set up a controller “factCard” and it has 4 states - Fact1 (default), Fact2, Fact3, Fact4

I am not sure why this isn’t working. I am sure it is my fault and I am missing something, but can’t figure out what.


#2

Anyone?

Does it have to do with how I am calling the pointerdown (symbol.nodes.factoid.on)?
I know the array is fine because it loads random images perfectly

Is it because it is a plane and not a symbol?

Please help. Thanks!
Dax


#3

OKay… so I am making progress. I moved the Code script under the Factoid plane and set the pointerdown to parent. No effect. This is why I am no programmer. LOL.

Any help is really appreciated.

Thanks
Dax

//store the factCard textures in an array
let facts = [symbol.controllers.factCard.elements.Fact1,
symbol.controllers.factCard.elements.Fact2,
symbol.controllers.factCard.elements.Fact3,
symbol.controllers.factCard.elements.Fact4,
symbol.controllers.factCard.elements.Fact5];

//variable used in the random calculation directly below and in the changeFact function on line 93
let fact = 5;

//change the fact’s texture when it’s tapped on, called from the pointerdown event handler function above
function changeFact() {
fact += 1;
if (fact >= facts.length) {
fact = 0;
}
}

//change the fact’s skin texture when the user presses fact card
parent.on(“pointerdown”, (e) => {

changeFact();
});


#4

FIGURED IT OUT!!! For anyone following this thread, I figured it out. I was missing the activate call:

let facts = [symbol.controllers.factCard.elements.Fact1,
symbol.controllers.factCard.elements.Fact2,
symbol.controllers.factCard.elements.Fact3,
symbol.controllers.factCard.elements.Fact4,
symbol.controllers.factCard.elements.Fact5];

//variable used in the random calculation directly below and in the changeFact function on line 93
let fact = 5;

//change the fact’s texture when it’s tapped on, called from the pointerdown event handler function above

function changeFact() {
fact += 1;
if (fact >= facts.length) {
fact = 0;
}
facts[fact].activate();
}

parent.on(“pointerdown”, (e) => {
// Runs when pointerdown occurs on the parent node
// The argument e contains useful info about this event:
// https://docs.zap.works/studio/scripting/reference/object/events/pointerdown/
//store the factCard textures in an array

changeFact();
});