# Displaying from an array
**URL:** https://discourse.processing.org/t/displaying-from-an-array/21251
**Category:** Beginners
**Created:** [May 24, 2020, 4:11pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251 "2020-05-24T16:11:53Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@katjs](https://discourse.processing.org/u/katjs)
#### Post date: [May 24, 2020, 4:11pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251/1 "2020-05-24T16:11:53Z")
Hello guys, so I’m trying to make this counter sort of thing where a function takes in an input and then it shows it back in reverse like a countdown. But I’m unable to get it working properly as the numbers tend to just get drawn on top of one another.
I’ve tried setting the background but it isn’t working. The approach I’ve taken is that my function populates the array and then sets the text. I’m not sure if its a problem with the nesting loop or something else
```auto
var range = [];
function setup() {
createCanvas(400, 400);
textAlign(CENTER, CENTER);
textSize(24);
sequence(10);
}
function draw() {
}
function sequence(number) {
for (i = number; i >= 0; i--) {
for(j = 0; j < range.length; j++) {
text(range[j], width / 2, height / 2);
}
range.push(i);
}
}
```
---
### Author:  [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [May 24, 2020, 5:46pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251/2 "2020-05-24T17:46:57Z")
Your issue is that you are looping through a set amount of times and calling `text(...)` each iteration causing each `text()` call to draw on top of each other.
You can use the frameCount and modulo to get a close representation of a timer, though this is not an accurate account of time … but it may help to get you started. Essentially this is assuming that every 60 frames equals 1 second, in theory p5 runs 60 frames per second, but that is not always true.
```auto
const timer = {
start: 7,
current: 7,
canReset: false
};
function setup() {
createCanvas(400, 400);
textAlign(CENTER);
}
function draw() {
background(220);
textSize(100);
text(timer.current, width / 2, height / 2);
if (frameCount % 60 == 0 && timer.current > 0) timer.current--;
if (timer.current == 0) {
textSize(20);
text("click to restart", width / 2, height * 0.7);
timer.canReset = true;
}
}
function mouseClicked() {
if (timer.canReset) timer.current = timer.start;
timer.canReset = false;
}
```
I would suggest eventually looking into utilizing `millis()` to get a more accurate account of time.
---
### Author:  [@katjs](https://discourse.processing.org/u/katjs)
#### Post date: [May 24, 2020, 8:05pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251/3 "2020-05-24T20:05:08Z")
Hi, thank you for the response but I really wanna see it done using arrays if that’s possible… And I’m sorry if I didn’t mention this in the question but I’m not really looking at it as a timer but rather as a function that takes in a value, counts it down to 0 and that’s all!
I have managed to work around and get it to just go through the array and display the last entry of the array, so now I’ve to find a way to make the loop not run instantaneously?
```auto
var range = [];
var indexCounter;
function setup() {
createCanvas(400, 400);
textAlign(CENTER, CENTER);
textSize(24);
sequence(10);
}
function draw() {
}
function sequence(number) {
for (i = number; i >= 0; i--) {
range.push(i);
}
for (j = range.length; j >= 0; j--) {
indexCounter = range[j];
}
text(range[indexCounter], width / 2, height / 2);
}
```
---
### Author:  [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [May 24, 2020, 8:30pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251/4 "2020-05-24T20:30:34Z")
Not fully sure what you are trying to accomplish with the array, but you can create a function delay using `setTimeout()`
[https://www.w3schools.com/jsref/met\_win\_settimeout.asp](https://www.w3schools.com/jsref/met_win_settimeout.asp)
```auto
function setup() {
createCanvas(400, 400);
textAlign(CENTER);
textSize(42);
fill(33);
timer(5);
}
const timer = (startTime) => {
startTime++;
for (let i = 0; i < startTime; i++) {
setTimeout(i => {
background(220), text(--startTime, width * 0.5, height * 0.5)
}, 1000 * i);
}
}
```
---
### Author:  [@katjs](https://discourse.processing.org/u/katjs)
#### Post date: [May 24, 2020, 9:32pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251/5 "2020-05-24T21:32:48Z")
Oh wow, thank you and here I was just about to hit the bed all defeated…
So, I was just sticking to using arrays cause it’s like this learning thing where I must absolutely work within the constraints given, or it’s just plain stupidity sorry!
Although I’ve got the result, I’ve also managed to confuse myself a bit and I’m not entirely sure if it works exactly in the way I wanted, but along the way, I’ve also learned about intervals.
I’m sure it’d all clear up once I get more experience with all that intervals stuff I guess. Anyway, here’s the abomination I came up with 😁
```auto
var range = [];
function setup() {
createCanvas(400, 400);
textAlign(CENTER, CENTER);
textSize(24);
populateArray(10);
sequence();
}
function populateArray(limit) {
for (i = limit; i > 0; i--) {
range.push(i);
}
}
var sequence = function() {
for (var j = 20; j >= 0; j--) { // j = 20 is arbitrary, just wanted to knw if the loop was running in relation to the array and not something else!
setTimeout(j => {
background(204),
text(range.length--, 200, 200)
}, 1000 * j);
}
}
```
---
### Author:  [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [May 24, 2020, 9:57pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251/6 "2020-05-24T21:57:18Z")
> [@katjs](#):
>
> ```auto
> j = 20 is arbitrary, just wanted to knw if the loop was running in relation to the array and not something else!
>
> ```
j is being used to create the delay in each iteration, otherwise it will happen instantaneously.
also your `sequence()` expression will return a `RangeError` …
> **[RangeError - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError)**
>
> The RangeError object indicates an error when a value is not in the set or range of allowed values.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 25, 2020, 1:10am UTC](https://discourse.processing.org/t/displaying-from-an-array/21251/7 "2020-05-25T01:10:27Z")
> [@katjs](#):
>
> , I’ve also learned about intervals.
Here’s an alternative using a [`function*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) Generator instead of an array: 😉
> **[Generator - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)**
>
> The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.
> **[Countdown Generator - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/903712)**
It also sets **frameRate()** to 1 FPS in place of [**setTimeout()**](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout):
> **[reference | p5.js](https://p5js.org/reference/#/p5/frameRate)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 27, 2020, 4:52pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251/8 "2020-05-27T16:52:48Z")
Python Mode version using 3 types of generator: 🐍
1. **countdownYield()** -\> Function generator via `yield` keyword
2. **countdownComprehension()** -\> Function which returns a comprehension generator made by using **xrange()**.
3. **countdownIterRange()** -\> Function which returns an iterator generator made by passing **xrange()** to **iter()**.
https://trinket.io/embed/python/0d6647fcd7?toggleCode=true&runOption=run&start=result