التصنيفات
محتوى عام

“من الفكرة إلى الشاشة المتحركة: كيف يُمكّنك الذكاء الاصطناعي من تحويل الخيال إلى كود عملي”

من الفكرة إلى الشاشة المتحركة: كيف يُمكّنك الذكاء الاصطناعي من تحويل الخيال إلى كود عملي – مشروع جيميناي

من الفكرة إلى الشاشة المتحركة: كيف يُمكّنك الذكاء الاصطناعي من تحويل الخيال إلى كود عملي

لتحقيق هذا المشروع —الذي انتقل من شبكة جسيمات أساسية إلى شاشة متحركة متقدمة تضم مناطيد هوائية وشعلات متوهجة— تم الاعتماد بالكامل على **الذكاء الاصطناعي (Gemini)** كـ “مهندس الكود” الشخصي، مما أتاح لنا إنتاج شيئ جديد ومبتكر.

🚀 منهجية التحويل: استغلال الذكاء الاصطناعي في الإبداع التقني

تعتمد هذه المنهجية على عملية تكرارية ومُحسَّنة، بدلاً من مجرد طلب الكود مرة واحدة. هذه هي الخطوات التي اتبعناها معًا لتحويل الفكرة إلى شاشة متحركة ثابتة ومتقنة بمساعدة Gemini:

  • **بلورة الفكرة والتأسيس:** تم وصف الفكرة البصرية لـ **Gemini** (شبكة تتلوى وتتفاعل مع جسم متحرك).
  • **التعديل والإضافة:** تم توجيه Gemini لإجراء تعديلات نوعية: **مضاعفة الجسيمات، مضاعفة قوة التنافر، استبدال الطائرات بمناطيد ذات شعلات وسلال**.
  • **التصحيح الجماعي:** عندما تعطل الكود نتيجة لزيادة الضغط الحسابي، قام **Gemini** بدراسة الكود وتحديد سبب **فشل الاستقرار** وإصلاحه تلقائيًا، مما جنّبنا قضاء ساعات في البحث عن الأخطاء.

💾 النماذج النهائية: الأكواد القابلة للتشغيل

هذه هي النماذج النهائية التي تم التوصل إليها في هذا المشروع المشترك، وهي جاهزة للنسخ والنشر في موقعك:

1. الكود الأساسي: شبكة الجسيمات والطائرات (P1.9)

يُظهر هذا الكود التصميم الأصلي مع الكثافة العالية وتأثير **الطائرات النفاثة** التي تدفع الجسيمات بقوة عند الاقتراب.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Intertwined Grid Portal - Airplanes Mode (P1.9)</title>
<style>
  :root { --bg:#050510; --fg:#c0c0ff; --wave-color: #04b4ff; }
  html,body{height:100%;margin:0;background-color: var(--bg); font-family: system-ui, Arial, sans-serif; color:var(--fg); }
  #c{ display:block; width:100vw; height:100vh; }

  /* منطقة الأمواج تصل إلى منتصف الشاشة (50vh) */
  #wave-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh; 
    background: linear-gradient(0deg, var(--wave-color) 0%, rgba(4, 180, 255, 0.05) 50%, rgba(4, 180, 255, 0) 100%);
    pointer-events: none; 
    
    filter: drop-shadow(0 0 20px rgba(4, 180, 255, 0.8));
    transition: filter 0.1s ease-out; 
    opacity: 0.25; 
  }

  .hint{ position:fixed; top:10px; right:10px; left:auto; padding:.4rem .6rem; border-radius:10px; font-size:.9rem; background:rgba(255,255,255,.06); opacity: 0.8;}
  
  .footer { 
    position:fixed; left:12px; bottom:12px; right:auto; font-size:.85rem; opacity:.75; 
    z-index: 10; 
  }
</style>
</head>
<body>
<canvas id="c"></canvas>

<div id="wave-overlay"></div>

<div class="hint">وضع الشاشة المتحركة (Screen Saver Mode) - تصميم الطائرات النفاثة.</div>

<div class="footer">
  Prototype 1.9 - بناء رقمي مشترك 2025 (Infinity Cipher)
</div>

