Coding Session #1
You live in different houses, how would communicate at night?
You can use light and decode the message! How?
Ok, let’s do this!
A - 1 blink
B - 2 blinks
C - 3 Blinks
…
Z - 26 Blinks
And longer pause between words
How long it will take to say “How are you”
131 Blinks!
Solution?
Morse code
2 kinds of blinks:
It would take 32 blinks for “How are you” instead of 131.
What does it mean?
How would you communicate during the day?
Use bulb and wire it!
Use 2 of them!
And I have a question!
How people communicate 160 years ago?
Answer is Telegraph! But you need at least Electricity
Ok, now let’s talk about the numbers!
Why numbers? Because it is universal in all languages!
But there are could be a trick!
base 8 or Octal
base 10
base 4 or Quaternary
base 2 or Binary
Computers use Binary i.e. 0 and 1
You may hear word Bit
What is bit?
For example, 110100 is a Binary Number. A “bit” is a single binary digit. The number 110100 has 6 bits.
All data in a modern digital computer is ultimately stored and transmitted as a series of zeros and ones. Everything from our apps, photos, and programs is transmitted in a series of zeros and ones.
Every computer is made up of billions of bits. A bit is short for Binary Digits and each bit is read by the computer as either on or off. The on and off values are represented by the numbers 1 and 0. Computers use billions of these sequences to store together complex information.
What is bitmap?
Bitmap image files are able to store large images by breaking them down into smaller pieces.
Bitmaps are composed of a series of small dots called pixels.
When looked at up close, a bitmap image might just look like a series of small squares.
What is Pixel?
A pixel is a little tiny square that is filled with a color. We use pixels to see pictures on our computers. Each pixel is like a building block used to create something bigger.
Vacuum clean!
Let’s draw a path how would you clean the room!
How I would clean the room!
How robot will do it?
How to describe the algorithm? Use Flowchart!
New word alert! Sequence!
New word alert! Selection!
New word alert! Repetition!
Exercise - create algorithm
Exercise - create algorithm 2
The Foos
https://thefoos.com/webgl
Think & Learn Code-a-Pillar App
Daisy the Dinosaur App
Scratch Jr.
https://www.scratchjr.org/
Scratch
https://scratch.mit.edu/
Exercise for today -> Let’s Dance
https://code.org/dance
Coding Art Session #2
Pixel art
Pixel Animation
What should we know?
Pixel
Pixel is the smallest element of picture.
Resolution
The number of pixels used for creating a picture calls RESOLUTION.
More Pixels -> better picture.
Resolution
Pac Man game example
288 pixels
224 pixels
How many pixels do we have here?
Resolutions Nowadays
Standard Definition (480p)
High Definition (720p)
Full High Definition (1080p)
Ultra High Definition (2160p)
TV Resolution 1080p
1080 pixels
1920 pixels
How many pixels do we have here?
Phone Resolution 1080p
What is Megapixel?
Megapixel = 1,000,000 pixels!
Iphone 14 - 48 MP camera
Human Eye Resolution
576 megapixels
What animal has the sharpest eye?
Pixel Art
Pixel Art -> dot Art
started in 80s and 90s within video games
Pixel art
Pixel art is a digital art form where color is applied to individual pixels to create an image.
Art is saved in file format GIF or PNG.
JPEG is good for photo, but not for Pixel Art.
2 Forms of pixel art
isometric looks like 3d
non isometric looks like 2d
What is Sprite?
Sprite is the visual building blocks for animation.
We can create 32x32 or 96x96
What is Animation?
Animation is the process of creating images that when played together give the illusion of motion.
Early Animation
Early Animation
Walt Disney
Let’s create one using Piskelapp.com
Before start - try to think about animation you would like to have, create a sketch
What will we build?
Dithering - mix 2 colors
Adding Layers
I have now a Picture of a Robot
Now we can build the animation
Key Frame and Between Frame