البرمجة الإبداعية — المستوى الأول: مبتدئ

ملخص: تتطلب هذه الدورة المبتدئة في البرمجة الإبداعية خبرةً برمجية سابقة. تعمل كلياً في المتصفح مع p5.js، يستكشف الطلاب الأشكال واللون والحلقات والعشوائية والزمن لإنشاء أولى تراكيبهم التوليدية. الدورة ترتكز على الدورات المصغّرة الثلاث (فن البيانات، الأنماط الأمازيغية، الطباعة العربية) كنقاط دخول وامتدادات اختيارية. المشروع النهائي سكيتش توليدي موثَّق مستوحى من نموذج ثقافي أو مجموعة بيانات. الخطة: إعداد p5.js ← أشكال ولون ← حلقات وتكرار ← عشوائية وتباين ← زمن وحركة ← مشروع محفظة.

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

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

1. شرح (بلوم: تذكر/فهم) ما هي البرمجة الإبداعية وما يُميّزها عن التطوير الكلاسيكي.
2. إنشاء (إبداع) سكيتش p5.js وظيفي في المتصفح بأشكال وألوان وتركيب متعمَّد.
3. تطبيق (تطبيق) حلقات for لتوليد تراكيب تكرارية مع تباين.
4. استخدام (تطبيق) random() وnoise() لإدخال تباينات مضبوطة.
5. تحريك (تطبيق) تركيب مع frameCount وsin() وأحداث الماوس/لوحة المفاتيح.
6. إنتاج (إبداع) مشروع نهائي موثَّق قابل للمشاركة عبر الإنترنت.

قبل البدء — الدورات المصغّرة الحالية كنقاط دخول

ثلاث دورات مصغّرة مجانية متاحة وتُشكّل مقدمات موضوعاتية مثالية قبل أو أثناء هذه الدورة:

• فن البيانات: منح الشكل للخفي — تحويل البيانات إلى نمط مع p5.js. للمتابعة قبل أو أثناء الوحدة 4 (عشوائية + تباين).
• الأنماط الأمازيغية التوليدية — شبكات وتناظرات وتكرار. للمتابعة قبل أو أثناء الوحدة 3 (حلقات).
• الطباعة العربية المتحركة — النص كشكل متحرك. للمتابعة قبل أو أثناء الوحدة 5 (حركة).

هذه الدورات المصغّرة تكميلية لا متطلبات. يمكن إتمامها بأي ترتيب.

الوحدة 1 — اكتشاف p5.js (2 ساعة)

المفهوم

p5.js إطار JavaScript أنشأته لورين لي مكارثي (Lauren Lee McCarthy) عام 2013. يتيح الرسم والتحريك والتفاعل في المتصفح — دون تثبيت ودون خادم.

التوثيق: https://p5js.org/reference/ المحرر عبر الإنترنت (موصى به للبداية): https://editor.p5js.org

دالتان، عالَم واحد:

`javascript function setup() { createCanvas(600, 400); // ينشئ سطح 600×400 بكسل background(30); // خلفية رمادية داكنة جداً }

function draw() { // تُشغَّل ~60 مرة في الثانية ellipse(300, 200, 80, 80); // دائرة في المنتصف } `

نظام الإحداثيات: الأصل (0,0) في أعلى اليسار. x نحو اليمين. y نحو الأسفل.

الألوان: بشكل افتراضي RGB (0–255). fill(255, 0, 0) = أحمر. stroke(0) = خط أسود. noStroke() = بلا خط.

تطبيق عملي 1.1 — سكيتشي الأول

الخطوات:

1. افتح https://editor.p5js.org (حساب مجاني موصى به للحفظ)
2. استبدل الكود الموجود بـ:

`javascript function setup() { createCanvas(600, 400); background(30); noLoop(); // لا حركة الآن }

function draw() { fill(255, 200, 50); noStroke(); ellipse(300, 200, 120, 120); } `

1. انقر "تشغيل" ▶
2. عدّل: غيّر اللون والحجم والموضع
3. أضف دائرة ثانية بلون آخر

تمرين صغير: ارسم 3 أشكال (ellipse، rect، triangle) بألوان مختلفة. كل شكل يجب أن "يُعبّر" عن شيء في لوحة ألوانك الشخصية.

الوحدة 2 — الأشكال واللون والتركيب (2 ساعة)

المفهوم

الأشكال الأساسية في p5.js: javascript ellipse(x, y, w, h); // قطع ناقص مركزه (x,y) rect(x, y, w, h); // مستطيل ركنه الأعلى الأيسر (x,y) rect(x, y, w, h, r); // مستطيل بزوايا مستديرة line(x1, y1, x2, y2); // قطعة مستقيمة triangle(x1,y1, x2,y2, x3,y3); arc(x, y, w, h, start, stop); // قوس بين زاويتين (راديان) point(x, y); // نقطة

