Skip to content

README.md

Latest commit

 

History

History
219 lines (158 loc) · 8.23 KB

README.md

File metadata and controls

219 lines (158 loc) · 8.23 KB

🦉 A Tea Daze 🛠️ My Projects

main_github_header

🎲 Yahtzee

The classic dice game written in native JavaScript and jQuery

💻📱 Desktop / Mobile

yahtzee_screenshot

🃏 Basic Blackjack

A simple blackjack app written in (mostly) native JavaScript. Uses some jQuery for cleaner syntax. No additional libraries or anything fancy

💻 Desktop | 📱 Mobile

blackjack_banner

JaNK  TaBLe

Visualize a 2-dimensional array with a table

💻 Desktop

banner

🔳 Emoji Table

Prints emojis in a table with 10 columns. Clicking an emoji copies it to the clipboard

💻📱 Desktop / Mobile (landscape mode highly recommended for mobile)

emoji_table-repo_banner

🌈 Rainbow Noise

A time-waster app: draw with random shapes and patterns on a JavaScript canvas

💻 Desktop | 📱 Mobile

rainbow_noise-repo_banner

Features

  • Draw abstract shapes with your mouse or touch screen
    • New patterns emerge from random lines overlapping
  • Run animations automatically (or combine them with drawing)
  • 13 color palettes
  • Keyboard support (desktop version)

Color Palettes

  • 🌈 Faded: rainbow with desaturated colors
  • 🌈 Rainbow: classic rainbow (red, orange, yellow, green, blue, indigo, violet)
  • 🔥 Fire: warm and inviting
  • 🧊 Ice: cool and refreshing
  • 📊 RGB: red, green, blue
  • ✨ CMY: cyan, magenta, yellow
  • 🦜 CGA-8: an old PC/DOS video mode (8-color)
  • 🦜 CGA-16: full 16-color CGA palette (minus pure black)
  • 🎨 Pyxel: default color palette for Pyxel Edit
  • 🟩 Gameboy: as green and hideous as it was in the 90s
  • 🧨 Patriot: a greater union (red, white, and blue)
  • 🏁 Grayscale: everything from dim gray to off-white
  • 🔱 Ukraine: the sky and fields of a beautiful nation

Screenshots

  Type of Screenshot
🖌️ Hand drawn
🎲 Randomly generated

⧎ Triangle Web 🖌️ Faded

triangles-faded

▧ Line Scatter 🖌️ Ice

line_scatter-ice

✺ Starburst 🎲 Fire

starburst-fire

⧎ Triangle Web 🎲 CGA-8

triangles-cga8

▧ Line Scatter 🎲 RGB

line_scatter-rgb

⧎ Triangle Web 🖌️ Grayscale

line_scatter-grayscale

✺ Starburst 🎲 Patriot

starburst

⧎ Triangle Web + ▧ Line Scatter + ✺ Starburst 🎲 Faded

mix-faded

💻 Desktop

screenshot-faded

Keyboard Shortcuts

General

Key  
R Run animation
P Pause animation
C Clear screen
Enter Toggle free draw mode
Spacebar Next palette
? Help
O Origin reset (center)
* Random palette

Animation Select

Key  
T Triangle web
L Line scatter
S Starburst

Palettes

Key  
D Faded
A Rainbow (classic)
F Fire
I Ice
R RGB
M CMY
8 CGA-8
6 CGA-16
X Pyxel Edit
Y Gameboy
U USA
G Grayscale
K Ukraine

On-screen controls

Button Key  
Spacebar Space Select the next palette
Random * Select a random palette
E Enter Enable or disable free draw mode
? ? Print help screen (overwrites canvas with confirmation)
O o Reset origin to center

Instructions

▶ Press RUN repeatedly to increase the animation speed

✔️ Animations generally look smoothest between 1x and 5x speed

✔️ You can draw on the canvas while the animation is running

Instructions (Desktop)

✏️ Click and drag on the canvas to draw shapes

✏️ Free drawing mode paints shapes with mouse movement (no clicking)

✔️ Press spacebar to select the next color palette

🏠 Click the canvas to set a new origin for the starburst animation (setpoint=canvas.mouseup)

📱 Mobile

mobile_screenshot

Instructions (Mobile)

🖌️ Tap and drag across the canvas to paint with shapes

🏠 Tap and drag canvas to set new origin for starburst animation (setpoint=canvas.touchup)

ℹ️  Mobile version is basic (works but needs work)

Changes / Issues / Fixes

  • Release a mobile version with touch support
  • Separate updateUI() function into updateBanner() and updateButtons()
  • Remove style changes from setBrushColor()
  • Fix button colors not updating
  • Change origin setpoint to mousedown (instead of mouseup)
  • Added custom mouse cursors
  • Set indentation style to 2 tabs
  • Add toggle function to hide/show keyboard map
  • Add more variety: shapes, colors, brush width, etc. (experiment)
  • Replace all HTML legacy tags with CSS

Desktop

  • Expand mousemove listener to entire document body: wilder but more satisfying
  • Add a button to toggle drawing mode
  • Get actionListener working properly with mousemove and mousedown events (similar to mobile drawing)
  • Optimize resolution for the most common displays

Mobile

  • Disable swipe down refresh gesture
  • Needs more testing: limited testing done with Chrome device emulation and an S10+
  • Optimize resolution and settings for mobile displays

Technical Information

Languages: JavaScript for the main app, HTML for page elements, and CSS for formatting

Source Code

Desktop: JavaScript (main.js, drawCanvas.js), HTML, CSS

Mobile: mobileMain.js, mobileDrawCanvas.js, HTML, CSS (same as desktop)

Question of the Day: if "depository" is shortened to "depot" then why isn't "repository" shortened to "repot?" Better yet, why not shorten depot to "depo?"