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 → MAZ01001/hangman
- Hextiles → MAZ01001/hextiles
- Gif decoder/player → MAZ01001/GIF_decoder
- DND Dice & Statistics → MAZ01001/dice_stats
- Chance Calculator → MAZ01001/Math-Js/functionsjs_chanceAmount.html
- FFmpeg → MAZ01001/FFmpeg-resource
- Enigma → MAZ01001/enigma
- Mandelbrot → MAZ01001/AlmondBreadErkunder
- ASCII Snake
- 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
- snake game in ascii style (direct port from c++)
- right-click for more options
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