Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative
float rand(float n){return fract(sin(n) * 43758.5453123);}
float noise(float p){
float fl = floor(p);
float fc = fract(p);
A couple of weeks ago I played (and finished) A Plague Tale, a game by Asobo Studio. I was really captivated by the game, not only by the beautiful graphics but also by the story and the locations in the game. I decided to investigate a bit about the game tech and I was surprised to see it was developed with a custom engine by a relatively small studio. I know there are some companies using custom engines but it's very difficult to find a detailed market study with that kind of information curated and updated. So this article.
Nowadays lots of companies choose engines like Unreal or Unity for their games (or that's what lot of people think) because d
A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.
| Name | Stars | Last Commit | Description |
|---|---|---|---|
| three.js | 
Wave Function Collapse (WFC) by @exutumno is a new algorithm that can generate procedural patterns from a sample image. It's especially exciting for game designers, letting us draw our ideas instead of hand coding them. We'll take a look at the kinds of output WFC can produce and the meaning of the algorithm's parameters. Then we'll walk through setting up WFC in javascript and the Unity game engine.
The traditional approach to this sort of output is to hand code algorithms that generate features, and combine them to alter your game map. For example you could sprinkle some trees at random coordinates, draw roads with a brownian motion, and add rooms with a Binary Space Partition. This is powerful but time consuming, and your original vision can someti
| // MIT http://rem.mit-license.org | |
| function trim(c) { | |
| var ctx = c.getContext('2d'), | |
| copy = document.createElement('canvas').getContext('2d'), | |
| pixels = ctx.getImageData(0, 0, c.width, c.height), | |
| l = pixels.data.length, | |
| i, | |
| bound = { | |
| top: null, |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
| #!/usr/bin/env bash | |
| # MIT © Sindre Sorhus - sindresorhus.com | |
| # git hook to run a command after `git pull` if a specified file was changed | |
| # Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`. | |
| changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)" | |
| check_run() { | |
| echo "$changed_files" | grep --quiet "$1" && eval "$2" |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| vec2 rotate(vec2 v, float a) { | |
| float s = sin(a); | |
| float c = cos(a); | |
| mat2 m = mat2(c, s, -s, c); | |
| return m * v; | |
| } |
When times get tough and people get nasty, you’ll need more than a killer smile. You’ll need a killer contract.
Used by 1000s of designers and developers Clarify what’s expected on both sides Helps build great relationships between you and your clients Plain and simple, no legal jargon Customisable to suit your business Used on countless web projects since 2008
…………………………