Javascript-форум - Задачка с цифрами

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Задачка с цифрами (https://javascript.ru/forum/misc/79186-zadachka-s-ciframi.html)

Задачка с цифрами

Здравствуйте!

На JS получается периодически меняющееся число (0,1,2,3... т.д.) строго от 0 и до 300(Может быть любое другое) .

Как на основе этого значения сделать переменную которая будет сохранять в себе значение по системе:

Наше число N меняется до 20 и переменная становиться 20 но если N будет 21 то переменная будет иметь значение 19, и так до тех пор пока не дойдёт до значения 0, после чего числовое значение будет опять прибавляться, если N = 41 то переменная вернёт значение 1. И так постоянно пока увеличивается само значение N.

Надеюсь объяснил достаточно понятно.

Есть у кого идеи?

Извиняюсь за название не знаю как назвать то что хочу сделать.

Цитата:

Сообщение от Biotoxsin

не знаю как назвать

возрастающая синусоида

возрастающая синусоида

Biotoxsin,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
     display: flex;
     position: relative;
  }

  circle {
            width: 35px;
            height: 35px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            font: 900 1.3em / 4px "Alfa Slab One", sans-serif;
            text-align: center;
            line-height: 35px;
  }

  </style>

</head>
<body>
<script>
 let limit = 20;
 let k = 0;
 let b = 1;
 const html = Array.from({length : 300}, (v, n) => {
 const circle = document.createElement("circle");
 circle.textContent = k;
 Object.assign(circle.style, {left : `${n * 15}px`, top : `${k * 30}px`});
 k += b;
 if(k == limit|| !k) b *= -1;
 if(!k && b == 1) limit += 20;
 return circle
 });
 document.body.append(...html)
</script>
</body>
</html>

Цитата:

Сообщение от рони

возрастающая синусоида

И где она? Ты даже её не использовал для вычислении!

ЕЩЁ То, что хочет сделать автор темы, определённо имеет отношение к параболе... https://www.desmos.com/calculator/7jowhxgmmi

Вот вычисление по формуле...

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		circle {
			width: 35px;
			height: 35px;
			background-color: red;
			border-radius: 50%;
			position: absolute;
			font: 900 1.3em / 4px sans-serif;
			text-align: center;
			line-height: 35px;
		}
	</style>
</head>
<body>
	<script>
		function fn(x) {
			return Math.abs(Math.floor(Math.sqrt(x)) - Math.abs(x - Math.floor(Math.sqrt(x)) ** 2));
		}
		for(let from = 0, to = 300, x = from; x < to; x++) {
			const circle = document.createElement("circle");
			const y = 20 * fn(x / 20);
			circle.textContent = Math.round(y);
			Object.assign(circle.style, {
				left: `${x * 15}px`,
				top: `${y * 30}px`
			});
			document.body.append(circle);
		}
	</script>
</body>
</html>

Цитата:

Сообщение от Malleys (Сообщение 518259)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		circle {
			width: 35px;
			height: 35px;
			background-color: red;
			border-radius: 50%;
			position: absolute;
			font: 900 1.3em / 4px sans-serif;
			text-align: center;
			line-height: 35px;
		}
	</style>
</head>
<body>
	<script>
		function fn(x) {
			return Math.abs(Math.floor(Math.sqrt(x)) - Math.abs(x - Math.floor(Math.sqrt(x)) ** 2));
		}
		for(let from = 0, to = 300, x = from; x < to; x++) {
			const circle = document.createElement("circle");
			const y = 20 * fn(x / 20);
			circle.textContent = Math.round(y);
			Object.assign(circle.style, {
				left: `${x * 15}px`,
				top: `${y * 30}px`
			});
			document.body.append(circle);
		}
	</script>
</body>
</html>

Цитата:

Сообщение от рони (Сообщение 518260)

Malleys,
:)

Это решение определённо выглядит лучше, но как сделать эту синусоиду без возрастания, чтоб переменная возвращала значение не больше 20 и возвращалась к 0 после чего опять увеличивалась. У вас же она после каждого "цикла" увеличивается на своё значение (20 > 40 > 60 а нужно 20 > 20 > 20) .

Цитата:

Сообщение от рони

if(!k && b == 1) limit += 20;

убрать строку 37 пост #3

Цитата:

Сообщение от Biotoxsin

как сделать эту синусоиду без возрастания, чтоб переменная возвращала значение не больше 20 и возвращалась к 0 после чего опять увеличивалась. У вас же она после каждого "цикла" увеличивается на своё значение (20 > 40 > 60 а нужно 20 > 20 > 20) .

Тогда определённо имеет отношение к синусу!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		circle {
			width: 35px;
			height: 35px;
			background-color: red;
			border-radius: 50%;
			position: absolute;
			font: 900 1.3em / 4px sans-serif;
			text-align: center;
			line-height: 35px;
		}
	</style>
</head>
<body>
	<script>
		function fn(x) {
			return 0.5 + Math.asin(Math.sin(Math.PI * (x - 0.5))) / Math.PI;
		}
		for(let from = 0, to = 300, x = from; x < to; x++) {
			const circle = document.createElement("circle");
			const y = 20 * fn(x / 20);
			circle.textContent = Math.round(y);
			Object.assign(circle.style, {
				left: `${x * 15}px`,
				top: `${y * 30}px`
			});
			document.body.append(circle);
		}
	</script>
</body>
</html>

Цитата:

Сообщение от Biotoxsin

Здравствуйте!

Скажите, Вы не против если я буду задавать Вам вопросы напрямую в личные сообщения?

Лучше задавайте их тут, вы получите более разносторонние ответы от разных участников!

Malleys, А что делать если нужно получить такую же структуру только с отрицательным значением от -10 до 10? (именно по Вашему методу, у Рони всё ясно)

Biotoxsin,
вычесть 10
circle.textContent = k - 10;