0

Ребят, помогите написать алгоритм, который, заполняя экран, будет генерировать объекты, как показано на картинке (результат). Объекты заполнили весь экран

Генерация происходит с левого нижнего угла до правого верхнего. Каждый новый(-ые) объект(-ы) появляется(-ются) рядом с предыдущим(-и),т.е. не хаотично.

Материал и геометрия любые.

1
  • 2
    А с какой проблемой Вы столкнулись? 2 мар 2020 в 10:39

2 ответа 2

0

Можно попробовать сделать так. Код ниже или тут: https://jsfiddle.net/yr84csp0/

Данный код для квадратов размером 40 на 40 и по 5px padding. Определите какие размеры квадратов нужны и замените входные значения!

Алгоритм:

  1. Определяем границы экрана (или блока)
  2. Определяем текущее положение и заполняем все строки.
  3. Проверяем текущее положение и далее в текущую строку добавляем объект
  4. Добавляем в конец html текущего блока текущий объект.
  5. Смещаем колонку и строку в зависимости от заполнения.
  6. пункты 3, 4, 5 оборачиваем в функцию интервала и итерируем пока не дойдем до конца.

Оптимизировать код, подстроить под себя и т.д. это Вам как домашнее задание. Так как лучше всего приводить код и показывать что Вы сделали сами, а не просто кидать задание. =)

var width=document.body.clientWidth;
var height=document.body.clientHeight;
var countSquareColumn = parseInt(width / 50);
var countSquareRow = parseInt(height / 50);
var currentRow = countSquareRow, currentColumn = 0;
var cont = document.getElementById('cont');
var interval = 100;
var types = ['square', 'item-circle'];

for(var i=0; i<= countSquareRow; i++) {
	cont.innerHTML += '<div class="items"></div>';
}

var myInterval = setInterval(setObjects, interval);

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function setObjects() {
	if (check(countSquareColumn, currentColumn, countSquareRow, currentRow)) return;
	var currentRowCont = cont.children[currentRow];
  showSquare(currentRowCont, {
  	id: `${currentRow + 1}${currentColumn + 1}`,
  	name: '',
    type: types[getRandomInt(2)],
    color: getRandomColor()
  });
  currentColumn++;
  if (currentColumn > countSquareColumn) {
  	currentRow--;
    if (check(countSquareColumn, currentColumn, countSquareRow, currentRow)) return;
    currentColumn = 0;
  };
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function check(countSquareColumn, currentColumn, countSquareRow, currentRow) {
	if ((countSquareColumn <= currentColumn && currentRow < 0) || (currentColumn ==0 && currentRow < 0)) {
  	clearInterval(myInterval);
    return true;
  }
  return false;
}

function showSquare(currentRowCont, item) {
	currentRowCont.innerHTML += `<div class="item ${item.type}" id="${item.id}" style="background-color: ${item.color}"></div>`; 
}
body {
 margin: 0;
 padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.items {
  display: flex;
}

.item {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 5px;
  background-color: #000;
}

.item-circle {
  border-radius: 50%;
}
<div class="container" id="cont"></div>

1
  • Круто, но это не совсем то) 2 мар 2020 в 12:20
0

Все же я смог нагуглить:

Функция для вычисления видимой ширины / высоты на заданной z-глубине с перспективной камеры

  const visibleHeightAtZDepth = ( depth, camera ) => {
  // compensate for cameras not positioned at z=0
  const cameraOffset = camera.position.z;
  if ( depth < cameraOffset ) depth -= cameraOffset;
  else depth += cameraOffset;

  // vertical fov in radians
  const vFOV = camera.fov * Math.PI / 180; 

  // Math.abs to ensure the result is always positive
  return 2 * Math.tan( vFOV / 2 ) * Math.abs( depth );
};

const visibleWidthAtZDepth = ( depth, camera ) => {
  const height = visibleHeightAtZDepth( depth, camera );
  return height * camera.aspect;
};

Источник: https://discourse.threejs.org/... Это значительно упростило мне задачу. Хоть код решения и получился немного корявым, я все же приблизился максимально близко к тому, что хотел. Решение: https://jsfiddle.net/a56gm4rs/9/

Изначально я планировал, что объекты будут появляться на сцену с левого нижнего угла и до верхнего, при этом плавно меняя координату z, opacity.., создавая своего рода анимацию. В итоге не стал над этим заморачиваться и просто все объекты закинул в двумерный массив. Буду анимировать объекты уже используя его

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.