<script>
(() => {
  const cvs = document.getElementById('c');
  const ctx = cvs.getContext('2d');
  const waveOverlay = document.getElementById('wave-overlay'); 
  
  const DPR = window.devicePixelRatio || 1;
  let W=0, H=0;
  
  function resize(){
    W = cvs.width  = Math.floor(innerWidth  * DPR);
    H = cvs.height = Math.floor(innerHeight * DPR);
    cvs.style.width  = innerWidth + 'px';
    cvs.style.height = innerHeight + 'px';
    mouse.x = W / 2;
    mouse.y = H / 2;
  }
  addEventListener('resize', resize, {passive:true}); 
  
  const mouse = {x: 0, y: 0}; 

  function handlePointer(e) {
    const rect = cvs.getBoundingClientRect();
    let clientX, clientY;

    if (e.touches && e.touches.length > 0) {
      clientX = e.touches[0].clientX;
      clientY = e.touches[0].clientY;
      e.preventDefault(); 
    } else {
      clientX = e.clientX;
      clientY = e.clientY;
    }
    
    mouse.x = (clientX - rect.left) * DPR; 
    mouse.y = (clientY - rect.top) * DPR;
  }

  cvs.addEventListener('pointermove', handlePointer, {passive:true});
  cvs.addEventListener('touchstart', handlePointer, {passive:true});
  cvs.addEventListener('touchmove', handlePointer, {passive:false}); 
  
  const particles = []; 
  const airplanes = []; 
  let lastAirplaneTime = 0;
  
  const CFG = {
    grid_gap: 35 * DPR, 
    size: 2 * DPR,
    count_limit: 6000, 
    speed_factor: 0.00005,
    depth_multiplier: 0.6,
    color_hue_start: 220, 
    color_hue_range: 50,
    airplane_interval: 4500, 
    airplane_speed_min: 1.5 * DPR,
    airplane_speed_max: 3 * DPR,
    mouse_repel: 150 * DPR,
    mouse_force: 0.005,
    ripple_radius: 100 * DPR,
    ripple_force: 0.06, 
    tracking_radius: 120 * DPR, 
    airplane_hue: 45, 
  };

  class P {
    constructor(gx, gy, gz){
      this.gx = gx; this.gy = gy; this.gz = gz; 
      this.x = gx; this.y = gy;
      this.vx = 0; this.vy = 0;
      this.h = (CFG.color_hue_start + (gz / (H * 0.5)) * CFG.color_hue_range) % 360; 
      this.time_offset = Math.random() * Math.PI * 2; 
    }
    
    step(time){
      const rotation_x = Math.sin(time * 10 + this.gz * 0.05 + this.time_offset) * 15 * DPR;
      const rotation_y = Math.cos(time * 10 + this.gx * 0.05 + this.time_offset) * 15 * DPR;
      
      const target_x = this.gx + rotation_x;
      const target_y = this.gy + rotation_y;
      
      const mx = this.x - mouse.x, my = this.y - mouse.y;
      const dist2 = mx*mx + my*my;
      const repel2 = (CFG.mouse_repel*CFG.mouse_repel);

      if (dist2 < repel2) {
        const f = (1 - dist2 / repel2); 
        this.vx += (mx) * f * CFG.mouse_force;
        this.vy += (my) * f * CFG.mouse_force;
      }
      
      for (const airplane of airplanes) {
        const ax = this.x - (airplane.x + airplane.size / 2); 
        const ay = this.y - (airplane.y + airplane.height / 2);
        const adist2 = ax * ax + ay * ay;
        const aradius2 = (CFG.ripple_radius * CFG.ripple_radius);

        if (adist2 < aradius2) {
            const f = (1 - adist2 / aradius2); 
            this.vx += ax * f * CFG.ripple_force; 
            this.vy += ay * f * CFG.ripple_force;
            this.vy += f * CFG.ripple_force * 0.5;
        }
      }

      this.vx += (target_x - this.x) * 0.08; 
      this.vy += (target_y - this.y) * 0.08;

      this.vx *= 0.92; 
      this.vy *= 0.92;

      this.x += this.vx * 0.016;
      this.y += this.vy * 0.016;
    }
    
    draw(time){
      const fade_in_out = (Math.sin(time * 5 + this.gz * 0.05) + 1) / 2;
      const alpha_base = 0.5 + fade_in_out * 0.5; 
      const lum_base = 70 + (fade_in_out * 30); 
      
      let final_h = this.h;
      let final_alpha = alpha_base;
      let final_lum = lum_base;

      let closest_dist_sq = Infinity;
      let closest_airplane_hue = 0;

      for (const airplane of airplanes) {
        const ax = this.x - (airplane.x + airplane.size / 2); 
        const ay = this.y - (airplane.y + airplane.height / 2);
        const dist2 = ax * ax + ay * ay;

        if (dist2 < closest_dist_sq) {
            closest_dist_sq = dist2;
            closest_airplane_hue = airplane.h;
        }
      }

      const tracking_radius_sq = (CFG.tracking_radius * CFG.tracking_radius);
      
      if (closest_dist_sq < tracking_radius_sq) {
        const proximity = 1 - (closest_dist_sq / tracking_radius_sq); 

        final_h = (this.h * (1 - proximity) + closest_airplane_hue * proximity) % 360;
        final_lum = lum_base + proximity * 30; 
        final_alpha = alpha_base * (1 - proximity * 0.3); 
      }

      ctx.fillStyle = `hsla(${final_h}, 100%, ${final_lum}%, ${final_alpha})`;
      ctx.fillRect(this.x - CFG.size/2, this.y - CFG.size/2, CFG.size, CFG.size);
    }
  }

  class Airplane {
    constructor(){
      this.size = Math.random() * 40 * DPR + 30 * DPR; 
      this.height = Math.random() * 5 * DPR + 2 * DPR; 
      this.x = W + this.size * 2; 
      this.startY = Math.random() * H * 0.3; 
      this.y = this.startY;
      this.speed = Math.random() * (CFG.airplane_speed_max - CFG.airplane_speed_min) + CFG.airplane_speed_min;
      this.h = CFG.airplane_hue + Math.random() * 15; 
      this.y_target = H * 0.6; 
      this.y_step_rate = (this.y_target - this.startY) / (W * 1.5); 
    }

    step(){
      this.x -= this.speed;
      this.y += this.y_step_rate * this.speed; 
      return this.x < -this.size * 2; 
    }

    draw(){
      const length = this.size;
      const height = this.height;
      const time = Date.now() * 0.005;

      const alpha_pulse = 0.8 + Math.sin(time + this.x * 0.01) * 0.2;

      ctx.fillStyle = `hsla(${this.h}, 100%, 85%, ${alpha_pulse})`;
      ctx.fillRect(this.x, this.y, length, height); 
      
      ctx.fillStyle = `hsla(${this.h+10}, 100%, 60%, ${alpha_pulse * 0.4})`;
      ctx.fillRect(this.x + length, this.y + height/4, 20 * DPR, height/2); 
    }
  }
  
  function createGrid(){
    particles.length = 0;
    const centerX = W / 2;
    const centerY = H / 2;
    
    let particleCount = 0;
    const G = CFG.grid_gap;

    for(let y = 0; y < H; y += G){
      for(let x = 0; x < W; x += G){
        if (particleCount >= CFG.count_limit) break;
        
        const dx = x - centerX;
        const dy = y - centerY;
        const dist = Math.sqrt(dx*dx + dy*dy);
        
        const gz = dist * 0.2; 
        
        particles.push(new P(x, y, gz));
        particleCount++;
      }
    }
  }

  function updateWaves(time_ms) {
    const waveSin = Math.sin(time_ms * 0.002); 
    const waveCos = Math.cos(time_ms * 0.001);

    const shadowIntensity = 20 + waveCos * 10; 
    const shadowOpacity = 0.8 + waveCos * 0.2;
    
    waveOverlay.style.filter = `drop-shadow(0 0 ${shadowIntensity}px rgba(4, 180, 255, ${shadowOpacity}))`;
  }
  
  function loop(time_ms){
    const time = time_ms * CFG.speed_factor; 

    ctx.fillStyle = 'rgba(5, 5, 16, 0.1)'; 
    ctx.fillRect(0, 0, W, H);
    
    for(const p of particles){ 
      p.step(time); 
      p.draw(time); 
    }
    
    if (time_ms - lastAirplaneTime > CFG.airplane_interval) {
        airplanes.push(new Airplane());
        lastAirplaneTime = time_ms;
    }
    
    for(let i = airplanes.length - 1; i >= 0; i--){
        const airplane = airplanes[i];
        const isOffScreen = airplane.step();
        
        if (isOffScreen) {
            airplanes.splice(i, 1); 
        } else {
            airplane.draw();
        }
    }
    
    updateWaves(time_ms);
    
    requestAnimationFrame(loop);
  }

  resize(); 
  createGrid();
  loop(0);
})();
</script>
</body>
</html>

