Keyword Cloud Sphere Effect

“Keyword Cloud Sphere Effect” displays keywords on a rotating 3D spherical grid. Keywords are rendered based on an array containing keyword information: text, link, and color. Sphere rotates continuously in motion.

Transparency and size of keywords change depending on position. Users can control the sphere by dragging or let it rotate automatically. Ideal for creating keyword clouds or interactive text displays for modules and plugins requiring this feature.

HTML

CSS

JavaScript

const canvas = document.getElementById('canvas');

const texts = [
  { text: 'POD', color: '#E34C26', link: 'https://wikipoly.com/?s=POD' },
  { text: 'PolyXGO', color: '#FC0000', link: 'https://wikipoly.com/?s=PolyXGO' },
  { text: 'HTML', color: '#F7DF1E', link: 'https://wikipoly.com/?s=HTML' },
  { text: 'CSS', color: '#1572B6', link: 'https://wikipoly.com/?s=CSS' },
  { text: 'JS', color: '#F0DB4F', link: 'https://wikipoly.com/?s=JS' },
  { text: 'Python', color: '#3776AB', link: 'https://wikipoly.com/?s=Python' },
  { text: 'tshirt', color: '#00BFFF', link: 'https://wikipoly.com/?s=tshirt' },
  { text: 'mockup', color: '#A9A9A9', link: 'https://wikipoly.com/?s=mockup' },
  { text: 'auto mockup', color: '#FF4500', link: 'https://wikipoly.com/?s=auto%20mockup' },
  { text: 'phần mềm', color: '#6A5ACD', link: 'https://wikipoly.com/?s=phần%20mềm' },
  { text: 'perfex crm', color: '#32CD32', link: 'https://wikipoly.com/?s=perfex%20crm' },
  { text: 'API', color: '#FF6347', link: 'https://wikipoly.com/?s=API' },
  { text: 'website', color: '#4682B4', link: 'https://wikipoly.com/?s=website' },
  { text: 'WordPress', color: '#21759B', link: 'https://wikipoly.com/?s=WordPress' },
  { text: 'plugin', color: '#8A2BE2', link: 'https://wikipoly.com/?s=plugin' },
  { text: 'module', color: '#FFD700', link: 'https://wikipoly.com/?s=module' },
  { text: 'code', color: '#00FF7F', link: 'https://wikipoly.com/?s=code' },
  { text: 'theme', color: '#FF8C00', link: 'https://wikipoly.com/?s=theme' },
  { text: 'download', color: '#1E90FF', link: 'https://wikipoly.com/?s=download' },
  { text: 'PolyDev', color: '#FF1493', link: 'https://wikipoly.com/?s=PolyDev' }
];

const counts = [1, 2, 4, 5, 4, 2, 1];
let bgKeywordsOpacity = 0.1;
let padding = 8;
let autoRotateRZ = 0.002;
let autoRotateRX = 0.001;

const options = {
  tilt: Math.PI / 9,
  initialVelocityX: 0.09,
  initialVelocityY: 0.09,
  initialRotationX: Math.PI * 0.14,
  initialRotationZ: 0,
  width: 500,
  height: 500,
  radius: 150,
  fontSize: 22,
};

wordSphere(canvas, texts, counts, options);

