Сфера Фибоначчи с svg(изображениями) вместо точек

ProgramBox

Сфера Фибоначчи с svg(изображениями) вместо точек

Post author:admin
Запись опубликована:14 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

Я пытаюсь создать сферу Фибоначчи с холстом, подобным следующему коду, но вместо того, чтобы показывать везде одну и ту же точку, я хочу показывать разные изображения, возможно, svg, такие как логотипы и другие изображения. Я провел некоторые исследования в Google, например, посетил codepen и другие места, но не смог найти ничего, что работало бы. Я представляю, что это будет что-то вроде того, что есть на этом сайте здесь. Есть идеи, как к этому подойти?

 var cant = 100;
var offset = 2 / cant;
var increment = Math.PI * (3 - Math.sqrt(5));
var canvas = document.getElementById("canvas");

var i;
var circle;

//---Build the elements
for(i = 0; i < cant; i  ){
  
  circle = document.createElement("div");
  circle.className = "point";
  circle.setAttribute("data-index", i);
  
  canvas.appendChild(circle);
  
};

//---Apply transformations to points
function updatePoints(evt){
  
  var x, y, z, r, a, scale, opacity, point, style;
  
  var angle = (evt) ? (-evt.pageX / 4) * Math.PI / 180 : 0;
  
  for(i = 0; i < cant; i  ){

    y = (i * offset - 1)   (offset / 2);
    r = Math.sqrt(1 - Math.pow(y, 2));
    a = ((i   1) % cant) * increment   angle;
    x = Math.cos(a) * r;
    z = Math.sin(a) * r;

    scale = Math.round(z * 20000) / 100;
    opacity = (1   z) / 1.5;
    
    style = "translate3d("   (125   x * 100)   "px, "   (125   y * 100)   "px, "   scale   "px)";
    
    point = canvas.querySelectorAll("[data-index='"   i  "']");    
    point[0].style.WebkitTransform = style;
    point[0].style.msTransform = style;
    point[0].style.transform = style;
    point[0].style.opacity = opacity;

  }
  
}

//---Update the points at start
updatePoints();

//---Update the points on mouse move
document.addEventListener("mousemove", updatePoints);

 body, html{
  height: 100%;
  position: relative;
}

body{
  background-color: #232B2B;
  margin: 0;
  padding: 0;
}

#canvas{
  height: 250vh;
  margin: 0 0;
  position: relative;
  width: 250vh;
}

.point{
  background: red;
  border-radius: 50%;
  height: 4px;
  position: absolute;
  transform-style: preserve-3d;
  width: 4px;
}

 <div id="canvas">
  
</div>

Любая помощь была бы очень полезна.

1. Классная математика сфер. Это не canvas «а». Это div с id='canvas' таким использованием Element.style.transform . Вы можете использовать Element.style.background = 'url("yourSVGpath.svg#svgId")'; . Кроме того…. поскольку ваши точки создаются при движении мыши, ваш дизайн требует больших затрат процессора. Сначала нарисуйте свою сферу, а затем поверните ее. Не рисуйте его при каждом движении мыши. Все это сходится.

Ответ №1:

Вы можете продолжать использовать этот createElement метод.

Я добавил это, чтобы показать случайное изображение (из picsum) для каждой точки:

 // Create a new img element
img = document.createElement('img');
// Add the src to each img element. 
//Here using the iterator variable to 
//change the id of the photo we are retrieving
img.src = 'https://picsum.photos/id/'   i  '/20/20'
// Append the img to the div
circle.appendChild(img);

И я сделал круги немного больше в CSS (20 пикселей), чтобы вы могли это видеть.

Если вам нужны конкретные изображения, вы можете создать массив внутри вашего JS или извлечь его из папки на вашем сервере.

 var cant = 100;
var offset = 2 / cant;
var increment = Math.PI * (3 - Math.sqrt(5));
var canvas = document.getElementById("canvas");

var i;
var circle;

//---Build the elements
for(i = 0; i < cant; i  ){
  
  circle = document.createElement("div");
  img = document.createElement('img');
  img.src = 'https://picsum.photos/id/'   i  '/20/20'
  circle.appendChild(img);
  circle.className = "point";
  circle.setAttribute("data-index", i);
  
  canvas.appendChild(circle);
  
};

//---Apply transformations to points
function updatePoints(evt){
  
  var x, y, z, r, a, scale, opacity, point, style;
  
  var angle = (evt) ? (-evt.pageX / 4) * Math.PI / 180 : 0;
  
  for(i = 0; i < cant; i  ){

    y = (i * offset - 1)   (offset / 2);
    r = Math.sqrt(1 - Math.pow(y, 2));
    a = ((i   1) % cant) * increment   angle;
    x = Math.cos(a) * r;
    z = Math.sin(a) * r;

    scale = Math.round(z * 20000) / 100;
    opacity = (1   z) / 1.5;
    
    style = "translate3d("   (125   x * 100)   "px, "   (125   y * 100)   "px, "   scale   "px)";
    
    point = canvas.querySelectorAll("[data-index='"   i  "']");    
    point[0].style.WebkitTransform = style;
    point[0].style.msTransform = style;
    point[0].style.transform = style;
    point[0].style.opacity = opacity;

  }
  
}

//---Update the points at start
updatePoints();

//---Update the points on mouse move
document.addEventListener("mousemove", updatePoints);

 body, html{
  height: 100%;
  position: relative;
}

body{
  background-color: #232B2B;
  margin: 0;
  padding: 0;
}

#canvas{
  height: 250vh;
  margin: 0 0;
  position: relative;
  width: 250vh;
}

.point{
  background: red;
  border-radius: 50%;
  height: 20px;
  position: absolute;
  transform-style: preserve-3d;
  width: 20px;
  overflow: hidden;
}

 <div id="canvas">
  
</div>

1. Круто, но не SVG.

2. @StackSlave, возможно, svg, такие как логотипы и другие изображения из исходного вопроса. Я сделал предположение, что other images это означало изображения (gif, jpg, png). Я, конечно, могу обновить для SVG. Но даже в этом случае это был бы тот же процесс, так как вы могли бы использовать src атрибут для извлечения SVG вместо этого.

3. Да. Я тот, кто дал тебе очки.

4. Все это хорошо! Я бы также предположил, что если бы OP хотел использовать логотипы, они не создавали бы SVG. Спасибо!

Метки: Сфера Фибоначчи с svg(изображениями) вместо точек