# Project Question

**URL:** <https://discourse.processing.org/t/project-question/9352>\
**Category:** Coding Questions\
**Created:** [March 16, 2019, 6:42pm UTC](https://discourse.processing.org/t/project-question/9352 "2019-03-16T18:42:53Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 6:42pm UTC](https://discourse.processing.org/t/project-question/9352/1 "2019-03-16T18:42:53Z")

</div>

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!!

```auto
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);
	
	}

}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2019, 7:25pm UTC](https://discourse.processing.org/t/project-question/9352/2 "2019-03-16T19:25:28Z")

</div>

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

```

must be

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

```

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

---

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 7:41pm UTC](https://discourse.processing.org/t/project-question/9352/3 "2019-03-16T19:41:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2019, 8:02pm UTC](https://discourse.processing.org/t/project-question/9352/4 "2019-03-16T20:02:18Z")

</div>

I is a variable that denotes the index for the array

See tutorial about arrays

Yes, before setup () say int i;

Increasing:

i=i+1;

---

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 8:12pm UTC](https://discourse.processing.org/t/project-question/9352/5 "2019-03-16T20:12:20Z")

</div>

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

```auto
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++;
	}
	

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2019, 8:14pm UTC](https://discourse.processing.org/t/project-question/9352/6 "2019-03-16T20:14:43Z")

</div>

> [@ixd](#):
>
> var i = [0];

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

Read the tutorial

---

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 8:19pm UTC](https://discourse.processing.org/t/project-question/9352/7 "2019-03-16T20:19:00Z")

</div>

Ok, but why do the numbers disappear so fast?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2019, 8:19pm UTC](https://discourse.processing.org/t/project-question/9352/8 "2019-03-16T20:19:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 8:20pm UTC](https://discourse.processing.org/t/project-question/9352/9 "2019-03-16T20:20:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2019, 8:21pm UTC](https://discourse.processing.org/t/project-question/9352/10 "2019-03-16T20:21:07Z")

</div>

Right before the for loop say i=0;

---

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 8:25pm UTC](https://discourse.processing.org/t/project-question/9352/11 "2019-03-16T20:25:37Z")

</div>

Great, thank you! Got it

---

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 8:26pm UTC](https://discourse.processing.org/t/project-question/9352/12 "2019-03-16T20:26:08Z")

</div>

Now why are there spikes?!

```auto
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++;
	
	}
	

}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2019, 8:27pm UTC](https://discourse.processing.org/t/project-question/9352/13 "2019-03-16T20:27:38Z")

</div>

> [@ixd](#):
>
> strokeWeight(10);

Try 1 instead of 10

Dunno; where are they?

---

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 8:37pm UTC](https://discourse.processing.org/t/project-question/9352/14 "2019-03-16T20:37:00Z")

</div>

Haha yeah that did it

---

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 16, 2019, 9:07pm UTC](https://discourse.processing.org/t/project-question/9352/15 "2019-03-16T21:07:39Z")

</div>

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

```auto
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 preload(){
	bagroll = loadSound('RollingSuitcase.mp3');
}

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++;
	
	}
	

}
	

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2019, 9:32pm UTC](https://discourse.processing.org/t/project-question/9352/16 "2019-03-16T21:32:45Z")

</div>

I dunno

Please look at examples and Reference

---

<div class="post-metadata">

**Author:** ![Naeloob](https://avatars.discourse-cdn.com/v4/letter/n/49beb7/32.png) [@Naeloob](https://discourse.processing.org/u/Naeloob)\
**Post date:** [March 17, 2019, 1:01am UTC](https://discourse.processing.org/t/project-question/9352/17 "2019-03-17T01:01:56Z")

</div>

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…

```auto
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);
	}
	
}
	
}

```