أهداف الورشة
تعليم مبادئ البرمجة باستخدام p5.js
*Setup and Draw loops
* Simple shapes and xy coordinate system
* RGB colors, Stroke, Strokeweight, fill functions
* random function
* for loops and variables
* save image
*Setup and Draw loops
* Simple shapes and xy coordinate system
* RGB colors, Stroke, Strokeweight, fill functions
* random function
* for loops and variables
* save image
مناقشة
| الوقت | الوصف | ملاحظات | ||
|---|---|---|---|---|
| هنعمل ايه النهاردة | 5 | |||
مناقشة
| الوقت | الوصف | ملاحظات | ||
|---|---|---|---|---|
| ايه هو p5 | 5 | p5 هو مكتبة برمجة yappa yappa yappa | ||
نشاط
| الوقت | الوصف | ملاحظات | ||
|---|---|---|---|---|
| نفتح p5 web editor | 5 | يفتحوا الرابط اللي احنا هنبعتهولهم وهيبقى مجهز بشكل مبدأي | هنبقى خالقين حسابات لكل جهاز في المعمل عشان هم يقدروا يحفظوا عملهم واحنا نقدر نبعتلهم ملفات | |
| شرح عام عن الeditor | 10 | الmenus ايه اللي مكتوب - setup و draw - createcanvas - background - basic shapes | have to have a very well arabic documented code ready | |
| العبوا بالارقام اللي في الاشكال | 5 | غيروا في الارقام وشوفوا ايه اللي بيتغير. حاولوا تعرفوا الارقام ديه ايه. | ||
| شرح الcoordinates | 10 | تنويه على ان createcanvas الارقام ديه هي الطول والعرض وده برده ممكن تغيروه | ||
| اعملوا رسمة بالاشكات | 5 | احنا نلف لو حد عنده مشاكل وهم يقعدوا يرسموا | ||
نشاط
| الوقت | الوصف | ملاحظات | ||
|---|---|---|---|---|
| تعريف بالالوان | 10 | يطلب من المشاركين اللعب في ارقام الخلفية ثم نشرح فكرة الالوان في الكمبيوتر + بوستر التعريف https://coolors.co/aaaaaa | ||
| الاشكال مكونة من ايه + الوان | 10 | الاشكال متغيرة من fill و stroke و strokeWeight نعرف المشاركين بالsyntax وباهمية ترتيب الاوامر | ||
| ارسموا | 10 | ترك المشاركين للعب ونلف عليهم نساعد اي حد | ||
نشاط
| الوقت | الوصف | ملاحظات | ||
|---|---|---|---|---|
| random | 10 | يتم الشرح للمشاركين ما معنى random والعشوائية ما هو الsyntax random(x), random(x,y) | ||
| تجربة العشوئة | 5 | المشاركين يطالبوا باللعب بالعشوئة وتبديل الارقام بrandom ملاحظة الفرق في موقع background بين setup و draw لو في setup الرسومات كلها بتترسم على بعض. لو في draw رسمة جديدة كل frame يعني ايه frame | ||
نشاط
| الوقت | الوصف | ملاحظات | ||
|---|---|---|---|---|
| for loops | 10 | شرح ما هو الfor loop شرح الsyntax يعني ايه let ويعني ايه متغيرات (variables) وليه ممكن نستخدمه لو عايزين نرسم 500 دائرة مش هنقعد نكتبهم واحدة واحدة شرح قابلية استخدام x او متغير الloop كرقم في الكود | ||
| شرح save canvas | 5 | استخدام دالة saveCanvas لحفظ الصورة | ||
| اللعب بالloop وحفظ | 15 | يطالب كل مشارك باللعب بكل ما تعلمه من الورشة ويحفظها ونطبعها ونعلقها | ||
التعليقات
المزيد
shukiepie
2022-06-09 17:21:51
محتاجين نكتب الكود المبدأي محتاجين posters تصميم وطباعة ل - coordinates - RGB - shape syntax - for loop syntax