WireFrameJS

Mastodon

These are ports from WireFrame from Python (usually using Pygame Zero) to JS (usually using p5, which itself is a port of Processing).

Where possible I've used modern JS and native modules.

Contents

1. EXPLOSIONS (source, discussion)
2. GALAXIAN2 (source) Work in progress
3. PARALLAX (source)
4. THRUSTER (source)
5. HIGHSCORE (source)
6. TAIL (source, discussion)
7. JUMP_PHYSICS (source)
8. MISSILE (source)
9. INVADERS (source, discussion)
10. SPAWN (source)
11. BREAKOUT (source)
12. BOMBERMAN (source) Work in progress
13. STARS (source) Work in progress
14. WALKCYCLE (source) Work in progress
15. ANT ATTACK (source)
16. MAZE (source), and with lots of inspiration from The Coding Train. As well as MONSTERMAZE (source).
17. ROLLING_ROAD (source) Work in progress but mostly there TBH, bit of tidying required for the Car is all
18. SKATEBOARDING (source)
19. BOMBJACK (source)
20. BRAID (source)
21. ZELDA LIKE (source)
22. GUITAR HERO (source)
23. GAME AND WATCH (source)

Web Components

• wc-slider Mentioned in Web Tools Weekly
• wc-pie-chart Mentioned in Web Tools Weekly

Miscellaneous

• DICE
• p5Pong (Coding Challenge #67: Pong!, Intro to radians, JavaScript – Degree & Radian Conversion)
• p5Snake Snake built with p5 and native JavaScript modules, instructions:
  1. Download this repo and extract it to a folder you'll remember.
  2. Install http-server (instructions via the link).
  3. Open a terminal window and navigate to the folder containing the extracted code.
  4. Enter http-server in the terminal.
  5. Play Snake
• p5FROGGER Frogger built with p5 and native JavaScript modules, instructions:
  1. Download this repo and extract it to a folder you'll remember.
  2. Install http-server (instructions via the link).
  3. Open a terminal window and navigate to the folder containing the extracted code.
  4. Enter http-server in the terminal.
  5. Play Frogger
• p5PACMAN Work in progress
• OPART An experiment for my Dad
• PENDULUM An experiment for a friend, initally created using Vue and SCSS, this version is much clearer though.
• FLIP COUNTER An experiment using CSS transforms, initally based on a Digital Counter
• PARALLAX_DOORWAY Just testing something.
• ROTATING_ARCS FB Challenge ;-)
• REACT_DICE_GAME That was fun
• CUBE Thanks Pops!
• USER_TEST Quick test if this works on IE11
• p5CLOCK2x3 A small p5 Clock with a minimal typeface
• p5CLOCK5x6 A larger p5 Clock with a different typeface - I've been tweaking this one, and I'm not sure I like it TBH.
• EMPIRE Lots of code snippets from various coding competitions, mostly from Empire of Code.
• ZOMBIE Lots of stuff with async/await
• SIERPINSKI, I decided to check a video on TikTok. Every so often it buggers up though... fixed it now.
• HEDGECLOCK, A clock inspired by the work of TransientCode.
• SLIDECLOCK, A clock inspired by the work of hans andersson.
• SLIDECLOCKDIFFERENT, A clock inspired by the work above, but I got to thinking about how we didn't need vertically sliding elements; rather atomic elements that could move one pixel horizontally, vertically or diagonally. Heavy head=scratching to prevent movement of over one pixel and to ensure it remained elegant.
• AMI, Messing about with About AM screen2M from Pinterest and Wako Co., Ltd
• AMI_ALTERED_PATTERN, Same as above, but with an offset grid.
• AM_SIMPLE, Similar to the above, but with just cyan and magenta, and animated.
• AM_ALTERED_PATTERN, Same as above, but with an offset grid.
• DISKS, More messing about after browsing Pinterest - also an excuse to play with Affinity Designer.
• 3GIRLS, Playing with parallax.
• ONE, more playing with parallax.