JavaScript Ramblings - a collection of small scripts made with the sole purpose of exploring different technologies in the JavaScript landscape.
A visualization of the A* pathfinding algorithm on a hexagonal grid with different terrain tiles, with a built-in tile editor to play around with.
A classic game of Pacman with a JavaScript theme: run away from the frameworks!
Changes the contents of the target HTML with a new value, transitioning characters individually in a random fashion.
Changes the text content of an input element simulating a type writer effect, where each letter is entered at a time.
Vanilla JS implementation of a masonry layout. Does not handle any CSS styling it simply calculates and arranges the positions of the html elements inside a grid container.
/* css */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}/* js */
new Masonry(".grid-container");A parser to convert strings of byte size into it's numeric value. Supports byte prefixes.
parse("70 Mb") // Accepts shorthand syntax
> 70000000;
parse("0.1 peta") // Accepts partial syntax
> 100000000000000;
parse("2 tebibytes") // Accepts long syntax
> 2199023255552;
parse("5 Gibibytes") // Accepts byte prefixes (kibi-, mebi-, gibi-, ...)
> 5368709120;A simple color code converter from hexadecimal format to RGB color format, and vice-versa.
hexToRgb("#56BCF1") // from hex to rgb
> "rgb(86, 188, 241)";
rgbToHex(86, 188, 241) // accepts numbers
> "#56BCF1";
rgbToHex("86", "188", "241") // accepts strings
> "#56BCF1";
rgbToHex([86, 188, 241]) // accepts an array
> "#56BCF1";A useful utility to shuffle the items on an array without modifying the original. Alternatively, you may want to shuffle an array of items leaving certain items in place. That's what the shuffleWithOptions function is for.
const positions = ['leftmost', 'left', 'center', 'right', 'rightmost'];
positions.shuffle();
> [ "right", "leftmost", "rightmost", "center", "left" ]
const options = {
inputIdx: [0, positions.length - 1],
outputIdx: [0, positions.length - 1]
};
position.shuffleWithOptions(options);
// first and last items always stay at their positions.
> [ "leftmost", "right", "left", "center", "rightmost" ]A simple shortener for long strings of text such as those coming from autogenerated timestamps commonly found in image or music files.
const filename = "screenshot_20210808_154621.png";
shortener(filename) > "scree...1.png";
shortener(filename, { headLength: 2 }) > "sc...1.png";
shortener(filename, { headLength: 8, sepAmount: 8 }) > "screensh........1.png";
shortener(filename, { tailLength: 8, sepAmount: 5, sep: "_" }) >
"scree_____4621.png";Calculate time differences and output them as human-readable strings.
document.querySelector(".post__publishedAt").textContent = DateTime.humanDiff(
new Date(post.publishedAt),
new Date(),
);Small, simple script to simulate dice rolls programatically. Create instances for every new type of dice you need, roll them! You can provide options to filter down results as well:
const d3 = new Dice(3);
const d6 = new Dice(6);
const d20 = new Dice(20);
// rolls once by default
d6.roll();
> [4]
// rolls any number of times
d6.roll(9);
> [ 1, 4, 4, 6, 5, 1, 1, 3, 5 ]
// exclude results from roll
d6.rollWithOptions(5, [4,5,6]);
> [ 2, 3, 3, 1, 1 ]
// narrow down based on custom logic
d20.rollWithOptions(10, (num) => num % 2 !== 0);
> [ 17, 11, 13, 9, 9, 1, 7, 13, 1, 17 ]A tiny wrapper around the native window.fetch that makes it easy to create an axios-like API. It supports intercepting outgoing requests (incoming responses coming soon) to automate and abstract common tasks like authentication tokens or implement any other custom logic.
const api = new apiService("https://mysite.com");
api.addInterceptor((req: Request): Request => {
if (["/register", "/login"].includes(req.url)) {
// No authentication needed
return req;
}
const token = sessionStorage.getItem("token");
req.headers.set("Authorization", `Bearer ${token}`);
return req;
});A product card showing a sample product. Uses vanilla-tilt.js for the hover effect.
A classic game of rock, paper, scissors.
A front-end shopping cart implemented using the JavaScript Map structure, ready to be used in e-commerce web apps.
A simple 3D simulation of the solar system built with Three.js as an introduction to how the library works (in progress...)
The following are exercises inspired by Daniel Shiffman from The Coding Train, Gustavo Pezzi and others. I adapted them following modern ES6+ syntax and implemented additional finishing touches here and there.
Most of these are continuous work-in-progress while I experiment adding new features. Make sure to click on "see demo" to see how things are going!
2D - Angry Matter: A simplified version of Angry Birds, features p5.js wrappers over matter.js bodies to handle rendering and physics independently. See demo
2D - Asteroids: The classic 8-bit game Asteroids! See demo
2D - Attraction: This basic demo simulates gravitational attraction towards a center object. See demo
2D - Attraction-Repulsion: A variation to gravitational attraction that includes repulsion forces. See demo
2D - Beesweeper: Version of the classic game of minesweeper, using bees instead of mines. See demo
2D - Binary Tree Visualization: A visualization of the binary search algorithm, through nodes that form a tree that can be traversed. See demo
2D - Fireworks: A firework simulation in the browser canvas See demo
2D - Flock Simulation: Simulation of how individual particles interact as a flock in a complex system See demo
2D - Flow Field: A follow along of Daniel Shiffman's The Nature Of Code playlist. This is a visual representation of 3-dimensional Perlin noise. See demo
2D - Forces: This basic demo uses p5.js to create an environment that simulates real world forces, such as gravity, wind, friction and drag. See demo
2D - Game Of Life: Classic John Conway's Game Of Life, a zero-player game based on an initial input that evolves by itself based on a basic set of rules. See demo
2D - Hanging Lightbulb: One of my favorites, it combines a raycasting algorithm and physics engine to project shadows off of moving objects. See demo
2D - Joggler: Very simple game to mimic an interactive joggling in the canvas. See demo
2D - Matrix Letter Effect: The classic digital letter "rain" effect from the movie: The Matrix. See demo
2D - Maze Generator: A visualization in p5.js of a maze generator, based on the depth-first search recursive algorithm. See demo
2D - Mitosis: A simple simulation of the process of mitosis on cells. See demo
2D - Non-overlapping circles: Fill the screen with circles that will never overlap with each other! See demo
2D - Perlin Noise: This is a visual representation of 2-dimensional Perlin noise. See demo
2D - Phyllotaxis: A visualization of a common pattern found in nature such as the shape of some plants. See demo
2D - Plinko: The game of Plinko built with Matter.js and P5.js as rendering engine. See demo
2D - Quadtree: Visualization of a quadtree data structure for optimized performance in complex systems with interacting particles. See demo
2D - Raycasting Rendering: Implementation of a raycasting algorithm in p5.js à la Wolfenstein 3D, creating a 3D projection of the environment. See demo. See also C implementation.
2D - Raycasting: Visualization of a light-emitting object using raycasting algorithm. See demo
2D - Snowfall: A snowfall effect using p5.js inspired by Daniel Shiffman's The Nature Of Code playlist. See demo
2D - Snake: Another classic 8-bit game. See demo
2D - Solve The Maze: Algorithmically generated maze to be solved "in the dark". See demo
2D - Space Invaders: Another 8-bit classic game: space invaders!. See demo
2D - Steering Behaviors: Particle system where each particle reacts to it's environment in a "lifelike" manner. See demo
2D - Tetris: Another popular 8-bit classic: Tetris!. See demo
A simple bookmarklet that replaces references to Youtube links in the current page with Invidious instances. This https://youtu.be/70MQ-FugwbI becomes https://invidious.site/70MQ-FugwbI