- Urim "class 2": Spring 2022 - shared summary
- Last modified: 06/06/2022
- Links
Code can be found here - fill free to review, copy-paste and re-use:- More links:
Upload stuff to arnon
Your own artwork- Your own sketches (please write to me if your own link is wrong or missing)
- Yael R.S.
- Yali S.
- Lia R.
- Yoni R.
- Libi A.
- Gal A.
- Alma L.
- Itay A.
- The course's main web page:
- P5JS
- Main
- The editor
- contact arnon:
- Week 1
- No lesson on 28/2/2022
- Lesson 1 2/3/2022
- Content
- Intro to creative coding
- Examples and stories... static visual arts, animations, interactive art
- Writing code FOR creating cool stuff
- Meta level understanding
- The concept of writing commands to the computer. Coding
- The sandbox called Processing or it's child - P5JS
- Related languages - Java, Javascript
- p5js.org --> our work environment
- Concepts
- Pixels in the screen are called by their X and Y.. starting from the top-left corner
- "Default" / "By default" - things that have their own "basic" behavior in case I didn't specifically say what to do.
- Coding:
- Processing program structure
- setup() & draw()
where draw() repeats itself constantly
- Primitives
- point(x,y);
- circle (x,y, diameter);
- ellipse (x,y,width, height);
- Comments
- // lines of text that start with "//" are ignored by the computer and are aimed for "people"
// (or for temporarily hiding code instead of deleting it)
- Assignments
- Simple primitives placement
- Babushka
- of circles
note - smaller on top of larger...
- Week 2
- Lesson 2 - 7/3/2022
- Content
- A good long summary of lesson1
- 2 more primitives:recatngle and line
- rect (x,y, width, height);
- line(x1,y1,x2,y2);
- Assignments
- Babushka of rectangles
- lines from top left corner, spread to the right side from top to bottom
- Lesson 3 - 9/3/2022
- Content
- COLORS!
- We saw 3 ways to describe colors:
- 1. Simplest: - just use the name of the color:
- 'red', 'green', 'yellow', 'black', ........
- 2. Use RGB - 3 numbers: Red value, Green value, Blue value and mix them together:
- (255,0,0) is hard red
(255,40,0) is red, with a little bit of green in it..
and so on
- 3. Add transparency - use 4 numbers - R,G,B, Transparency:
- (10,10,255,100) is a strong BLUE with tiny red and green in it with transparency of 100
where 255 - is not transparent at all
and 0 is completely transparent
- We learned that the computer expects to know which colors to use for FILL and STROKE of the shape, BEFORE going to paint it.
So we would first pick colors and only then command it to paint- fill(240,10,10,100);
stroke(0,0,0);
circle(100,100,40);
- Defaults
- If I don't tell it which color it will use be default black for stroke and white for fill
- We saw that when searching google for "RGB online" we can get websites which show us all the colors that can be reached via RGB and allows us to select colors nicely
- We also saw:
- noFill();
noStroke();
strokeWeight(5); // means: set the width (or the weight) of the stroke brush to 5. (de default is 1)
- Inspiration
- A more advanced code (in Processing) but inspirational results -
A recursive tree.
We'll talk about it further later... just wanted to show for now. There are quite a few concepts there which you haven't learned yet.
- Assingments
- We mainly created the Olympics symbol
- We learned a few ways to plan on a paper beforehand: by calculations and just by looking at a drawing
- Week 3
- Lesson 4 14/2/2022
- Content
- 2 (or 3) big new concepts we STARTED to tackle:
- Variables
- A box with content for me:
- Step 1: Declare:
- let a;
- Step 2: Assign value:
- a=30;
- a=a+1;
- a=a-3;
- a = b+12; // assuming b was declared before, and already has an initial value
- Note: you can also declare and assign on the same command:
- let x = 100;
- WHERE AND HOW TO USE IT!? - We've just started to see...
- Loops
- As mentioned before - the function draw() is called repeatedly by the computer. This is ONE WAY for "looping". (we'll learn other ways to loop soon)
- we started to understand the power of something that happens again and again with a slight change.
- Variables within loops
- We started to understand that variables within loop can change themselves repeatedly, like a=a+1 again and again and again, or x=x*0.9 or b=b-3......
- Assignments
- We played "freely" with variables within the function draw():
move, resize and color shapes with (and without) refreshing the background on each round getting 2 different effects
Purim vacation 16/3/2022
- Week 4
- Lesson 5 21/3/2022
- Content
- We advanced in understanding variables and what can be done with them:
- variables - recap and refine...
- Arguments (to a function):
- circle (a. 100, 50);
- use 'a' by itself , or use a+7, a*2, etc. --> as arguments
circle(a*2, b-3, c/5);
- "Feed" other variables:
- x=y+15;
- Self assign:
- x=x+5;
x=x/2;
x=x*3.5;
- Functions and variables --> arguments:
expectation, internal usage, external usage- Use as arguments within functions:
- function flower(x,y) {
circle (x,y,40);
rect(x-15,y-15,30);
} - when calling flower, you MUST provide 2 raguments. they can be numbers of variables.
- variables of type "string" - (we didn't mention the term. we just called it text within a variable)
- let myText = "100";
let x="hi arnon";
- print (x); // prints stuff to the console (useful for the developer herself)
- text("hi", 10,40); //place the text "hi" in x=10. y=40 on the canvas itself !!
- Administrations
- Note above - your sketches folder is now publicly accessible. Please let me know if you have a problem with it, personally. I confirmed with kids in the class today that it's cool.
- Methodologies
- We omitted (commented out or just deleted) the function draw() for the rest of the day today
- Assignments
- create a flower function that takes 2 arguments x,y
- maybe 3:
x,y,hue
or x,y,size
- lesson 6 23/3/2022
- Content
- colors - HSB mode
- //after writing:
colorMode (HSB, 255);
// we no longer use RGB (Red Green Blue) color mode, but rather Hue Saturation Brightness
---> This allows us convenient flow between hue גוונים of colors, for instance when creating a rainbow style gradual visuals
-
FOR loops.- for (let i=0; i<100; i = i+1) {
//body of the loop in here
}- 4 parts to the FOR loop:
- Loop declaration:
- 1. initiation
- 2. condition (as long as i<100 execute the body of the loop)
- 3. advance (i=i+1; or any other action that may be limited by the condition (i<100))
- 4. Loop body
- Methodologies
- We still tried to work without the function draw() so that we don't get confused between the FOR loop and draw() (which works as a loop by itself, as it's being called again and again by "the system")
- Assignments
- At class
- Rainbow - we started to play with gradual color changes (using the HUE value of our drawings)
- You mainly played freely with your own function and with a FOR loop
- At home - a small recap homework assignment for you all, to do at the beginning of April, between 1-3 of April:
- Read through my shared summary and spend a few minutes to think and share thoughts about project you'll work on in our following lesson (on 6/4/2022)
- --->>> Fill in this form:
- Administrations
- We'll miss 3 lessons now, then meet once on 6/4/2022, then passover vacation!
- Week 5
- No lessons this week
- Week 6
- 4/62022 No lesson
- Lesson 7 6/4/2022
- Working on a project by yourselves
- Content:
- Some of you learned:
- Random(); //returns a random number between 0 and 1
//Or:
Random(n); // a random number between 0 and n - For loop within a For loop!!! we'll get back to this together.
- P5JS Reference --> how to explore and learn more things by yourselves. We'll get back to this together
- Week 7
- Passover holiday - No lessons this week
- Week 8
- Passover holiday - No lessons this week
- Week 9
- Lesson 8 25/4/2022
- Demo/Inspiration
- Interactive bouncing shapes with sound
- Content
- Condition - if / else
- if (_a condition_ ) { //...is true
//do this...
} else { //...the condition is false
//do that instead
...} - simple example:
- P5JS reference:
- Notes:
- The condition can be based on math, like X>50 (which will be true if, for instance x is 100 or x is 51... but will be false if, for instance, x is 30 or x is even 50 !)
- The condition can be a logical variable or a logical statement. for instance:
- let x=true;
if (x) {
print ("YES!");
}- "Yes!" will be printed in this case
- Assingments
- A blip
- a growing circle, until a limited radius, then starting over.
- A bouncing ball
- Right-left
- Right-left & up-down
- Lesson 9 27/4/2022
- Content
- Recap IF with an exercise (see "Assignment" below)
- Showed and discussed AND and OR: && and ||
- Assignment
- A traveling circle within lines constrains
- See reference image.
- Useful code to start with:
(Using vx vy - watch code and learn) - Turn ball red when it reaches the end..
- Week 10
- Lesson 10 2/5/2022
- Content
- INTERACTION !
- information: mouseX, mouseY
status: if (mouseIsPressed)
event: function mousePressed()
- Side topic - how to use an external image
- Create a folder
- click the arrow on the left side of sketch.js
- create folder
- upload file
- Preload it ! so it's available before starting to show things..
- Present it whenever you want. sometimes inside setup or sometimes inside draw
- Assignment
- We continued working on IF project for the ball in the trail...
- I added the background image to assist:
- 1. note how planning can help you
- 2. learn how to add an image
- Week 11
- Lesson 11, 9/5/2022
- Content
- We learned to identify whether or not a click is "within a rect"
- let x = 100;
let y = 200;
let w = 40;
let h = 30;
rect (x,y,w,h);
if (mouseX>x && mouseX <x+w && mouseY>y && mouseY<y+h) print ("YES! I'm inside");
- Assignments
- A "draw with a shape" application - don't clear canvas, just keep placing a shape where the mouse is.
- We used a triangle (but saw it was quite confusing...)
- A rectangle button to clear the canvas
- Lesson 12, 11/5/2022
- Content
- Nothing new
- Recap
- בשבוע שעבר הסתבכנו ממש עם הזזת משולש...
השיעור הזה ראינו הסבר על הלוח ("דף ועט") איך מתכננים כזה דבר - הזזת עיגול קטן. ונחזור להשתקפות.
- I hope we have now a better sense of mouseX and mouseY as variables which we can use.
- a=mouseX+12;
- circle (a, mouseY*2, 30);
- Assignment
- Reflection
- Week 12
- Lesson 13, 16/5/2022
- Plan
- Create beautiful art to print on stuff
- Administrations
- Upload files to Arnon (see link in our website)
- Content
- scale, rotate, translate + resetMatrix
- + angleMode(DEGRES)
- + save !
- Assignments
- Playing with scale, rotate, translate
- How to play:
- scale: from small to large or vice versa
- location - modify along the way. constant translation, translate before rotate or after
- rotation angle
- the shape we use itself
- the trigger to start
- the initial location
- translate before rotate, and after rotate
- shape - not centered around 0
- create magnificent images which you'd like to print
- save images !!!
- At home - print!
- Send them to print
- Print on paper, on slides, on stickers
- Papiroh, osishkin 39 ramat hasharon
- print on slides
להדפיס על שקפים- לקחת בחשבון מחיר הדפסה לדף (אולי 14 שקלים)
- למי שמתכנן להדפיס כמה תמונות (או תמונה אוחת כמה פעמים) אני מציע לסדר תמונות בתוך מסמך
WORD
ולשלוח אותו להדפסה
- אפשר לחתוך שם את התמונות
- אפשר לעטוף שם בלמינציה
- print many slides and do something with them
- אפשר לעשות עם זה אהיל או מובייל. מי שמעוניין שידבר איתי
- Print on shirts
- אגדה של בגד - אוסישקין 23
- ממליץ להדפיס על חולצת דרייפיט לבנה
white dryfit
- Lesson 14 18/5/2022
- Content
- Arrays!!
- declare, set, use
- 3 ways to set (there is a nice 4th way which we'll skip for now)
- direct one by one
- let x = [];
- direct full set
- x[0] = 10;
x[1] = 20;
x[2] = 30;
- inside a for loop
- for (let i = 0; i < 30; i++) {
x[i] = 10 * i;
}
- And we also looked at a FOR loop within a FOR loop...
- for (let i = 0; i < 30; i++) {
for (let j = i; j < 30; j++) {
line(x[j], y[j], x[i], y[i]);
}
- Assinments
- מסמרים וחוטים
- שורה מול נקודה
- שורה וטור מול נקודה
- שורה מול העכבר בתנועה
- אלכסון..
- ולקינוח - שורה מול טור - מתיחת חוט בין כל מסמר בשורה לכל מסמר בטור - לולאה בתוך לולאה
- Week 13
- Lesson 15 23/5/2022
- Content
- Continue arrays.
- PVector
- - an object that has x and y values and can serve to hold a full location of a point.
- Used Arnon's function to get points on a circle
- pointsOnCircle(arrayOfPVectors, numberOfPoints, Radius)
- Advanced:
- "call by value" vs. "call by reference"
- When calling arnon's function pointsOnCircle(...) - you must provide me an array of PVector objects and ARNON WILL MODIFY THIS ARRAY for you.
- Note this is not the case with "regular arguments" you pass to a function...
- resetMatrix()
- Is used to clear the stage after translate(...) or scale(...) or rotate(..) where called.
- Goal
- Planning !!
- Have artwork to present & hang in the class at home!
- Assignments
- מסמרים וחוטים
- תכנון מוקדם
- מעגלים, ישירם, צורות חופשיות
- צבעים
- תמונה להדפסה ולמסגור
- מעגל
- מעגלים
- חוטים מאיפה לאן
- אולימפיאדה, יוצאת מנקודה אחת, צבעונית
- לעקוב אחרי צורה
- ממליץ שכל הציור יבוצע ללא DRAW אלא אם כן צריכים אינטראקטיביות ליצירה או בכלל
- Lesson 16 25/5/2022
- Content
- Playing sounds:
Sound files
Midi notes
- Using the keyboard
- Assignments
- text - fill the screen with texts.
- put characters in a line..
- break words (identify SPACE. ENTER)
- keep sentences and move them around
- colors, sizes, locations, transparency
- Start thinking about final project which we'll work on for the next few lessons:
beautiful "musical instrument"
or a beautiful sounds player
- Week 14
- Lesson 17 30/5/2022
- Final project planning
- A beautiful musical instrument. Can play sounds and not necessarily music tones.
- Lesson 18 1/6/2022
- Working on final project
- Specific useful sketches / examples from Arnon's sketches:
- midi
- 16..
- sound files
- 16..
- image files
- 10..
- isInside + intersects
- 18..
- array of arrays
- 18..
- Week 15
- No lesson (shavuot holiday)
- Lesson 19
- Please fill-in self assessment form today
חובה לענות היום על שאלון להערכה עצמית - Complete (main parts of) final project