البرمجة الإبداعية — المستوى الثاني: متوسط

ملخص: تُعزّز هذه الدورة المتوسطة أسس المستوى الأول وتُقدّم بنى وتقنيات أكثر تعقيداً. تشمل الدورة ضجيج بيرلين المتقدم (متعدد الأوكتافات وتشويه النطاق)، البرمجة الكائنية (OOP مع صنف Particle والوراثة)، حقول الاتجاه المتجهية، فن البيانات بـ CSV/JSON، الطباعة التوليدية، الاستجابة الصوتية (p5.sound FFT)، تدفق عمل التصدير النظيف وأنظمة L. المشروع النهائي مجموعة توليدية من 10 أعمال متسقة. الخطة: ضجيج متقدم ← OOP جسيمات ← حقول الاتجاه ← فن البيانات ← الطباعة ← استجابة صوتية ← تصدير ← أنظمة L.

الأهداف التعليمية

بنهاية هذه الدورة، سيكون الطلاب قادرين على:

1. استخدام (تطبيق) ضجيج بيرلين المتقدم (متعدد الأوكتافات وتشويه النطاق) لتوليد أنسجة عضوية معقدة.
2. بناء (إبداع) صنف Particle كائني التوجه مع تجميع القوى.
3. إنشاء (إبداع) حقل اتجاه متجهي مدفوع بضجيج بيرلين.
4. تحميل (تطبيق) بيانات CSV أو JSON وتعيينها لمتغيرات بصرية.
5. تحريك (تطبيق) النص كشكل بصري (طباعة توليدية).
6. ربط (تطبيق) p5.sound FFT بمعاملات بصرية للسكيتشات الصوتية التفاعلية.
7. إنتاج (إبداع) تدفق تصدير نظيف بدقة عالية (PNG وSVG وPDF).
8. تطبيق (تطبيق) نظام L مع صنف رسام السلحفاة (Turtle).

الوحدة 1 — ضجيج بيرلين المتقدم (2 ساعة)

المفهوم

دالة noise(x) الأساسية تُرجع قيماً بين 0 و1. استخدامات أكثر قوة:

الضجيج متعدد الأوكتافات (fBm — حركة براونية كسورية): javascript // fBm يدوي: مجموع الضجيج بمقاييس مختلفة function fbm(x, y, octaves) { let value = 0; let amplitude = 0.5; let frequency = 1.0; for (let i = 0; i < octaves; i++) { value += amplitude * noise(x * frequency, y * frequency); amplitude *= 0.5; // كل أوكتاف: نصف الاتساع frequency *= 2.0; // ضعف التردد } return value; }

حقل الضجيج ثلاثي الأبعاد (متغير بالزمن): javascript // ضجيج 3D: x، y كموضع، frameCount * 0.005 كـ "زمن" let n = noise(x * 0.003, y * 0.003, frameCount * 0.005); let angle = n * TWO_PI * 2;

تشويه النطاق (Domain Warping): javascript // تشويه الإحداثيات قبل أخذ عينة من الضجيج let qx = noise(px * 0.004, py * 0.004); let qy = noise(px * 0.004 + 5.2, py * 0.004 + 1.3); let value = noise(px * 0.004 + 4.0 * qx, py * 0.004 + 4.0 * qy); النتيجة: أنسجة مضطربة ومطوية تشبه الطبقات الجيولوجية.

تطبيق عملي 1.1 — نسيج عضوي بتشويه النطاق

الخطوات:

1. أنشئ لوحة 600×600
2. لكل بكسل، احسب قيمة ضجيج مع تشويه النطاق
3. عيّن القيمة للوحة ألوان (HSB: تشبع ثابت، تدرج/سطوع متغيّران)
4. قارن: ضجيج دون تشويه مقابل تشويه مرحلة واحدة مقابل مرحلتين
5. احفظ أفضل نتيجة

الوحدة 2 — البرمجة الكائنية: صنف الجسيم (2 ساعة)

المفهوم

البرمجة الكائنية التوجه (OOP) تُتيح تغليف الحالة والسلوكيات في أصناف قابلة لإعادة الاستخدام. Particle هو مثال OOP القياسي في البرمجة الإبداعية.

