Project Question

p5.js Coding Questions
1

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
2 
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
3

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

4

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;

1 Like
5

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

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

1 Like
7

Ok, but why do the numbers disappear so fast?

8

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
9

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

10

Right before the for loop say i=0;

11

Great, thank you! Got it

12

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

}
13

Try 1 instead of 10

Dunno; where are they?

14

Haha yeah that did it

1 Like
15

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

}
16

I dunno

Please look at examples and Reference

17

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