کاوش P5.JS: اجرای الگوریتم Velet برای آزمایش های تصویر

خلاقیت دیجیتال در برنامه نویسی نوعی بیان بدون محدودیت پیدا می کند. امروز ، بیایید به داخل شیرجه برویم P5. برای، یک کتابخانه JavaScript با تمرکز بر آزمایش هنر و بصری ، و اجرای الگوریتم فوریبشر این الگوریتم ، که ما به عنوان روشی برای بررسی الگوهای تصویر و تحولات پیشنهاد می کنیم ، از توابع ریاضی (مانند سینوسی) و دستکاری پیکسل مستقیم برای ایجاد جلوه های پویا و غافلگیرکننده استفاده می کند.

p5.js چیست؟

P5.JS کتابخانه ای است که ایجاد طرح های تعاملی و هنری را تسهیل می کند. با استفاده از آن ، می توانیم تصاویر را به روشی ساده و بصری ترسیم ، تشویق و دستکاری کنیم – مناسب برای آزمایش های تصویری!

معرفی الگوریتم Velet

اگرچه الگوریتم فوری نه یک الگوی سنتی ، در اینجا ما آن را به عنوان روشی تعریف می کنیم که فاصله از هر پیکسل را در مقایسه با یک نقطه مرکزی ترسیم می کند و یک عملکرد مثلثاتی را برای تغییر رنگ اعمال می کند. بنابراین ، ما تأثیراتی داریم که با گذشت زمان متفاوت است و یک تجربه بصری پویا و ارگانیک ایجاد می کند.

اجرای

در اینجا یک مثال کد وجود دارد که این ایده را پیاده سازی می کند. در طرح ، رنگ هر پیکسل بر اساس فاصله آن با مرکز بوم و تغییر زمانی که از عملکرد استفاده می کند اصلاح می شود sin()بشر

function setup() {
  createCanvas(800, 600);
  pixelDensity(1); // Para trabalhar diretamente com os pixels
}

function draw() {
  background(0);
  loadPixels();

  // Itera sobre todos os pixels do canvas
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let index = (x + y * width) * 4;

      // Calcula a distância do pixel até o centro do canvas
      let d = dist(x, y, width / 2, height / 2);

      // Aplica uma variação temporal para criar animação
      // O valor 'factor' varia entre 0 e 255 de forma senoidal
      let factor = sin(d / 20 + millis() / 1000) * 127 + 128;

      // Modifica as cores do pixel com base no fator calculado
      pixels[index]   = factor;       // Componente Red
      pixels[index+1] = factor * 0.7;   // Componente Green (ajustado para um tom diferente)
      pixels[index+2] = factor * 0.5;   // Componente Blue (para variação)
      pixels[index+3] = 255;            // Componente Alpha (opacidade)
    }
  }

  updatePixels();
}

توضیح کد

• راه اندازی (): ما بوم را بوت می کنیم و تعریف می کنیم pixelDensity(1) برای اطمینان از اینکه ما به طور مستقیم پیکسل ها را دستکاری می کنیم ، بدون تداخل چگالی پیکسل بالا (مانند صفحه های شبکیه).
• قرعه کشی (): در هر فریم ، بوم به روز می شود:
  • background(0) پایین را تمیز می کند.
  • loadPixels() این داده های پیکسل را حمل می کند تا بتوانیم آن را دستکاری کنیم.
  • دو حلقه هر موقعیت را طی می کنند (x, y) بوم انجام دهید
  • ما فاصله را محاسبه می کنیم d از پیکسل به مرکز.
  • ما از عملکرد استفاده می کنیم sin() همراه با millis() برای معرفی یک تغییر زمانی ، و در نتیجه مقدار factor که شدت رنگ را تعیین می کند.
  • ما اجزای رنگ (RGB) هر پیکسل را اصلاح می کنیم و کدورت کل را با آن تضمین می کنیم pixels[index+3] = 255بشر
  • بالاخره ، updatePixels() بوم را با تغییرات ایجاد شده به روز کنید.

آزمایشات تصویری

این مثال فقط یک نقطه شروع برای آزمایش های ممکن است:

• شارژ و دستکاری تصاویر: به جای ایجاد الگوهای از ابتدا ، می توانید از عملکرد استفاده کنید loadImage() برای حمل یک عکس و اعمال تحولات بر اساس الگوریتم Velet.
• تعامل: برای تغییر پارامترها (به عنوان مثال ، مقیاس فاصله یا سرعت تنوع زمانی) در زمان واقعی ، کنترل ها (مانند کشویی یا دکمه) را اضافه کنید.
• ترکیبی از الگوریتم ها: سعی کنید الگوریتم Velet را با سایر تکنیک ها ، مانند سر و صدای پرلین یا فیلترهای سفارشی ، ادغام کنید تا تصویری حتی پیچیده تر و جالب تر ایجاد کنید.

اجرای الگوریتم فوری در P5.JS نشان می دهد که چگونه ریاضیات و برنامه نویسی می توانند برای تولید هنر دیجیتالی منحصر به فرد جمع شوند. ما شما را تشویق می کنیم تا با تنظیم پارامترها و ترکیب تکنیک ها برای کشف جهان های بصری جدید ، این مثال را کشف و تطبیق دهید.