وضع HSB (أكثر سهولةً للفنانين): javascript colorMode(HSB, 360, 100, 100, 100); // H = التدرج (0-360), S = التشبع (0-100), B = السطوع (0-100), A = الشفافية (0-100) fill(30, 85, 95); // برتقالي مُشبَّع fill(200, 40, 80); // أزرق باهت

التركيب: قسّم اللوحة إلى مناطق، استخدم النسب، فكّر في الفراغ السلبي.

تطبيق عملي 2.1 — تركيب هندسي

الخطوات:

1. أنشئ لوحة 800×800
2. حدّد لوحة ألوان من 4 ألوان في HSB
3. رتّب مشهداً بـ 5 أشكال مختلفة على الأقل، 3 أحجام مختلفة
4. استخدم noStroke() على بعض الأشكال وstrokeWeight(3) على أخرى
5. صدّر الصورة: saveCanvas('تركيب', 'png') في setup()

تمرين صغير: أعد إنشاء نمط رسمته يدوياً في التطبيق 1.1 بـ p5.js. قارن الاثنين — ما الذي يتيحه الكود لا الرسم (والعكس)؟

الوحدة 3 — الحلقات والتكرار (2 ساعة)

المفهوم

حلقة for تولّد أشكالاً متكررة مع تباين مضبوط. إنها من أقوى التقنيات في البرمجة الإبداعية.

`javascript // شبكة 10×10 من الدوائر let columns = 10; let rows = 10; let size = width / columns;

for (let col = 0; col < columns; col++) { for (let row = 0; row < rows; row++) { let x = col size + size / 2; let y = row size + size / 2; fill((col 36) % 360, 80, 90); // التدرج يتغير بالعمود ellipse(x, y, size 0.8, size * 0.8); } } `

التباين في الحلقة: تغيير الحجم واللون والموضع كدالة في col وrow. هذا الفرق بين شبكة آلية وتركيب ذو بنية.

تطبيق عملي 3.1 — شبكة مع تباين

الخطوات:

1. أنشئ شبكة 8×8 من الأشكال الهندسية
2. غيّر خاصيتين وفق الموضع في الشبكة (مثال: الحجم يتناقص نحو الأسفل، التدرج يتغير من اليسار لليمين)
3. أضف rectMode(CENTER) لتوسيط المستطيلات
4. جرّب: ماذا يحدث إذا ضربت المؤشرات بدوال (sin، cos)؟

javascript // الحجم مُعدَّل بـ sin let d = size * 0.3 + sin(col * 0.8 + row * 0.5) * size * 0.3; ellipse(x, y, d, d);

تمرين صغير: من شبكتك، جد 3 معاملات مختلفة للتعديل للحصول على 3 أجواء بصرية متمايزة. احفظ الإصدارات الثلاثة.

الوحدة 4 — العشوائية والتباين المضبوط (2 ساعة)

المفهوم

random(min, max) تُرجع قيمة عشوائية بين min وmax. كل تنفيذ تتغير القيم.

randomSeed(n) يُثبّت البذرة — نفس البذرة = نفس النتيجة. أساسي لقابلية تكرار عمل ما.

noise(t) تُرجع قيماً مستمرة سلسة (ضجيج بيرلين). القيم المتجاورة متقاربة — مثالية للطبيعي.

javascript // مقارنة: عشوائية مقابل ضجيج for (let i = 0; i < 200; i++) { let x = random(width); // قفزات عشوائية let x2 = noise(i * 0.05) * width; // تقدم سلس }

map(value, min1, max1, min2, max2): تحويل نطاق إلى آخر. أساسي لمعايرة المعاملات.

javascript // ارتفاع عمود متناسب مع قيمة من 0 إلى 1 let h = map(noise(i * 0.1), 0, 1, 20, height * 0.8);

تطبيق عملي 4.1 — تركيب عشوائي قابل للتكرار

الخطوات:

1. أنشئ 50 قطعاً ناقصة موضوعة عشوائياً
2. ثبّت البذرة (randomSeed(42)) — تحقق أن السكيتش متطابق في كل تحميل
3. عيّن الحجم واللون أيضاً بـ random
4. أنشئ وضعاً ثانياً بـ noise — قارن الجماليتين
5. اجد البذرة التي تنتج أكثر التراكيب اهتماماً

تمرين صغير: أنشئ 3 تراكيب متطابقة في البنية لكن مختلفة في البذرة. أيّها تُفضّل ولماذا؟ وثّق رقم البذرة.