`javascript class Particle { constructor(x, y) { this.pos = createVector(x, y); this.vel = p5.Vector.random2D().mult(random(0.5, 2)); this.acc = createVector(0, 0); this.maxSpeed = 3; this.lifespan = 255; this.history = []; }

applyForce(force) { this.acc.add(force); }

update() { this.vel.add(this.acc); this.vel.limit(this.maxSpeed); this.pos.add(this.vel); this.acc.mult(0); // إعادة ضبط التسارع كل إطار this.lifespan -= 1.5; this.history.push(this.pos.copy()); if (this.history.length > 30) this.history.shift(); }

display() { for (let i = 0; i < this.history.length; i++) { let alpha = map(i, 0, this.history.length, 0, this.lifespan); stroke(255, alpha); let p = this.history[i]; if (i > 0) line(this.history[i-1].x, this.history[i-1].y, p.x, p.y); } }

isDead() { return this.lifespan <= 0; } } `

إدارة مصفوفة الجسيمات: `javascript let particles = [];

function draw() { // إضافة particles.push(new Particle(mouseX, mouseY)); // تحديث + عرض for (let p of particles) { p.update(); p.display(); } // إزالة الجسيمات الميتة (حلقة عكسية لعدم تخطي عناصر) for (let i = particles.length - 1; i >= 0; i--) { if (particles[i].isDead()) particles.splice(i, 1); } } `

تطبيق عملي 2.1 — نظام جسيمات مع الجاذبية

الخطوات:

1. طبّق صنف Particle من القالب أعلاه
2. أضف قوة gravity تُطبَّق كل إطار
3. أضف قوة wind تُفعَّل عند ضغط الماوس
4. حدّد بـ 200 جسيم كحد أقصى (أنشئ واحداً كل إطار، أزل الميتة)
5. جرّب: ماذا يحدث إذا نقص lifespan بسرعة أكبر؟ إذا كان maxSpeed أعلى؟

الوحدة 3 — حقول الاتجاه المتجهية (2 ساعة)

المفهوم

حقل الاتجاه المتجهي (Vector Flow Field) بنيةٌ تخزّن اتجاهاً لكل منطقة في الفضاء. كل جسيم يستعلم الحقل في موضعه لتحديد اتجاه حركته.

`javascript class FlowField { constructor(resolution) { this.resolution = resolution; this.cols = floor(width / resolution); this.rows = floor(height / resolution); this.field = new Array(this.cols * this.rows); this.update(); }

update() { let t = frameCount 0.003; for (let col = 0; col < this.cols; col++) { for (let row = 0; row < this.rows; row++) { let angle = noise(col 0.12, row 0.12, t) TWO_PI 2; let v = p5.Vector.fromAngle(angle); this.field[col + row this.cols] = v; } } }

directionLocale(pos) { let col = floor(pos.x / this.resolution); let row = floor(pos.y / this.resolution); col = constrain(col, 0, this.cols - 1); row = constrain(row, 0, this.rows - 1); return this.field[col + row * this.cols].copy(); } } `

ربط جسيم بالحقل: javascript // في Particle.update(): let force = flowField.directionLocale(this.pos); force.mult(0.5); // قوة الحقل this.applyForce(force);

تطبيق عملي 3.1 — تصوير حقل الاتجاه

الخطوات:

1. طبّق FlowField بدقة 20
2. ارسم الحقل: لكل خلية، سهم قصير line() في اتجاه الحقل
3. أضف 200 جسيم تتبع الحقل (باستخدام صنف Particle من الوحدة 2)
4. جرّب: ماذا يحدث إذا تطور الضجيج بالزمن (t = frameCount * 0.003)؟
5. اجعل الحقل تفاعلياً: الاتجاه يتحول إذا كان الماوس قريباً

الوحدة 4 — فن البيانات (CSV/JSON) (2 ساعة)

المفهوم

p5.js يستطيع تحميل ملفات CSV وJSON لتحويل البيانات الحقيقية إلى أشكال بصرية.

تحميل CSV: `javascript let table; function preload() { table = loadTable('data.csv', 'csv', 'header'); }

function setup() { // table.getRowCount() — عدد الصفوف // table.getString(row, 'column_name') — قيمة خلية for (let i = 0; i < table.getRowCount(); i++) { let value = float(table.getString(i, 'value')); let label = table.getString(i, 'name'); //... } } `

