أهداف الورشة
تعليم مبادئ البرمجة باستخدام 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