2. الكود المطور: شبكة الجسيمات والمناطيد (P2.3)

هذا هو الإصدار النهائي والأكثر تطوراً، الذي يضم **المناطيد الهوائية** ذات الأحجام المتفاوتة، و**الشعلات المضيئة**، و**سلال الركاب** التفصيلية، مع تحسين سرعة ظهورها.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Intertwined Grid Portal - Hot Air Balloons (P2.3)</title>
<style>
  :root { --bg:#050510; --fg:#c0c0ff; --wave-color: #04b4ff; }
  html,body{height:100%;margin:0;background-color: var(--bg); font-family: system-ui, Arial, sans-serif; color:var(--fg); }
  #c{ display:block; width:100vw; height:100vh; }

  /* منطقة الأمواج تصل إلى منتصف الشاشة (50vh) */
  #wave-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh; 
    background: linear-gradient(0deg, var(--wave-color) 0%, rgba(4, 180, 255, 0.05) 50%, rgba(4, 180, 255, 0) 100%);
    pointer-events: none; 
    
    filter: drop-shadow(0 0 20px rgba(4, 180, 255, 0.8));
    transition: filter 0.1s ease-out; 
    opacity: 0.25; 
  }

  .hint{ position:fixed; top:10px; right:10px; left:auto; padding:.4rem .6rem; border-radius:10px; font-size:.9rem; background:rgba(255,255,255,.06); opacity: 0.8;}
  
  .footer { 
    position:fixed; left:12px; bottom:12px; right:auto; font-size:.85rem; opacity:.75; 
    z-index: 10; 
  }
