Develop Reference

Special path finding using js and p5?

I have been trying to create a river routing system with a grid to make everything simpler. What I need to do is find every route possible that follows the river for x cells. Right now I have followed tutorials to make path finding system that finds all of the rivers connecting it self to the starting point. Also my rivers are little clunks not lines.
My code right now checks all its neighbours and colours them yellow, then running the function again on the coloured cell. This is repeated until the full river piece is routed. What I want it to do is find all the neighbours of the starting cell in the fashion of a square. Then I want it to find all the neighbours of the neighbours that are rivers again in the fashion of a square.
Basically I want the routing to find all the river cells in perfect squares. So it creates a square around the starting cell to find river cells. Then it creates a square around that to find more squares and so on. Also the final path created must be connected. What I explained makes mathematical sense but it is hard to explain.
This does work. Also .bee is basically .river the tutorial I was following had bee as a variable so I went along with it. and there are 2 marks. 1 to make it red when u click on starting cell. And second to make the path found yellow.
Here is my code right now:
Cell.prototype.mark = function(x,y){
this.marked = true;
if (this.bee) {
this.floodFill();
}
}
var done = 0;
Cell.prototype.floodFill = function() {
for (var xoff = -1; xoff <= 1; xoff++) {
for (var yoff = -1; yoff <= 1; yoff++) {
var i = this.i + xoff;
var j = this.j + yoff;
if (i > -1 && i < cols && j > -1 && j < rows) {
var neighbour = grid[i][j];
if (neighbour.bee && !neighbour.marked2) {
neighbour.marked2 = true;
neighbour.floodFill();
}
}
}
}
done++
console.log("D"+done);
}

Referencing a previous index in a 2D generated array - Javascript

I am trying to build an application that generates a random map using square tiles. To do this my plan is to use a 2D array that randomly selects the first tile in a row then, when randomly selecting the second tile, it references the right edge value of the previous tile and filters the possible random tiles it can pick from down to an array of only those that match. This process repeats till the row is complete, then when starting a subsequent row the filter will apply to both the right edge of the previous tile and the bottom edge of the one above.
I have gotten to the point where I can generate an array filled with random tiles but I can't get the filtering process to work. I have tried using a .filter in the random selection function but when it tries to reference the previous index that index is undefined.
The tiles are an array of objects like this:
1 means a connected edge, 0 means no connection. Essentially the tiles just have to match 1's with 1's and 0's with 0's.
[
{
"top": 1,
"right": 0,
"bottom": 1,
"left": 0,
"img": "../public/images/1.png"
},
{
"top": 0,
"right": 1,
"bottom": 0,
"left": 1,
"img": "../public/images/2.png"
}
]
My current code looks like this:
// Setting the number of row and columns and creating the empty array
const rows = 5;
const columns = 5
const map = [];
// Populate the empty array with a 2D array of random tile objects.
function generateMap() {
for (let y = 0; y < rows; y++) {
map[y] = [];
for (let x = 0; x < columns; x++) {
map[y][x] = randomlyPopulateMap(x, y);
}
}
}
function randomlyPopulateMap(x, y) {
const randNum = Math.floor(Math.random() * tiles.length);
const randTile = tiles[randNum];
return randTile;
}
I've tried what feels like a dozen solutions but I'm still new to coding and I'm uncertain if I'm even taking the right approach to this problem. Any guidance is greatly appreciated.

I can imagine randomlyPopulateMap first filtering the tiles based on whether they match left-to-right with the tile to the left and top-to-bottom with the tile above. I'm using the condition that if there is no tile above to restrict then any tile will do. You can decide if the boundary itself imposes any additional restrictions.
function randomlyPopulateMap(x, y) {
const candidates = tiles.filter(tile =>
(x == 0 || tile.left == map[y][x-1].right) &&
(y == 0 || tile.top == map[y-1][x].bottom))
and then choose a random tile from among the remaining candidates.
const randNum = Math.floor(Math.random() * candidates.length);
const randTile = candidates[randNum];
return randTile;
}

Calculating bands for Graphic EQ