تحميل JSON: javascript let data; function preload() { data = loadJSON('data.json'); } function setup() { // data.key, data.array[i].field }

تعيين البيانات لمعاملات بصرية: `javascript // تعيين قيمة [min,max] لموضع [margin, width-margin] let x = map(value, dataMin, dataMax, margin, width - margin);

// تعيين للون colorMode(HSB, 360, 100, 100); let hue = map(value, dataMin, dataMax, 0, 240); fill(hue, 80, 90); `

تطبيق عملي 4.1 — تصوير بيانات مفتوحة

الخطوات:

1. حمّل مجموعة بيانات CSV مفتوحة (أفكار: بيانات البنك الدولي، إحصائيات مغربية، درجات حرارة مدينة)
2. حمّلها في p5.js
3. أنشئ تصويراً يحوّل عمودَي بيانات على الأقل لمتغيرات بصرية (x، y، الحجم، اللون، الزاوية)
4. أضف عنواناً ومحاور بـ text()
5. اسأل نفسك: ما الذي يكشفه الشكل البصري لا تكشفه جداول البيانات؟

الوحدة 5 — الطباعة التوليدية (2 ساعة)

المفهوم

في p5.js، loadFont() يحمّل خطاً بصيغة OpenType (otf، ttf). textToPoints() (مع مكتبة opentype.js أو p5.Font) يستخرج نقاط مضلع حرف ما.

أساسيات النص المتحرك: `javascript let myFont; function preload() { myFont = loadFont('path/to/font.otf'); }

function setup() { createCanvas(800, 400); textFont(myFont); textSize(200); textAlign(CENTER, CENTER); }

function draw() { background(0); // لون متحرك let hue = (frameCount * 0.5) % 360; fill(hue, 80, 90); text('TYPE', width/2, height/2); } `

استخراج النقاط textToPoints (مع p5.Font): javascript // استخراج نقاط من محيط الحرف let pts = myFont.textToPoints('CODE', x, y, size, { sampleFactor: 0.1, simplifyThreshold: 0 }); // pts: مصفوفة كائنات {x, y, alpha}

تطبيق عملي 5.1 — نص متحرك

الخطوات:

1. حمّل خطاً مجانياً (Google Fonts: Rubik، Cairo للعربية، إلخ)
2. اعرض كلمة بحجم ولون متحركين (مع sin)
3. عدّل وزن الخط تدريجياً: صغير مع noise، مشوّه بالإزاحة
4. مع mouseX، تحكم في مستوى التشويه
5. صدّر إطاراً ثابتاً بدقة عالية

الوحدة 6 — الاستجابة الصوتية (p5.sound + FFT) (2 ساعة)

المفهوم

p5.sound امتداد صوتي لـ p5.js. يُتيح تحميل الملفات والتقاط الميكروفون وتحليل الترددات في الوقت الحقيقي.

`javascript // أضف في index.html: <script src="p5.sound.min.js"></script> let mic, fft;

function setup() { createCanvas(800, 400); mic = new p5.AudioIn(); mic.start(); fft = new p5.FFT(0.8, 1024); // تنعيم، عدد الحزم fft.setInput(mic); }

function draw() { background(0); let spectrum = fft.analyze(); // طيف FFT: 1024 قيمة 0-255 let waveform = fft.waveform(); // الشكل الموجي: قيم بين -1 و1

// تصوير: طيف شريط بشريط for (let i = 0; i < spectrum.length; i++) { let h = map(spectrum[i], 0, 255, 0, height); fill(map(i, 0, spectrum.length, 0, 360), 80, 90); noStroke(); rect(map(i, 0, spectrum.length, 0, width), height - h, width / spectrum.length, h); }

// طاقة سائدة حسب نطاق التردد let bass = fft.getEnergy('bass'); // 20–140 Hz let mid = fft.getEnergy('mid'); // 400–2600 Hz let treble = fft.getEnergy('treble'); // 5200–14000 Hz } `

تطبيق عملي 6.1 — تركيب صوتي تفاعلي

الخطوات:

1. اربط الميكروفون (p5.AudioIn)
2. استخدم الباس (bass) للتحكم في حجم الدائرة، والتريبل (treble) للتحكم في اللون
3. صوّر الطيف الكامل في مخطط شريطي
4. أضف الشكل الموجي كخط (beginShape / vertex)
5. مع ملف صوتي (p5.SoundFile): حمّل وشغّل مقطعاً، اجعل المرئيات تستجيب

الوحدة 7 — تدفق عمل التصدير النظيف (2 ساعة)

المفهوم

دقة البكسل: javascript // تصدير نقطي بدقة عالية function setup() { pixelDensity(3); // 3× الشاشة → 2400 بكسل للوحة 800 بكسل createCanvas(800, 800); noLoop(); } function keyPressed() { if (key === 's') saveCanvas('تصدير', 'png'); }

تصدير SVG مع p5.svg: javascript // مع تحميل مكتبة p5.svg: function setup() { createCanvas(800, 800, SVG); // مُصيّر SVG بدلاً من Canvas } function keyPressed() { if (key === 's') save('تصدير.svg'); }

قابلية التكرار: javascript // ثبّت البذور في بداية setup() randomSeed(137); noiseSeed(137);

المجموعات: توليد N تباينات: javascript // توليد 10 تباينات ببذور مختلفة، حفظ الكل async function saveSeries(n) { for (let i = 0; i < n; i++) { clear(); randomSeed(i * 100); noiseSeed(i * 100); redraw(); await new Promise(r => setTimeout(r, 100)); // انتظار التصيير saveCanvas('مجموعة-' + nf(i, 2), 'png'); } }

تطبيق عملي 7.1 — توليد مجموعة

الخطوات:

1. خذ أي سكيتش من الوحدات 1–6
2. عيّنه بمتغير SEED
3. ثبّت randomSeed(SEED) وnoiseSeed(SEED) في بداية draw()
4. ولّد واحفظ 10 تباينات (البذور 0–9)
5. اختر أكثر 3 منها إثارةً: ما الذي يُميّزها؟

الوحدة 8 — أنظمة L والنمو (2 ساعة)

المفهوم

أنظمة L (L-Systems) قواعد إعادة كتابة شكلية تنمذج النمو. قدّمها عالم الأحياء أريستيد ليندنماير (1968)، تنطبق على النباتات المتشعبة والمرجان والندف.

المبدأ:

• المحور: سلسلة بداية (F)
• القواعد: قواعد استبدال (F → F[+F]F[-F]F)
• التفسير: رسومات السلحفاة

التطبيق: `javascript class Tortue { constructor() { this.reset(); } reset() { this.x = width / 2; this.y = height - 50; this.angle = -HALF_PI; // يشير نحو الأعلى this.stack = []; this.stepSize = 4; this.angleStep = radians(25); } forward() { let x2 = this.x + cos(this.angle) this.stepSize; let y2 = this.y + sin(this.angle) this.stepSize; stroke(40, 100, 60, 180); strokeWeight(1); line(this.x, this.y, x2, y2); this.x = x2; this.y = y2; } turn(sign) { this.angle += sign * this.angleStep; } push() { this.stack.push({x: this.x, y: this.y, angle: this.angle}); } pop() { let s = this.stack.pop(); this.x = s.x; this.y = s.y; this.angle = s.angle; } }

function applyRules(str) { let result = ''; for (let c of str) { if (c === 'F') result += 'F[+F]F[-F]F'; else result += c; } return result; }

function drawLSystem(str, tortue) { tortue.reset(); for (let c of str) { if (c === 'F') tortue.forward(); else if (c === '+') tortue.turn(1); else if (c === '-') tortue.turn(-1); else if (c === '[') tortue.push(); else if (c === ']') tortue.pop(); } } `

تطبيق عملي 8.1 — نظام L متحرك

الخطوات:

1. طبّق صنف Tortue
2. طبّق القاعدة F → F[+F]F[-F]F على 4 تكرارات
3. ارسم النظام على لوحة 600×600
4. اجعل angleStep يتغير مع mouseX (تعيين من 5° إلى 40°)
5. حرّك النمو: ارسم حرفاً بحرف مع تأخير بين كل خطوة

المشروع النهائي — "مجموعة توليدية"

الملخص

أنتج سلسلة من 10 أعمال توليدية متسقة تستكشف موضوعاً (ثقافياً أو اجتماعياً أو علمياً أو شخصياً) من خلال التباين على نظام توليدي واحد.

الاشتراطات

• جميع الأعمال من نفس السكيتش المصدر
• استخدام تقنيتين على الأقل من الوحدات 1–8
• بذرة ثابتة لكل عمل (قابل للتكرار)
• هوية بصرية متسقة عبر المجموعة

المنجزات

1. السكيتش المصدر (كود موثَّق + توثيق)
2. 10 صور PNG بـ 2000×2000 بكسل كحد أدنى، مُسمّاة مجموعة-01.png → مجموعة-10.png
3. توثيق المجموعة (صفحتان): المفهوم والنظام التوليدي والخيارات الإبداعية لكل تباين وجدول البذور
4. عرض تقديمي (10 دقائق): عرض الأعمال العشرة، شرح النظام و3 قرارات إبداعية

مقياس التقييم

القراءات والموارد

• The Nature of Code (دانييل شيفمان): https://natureofcode.com
• توثيق p5.js + p5.sound: https://p5js.org/reference/
• مرجع أنظمة L: https://en.wikipedia.org/wiki/L-system
• openFrameworks (بديل C++): https://openframeworks.cc
• معارض OpenProcessing: https://openprocessing.org

→ المستوى التالي: البرمجة الإبداعية — المستوى الثالث → ورشة مخصصة لمدرستك أو فريقك: احجزوا مكالمة 30 دقيقة — مجاناً