function wordSphere(canvas, texts, counts, options) {
  const π = Math.PI;
  const { width, height, radius, fontSize, tilt, initialVelocityX, initialVelocityY, initialRotationX, initialRotationZ } = options;

let vx = initialVelocityX, vy = initialVelocityY;
  let rx = initialRotationX, rz = initialRotationZ;

let ctx = canvas.getContext('2d');
  ctx.textAlign = 'left'; // Use left alignment for accurate position calculations

canvas.width = width * 2;
  canvas.height = height * 2;
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
  ctx.scale(2, 2); // Adjust canvas scale for Hi-DPI displays

let clicked = false, lastX, lastY, isDragging = false;
  let textPositions = [];

function autoRotate() {
    rz += autoRotateRZ;
    rx += autoRotateRX;
    render();
  }

canvas.addEventListener('mousedown', event => {
    clicked = true;
    isDragging = false;
    lastX = event.screenX;
    lastY = event.screenY;
  });

canvas.addEventListener('mousemove', event => {
    if (!clicked) {
      const mouseX = event.offsetX;
      const mouseY = event.offsetY;
      let hovering = false;

// Check if mouse is hovering over any text
      for (const { x, y, width, height } of textPositions) {
        if (mouseX >= x && mouseX <= x + width && mouseY >= y && mouseY <= y + height) {
          canvas.style.cursor = 'pointer'; // Change cursor to pointer if hovering over text
          hovering = true;
          break;
        }
      }
      if (!hovering) {
        canvas.style.cursor = 'default'; // Revert cursor to default if not hovering over any text
      }
      return;
    }

isDragging = true; // Mark dragging state
    const dx = event.screenX - lastX;
    const dy = event.screenY - lastY;
    lastX = event.screenX;
    lastY = event.screenY;

// Update rotation based on mouse movement
    rz -= dy * 0.01;
    rx += dx * 0.01;

vx = dx * 0.1;
    vy = dy * 0.1;

if (!looping) startLoop();
  });

canvas.addEventListener('mouseup', () => {
    clicked = false;
    setTimeout(() => isDragging = false, 50); // Reset dragging flag after mouse release
  });

canvas.addEventListener('mouseleave', () => {
    clicked = false;
    isDragging = false;
  });

canvas.addEventListener('click', function (event) {
    if (isDragging) return; // Ignore click event if just finished dragging
    const clickX = event.offsetX;
    const clickY = event.offsetY;

// Check if click is on any keyword
    for (const { x, y, width, height, link } of textPositions) {
      if (clickX >= x && clickX <= x + width && clickY >= y && clickY <= y + height) {
        window.open(link, '_blank');
        break;
      }
    }
  });

// Rotate coordinates by a given angle
  function rot(x, y, t) {
    return [x * Math.cos(t) - y * Math.sin(t), x * Math.sin(t) + y * Math.cos(t)];
  }

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

let ix = 0, iz = 0;
    textPositions = [];

for (const { text, color, link } of texts) {
      const degZ = (π / (counts.length - 1)) * iz; // Calculate Z rotation based on layer index
      const degX = (2 * π / counts[iz]) * ix; // Calculate X rotation based on text index in layer

// Calculate sphere coordinates
      let x = radius * Math.sin(degZ) * Math.cos(degX);
      let y = radius * Math.sin(degZ) * Math.sin(degX);
      let z = radius * Math.cos(degZ) + 8 * (ix % 2); // Apply randomization in Z position

[y, z] = rot(y, z, tilt);
      [x, z] = rot(x, z, rz);
      [x, y] = rot(x, y, rx);

// Calculate transparency and font size based on X position
      const alpha = 0.6 + 0.4 * (x / radius);
      const size = fontSize + 2 + 5 * (x / radius);
      ctx.font = `${size}px "Helvetica Neue", sans-serif`;

const textMetrics = ctx.measureText(text);
      const textWidth = textMetrics.width;
      const textHeight = size;

const textX = y + width / 2 - textWidth / 2;
      const textY = -z + height / 2 - textHeight / 2;
      const bgX = textX - padding;
      const bgY = textY - padding;

// Draw background with padding
      ctx.fillStyle = `rgba(255, 255, 255, ${bgKeywordsOpacity})`;
      ctx.fillRect(bgX, bgY, textWidth + 2 * padding, textHeight + 2 * padding);

// Draw the text itself
      ctx.fillStyle = color || `rgba(0, 0, 0, ${alpha})`;
      ctx.fillText(text, textX, textY + textHeight);

// Store position data for click detection
      textPositions.push({
        text,
        x: bgX,
        y: bgY,
        width: textWidth + 2 * padding,
        height: textHeight + 2 * padding,
        link,
      });

ix--;
      if (ix < 0) {
        iz++;
        ix = counts[iz] - 1;
      }
    }
  }

let looping = false;
  function rendererLoop() {
    if (looping) window.requestAnimationFrame(rendererLoop);
    render();

if (vx > 0) vx -= 0.01;
    if (vy > 0) vy -= 0.01;
    if (vx < 0) vx += 0.01;
    if (vy < 0) vy += 0.01;
    if (Math.abs(vx) < 0.01) vx = 0;
    if (Math.abs(vy) < 0.01) vy = 0;

rz += vy * 0.01;
    rx += vx * 0.01;
  }

function startLoop() {
    looping = true;
    window.requestAnimationFrame(rendererLoop);
  }

function stopLoop() {
    looping = false;
  }

setInterval(autoRotate, 16);
  startLoop();
}

Preview: Keyword Cloud Sphere Effect

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Keyword Cloud Sphere Effect

About WikiPoly

Contact

HTML

CSS

JavaScript

Preview: Keyword Cloud Sphere Effect

Login