I'm trying to make a Graphic EQ using web audio and the goal is build a function that
calculates an array of fixed center frequency's using a band count (a.k.a number) as input.
In other words it generates an array for fixed center frequencies.
example:
function calcBands(bands) {
// Since there are different graphic EQ's they usually around 6 - 31 bands
// but professionally it's normally 31 bands
// band parameter needs to be a number between 6 and 31
//insert code here:
const freqs = new Array(bands);
return freqs;
}
function buildFilters(bands) {
let centers = calcBands(bands);
let filters = [];
for (let i = 0; i < bands; i++) {
let filter = context.createBiquadFilter();
filter.type = "peaking";
filter.frequency.value = centers[i];
filter.Q.value = Math.SQRT1_2;
if (i > 0) {
filters[i - 1].connect(filter);
}
filters.push(filter);
}
return filters;
}
The thing is I tried doing some research and I found out that there are ISO standards and other things, but I just can't do the maths of it.
All I can understand from this is that:
This is calculated using octave bands either 1 or 1/3, etc in base 2
Graphic EQ's usually have 6 to 31 bands
Middle C (a.k.a A4) equals to 440Hz
Nyquist Frequency is sampleRate / 2
Can anyone please help me?
Feel free to correct me if I'm wrong
references:
https://www.cross-spectrum.com/audio/articles/center_frequencies.html
https://sound.stackexchange.com/questions/14101/what-is-the-frequency-step-formula-for-10-and-31-band-eqs
http://www.tonmeister.ca/main/textbook/intro_to_sound_recordingch13.html

move object using css

I have an array of image objects:
var pics = ["pic1","pic2","pic3","pic4","pic5","pic6"]
I want to loop through and set the style.left value to 1 less than the current value. This loop iterates 100 times.
I got a great suggestion here to use css for this. I created a style called move:
margin-left: -1px;
This works great the first time through the loop:
for (i = 0; i < 100; i++) {
for (j = 0; j < 6; j++) {
var image = document.getElementById(pics[j]);
image.className = image.className + " move"
}
}
The problem is the images do not move after the first iteration though the loop. Any ideas what I can do?

The images do not move after the first iteration because you are applying the move class which sets the margin left to -1. Note it does not subtract 1 from their current left margin it sets it to -1.
So lets say it starts out with a left margin of 10 . When it goes through this loop I think you are expecting it to have a left margin of 9 to move it one pixel closer to the left side of the screen. Instead when it goes through this loop it will skip all the way -1 as the left margin because you are explicitly telling it to do that with your move class.
What you really want to do is use javascript to grab its current left margin , subtract 1 from that and then reset the left margin as the new, now less one, number.
At quick glance I think this tutorial could help you.

You can save off the margin variable and apply css with this:
var margin = -1;
for (i = 0; i < 100; i++) {
for (j = 0; j < 6; j++) {
var image = document.getElementById(pics[j]);
image.style.marginLeft = margin + "px";
margin--;
}
}

Calculate maximum available rows and columns to fill with N amount of items

By reviewing this and this, I've come up with a function, that's probably more complex than it should be, but, man, my math sux:
function tablize(elements)
{
var root = Math.floor(Math.sqrt(elements));
var factors = [];
for (var i = 1; i <= root; i++)
{
if (elements % i === 0)
{
factors.push([i, elements / i]);
}
}
var smallest = null;
for (var f = 0; f < factors.length; f++)
{
var factor = factors[f];
var current = Math.abs(factor[0] - factor[1]);
if (!smallest || factors[smallest] > factor)
{
smallest = f;
}
}
return factors[smallest];
}
While this does work, it provides results I'm not satisfied with.
For instance - 7, it's divided in 1x7, where I'd like it to be 3x3. That's the minimum, optimal, grid size needed to fill with 7 elements.
Also - 3, it's divided in 1x3, where I'd like it to be 2x2.
I need this for a live camera feed frame distribution on a monitor, but I'm totally lost. The only way I can think of is building an extra function to feed with previously generated number and divide again, but that seems wrong.
What is the optimal solution to solve this?

For squares:
function squareNeeded(num) {
return Math.ceil(Math.sqrt(num));
}
http://jsfiddle.net/aKNVq/
(I think you mean the smallest square of a whole number that is bigger than the given amount, because if you meant a rectangle, then your example for seven would be 2*4 instead of 3*3.)