- Urim Class1: 1.2022
Shared Summary- Last modified: 17/2/2022
- Links
Code can be found here - fill free to review, copy-paste and re-use:- Your artwork
- Week4
- Week5
- Week6 - code mainly
- More links
- contact arnon:
- Upload stuff to arnon
- This page can also be reached by:
- Not in use for now:
- Download processing
- Week1
- 10/1/2022 & 12/1/2022
- Content
- Meta level understanding
- The concept of writing commands to the computer. Coding
- The sandbox called Processing
- Coding:
- Primitives
- point(x,y);
- line(x1,y1, x2,y2);
- circle (x,y, diameter);
- ellipse (x,y,width, height);
- We also later (week 5) mentioned:
- rect (x,y, width, height);
- Processing program structure
- Where draw() repeats itself constantly
- Example:
- void setup(){
size(600,400);
}
void draw(){
line(20,40,90,90);
}
- Concepts:
- Looping
- first loop as done by draw() by itself
- Variables
- int x=50;
- Declaration:
- int x;
- Assignment:
- x=50;
- x=x+1;
The power of variables in loops- Example:
- int x=50;
void setup(){
size(600,400);
}
void draw(){
circle (20,40,x);
x=x+1;
}
- Assignments
- Simple primitives placement
- Vanishing point - נקודת מגוז
- Babushka
- Week2
- lesson 1 - 17/1/2022 - There was no lesson today
- lesson 2 -19/1/2022
- Content
- We went thgough vars and draw() loop again and you played with it by yourselves
- Primitives
- triangle(x1,y1, x2,y2, x3, y3);
- background(grayLevel); command
- comments in code -
- //this row is ignored by the computer...
- sample code:
- int x;
void setup() {
size(800, 600);
x=60;
}
void draw() {
// this is ignored. useful for me only. it is called "comment"... he-a-ra.
background(200);
circle(100+x, 100, 40);
x=x+1;
}
- Assignments
- Moving circle
- Moving circle without trails
- solution 1 - "trick" with a big circle in the background
- solution 2 - background(100);
- Advanced / home -
- a circle running from left to right, and starts over after disappearing... (with your current tools)
- Week3
- lesson 1 - 24/1/2022
- Content
- "if" statement
- if (something) {
do some things
}
- Assignments
- A circle running from left to right, and starts over after disappearing... (with your current tools)
- first by tricking our mind - running 2 circles..
Note this is just a trick... it's not the "real solution".- Code:
- int x;
void setup() {
size(1000, 800);
x=0;
}
void draw() {
background(200);
circle(x, 200, 100);
circle(x-1000, 200, 100);
x=x+10;
}
- then using the IF statement:
- Code:
- int x;
void setup() {
size(1000, 800);
x=0;
}
void draw() {
background(200);
circle(x, 200, 100);
x=x+10;
if (x>1000) {
x=0;
}
}
- Then we wanted to bounce the circle from side to side.
- I wanted x to grow, until reaching 1000
and then shrink, until reaching 0.
Growing means adding to it x=x+10 and again +10 and again +10...
Shrinking means substructing: x = x-10 and again -10 and again -10
we can use a variable to be +1 or -1:- Code
- int x;
int dir;
void setup() {
size(1000, 800);
x=0;
dir = 1;
}
void draw() {
background(200);
circle(x, 200, 100);
x=x+dir*10;
if (x>1000) {
dir = dir*(-1);
}
if (x<0) {
dir = dir*(-1);
}
}
- At home - just try and understand what we did at the end of the lesson
- lesson 2 - 26/1/2022
- Content
- If else
- "==" is like the quality we know from math...
- if (x==3) ....
- colors !!
- RGB
- background(255,0,0);
- println("yes!");
- Assignments
- We clarified the code of the bouncing ball
- We changed the color of the ball each time it hit a well
- -- see code in the link that appears at the top of this page...
- Week4
- lesson 1 - 31/1/2022
- Status
- We played today with the bouncing ball.
I learned that the logic was too complicated for us for the current stage. - I suggest to check-out code from the class (and also my refined final version of the bouncing ball)
- Content
- No new concepts were introduced.
- Class assignments
- Some of you worked in class on trying to refine our bouncing ball:
- כמו שלנו אבל עם שיפור קטנצ'יק - שרק יפגע בקיר ויסתובב,
ולא כמו שעכשיו - שהוא קצת עובר את הקיר - כמו שלנו - אבל שיטייל מלמעלה למטה
- כמו שלנו, אבל שיעוף באלכסונים.
- שיחליף צבע (כל פעם לצבע אחר) כל התנגשות עם קיר
- lesson 2 - 2/2/22
- Links
- SAMPLE CODE - start by copying this code and saving it locally:
- Play with it (follow "TODO" instructions in the code
- Upload to Arnon when you like the results
- Your artwork can be found here
- Content
- We just played with code. No logic. just tried to see what we're getting.
We got a lot of unexpected things. some of them were cool. - The playground: a FOR loop, in which we:
- draw a simple shape
- rotate it
- scale it
- "translate" it (that is - shifting it's relative location)
- Ah, we also ran into the HSB color mode, and to transparency.
- We ended up creating rainbows and fractal shapes
- To be continued
- - All of the above to be discussed again
- Week5
- lesson 1 - 7/2/2022
- Links
- Sample code to start with
- Your artwork can be found here
- Content
- Deeper understanding of :
- HSB color mode
- Hue, Saturation, Brightness (+ Transparency)
- Translate (x,y);
- Rotate (radians(x)); // x degrees
- Scale (x); //where if x==1 the scale as is now.. Greater than 1 - enlarge. Smaller than 1 - shrink
- Creating my own command - flower() and calling it
- void flower() {
// do stuff whenever someone calls "flower()...
}
- Also, interestingly - Alma used a pencil and a paper to plan her flower...
- lesson 2 - 9/2/2022
- Content
- INTERACTIVITY !
- mouseX, mouseY - the computer's way to tell us where the mouse is
- Events - the computer "shouts" to us when certain events take place, and we can do stuff when they are called:
- mousePressed()
- mouseDragged()
- We mentioned the REFERENCE section, where all the words in Processing language can be found.
- Find it via the HELP menu, or often by right-clicking a word like "mouseX" in the code
- We started to discuss - functions with arguments - how do I pass arguments to my "flower"...
We'll get back to that next week.void draw(){
flower(mouseX);
}
void flower (int a) {
// the agreement says: when you call me, you MUST send me an int...
// I will call it "a" internally... for instance:
println(a);
circle (200,200,a);
}
- We also mentioned storke(120,200,200); to control the color of the outside of the shapes, or "noStroke()" if we want not to have any stroke..
- Homework assignment
- Week6
- lesson 1 - 14/2/2022
- We took time to do the homework assignment from last week
- We started to work on our final projects
- Content
- Some of you ran into specific challenges, and so we learned:
- float
- - a "box" for floating point numbers, like 1.25 (as opposed to INTEGER which only holds מספרים שלמים)
- functions with arguments
- void flour(int x){...} -- a way to pass stuff into my flower, just like how we pass x,y,d into circle when we call it: circle (100,120, 30);
- Homework assignment
- lesson 2 - 16/2/2022
- We finalized final projects and presented them.
WELL DONE to all who participated !! - Content
- In my own homework assignment -
in the simpler versions I wrote code based on what you already know now.
In the 3rd version of my rainbow I added:- Playing sound
- You can read about it here:
- RANDOM, to "shake" the arcs
- ARRAY of integers
- AND inside IF statement: If x>2 && x<5
means if x is greater than 2 and also - x is lesser than 5 - + I used FOR loops, again
(FOR loops was never really explained)
- Code for my homework assignments can be found where all the code from the class can be found - in Git -
Hope you continue to creatively write code!
Contact me always to show me your cool stuff.