</style>
</head>
<body>
<canvas id="c"></canvas>

<div id="wave-overlay"></div>

<div class="hint">الإصدار المطور: مناطيد هوائية ذات شعلات وسلال ركاب (بتصميم من Gemini).</div>

<div class="footer">
  Prototype 2.3 - بناء رقمي مشترك 2025 (Infinity Cipher)
</div>

<script>
(() => {
  const cvs = document.getElementById('c');
  const ctx = cvs.getContext('2d');
  const waveOverlay = document.getElementById('wave-overlay'); 
  
  const DPR = window.devicePixelRatio || 1;
  let W=0, H=0;
  
  function resize(){
    W = cvs.width  = Math.floor(innerWidth  * DPR);
    H = cvs.height = Math.floor(innerHeight * DPR);
    cvs.style.width  = innerWidth + 'px';
    cvs.style.height = innerHeight + 'px';
    mouse.x = W / 2;
    mouse.y = H / 2;
  }
  addEventListener('resize', resize, {passive:true}); 
  
  const mouse = {x: 0, y: 0}; 

  function handlePointer(e) {
    const rect = cvs.getBoundingClientRect();
    let clientX, clientY;

    if (e.touches && e.touches.length > 0) {
      clientX = e.touches[0].clientX;
      clientY = e.touches[0].clientY;
      e.preventDefault(); 
    } else {
      clientX = e.clientX;
      clientY = e.clientY;
    }
    
    mouse.x = (clientX - rect.left) * DPR; 
    mouse.y = (clientY - rect.top) * DPR;
  }

  cvs.addEventListener('pointermove', handlePointer, {passive:true});
  cvs.addEventListener('touchstart', handlePointer, {passive:true});
  cvs.addEventListener('touchmove', handlePointer, {passive:false}); 
  
  const particles = []; 
  const balloons = []; 
  let lastBalloonTime = 0;
  
  const CFG = {
    grid_gap: 35 * DPR, 
    size: 3 * DPR, 
    count_limit: 6000, 
    speed_factor: 0.00005,
    depth_multiplier: 0.6,
    color_hue_start: 220, 
    color_hue_range: 50,
    balloon_interval_min: 1500, 
    balloon_interval_max: 3500, 
    balloon_speed_min: 0.5 * DPR, 
    balloon_speed_max: 1.5 * DPR,
    mouse_repel: 150 * DPR,
    mouse_force: 0.005,
    ripple_radius: 100 * DPR,
    ripple_force: 0.06, 
    tracking_radius: 120 * DPR, 
    balloon_hue_start: 0, 
    balloon_hue_range: 60, 
    max_balloons: 3, 
  };

  class P {
    constructor(gx, gy, gz){
      this.gx = gx; this.gy = gy; this.gz = gz; 
      this.x = gx; this.y = gy;
      this.vx = 0; this.vy = 0;
      this.h = (CFG.color_hue_start + (gz / (H * 0.5)) * CFG.color_hue_range) % 360; 
      this.time_offset = Math.random() * Math.PI * 2; 
    }
    
    step(time){
      const rotation_x = Math.sin(time * 10 + this.gz * 0.05 + this.time_offset) * 15 * DPR;
      const rotation_y = Math.cos(time * 10 + this.gx * 0.05 + this.time_offset) * 15 * DPR;
      
      const target_x = this.gx + rotation_x;
      const target_y = this.gy + rotation_y;
      
      const mx = this.x - mouse.x, my = this.y - mouse.y;
      const dist2 = mx*mx + my*my;
      const repel2 = (CFG.mouse_repel*CFG.mouse_repel);

      if (dist2 < repel2) {
        const f = (1 - dist2 / repel2); 
        this.vx += (mx) * f * CFG.mouse_force;
        this.vy += (my) * f * CFG.mouse_force;
      }
      
      for (const balloon of balloons) { 
        const bx = this.x - (balloon.x + balloon.width / 2); 
        const by = this.y - (balloon.y + balloon.height / 2);
        const bdist2 = bx * bx + by * by;
        const bradius2 = (CFG.ripple_radius * CFG.ripple_radius);

        if (bdist2 < bradius2) {
            const f = (1 - bdist2 / bradius2); 
            this.vx += bx * f * CFG.ripple_force; 
            this.vy += by * f * CFG.ripple_force;
            this.vy += f * CFG.ripple_force * 0.8; 
        }
      }

      this.vx += (target_x - this.x) * 0.08; 
      this.vy += (target_y - this.y) * 0.08;

      this.vx *= 0.92; 
      this.vy *= 0.92;

      this.x += this.vx * 0.016;
      this.y += this.vy * 0.016;
    }
    
    draw(time){
      const fade_in_out = (Math.sin(time * 5 + this.gz * 0.05) + 1) / 2;
      const alpha_base = 0.5 + fade_in_out * 0.5; 
      const lum_base = 70 + (fade_in_out * 30); 
      
      let final_h = this.h;
      let final_alpha = alpha_base;
      let final_lum = lum_base;

      let closest_dist_sq = Infinity;
      let closest_balloon_hue = 0;

      for (const balloon of balloons) { 
        const bx = this.x - (balloon.x + balloon.width / 2); 
        const by = this.y - (balloon.y + balloon.height / 2);
        const dist2 = bx * bx + by * by;

        if (dist2 < closest_dist_sq) {
            closest_dist_sq = dist2;
            closest_balloon_hue = balloon.h;
        }
      }

      const tracking_radius_sq = (CFG.tracking_radius * CFG.tracking_radius);
      
      if (closest_dist_sq < tracking_radius_sq) {
        const proximity = 1 - (closest_dist_sq / tracking_radius_sq); 

        final_h = (this.h * (1 - proximity) + closest_balloon_hue * proximity) % 360;
        final_lum = lum_base + proximity * 30; 
        final_alpha = alpha_base * (1 - proximity * 0.3); 
      }

      ctx.fillStyle = `hsla(${final_h}, 100%, ${final_lum}%, ${final_alpha})`;
      ctx.fillRect(this.x - CFG.size/2, this.y - CFG.size/2, CFG.size, CFG.size);
    }
  }

  class Balloon {
    constructor(){
      this.scale = Math.random() * 0.6 + 0.4; 
      this.width = (Math.random() * 60 + 80) * DPR * this.scale; 
      this.height = (Math.random() * 80 + 100) * DPR * this.scale; 
      this.x = Math.random() * (W - this.width); 
      this.y = H + this.height * 2; 
      this.speed = (Math.random() * (CFG.balloon_speed_max - CFG.balloon_speed_min) + CFG.balloon_speed_min) * this.scale;
      this.h = (CFG.balloon_hue_start + Math.random() * CFG.balloon_hue_range) % 360; 
      this.flame_pulse_offset = Math.random() * Math.PI * 2; 

      this.basket_width = this.width * 0.3;
      this.basket_height = this.height * 0.15; 
    }

    step(){
      this.y -= this.speed; 
      return this.y < -this.height * 2; 
    }

    draw(){
      const time = Date.now() * 0.005;
      const alpha_base = 0.8;
      const centerX = this.x + this.width / 2;
      const bottomY = this.y + this.height / 2;
      const basketY = this.y + this.height + this.basket_height / 4; 

      // 1. رسم جسم المنطاد 
      ctx.fillStyle = `hsla(${this.h}, 80%, 70%, ${alpha_base})`;
      ctx.beginPath();
      ctx.ellipse(centerX, bottomY, this.width / 2, this.height / 2, 0, 0, Math.PI * 2);
      ctx.fill();

      // 2. رسم الشعلة
      const flame_intensity = 0.5 + Math.sin(time * 15 + this.flame_pulse_offset) * 0.5; 
      const flame_height = this.basket_height * 1.5 * flame_intensity;
      const flame_width = this.basket_width * 0.8 * flame_intensity;

      const gradient = ctx.createRadialGradient(
        centerX, basketY, 0,
        centerX, basketY, flame_height 
      );
      gradient.addColorStop(0, `hsla(30, 100%, 70%, ${0.8 * flame_intensity})`); 
      gradient.addColorStop(0.5, `hsla(0, 100%, 50%, ${0.5 * flame_intensity})`);  
      gradient.addColorStop(1, `hsla(0, 0%, 0%, 0)`); 

      ctx.fillStyle = gradient;
      ctx.beginPath();
      ctx.moveTo(centerX, this.y + this.height / 2); 
      ctx.lineTo(centerX - flame_width, basketY + flame_height);
      ctx.lineTo(centerX + flame_width, basketY + flame_height);
      ctx.closePath();
      ctx.fill();

      // وهج الشعلة (Shadow Blur)
      ctx.shadowColor = `hsla(30, 100%, 50%, ${0.6 * flame_intensity})`;
      ctx.shadowBlur = 15 * DPR * flame_intensity;
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 5 * DPR;
      ctx.fillRect(centerX - 1, basketY, 2, 2); 
      ctx.shadowBlur = 0; 
      ctx.shadowColor = 'transparent';


      // 3. رسم الحبال 
      const rope_color = `rgba(180, 150, 120, ${alpha_base})`;
      ctx.strokeStyle = rope_color;
      ctx.lineWidth = 1 * DPR * this.scale; 
      
      const rope_top = bottomY + 5 * DPR; 
      const basket_top_y = basketY - this.basket_height / 2; 
      
      ctx.beginPath();
      ctx.moveTo(centerX - this.width / 3, rope_top);
      ctx.lineTo(centerX - this.basket_width / 2, basket_top_y);
      ctx.moveTo(centerX + this.width / 3, rope_top);
      ctx.lineTo(centerX + this.basket_width / 2, basket_top_y);
      ctx.stroke();

      
      // 4. رسم سلة الركاب 
      ctx.fillStyle = `rgba(150, 110, 80, ${alpha_base})`; 
      ctx.fillRect(centerX - this.basket_width / 2, basket_top_y, this.basket_width, this.basket_height);
      
      // إطار السلة
      ctx.strokeStyle = `rgba(180, 150, 120, ${alpha_base})`;
      ctx.lineWidth = 1 * DPR * this.scale;
      ctx.strokeRect(centerX - this.basket_width / 2, basket_top_y, this.basket_width, this.basket_height);
    }
  }
  
  function createGrid(){
    particles.length = 0;
    const centerX = W / 2;
    const centerY = H / 2;
    
    let particleCount = 0;
    const G = CFG.grid_gap;

    for(let y = 0; y < H; y += G){
      for(let x = 0; x < W; x += G){
        if (particleCount >= CFG.count_limit) break;
        
        const dx = x - centerX;
        const dy = y - centerY;
        const dist = Math.sqrt(dx*dx + dy*dy);
        
        const gz = dist * 0.2; 
        
        particles.push(new P(x, y, gz));
        particleCount++;
      }
    }
  }

  function updateWaves(time_ms) {
    const waveSin = Math.sin(time_ms * 0.002); 
    const waveCos = Math.cos(time_ms * 0.001);

    const shadowIntensity = 20 + waveCos * 10; 
    const shadowOpacity = 0.8 + waveCos * 0.2;
    
    waveOverlay.style.filter = `drop-shadow(0 0 ${shadowIntensity}px rgba(4, 180, 255, ${shadowOpacity}))`;
  }
  
  function loop(time_ms){
    const time = time_ms * CFG.speed_factor; 

    ctx.fillStyle = 'rgba(5, 5, 16, 0.1)'; 
    ctx.fillRect(0, 0, W, H);
    
    for(const p of particles){ 
      p.step(time); 
      p.draw(time); 
    }
    
    if (balloons.length < CFG.max_balloons && time_ms - lastBalloonTime > Math.random() * (CFG.balloon_interval_max - CFG.balloon_interval_min) + CFG.balloon_interval_min) {
        balloons.push(new Balloon());
        lastBalloonTime = time_ms;
    }
    
    for(let i = balloons.length - 1; i >= 0; i--){
        const balloon = balloons[i];
        const isOffScreen = balloon.step();
        
        if (isOffScreen) {
            balloons.splice(i, 1); 
        } else {
            balloon.draw();
        }
    }
    
    updateWaves(time_ms);
    
    requestAnimationFrame(loop);
  }

  resize(); 
  createGrid();
  loop(0);
})();
</script>
</body>
</html>

