Decreasing variable influence over each iteration - javascript

I have a game in which I'm creating bonus items based on a frequency variable.
I would like the generation frequency to become shorter over time. I know how to do that, simply subtract a small number from the frequency every second.
Let frequency = 100;
function every1sec {
frequency -= 0.1;
}
But as I'm not very mathematically talented, this is the part where I have trouble:
What is a good way to slow down the rate of the frequency becoming shorter over time? So if in the beginning the bonus generation frequency becomes 1 second shorter every minute, how can I make it only become 0.01 seconds shorter after ten minutes have passed. And the part I really have trouble with is this: how can I make the rate of decrease follow a smooth easing curve (instead of a linear decrease).
I don't know the right terminology to search an answer for this. I tried searching for something like "decrease algorithm influence over time" but that didn't get me any useful information.

On a simple but rudimentary way you can replace that 0.1 with a variable which you can also modify with time:
let frequency = 100;
let quantity = 0.1;
function every1sec() {
frequency -= quantity;
quantity -= 0.01;
}
But this will be a little bit junky and should require a lot of tweaking to obtain the desired behaviour.
If you want something smooth you can use JS and mathematical functions which will return points in a curve, like sine and cosine.
const MAX_FREQUENCY = 100;
let frequency = MAX_FREQUENCY;
let modifier = 1;
function every1sec() {
// This way, frequency will be in range [0, MAX_FREQUENCY]
modifier = Math.min(modifier - 0.1, 0);
frequency = MAX_FREQUENCY * Math.sin(modifier);
}
Even further, you can customize the whole method:
const STEPS = 30; // Number of times the function needs to be called to reach MIN_FREQUCNY
const MIN_FREQUENCY = 40;
const MAX_FREQUENCY = 100;
const FREQUENCY_RANGE = MAX_FREQUENCY - MIN_FREQUENCY; // 100 - 40 = 60
// ±Math.PI / 2 because Math.sin will be used
const MIN_MODIFIER = -Math.PI / 2;
const MAX_MODIFIER = Math.PI / 2;
const MODIFIER_RANGE = MAX_MODIFIER - MIN_MODIFIER;
const MODIFIER_STEP = MODIFIER_RANGE / STEPS;
let frequency = MAX_FREQUENCY;
let modifier = MAX_MODIFIER;
// This function can be modified to return different types of curves
// without modifying every1sec function
function curveFunction(modifierValue) {
// 1 + Math.sin(x) so it will be in range [0, 2] instead of [-1, 1]
return 1 + Math.sin(modifierValue);
}
function every1sec () {
modifier = Math.max(modifier - MODIFIER_STEP, MIN_MODIFIER);
// FREQUENCY_RANGE * 0.5 because it will be multiplied by a coefficient in range [0, 2]
frequency = MIN_FREQUENCY + FREQUENCY_RANGE * 0.5 * curveFunction(modifier) ;
}
// The only purpose of this loop is to provide the results of this example
for (let i = 0; i <= STEPS; i++) {
let li = document.createElement('li');
li.innerHTML = frequency;
document.getElementsByTagName('ul')[0].appendChild(li);
every1sec();
}
<ul></ul>
The last example will modify the frequency starting at a value of 100 and, every second during 30 seconds (steps), updating it to the correspondent value in the range [100, 40] following a sine curve.

To get an exponential decrease, multiply by a fraction.
let frequency = 100;
function every1sec() {
frequency *= 0.99;
}
let interval = setInterval(function() {
every1sec();
console.log(frequency.toFixed(1))
if (frequency < 50) {
clearInterval(interval);
}
}, 1000);

Related

Figuring out the value for PI

