- Exercise 01-03: Rectangles w RGBA fill
- Exercise 01-05: Ellipses w RGBA fill — experimenting with color blending.
- Exercise 01-07: My Zoog sketch — creating own creature from simle shapes.
- Exercise 02-07: Custom function sketch demo — drawing red square function.
- Exercise 02-08: Line stroke weight function utilization demo
- Example 03-02: Dynamic rectangle cursor — rectangle following cursor.
- Example 03-03: Dynamic Zoog — Zoog following cursor.
- Example 03-05: Draw rectangle on mouse click
- Example 03-06: Interactive Zoog — Zoog following cursor with eyes changing. dynamically and legs drawing according to both mouse location and previous mouse location (hang out effect).
- Exercise 03-05: My Zoog in dynamic — my Zoog following mouse with dynamic eye color changing.
- Exercise 03-07: Dynamic line weight drawing — draw line with line-weight changed dynamically, based on mouse speed.
- Example 04-03: Moving circle across
x
axis - Example 04-04: Dynamic ellipse sketch — moving ellipse with variable height and fill color.
- Example 04-05: Drawing dynamic rectangle at the center — drawing dynamic rectangle at the screen center depending on mouse position. Example of system variables utilization.
- Example 04-07: Drawing variable ellipses — randomly drawing ellipses with variable colors and sizes on screen.
- Example 04-08: Flying up Zoog — drawing Zoog flying up from the bottom with randomly generated
x
coordinate and eyes color.
- Exercise 04-03: Growing circle — growing circle with
circleSize
variable. - Exercise 04-04: Four pulsating circles — four circles with pulsating
circleDiameter
variable. - Exercise 04-04: Dynamic pacific lines — pacific lines transforming to 'sand watches'.
- Exercise 04-04: Dynamic white ellipse — white ellipse folding and unfolding.
- Exercise 04-05: Responsive imaginary country flag — imaginary country flag always drawing responsively to current sketch screen size.
- Exercise 04-07: My Zoog flying along — my Zoog flying to the left with random
y
axis position. UtilizingPoint
class.
- Example 05-01: Conditional color changing based on current mouse position — conditional changing screen background color based on current mouse position (left or right screen half).
- Example 05-02: Conditional color changing based on current quarter mouse position — conditional changing screen background color based on current mouse position (one of 4 screen quarter).
- Example 05-03: Multiple rollovers — fill currently hovered screen quarter with black.
- Example 05-04: Hold down button
- Example 05-05: Button as switch
- Example 05-06: Bouncing ball — bouncing ball from left to right and backwards.
- Example 05-07: "Bouncing colors" — example of gradually changing rectangle's fill color.
- Example 05-08: Square travelling/following edges of canvas — example of using
state
for element's appearance and switching between different states. - Example 05-09: Simple gravity example — falling square with simple gravity demo. Dampening is not simulated realistically: at the end, square will be slightly bouncing forever.
- Example 05-10: Zoog and conditionals — Zoog conditionally changes moving directions when meeting screen edges.
- Exercise 05-03: Moving rectangle with constrains — Rectangle moving from left side to the center of screen and stops there.
- Exercise 05-05: Simple rollover — changing rectangle's fill color on hover.
- Exercise 05-06: Fading rollover squares — currently hovered (of 4 quarters) rollover fade to white while others, already visited ones, fade to black.
- Exercise 05-08: Move circle on mouse button pressed — circle moving from left to right edge when mouse button is pressed.
- Exercise 05-09: Bouncing ball advanced — extended bouncing ball example. Added variable color fill & radius behavior.
- Exercise 05-10: Bouncing square travelling across edges — extended square travelling example. Square is bouncing on top screen edge. TODO: complete task — rectangle should bouncing on all edges.
- Example 06-03: Drawing lines with
while
loop — drawing short vertical lines in loop. - Example 06-08: Drawing one line at time
- Example 06-09: Interactive fill rectangles loop — interactively redraw rectangles with variable fill color in
while
loop.
- Exercise 06-01: Drawing horizontal lines grid
- Exercise 06-01: Drawing circles loop — drawing circles loop from most wide to most narrow. Color fill calculated programmatically based on circle's number: the narrowest circle is the most dark one. Added circle number threshold variable.
- Exercise 06-08: Random colored rectangle grid loop — drawing grid of randomly colored rectangles in the
for
loop.
- Example 07-06: Drawing bouncing car with fns — drawing bouncing on x-axis car.
- Example 08-01: A Car class and a Car object — demo of class utilization. Class in separate file utilization.
- Example 08-02: Two Car objects sketch — two car blocks moving along.
- Exercise 08-05: Two bouncing balls — two bouncing balls with common class.
- Example 09-08: A snake following the mouse — store current mouse location's coords in two arrays. On each draw shifting elements of those arrays, add current location to the and and draw ellipses based on coords in two arrays and current element's count as size of ellipse.
- Exercise 09-09: An Array of Car objects — drawing 100 instances of Car class.
- Exercise 09-10: Interactive stripes — moving vertical stripes changing color on mouse hover.
- Exercise 0-0: — .
- Exercise 09-01: OOP snake following the mouse — a snake following the mouse in OOP style.
- Example 0-0: — .
- Exercise 0-0: — .