3. نصائح لتعظيم الاستفادة من الذكاء الاصطناعي (Gemini)

لتحويل أفكارك بفعالية، اتبع القواعد التالية:

المبدأ الوصف الفائدة
**التعديل التدريجي (Iterative Editing)** لا تطلب 10 تغييرات في أمر واحد. اطلب تغييراً واحداً كبيراً، ثم اختبر الكود، ثم اطلب التغيير التالي. تحديد مصدر أي خطأ جديد بسهولة، وضمان استقرار الكود.
**تخزين المراجع** اعتمد نظاماً لتسمية وحفظ الإصدارات التي قمت بتعديلها (كما فعلنا مع نظام **”اسم نفط رقمي”**). يمكنك العودة إلى إصدار سابق مستقر إذا فشل تعديل جديد.
**التركيز على المفهوم** ركّز على **تأثير** التغيير (مثل: “اجعل التموج أبطأ”)، ودع **Gemini** يتولى صياغة اللغة التقنية لذلك. استثمار وقتك وجهدك في الإبداع بدلاً من حفظ قواعد اللغة.

يمكنك نسخ html والصقه في بيئة تشغيل الجاهزة لنا على رابط https://testcodes.infinitycipher.com

b

Loading

admin

بواسطة admin

سبحان الله وبحمده سبحان الله العظيم

اترك تعليقاً

Powered by
►
Necessary cookies enable essential site features like secure log-ins and consent preference adjustments. They do not store personal data.
None
►
Functional cookies support features like content sharing on social media, collecting feedback, and enabling third-party tools.
None
►
Analytical cookies track visitor interactions, providing insights on metrics like visitor count, bounce rate, and traffic sources.
None
►
Advertisement cookies deliver personalized ads based on your previous visits and analyze the effectiveness of ad campaigns.
None
Powered by