Let's say I have a function called bars()
bars () {
const bars = []
for (let i = 0; i < this.numberOfBars; i++) {
bars.push(Math.sqrt(this.numberOfBars * this.numberOfBars - i * i))
}
return bars
}
If I'm reducing the bars array to approximate PI, what should be on the right side of the arrow function?
PI = bars().reduce((a, b) =>
I tried adding the values and dividing by the number of bars, but I'm not getting anywhere near the approximation of Pi. I feel like there's a simple trick that I'm missing.
Your funcion seems to list lengths of "bars" in a quarter of a circle, so we have to add them all up (to have the area of the quarter of a circle), then multiply by 4 (because there is 4 quarter) and the divide by this.numberOfBars ^ 2 because area = π * r^2, but like we have to know the radius, it is better using a pure function :
// Your function rewritten as a pure one
const bars = numberOfBars => {
const bars = []
for (let i = 0; i < numberOfBars; i++) {
bars.push(Math.sqrt(numberOfBars * numberOfBars - i * i))
}
return bars
}
// Here we take 1000 bars as an example but in your case you replace it by this.numberOfBars
// Sum them all up, multiply by 4, divide by the square of the radius
const PI = bars(1000).reduce((g, c) => g + c) * 4 / Math.pow(1000, 2)
console.log(PI)
/** Approximates PI using geometry
* You get a better approximation using more bars and a smaller step size
*/
function approximatePI(numberOfBars, stepSize) {
const radius = numberOfBars * stepSize;
// Generate bars (areas of points on quarter circle)
let bars = [];
// You can think of i as some point along the x-axis
for (let i = 0; i < radius; i += stepSize) {
let height = Math.sqrt(radius*radius - i*i)
bars.push(height * stepSize);
}
// Add up all the areas of the bars
// (This is approximately the area of a quarter circle if stepSize is small enough)
const quarterArea = bars.reduce((a, b) => a + b);
// Calculate PI using area of circle formula
const PI = 4 * quarterArea / (radius*radius)
return PI;
}
console.log(`PI is approximately ${approximatePI(100_000, 0.001)}`);
There is no reason to push all terms to an array, then to reduce the array by addition. Just use an accumulator variable and add all terms to it.
Notice that the computation becomes less and less accurate the closer you get to the end of the radius. If you sum to half of the radius, you obtain r²(3√3+π)/24, from which you can draw π.
(Though in any case, this is one of the worst methods to evaluate π.)

Change interval of setTimeout such that a countdown from 100 slows down and should take exactly 10 seconds (in Svelte)

Based on this SO answer:
Changing the interval of SetInterval while it's running
I created this mini Svelte-Repl:
https://svelte.dev/repl/ae3987eff26446b49af4a85d029acd80?version=3.49.0
Which looks like this:
<script>
let display = 100
let interval = 1;
let myFunction = function() {
display--
interval *= 1.07;
setTimeout(myFunction, interval);
}
setTimeout(myFunction, interval);
</script>
{#if display > 0}
{display}
{:else}
End
{/if}
So the function myFunction calls itself while changing (increasing) the interval so that the count-down slows down. Now I would like to count down from 100 and slowly make the interval longer. I was thinking about the Math on how to achieve that, but couldn't work it out. I'd be grateful for any tips:)
Update:
I guess the question is kind of badly expressed. The idea was to:
Have a decreasing counter (display) from 100 to 0
The speed in which this counter decreases should become smaller, meaning that changing from e.g. 90 to 89 takes less time than from 10 to 9
The function in which it decreases does not matter. It can be exponentially, linearly or any other function. My aim was more about knowing how to solve this "generally"
The entire process, decreasing the variable display from 100 to 0, should take (can also be roughly) 10 seconds.
How would I do the Math?
Instead of changing the interval times, have a fast rate (frame rate, with requestAnimationRate), and calculate the counter's value based on the timestamp (i.e. the time that has elapsed since the start of the count down).
I would go for a formula that does not lead to exponentially increasing delays, but a less "drastic" one. For instance, you could use this formula to translate elapsed time to a counter value:
initialCount - r * sqrt(elapsed_time)
The coefficient r is then determined by the requirement that after 10 seconds this expression should be zero, so that brings us to:
r = initialCount / sqrt(total_duration)
Instead of a square root (i.e. exponent 0.5), you could use another exponent. The derivation of the value of r remains the same then (using that exponent).
Here is an implementation, where I have also displayed the elapsed time, so to verify it works as intended:
let [span, control] = document.querySelectorAll("span");
function countDown(counterStart, duration) {
const exp = 0.3; // Between 0 and 1: determines the gravity of the slow-down
let r = counterStart / duration ** exp;
let startTime;
function loop(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const counter = Math.ceil(counterStart - r * elapsed ** exp);
span.textContent = Math.max(0, counter);
control.textContent = Math.floor(elapsed / 100) / 10;
if (counter > 0) requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
}
countDown(100, 10000);
Count down: <span></span><br>
Elapsed time: <span></span>
If you wish to stick with exponentially increasing delays, then use a logarithm instead of a root:
initialCount - r * log(elapsed_time)
The code is very similar:
let [span, control] = document.querySelectorAll("span");
function countDown(counterStart, duration) {
let r = counterStart / Math.log(duration);
let startTime;
function loop(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const counter = Math.ceil(counterStart - r * Math.log(elapsed));
span.textContent = Math.max(0, counter);
control.textContent = Math.floor(elapsed / 100) / 10;
if (counter > 0) requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
}
countDown(100, 10000);
Count down: <span></span><br>
Elapsed time: <span></span>

How many times can I multiple a number by a decimal/fraction before it reaches close to zero

I'm trying to determine how far ahead to check for a ledge based on an objects speed. This way the object can stop accelerating and let friction stop it.
the problem
friction is 0.9 * horizontalSpeed each step.
when horizontalSpeed is less than 0.001 we set the horizontalSpeed to 0
how long it takes to reach 0.001 is horizontalSpeed = 1
how im currently solving
var horizontalSpeed = 1
var friction = 0.9
var closeEnoughToZero = 0.001
var distance = 0
while(horizontalSpeed > closeEnoughToZero) {
horizontalSpeed *= friction
distance += horizontalSpeed
}
console.log(distance) // 8.99
Possible already the solution I just feel it is a bit brute force and likely some type of math function that is handy for this!
Here's a "pure maths" solution
var horizontalSpeed = 1
var friction = 0.9
var closeEnoughToZero = 0.001
var distance = (horizontalSpeed * friction)/(1-friction)
console.log(distance)
Or, given a "close enough to zero", that can be done without a loop too
var horizontalSpeed = 1
var friction = 0.9
var closeEnoughToZero = 0.001
var distance = 0
// this is the power you need to raise "friction" to, to get closeEnoughToZero
let n = Math.ceil(Math.log(closeEnoughToZero)/Math.log(friction));
// now use the formula for Sum of the first n terms of a geometric series
let totalDistance = horizontalSpeed * friction * (1 - Math.pow(friction, n))/(1-friction);
console.log(totalDistance);
I use the Math.ceil of Math.log(closeEnoughToZero)/Math.log(friction) - which in your case is 66. If you added a loop counter to your code, you'd see the loop executes 66 times
And, as you can see the second code produces exactly the same output as your loop.

Animating a fractal tree inside a Javascript Canvas

After I saw a video from the Coding Train on youtube about fractal trees, I tried to build one myself. Which worked great and I played with some variables to get different results.
I would love to see the tree moving like it got hit by some wind. I tried different approaches like rotating the branches a little bit or some minor physics implementations but that failed miserably.
So my question is: What would be the best approach to render a fractal tree and give it some sort of "life" like little shakes from wind.
Is there some sort of good reference ?
Do I need physics ? -> If so where do I have to look ?
If not -> How could I fake such an effect?
I am glad about every help I can get.
Source for the idea: https://www.youtube.com/watch?v=0jjeOYMjmDU
Tree in the wind.
The following are some short points re bending a branch in the wind. As the whole solution is complex you will have to get what you can from the code.
The code includes a seeded random number functions. A random recursive tree renderer, a poor quality random wind generator, all drawn on canvas using an animation loop.
Wind
To apply wind you need to add a bending force to each branch that is proportional to the angle of the branch to the wind.
So if you have a branch in direction dir and a wind in the direct wDir the amount of scaling the bending force needs is
var x = Math.cos(dir); // get normalize vector for the branch
var y = Math.sin(dir);
var wx = Math.cos(wDir); // get normalize vector for the wind
var wy = Math.sin(wDir);
var forceScale = x * wy - y * wx;
The length of the branch also effects the amount of force to include that you lengthen the vector of the branch to be proportional to its length
var x = Math.cos(dir) * length; // get normalize vector for the branch
var y = Math.sin(dir) * length;
var wx = Math.cos(wDir); // get normalize vector for the wind
var wy = Math.sin(wDir);
var forceScale = x * wy - y * wx;
Using this method ensures that the branches do not bend into the wind.
There is also the thickness of the branch, this is a polynomial relationship related to the cross sectional area. This is unknown so is scaled to the max thickness of the tree (an approximation that assumes the tree base can not bend, but the end branches can bend a lot.)
Then the elastic force of the bent branch will have a force that moves the branch back to its normal position. This acts like a spring and is very much the same as the wind force. As the computational and memory load would start to overwhelm the CPU we can cheat and use the wind to also recoil with a little bit of springiness.
And the tree.
The tree needs to be random, yet being fractal you don't want to store each branch. So you will also need a seeded random generator that can be reset at the start of each rendering pass. The tree is rendered randomly with each iteration but because the random numbers start at the same seed each time you get the same tree.
The example
Draws random tree and wind in gusts. Wind is random so tree may not move right away.
Click tree image to reseed the random seed value for the tree.
I did not watch the video, but these things are quite standard so the recursive function should not be to far removed from what you may have. I did see the youTube cover image and it looked like the tree had no randomness. To remove randomness set the leng, ang, width min, max to be the same. eg angMin = angMax = 0.4; will remove random branch angles.
The wind strength will max out to cyclone strength (hurricane for those in the US) to see the max effect.
There are a zillion magic numbers the most important are as constants with comments.
const ctx = canvas.getContext("2d");
// click function to reseed random tree
canvas.addEventListener("click",()=> {
treeSeed = Math.random() * 10000 | 0;
treeGrow = 0.1; // regrow tree
});
/* Seeded random functions
randSeed(int) int is a seed value
randSI() random integer 0 or 1
randSI(max) random integer from 0 <= random < max
randSI(min, max) random integer from min <= random < max
randS() like Math.random
randS(max) random float 0 <= random < max
randS(min, max) random float min <= random < max
*/
const seededRandom = (() => {
var seed = 1;
return { max : 2576436549074795, reseed (s) { seed = s }, random () { return seed = ((8765432352450986 * seed) + 8507698654323524) % this.max }}
})();
const randSeed = (seed) => seededRandom.reseed(seed|0);
const randSI = (min = 2, max = min + (min = 0)) => (seededRandom.random() % (max - min)) + min;
const randS = (min = 1, max = min + (min = 0)) => (seededRandom.random() / seededRandom.max) * (max - min) + min;
/* TREE CONSTANTS all angles in radians and lengths/widths are in pixels */
const angMin = 0.01; // branching angle min and max
const angMax= 0.6;
const lengMin = 0.8; // length reduction per branch min and max
const lengMax = 0.9;
const widthMin = 0.6; // width reduction per branch min max
const widthMax = 0.8;
const trunkMin = 6; // trunk base width ,min and max
const trunkMax = 10;
const maxBranches = 200; // max number of branches
const windX = -1; // wind direction vector
const windY = 0;
const bendability = 8; // greater than 1. The bigger this number the more the thin branches will bend first
// the canvas height you are scaling up or down to a different sized canvas
const windStrength = 0.01 * bendability * ((200 ** 2) / (canvas.height ** 2)); // wind strength
// The wind is used to simulate branch spring back the following
// two number control that. Note that the sum on the two following should
// be below 1 or the function will oscillate out of control
const windBendRectSpeed = 0.01; // how fast the tree reacts to the wing
const windBranchSpring = 0.98; // the amount and speed of the branch spring back
const gustProbability = 1/100; // how often there is a gust of wind
// Values trying to have a gusty wind effect
var windCycle = 0;
var windCycleGust = 0;
var windCycleGustTime = 0;
var currentWind = 0;
var windFollow = 0;
var windActual = 0;
// The seed value for the tree
var treeSeed = Math.random() * 10000 | 0;
// Vars to build tree with
var branchCount = 0;
var maxTrunk = 0;
var treeGrow = 0.01; // this value should not be zero
// Starts a new tree
function drawTree(seed) {
branchCount = 0;
treeGrow += 0.02;
randSeed(seed);
maxTrunk = randSI(trunkMin, trunkMax);
drawBranch(canvas.width / 2, canvas.height, -Math.PI / 2, canvas.height / 5, maxTrunk);
}
// Recusive tree
function drawBranch(x, y, dir, leng, width) {
branchCount ++;
const treeGrowVal = (treeGrow > 1 ? 1 : treeGrow < 0.1 ? 0.1 : treeGrow) ** 2 ;
// get wind bending force and turn branch direction
const xx = Math.cos(dir) * leng * treeGrowVal;
const yy = Math.sin(dir) * leng * treeGrowVal;
const windSideWayForce = windX * yy - windY * xx;
// change direction by addition based on the wind and scale to
// (windStrength * windActual) the wind force
// ((1 - width / maxTrunk) ** bendability) the amount of bending due to branch thickness
// windSideWayForce the force depending on the branch angle to the wind
dir += (windStrength * windActual) * ((1 - width / maxTrunk) ** bendability) * windSideWayForce;
// draw the branch
ctx.lineWidth = width;
ctx.beginPath();
ctx.lineTo(x, y);
x += Math.cos(dir) * leng * treeGrowVal;
y += Math.sin(dir) * leng * treeGrowVal;
ctx.lineTo(x, y);
ctx.stroke();
// if not to thing, not to short and not to many
if (branchCount < maxBranches && leng > 5 && width > 1) {
// to stop recusive bias (due to branch count limit)
// random select direction of first recusive bend
const rDir = randSI() ? -1 : 1;
treeGrow -= 0.2;
drawBranch(
x,y,
dir + randS(angMin, angMax) * rDir,
leng * randS(lengMin, lengMax),
width * randS(widthMin, widthMax)
);
// bend next branch the other way
drawBranch(
x,y,
dir + randS(angMin, angMax) * -rDir,
leng * randS(lengMin, lengMax),
width * randS(widthMin, widthMax)
);
treeGrow += 0.2;
}
}
// Dont ask this is a quick try at wind gusts
// Wind needs a spacial component this sim does not include that.
function updateWind() {
if (Math.random() < gustProbability) {
windCycleGustTime = (Math.random() * 10 + 1) | 0;
}
if (windCycleGustTime > 0) {
windCycleGustTime --;
windCycleGust += windCycleGustTime/20
} else {
windCycleGust *= 0.99;
}
windCycle += windCycleGust;
currentWind = (Math.sin(windCycle/40) * 0.6 + 0.4) ** 2;
currentWind = currentWind < 0 ? 0 : currentWind;
windFollow += (currentWind - windActual) * windBendRectSpeed;
windFollow *= windBranchSpring ;
windActual += windFollow;
}
requestAnimationFrame(update);
function update() {
ctx.clearRect(0,0,canvas.width,canvas.height);
updateWind();
drawTree(treeSeed);
requestAnimationFrame(update);
}
body {
font-family : arial;
}
<canvas id="canvas" width="250" heigth="200"></canvas>
Click tree to reseed.
Update
I just noticed that the wind and branch length are absolute thus drawing the tree on a larger canvas will create a bending force too great and the branches will bend past the wind vector.
To scale the sim up either do it via a global scale transform, or reduce the windStrength constant to some smaller value. You will have to play with the value as its a 2nd order polynomial relation. My guess is multiply it with (200 ** 2) / (canvas.height ** 2) where the 200 is the size of the example canvas and the canvas.height is the new canvas size.
I have added the calculations to the example, but its not perfect so when you scale you will have to change the value windStrength (the first number) down or up if the bending is too far or not enough.

Algorithm for even rendering

I want to write a program that draws a surface (X * Y) evenly.I already have an approach for this at the moment, but it doesn't quite work yet and is also very slow. Since this approach is far too slow, I do not want to pursue it much further.
At the beginning there is always the first point and the last one - so with an area of 10 x 10 the pixel at position 0 and the pixel at position 99.
Then the next best pixel must be found, i.e. the one with the largest distance. This is relatively easy with only two points - (99 - 0 / 2) so 49 or 48.
Now you have to look for the next best one again. So (49 - 0) / 2 or if 48 was taken before (99 - 48) / 2 so 24/25 or 74/75.
This process must be repeated until the correct sequence is found.
0,99,49,74,24,36,61,86,12,42,67,92,6,18,30,55,80,45,70,95,3,9,15,21,27,33,39,52,58,64,77,83,89,47,72,97,1,4,7,10,13,16,19,22,25,28,31,34,37,40,43,50,53,56,59,62,65,68,75,78,81,84,87,90,93,2,5,8,11,14,17,20,23,26,29,32,35,38,41,44,46,48,51,54,57,60,63,66,69,71,73,76,79,82,85,88,91,94,96,98
I also added a small example here, which shows how it should work. The function getElementOrder should be replaced by a mathematical expression to get the fastest possible solution.
// define variables
const width = 20; // this will be > 2100
const height = 20; // this will be > 1600
const size = 20;
let elements = {};
// create all cells
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
let id = x + y * height;
let div = document.createElement("div");
div.style.border = "solid 1px black";
div.style.width = size + "px";
div.style.height = size + "px";
div.style.position = "absolute";
div.style.left = x * size + "px";
div.style.top = y * size + "px";
div.style.backgroundColor = "#F0F0F0";
let textDiv = document.createElement("div");
textDiv.innerHTML = id;
textDiv.style.position = "absolute";
textDiv.style.fontSize = "6pt";
textDiv.style.top = "1px";
textDiv.style.right = "1px";
div.appendChild(textDiv);
document.body.appendChild(div);
elements[id] = div;
}
}
function getElementOrder(width, height) {
/* BAD SLOW CODE START - This sould be better: */
const length = width * height;
const order = [0, length -1];
const result = [0, length -1];
while (order.length !== length) {
let index = 0;
let diff = 0;
for (let i = 0, m = order.length - 1; i < m; i++) {
let localDiff = order[i+1] - order[i];
if (localDiff > diff) {
index = i;
diff = localDiff;
}
}
let offset = Math.floor(diff/2);
let value = order[index] + offset;
order.splice(index + 1, 0, value);
result.push(value);
}
return result;
/* BAD SLOW CODE END */
}
// get the draw order
let order = getElementOrder(width, height);
// change color of each pixel in draw order
let interval = setInterval(() => {
if (order.length === 0) {
clearInterval(interval);
return;
}
const value = order.shift();
elements[value].style.backgroundColor = "#00abab";
}, 10);
Are there any mathematical approaches to solve this problem?
You are welcome to post better solutions, approaches or links to mathematical formulas for this problem here.
I think I get what you're trying to accomplish, and what the underlying routine is. The way I see it, you're probably overcomplicating the question of "finding the biggest distance", since from what I can see, what you're basically doing is halving increasingly fine intervals.
So, here's my version:
function getElementOrder(width, height) {
const length = width * height;
const order = [ 0 ];
for (let denominator = 2; order.length < length; denominator *= 2) {
for (let enumerator = 1; enumerator < denominator; enumerator += 2) {
order.push(Math.round(length * enumerator / denominator));
}
}
return order;
}
I'm using very long and clunky variable names to make the principle behind it clearer: if you project the entire interval of [0, width*height] to the interval of [0, 1] then what you're doing is adding 1/2, then 1/4 and 3/4, then 1/8 and 3/8 and 5/8 and 7/8, and so on; each time you multiply the denominator by 2, and take all the odd-numbered multiples.
(Addendum: you can probably squeeze even better performance out of it by using a fixed-length TypedArray for the results, and adding elements by index instead of using .push(). I just didn't want to obscure the gist of the solution with the additional loop variable and such.)

Categories