my git website with random JS/CSS/HTML single-pages (can be used offline) made for pc/chrome browser
Linked pages, not in this repo:
- Hangman
- ASCII Snake
- Enigma
- Calculator for arbitrary-length-integers
- Error Correction Codes
- Unofficial Satisfactory U3 Flow Chart
- Small Dice
- Ball Screensaver
- Vector Field
- Math Function Drawer
- 3D-Card example
- Context menu example
- Touch example
- Pascal's Triangle
- 4 PI-Day 2021
- A simple word guessing game
- no graphics (no actual hangman)
- guessing is case insensitive
- full Unicode support (allows for special symbols and Emojis)
- when clicking on "new round" when over 20 seconds of progress, it shows a confirm dialog (YES/NO)
- customization (settings)
- custom alphabet
- keys can be set to always show and not be on the "keyboard" (useful for spaces and punctuation)
- custom word list
- set maximum allowed fails (or disable loosing with
-1) - set a percentage for how many letters of the word are uncovered at the start of the round (
0%to99%) - clear stored settings and reload page (shows a confirm dialog (YES/NO))
- custom alphabet
- current settings and progress is stored in browser local storage (reload does not start a new round or reset settings)
- export current settings and progress to a JSON file
- import settings and progress from saved JSON file
- shows data preview of selected save file
- only shows time and fails of progress preview
- choose to override, ignore, or combine current alphabet / word list with the imported
- choose to override or ignore imported rng-unhide / max-fails value
- choose to continue with saved progress or start a new round
- can only be continues if alphabet, word list, and max fails are also imported
- shows data preview of selected save file
Scroll TOP
- snake game in ascii style (direct port from c++)
- right-click for more options
Scroll TOP
- almost like the real thing ft. loading screen
- create enigma for encoding
- read from file
- configure
- give custom alphabet (Unicode supported)
- set number of weels (signal only goes one way)
- set number of plugs (auto maximum)
- import enigma for decoding
- read from file
- mirror encoding enigma
- set custom turning number
- auto "turn" on every character that is encoded, one after another
Scroll TOP
- Calculator for arbitrary-length-integers
- see Math-js/BigIntType.js for a detailed description
Scroll TOP
- made from a 3Blue1Brown video
- also see Ben Eater's video
- another very good page on Harry Li's github
- and of course in Minecraft by "processAutomation" r/3Blue1Brown post
- binary input
- set random bit flips (percentage per byte)
- shows results and the difference to the original per byte
- input/output text (Unicode supported)
- set byte size (if not auto, fill to length or remove if Unicode-char needs more bits)
Scroll TOP
- interactive flow chart for the 3rd Update of SATISFACTORY
WIP interactive graph for 1.0 release: https://github.com/MAZ01001/SatisfactoryFlowchart
Scroll TOP
- dice for random numbers
- choose min/max number of eyes (0-9)
- left-click on dice for stats
- uses
Math.random()for random numbers - colors button differently for each new number ('cause sometimes the same number is generated multiple times in a row)
Scroll TOP
- a ball that moves diagonally across the screen and changes color
- using only javascript (visuals via HTML5 canvas)
- see below table for a lot of customizability via URL parameters
Note
If you can't see anything, your device might not support OKLCH colors.
To fix this, use the URL parameter colorRGB for RGB colors.
URL parameters can be in any order starting with ? after the URL, then parameters in the format PARAMETER=VALUE (empty value: PARAMETER / PARAMETER=) with & between each parameter (values must be encoded URI components)
Click to hide table
| parameter | description | default value | possible values |
|---|---|---|---|
bgColor |
set the background color of the page (can be transparent) or a rainbow color animation with the speed in seconds or milliseconds as parameter |
#222 (dark grey) (rainbow default speed is 6s) |
CSS color like black or transparent or rainbow or rainbow([+|-]speed[s|ms]) ( speed is a finite integer) |
bgRGB |
if set, uses HSL instead of OKLCH color model for bgColor |
NO | empty or 1 for YES and 0 or else for NO |
keepCanvas |
if set, doesn't clear the canvas every frame | NO | empty or 1 for YES and 0 or else for NO |
fps |
shows frames per second in the top left corner | NO | empty or 1 for YES and 0 or else for NO |
seed |
set the seed for RNG | minute timestamp in hex | anything (even empty) |
ballSize |
set the ball size (%) relative to the smaller window size | 0.2 |
decimal number between 0 and 1 (inclusive) |
ballSpeed |
set the speed of the ball in pixels per second | 240 |
decimal number |
hideOutline |
if set, hides the black outline around ball/image | NO | empty or 1 for YES and 0 or else for NO |
colorSpeed |
set the speed of the color shift in degrees per second | 60 |
decimal number |
colorRGB |
if set, uses HSL instead of OKLCH color model for the ball | NO | empty or 1 for YES and 0 or else for NO |
img |
put an image over the ball (if the image doesn't replace the ball, it gets cut to fit) |
none | HTML image source (URL) |
imgPixelArt |
if set, enables better scaling filter for pixel art | NO | empty or 1 for YES and 0 or else for NO |
imgOverlay |
if set, overlays the img instead of replacing the ball |
NO | empty or 1 for YES and 0 or else for NO |
txt |
(single line) text to put over the ball/image | none | single line text |
txtHeight |
set the txt size (height) relative to the size of the ball with no ball/image it is relative to the smaller window size |
0.4 |
positive decimal number |
txtFill |
txt fill color (CSS color, canvas gradient/pattern) |
#0F0 (green) |
CSS color / canvas gradient or pattern |
txtLine |
txt outline color (CSS color, canvas gradient/pattern) |
#000 (black) |
CSS color / canvas gradient or pattern |
txtLineWidth |
set the width of txt outline relative to txtHeight |
1 |
positive decimal number |
txtFont |
set the font of the txt (CSS font family) |
"Times New Roman", Times, serif |
CSS font-family, like sans-serif |
txtWeight |
set the boldness of the txt |
normal |
CSS font-weight, like bold or 1 to 1000 (inclusive) |
txtSmallCaps |
if set, uses small-caps for the txt (scaled down uppercase for lowercase letters) |
NO | empty or 1 for YES and 0 or else for NO |
txtStyle |
set the font style of the txt (italic/oblique) |
normal |
CSS font-style, like italic or oblique |
txtStretch |
set the horizontal stretch of the txt |
normal |
CSS font-stretch, but only keywords and not percentages |
- vector objects
- default points to mouse
- use console
- set variables
- set custom function for render each vector
- use buttons
- scroll to make arrows larger
- left-click/hold to hide cross with coordinates
- shows fps counter
- made with P5.js
Scroll TOP
- use sliders(show sliders button on the right) to set the coefficients
- scroll or use sliders(top & left) to set scale (zoom)
- render own polynomial (check the checkbox top-left and enter your coefficients)
- shows fps counter
Scroll TOP
- example of a 3d-card effect with HTML/JS/CSS
Scroll TOP
- example of a custom context menu using HTML/JS/CSS
Scroll TOP
- example for detecting touch (not the best detection)
Scroll TOP
- choose the number of rows to generate
Scroll TOP
- made from a Coding Train coding-challenge video
- estimates PI with the GCD of 100000 numbers
- left-click to pause
Scroll TOP