# Project Question

Hi,

I’m trying to make it so that the the numbers 1-36 (from the array up top) are listed inside each ellipse (so ellipse 1 would have the number 1, the ellipse next to it would have the number 2, etc. all the way up to 36).

Thanks!!

``````var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36]

function setup() {
createCanvas(500, 500);
colorMode(HSB);
}

function draw() {
background(0);
strokeWeight(10);
stroke(255);

for (var x = 50; x < width; x = x + 80)
for (var y = 50; y < 500; y = y + 80) {
ellipse(x, y, 25, 25);
text(numbers[1], x, y);

}

}
``````
1 Like
``````text(numbers[1], x, y);
``````

must be

``````text(numbers[ i ], x, y);
``````

define int before the for loops and increase it inside the inner for loop

2 Likes

Sorry, a little lost. So after the var numbers section I would define int(36)? How do I increase it inside the inner for loop? Thanks again, really new to using this

I is a variable that denotes the index for the array

Yes, before setup () say int i;

Increasing:

i=i+1;

1 Like

Ok got this far … thought this would make it start at 0 and go up from there?

``````var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
var i = [0];

function setup() {
createCanvas(500, 500);
colorMode(HSB);
}

function draw() {
background(0);
strokeWeight(10);
stroke(255);

for (var x = 50; x < width; x = x + 80)
for (var y = 50; y < 500; y = y + 80) {
ellipse(x, y, 25, 25);
text(numbers[ i ], x, y);
i++;
}

``````

just var i=0;

we are showing the numbers in the array numbers and the first number there is 1…

Hence 1 when i is 0

1 Like

Ok, but why do the numbers disappear so fast?

Just enter 0, at start of array numbers

I mean in your case, i itself would be sufficient but it’s nice that you can use arrays

1 Like

When I run it, I can see the numbers for a split second but then they disappear

Right before the for loop say i=0;

Great, thank you! Got it

Now why are there spikes?!

``````var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];

function setup() {
createCanvas(500, 500);
colorMode(HSB);
}

function draw() {
background(0);
strokeWeight(10);
stroke(255);

i = 0;
for (var x = 50; x < width; x = x + 80)
for (var y = 50; y < 500; y = y + 80) {
ellipse(x, y, 25, 25);
text(numbers[ i ], x, y);
i++;

}

}
``````

Dunno; where are they?

Haha yeah that did it

1 Like

Ok the next thing i’m trying to do is add sound when I click on each ellipse. This is what it looks like so far, but i’m having trouble loading the soundfiles

``````var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var bagroll;
var ambiance;
var sding;
var click;
var pambiance;
var food;
var drink;
var toiletflush;
var landing;

}

function setup() {
createCanvas(500, 500);
colorMode(HSB);
createCanvas(720, 200);
background(255, 0, 0);
}

function draw() {
background(0);
strokeWeight(1);
stroke(255);

i = 0;
for (var x = 50; x < width; x = x + 180)
for (var y = 50; y < 500; y = y + 180) {
ellipse(x, y, 25, 25);
text(numbers[ i ], x, y);
i++;

}

}

``````

I dunno

Please look at examples and Reference

Instead of looping x and y, try just having an ‘i’ loop and multiplying it by 80 for the x and y values.
Using the modulo (%) operator will make it start it back at correct x, and using the floor() function
truncates the decimal so the rows only descend every 6 iterations. As far as the spikes go, I’d imagine
its something to do with the text rendering…

``````var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];

function setup() {
createCanvas(500, 500);
colorMode(HSB);
}

function draw() {
background(0);
strokeWeight(10);
stroke(255);

for (var i = 0; i < 36; i++){
scaledX = 50 + i%6 * 80;
scaledY = 50 + (floor(i/6) * 80);
ellipse(scaledX ,scaledY, 25, 25);
text(numbers[ i ], scaledX, scaledY);
}

}

}
``````
1 Like