الوحدة 5 — الزمن والحركة والتفاعل (2 ساعة)

المفهوم

في البرمجة الإبداعية، الزمن بُعد من أبعاد الرسم.

frameCount: عدد الإطارات منذ البداية.

sin(frameCount * speed): تذبذب بين -1 و1 بتردد يتحكم فيه speed.

javascript // حجم نابض let d = 100 + sin(frameCount * 0.05) * 40; ellipse(width/2, height/2, d, d);

مسح مقابل تتبع:

• background() في draw(): يُعيد ضبط الشاشة كل إطار ← حركة نظيفة
• background() مع شفافية أو غائب: تتراكم الأشكال ← آثار

javascript // آثار: خلفية شبه شفافة background(0, 10); // RGB + ألفا

أحداث الماوس: javascript mouseX, mouseY // الموضع الحالي mouseIsPressed // الزر مضغوط function mousePressed() {... } // نقر function keyPressed() {... } // مفتاح لوحة المفاتيح

تطبيق عملي 5.1 — حركة تفاعلية

الخطوات:

1. حرّك 3 أشكال بتذبذبات sin() بترددات مختلفة
2. اجعل mouseX يتحكم في معامل (لون، سرعة، حجم)
3. مع mousePressed(): تبديل بين وضع الخلفية المتجددة ووضع الآثار
4. مع keyPressed(): احفظ إطاراً (saveCanvas()) عند ضغط 's'

تمرين صغير: جد سلوكين مختلفين وفق سرعة مؤشر الماوس. ماذا يحدث إذا سرّعت الحركة مقابل تحريكه ببطء؟

الوحدة 6 — التركيب النهائي والتصدير (2 ساعة)

المفهوم

من الاستكشاف إلى مشروع قابل للعرض: ثلاث خطوات.

1 — اختر مفهوماً: ما الفكرة التي تُوجّه التركيب؟ (نمط، بيانات، مشاعر، تحية)

2 — أطّر المعاملات:

• الدقة النهائية: createCanvas(2400, 2400) + pixelDensity(1) للدقة العالية
• لوحة ألوان محددة ومتسقة
• بذرة ثابتة أو تباين موثَّق

3 — وثّق:

• وصف المفهوم (3 جمل)
• الأدوات المستخدمة
• البذرة إن وُجدت
• العملية: ما الذي جرّبته قبل الوصول لهذه النتيجة؟

التصدير: `javascript // في setup() — نسخة ثابتة عالية الدقة function setup() { pixelDensity(2); // 2× دقة الشاشة createCanvas(1200, 1200); noLoop(); randomSeed(137); noiseSeed(137); }

function keyPressed() { if (key === 's') saveCanvas('سكيتشي', 'png'); } `

تطبيق عملي 6.1 — الإنهاء والتوثيق

الخطوات:

1. اختر سكيتشك المفضل من التطبيقات 1–5
2. حسّن التركيب (الألوان والتوازن والوضوح)
3. ثبّت البذرة (إن كانت عشوائية)
4. اكتب التوثيق القصير (انظر §المشروع)
5. صدّر بدقة عالية + شارك على OpenProcessing (https://openprocessing.org)

المشروع النهائي — "أول تركيب توليدي"

الملخص

أنشئ تركيباً توليدياً أصيلاً بـ p5.js، مستوحياً من نموذج ثقافي أو مجموعة بيانات أو ظاهرة بصرية ذات معنى بالنسبة لك.

الاشتراطات

• التقنية: p5.js (محرر ويب أو محلي)
• يجب أن يستخدم التركيب على الأقل: 1 حلقة، 1 مصدر تباين (عشوائية أو ضجيج)، 1 شكل من الحركة أو التفاعل
• قابل للتكرار: بذرة ثابتة أو تباين موثَّق
• لا صور مستوردة — كل شيء يُولَّد بالكود

المنجزات

1. ملف .js أو رابط OpenProcessing (سكيتش وظيفي)
2. توثيق قصير (صفحة واحدة): المفهوم، لوحة الألوان، المعاملات الرئيسية، البذرة، العملية
3. 3 صور PNG: نفس التركيب بـ 3 بذور مختلفة (أو 3 حالات)
4. عرض تقديمي (5 دقائق): اعرض السكيتش، اشرح 3 قرارات إبداعية

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

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

• توثيق p5.js: https://p5js.org/reference/
• محرر p5.js عبر الإنترنت: https://editor.p5js.org
• The Coding Train (دروس p5.js بالفيديو): https://www.youtube.com/c/TheCodingTrain
• OpenProcessing (مشاركة/استكشاف السكيتشات): https://openprocessing.org

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