สอนใช้อนุกรม Fibonacci เพื่อสร้างภาพด้วย Javascript

การสร้าง Fibonacci Spiral ด้วย JavaScript

Fibonacci Spiral เป็นกราฟฟิกที่น่าสนใจซึ่งสร้างจากลำดับ Fibonacci ซึ่งเป็นลำดับตัวเลขที่มีรูปแบบเฉพาะ ตัวอย่างนี้จะแสดงวิธีสร้าง Fibonacci Spiral ด้วย JavaScript และแสดงผลบน HTML Canvas พร้อมทั้งเพิ่มสีสันให้ดูโดดเด่น

โค้ดตัวอย่าง

ด้านล่างนี้เป็นโค้ด JavaScript ที่ใช้สร้าง Fibonacci Spiral คุณสามารถคัดลอกและใช้งานได้ทันที:

// Fibonacci Spiral with Fancy Colors in JavaScript using Canvas

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 800;
canvas.height = 800;
document.body.appendChild(canvas);

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// Helper function to generate Fibonacci numbers
function generateFibonacci(n) {
  const fib = [0, 1];
  for (let i = 2; i < n; i++) {
    fib[i] = fib[i - 1] + fib[i - 2];
  }
  return fib;
}

// Function to draw Fibonacci spiral
function drawFibonacciSpiral(fibSequence) {
  let angle = 0;
  let x = centerX;
  let y = centerY;
  const colors = ['#FF5733', '#33FF57', '#3357FF', '#FFFF33', '#FF33FF'];

  ctx.lineWidth = 2;

  for (let i = 1; i < fibSequence.length; i++) {
    const radius = fibSequence[i];

    // Choose a color from the list
    const color = colors[i % colors.length];
    ctx.strokeStyle = color;

    // Draw an arc for the current Fibonacci segment
    ctx.beginPath();
    ctx.arc(x, y, radius, angle, angle + Math.PI / 2);
    ctx.stroke();

    // Update angle and center for the next arc
    angle += Math.PI / 2;

    // Calculate new x, y positions based on angle
    switch (i % 4) {
      case 0: x += radius; break;
      case 1: y += radius; break;
      case 2: x -= radius; break;
      case 3: y -= radius; break;
    }
  }
}

// Generate Fibonacci numbers and draw the spiral
const fibonacciSequence = generateFibonacci(15);
drawFibonacciSpiral(fibonacciSequence);
    

ตัวอย่างผลลัพธ์

เมื่อคุณรันโค้ดนี้ คุณจะได้ภาพ Fibonacci Spiral ที่สวยงามดังนี้: