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);
I made an HTML port of game of life made with a table of checkboxes based on Pluralsight's Play by Play: HTML, CSS, and JavaScript with Lea Verou (http://www.pluralsight.com/courses/play-by-play-lea-verou). I was able to create a cool mousedown interface that allowed the "player" to draw on the board by dragging the mouse while it was down, and wanted to do the same for touch devices.
Unfortunately, touch events only hold references to the DOM element where they began (i.e. where "touchstart" fired) and do not recognize the DOM elements that exist under them (a detailed explanation for this can be found here: http://stackoverflow.com/questions/4550427/prefered-alternative-to-onmouseover-for-touch).
Instead, touch events maintain several lists of Touch objects - which represent interactions with the touch screen. Among these objects' properties are clientX and clientY, which indicate the X and Y coordinates of the events relative to the viewport (go to http://www.javascriptkit.com/javatutors/touchevents.shtm
| // CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / | |
| // Notice the for loops have a hardcoded values for how far they can go (32) | |
| // This is a result of WEBGL not allowing while loops. Change the value to what you find appropriate! | |
| // CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / CAUTION / / / | |
| // | |
| // Hopefully this gives you the format for making your own operators such as XOR, NAND, etc. | |
| // | |
| // Adapted from this thread: | |
| // https://scratch.mit.edu/discuss/topic/97026/ |
| <!DOCTYPE HTML> | |
| <html lang="en"> | |
| <head> | |
| <title>Record WebGL to WebM (Chrome only)</title> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="styles.css" charset="utf-8"> | |
| </head> | |
| <body> | |
| <div class="buttons"> |
| Device | OS | OS version | Browser | Browser version | ANGLE_instanced_arrays | EXT_blend_minmax | EXT_frag_depth | EXT_shader_texture_lod | EXT_texture_filter_anisotropic | WEBKIT_EXT_texture_filter_anisotropic | OES_element_index_uint | OES_standard_derivatives | OES_texture_float | OES_texture_float_linear | OES_texture_half_float | OES_texture_half_float_linear | OES_vertex_array_object | WEBGL_compressed_texture_s3tc | WEBKIT_WEBGL_compressed_texture_s3tc | WEBGL_debug_renderer_info | WEBGL_debug_shaders | WEBGL_depth_texture | MOZ_WEBGL_depth_texture | WEBKIT_WEBGL_depth_texture | WEBGL_draw_buffers | WEBGL_lose_context | MOZ_WEBGL_lose_context | WEBKIT_WEBGL_lose_context | EXT_color_buffer_float | EXT_color_buffer_half_float | EXT_disjoint_timer_query | EXT_disjoint_timer_query_webgl2 | EXT_sRGB | WEBGL_color_buffer_float | WEBGL_compressed_texture_astc | MOZ_WEBGL_compressed_texture_atc | WEBKIT_WEBGL_compressed_texture_atc | WEBGL_compressed_texture_atc | WEBGL_compresse
This is the open source solution that I have used for the Giampilieri project. The interface is less than ideal, saving projects is confusing, it's fairly slow to process and needs CUDA for high density mesh calculations.
Also open source kit, but seems to be a collection of libraries for real time pipelines.
| { | |
| "name": "typescript-setup", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "compile": "tsc", | |
| "test": "node -r esm ./spec.js", | |
| "dev": "npm run compile -- -w" | |
| }, |
In PIX, Select Target Process => Launch Win32 and set the following 2 entries according to where Canary / Chrome is installed:
Then click on "Launch".
Important: you should close all your Canary / Chrome windows/processes before clicking on the "Launch" button!
| //Tested on Chrome Canary Version 94.0.4598.0, macOS 11.5 | |
| const canvas = document.createElement("canvas"); | |
| canvas.width = 512; | |
| canvas.height = 512; | |
| document.body.appendChild(canvas); | |
| const clearColor = { | |
| r: Math.random(), | |
| g: Math.random(), |