EN VI

Algorithm - How do you create a rise and fall wave of integers?

How do you do this with modulus?

   |     |     |     |    
  |||   |||   |||   |||  
 ||||| ||||| ||||| ||||| 
|||||||||||||||||||||||||

I would like to have the 4th slot be 1, the 8th be 2, 12th be 3, 16th be 4, 20th be 3, 24th be 2, 28th be 1, 32nd be 0, and repeat, etc.. I tried for a while with modulus and ended up trying to write a more manual function, but even then didn't get to it.

let i = 0
let heights = []
while (i < 1024) {
  if (i % 4) {
    heights.push(getHeight(i))
  } else {
    heights.push(0)
  }
  i++
}

function getHeight(i: number) {
  if (i % 16 === 0) {
    return 4
  }
  if (i % 12 === 0) {
    return 3
  }
  if (i % 8 === 0) {
    return 2
  }
  if (i % 4 === 0) {
    return 1
  }
}

It doesn't even begin to account for the rising and falling, instead my first attempt was more like an always rising escalator, getting to 16 at the highest, then starting over. But I'd like to make it rise and fall sort of like a wave if possible. Any ideas?

It should go down to zero (unlike my first diagram), so there are 8 slots every repeat.

Solution:

You've said:

It should go down to zero (unlike my first diagram), so there are 8 slots every repeat.

So that means the diagram should be:

    |       |       |       |    
   |||     |||     |||     |||  
  |||||   |||||   |||||   ||||| 
 ||||||| ||||||| ||||||| |||||||

...and so on.

If I'm reading that correctly, you can use i % 8 and then, if that value is greater than 4, take it as a negative offset from 8, like this:

function getHeight(i) {
    let h = i % 8;
    if (h > 4) {
        h = 8 - h;
    }
    return h;
}

for (let i = 0; i < 1024; ++i) {
    // ...
}

Live Example:

function getHeight(i) {
    let h = i % 8;
    if (h > 4) {
        h = 8 - h;
    }
    return h;
}

for (let i = 0; i < 32; ++i) {
    const h = getHeight(i);
    console.log(h);
    const bar = document.createElement("div");
    bar.className = "bar";
    const filler = document.createElement("div");
    filler.className = "filler";
    filler.style.height = `${h * 8}px`;
    bar.append(filler);
    document.body.append(bar);
}

.bar {
    display: inline-block;
    width: 4px;
    margin-left: 4px;
    height: 32px;
    position: relative;
}
.filler {
    position: absolute;
    bottom: 0;
    width: 2px;
    background-color: black;
}

If you don't want to start with an initial 0, just start i at 1 instead of at 0, and continue until < 1025 instead of < 1024:

function getHeight(i) {
    let h = i % 8;
    if (h > 4) {
        h = 8 - h;
    }
    return h;
}
for (let i = 1; i < 1025; ++i) {
//           ^−−−−−−−−−^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
    // ...
}

Live Example:

function getHeight(i) {
    let h = i % 8;
    if (h > 4) {
        h = 8 - h;
    }
    return h;
}

for (let i = 1; i < 33; ++i) {
    const h = getHeight(i);
    console.log(h);
    const bar = document.createElement("div");
    bar.className = "bar";
    const filler = document.createElement("div");
    filler.className = "filler";
    filler.style.height = `${h * 8}px`;
    bar.append(filler);
    document.body.append(bar);
}

.bar {
    display: inline-block;
    width: 4px;
    margin-left: 4px;
    height: 32px;
    position: relative;
}
.filler {
    position: absolute;
    bottom: 0;
    width: 2px;
    background-color: black;
}