# canvas Published articles for canvas. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## JavaScript Find in Page: DOM Text Above the Codename One Canvas DevFeed: [JavaScript Find in Page: DOM Text Above the Codename One Canvas]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-08-23T00:00:00Z Content type: article Language: en Sources: [CodeName One]() Topics: [JavaScript](), [Document Object Model (DOM)](), [Canvas](), [browser](), [Accessibility]() Tags: [accessibility](), [browser](), [canvas](), [javascript]() ### AI overview The Codename One JavaScript port adds a targeted DOM layer for eligible visible text while keeping application components and layout on the canvas. This enables browser text search, selection, accessibility, input metadata, and sharper rendering on high-DPI displays. ### Source excerpt The Codename One JavaScript port now renders visible text into a targeted DOM layer, making it searchable, selectable, accessible, and sharp on high-DPI displays without giving browser layout control. ## Coding Challenge #133 - Particle Playground DevFeed: [Coding Challenge #133 - Particle Playground]() Original publisher: [Read original article]() Author: John Crickett Published: 2026-08-22T08:01:30Z Content type: tutorial Language: en Sources: [Coding Challenges]() Topics: [Simulation](), [Cellular automaton](), [coding](), [creative coding](), [Graphics](), [Canvas]() Tags: [canvas](), [coding](), [creative-coding](), [graphics](), [programming](), [real-time](), [simulation]() ### AI overview A coding challenge guides readers through building a 2D particle playground with two simulation engines: a force-based particle system and a cellular automaton. The project combines materials such as sand, water, and fire with a fireworks display whose embers can ignite the material grid. ### Source excerpt This challenge is to build your own particle playground. ## Testing That a Canvas Diagram Actually Painted Pixels DevFeed: [Testing That a Canvas Diagram Actually Painted Pixels]() Original publisher: [Read original article]() Author: Philipp Lehmann (philipp.lehmann@gruppe.ai) Published: 2026-07-21T07:00:00Z Content type: tutorial Language: en Sources: [Philipp Lehmann]() Topics: [Canvas](), [Testing](), [Playwright](), [Document Object Model (DOM)](), [browser]() Tags: [browser](), [canvas](), [frontend](), [html5](), [playwright](), [testing]() ### AI overview This tutorial explains why DOM-based tests can pass even when an HTML5 canvas renders nothing. Because canvas pixels are not represented in the DOM and jsdom does not provide real canvas rendering, it recommends using Playwright with a real browser and checking pixel data with getImageData. ### Source excerpt getImageData in Playwright to assert a canvas actually drew pixels, since jsdom has no canvas renderer and DOM assertions pass on a blank canvas. ## Config 2026: New materials, new tools and a more expressive canvas DevFeed: [Config 2026: New materials, new tools and a more expressive canvas]() Original publisher: [Read original article]() Author: Dylan Field Published: 2026-06-24T15:00:00Z Content type: release Language: en Sources: [Figma Blog]() Topics: [Figma](), [Canvas](), [Code](), [shaders](), [generative plugins]() Tags: [announcements](), [canvas](), [code](), [figma](), [generative-plugins](), [shaders](), [updates]() ### AI overview Figma's Config 2026 announcements introduce new materials and canvas tools, including code layers, Figma Motion, shaders, generative plugins, and Weave tools. The article explains how code layers can become interactive, be duplicated for exploration, and be iterated on collaboratively alongside design layers. ### Source excerpt Push past what you thought was possible with code layers, Figma Motion, shaders, generative plugins and Weave tools, all on the canvas. ## Connecting Figma and Weave DevFeed: [Connecting Figma and Weave]() Original publisher: [Read original article]() Author: Itay Schiff Published: 2026-06-24T14:00:00Z Content type: release Language: en Sources: [Figma Blog]() Topics: [Figma](), [Generative AI](), [Figma Community]() Tags: [3d](), [ai](), [canvas](), [figma](), [video](), [workflows]() ### AI overview Figma announces new ways to bring Weave creative workflows into Figma frames and the Figma canvas. The integration includes more than 20 AI image tasks in Figma Design and will make Weave workflows available in Figma Community. ### Source excerpt Today, we're announcing new ways your Weave creative workflows can live alongside your Figma frames. ## Figma's 2026 AI report: Can AI help us collaborate better? DevFeed: [Figma's 2026 AI report: Can AI help us collaborate better?]() Original publisher: [Read original article]() Author: Madeline Stafford; Shane Johnston Published: 2026-06-24T12:45:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Artificial Intelligence](), [Figma](), [Canvas](), [data](), [User Experience](), [Development]() Tags: [2026](), [ai](), [canvas](), [developers](), [figma](), [report](), [research](), [survey](), [user-experience]() ### AI overview Figma's 2026 AI report draws on three years of survey and interview data to examine how AI is changing collaboration, design, development, and product-building workflows. It reports that respondents increasingly see AI as affecting teamwork, while design and shared canvas-based work remain important. ### Source excerpt AI used to be a solo act. According to our research, it's not anymore. ## Direct every frame with Runway Aleph 2.0, now in Figma Weave DevFeed: [Direct every frame with Runway Aleph 2.0, now in Figma Weave]() Original publisher: [Read original article]() Author: Kim Köhler Published: 2026-06-18T12:05:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Canvas]() Tags: [canvas](), [design](), [figma](), [video]() ### AI overview Figma Weave now includes Runway Aleph 2.0, enabling frame-level direction of video clips up to 30 seconds. Users can apply reference images, carry keyframe edits across relevant frames, preview changes, and explore scene modifications on the canvas. ### Source excerpt Aleph 2.0 brings frame-level creative direction to the Figma Weave canvas. ## From FileUploadWorkflow to creative OS: How Layer scaled on Temporal DevFeed: [From FileUploadWorkflow to creative OS: How Layer scaled on Temporal]() Original publisher: [Read original article]() Author: Alex Engel Published: 2026-04-28T00:00:00Z Content type: article Language: en Sources: [Temporal Blog]() Topics: [Artificial Intelligence](), [async](), [Fine-tuning](), [lora](), [Inference](), [Canvas](), [Mobile](), [render]() Tags: [ai](), [article](), [canvas](), [community](), [developer](), [fine-tuning](), [inference](), [lora](), [mobile](), [node](), [pipeline](), [production](), [render]() ### AI overview Layer describes how it expanded from a small set of Temporal workflows into about 50 workflow types running in production. The article covers the product and architecture changes behind its creative operating system, including image generation, LoRA fine-tuning, multimodal pipelines, billing synchronization, and large-scale parallel asset generation. ### Source excerpt How Layer went from a handful of Temporal Workflows to 50 in production. The architecture, the lessons, and what broke along the way. ## Made in Compose: Airbnb Month Picker Dial DevFeed: [Made in Compose: Airbnb Month Picker Dial]() Original publisher: [Read original article]() Author: sinasamaki Published: 2026-04-17T12:55:42Z Content type: tutorial Language: en Sources: [sinasamaki]() Topics: [Compose](), [Jetpack Compose](), [Canvas](), [Library]() Tags: [article](), [canvas](), [compose](), [customization](), [how-to](), [jetpack-compose](), [render](), [rotation]() ### AI overview A tutorial on recreating Airbnb's month-duration dial picker in Jetpack Compose using the ChromaDial library. It covers configuring a 12-month range, mapping values around a 330-degree sweep, styling the thumb, rendering the inactive track with Canvas, and creating a rounded active arc track. ### Source excerpt How to create a gorgeous Dial in Jetpack Compose ## Turning prompts into five scalable workflows with Figma Weave DevFeed: [Turning prompts into five scalable workflows with Figma Weave]() Original publisher: [Read original article]() Author: Itay Schiff; Kim Köhler Published: 2026-04-09T12:00:00Z Content type: tutorial Language: en Sources: [Figma Blog]() Topics: [Figma](), [Artificial Intelligence](), [Generative AI](), [Canvas](), [Figma Community]() Tags: [ai](), [ai-models](), [animation](), [canvas](), [creative](), [figma](), [figma-community](), [generative-ai](), [workflow](), [workflows]() ### AI overview Figma shares five creative workflows demonstrating how Figma Weave can combine AI models, editing steps, and connected AI nodes to create scalable visual content. The article also introduces workflow templates on Figma Community and describes applications including image, video, animation, motion design, VFX, and 3D model generation. ### Source excerpt To build upon a visual language with AI, you need to harness the logic behind each prompt--building, editing, and directing how visuals come to life. Here, we share five creative workflows that show the breadth of what the Figma Weave canvas can do. ## How Figma used AI tools to build six mini games for April Fun Day DevFeed: [How Figma used AI tools to build six mini games for April Fun Day]() Original publisher: [Read original article]() Author: Madeline Stafford Published: 2026-04-08T19:30:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Figma AI](), [Artificial Intelligence](), [MCP](), [Canvas]() Tags: [ai](), [canvas](), [code](), [code-generation](), [figma](), [figma-ai](), [generative-ai](), [mcp]() ### AI overview Figma describes how its team used Figma Make, Figma Weave, and MCP to rapidly prototype and create six mini games for its annual April Fun Day. The article highlights fast iteration, visual exploration, and AI-assisted asset creation. ### Source excerpt For our annual April Fun Day, we used Figma Make, Weave, and MCP to build six mini games that captured the spirit of play. Here's what we learned. ## 6 designs that reimagine how we interact with software DevFeed: [6 designs that reimagine how we interact with software]() Original publisher: [Read original article]() Author: Emma Webster Published: 2026-04-01T15:27:14.903000Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Software](), [Canvas](), [real-time]() Tags: [canvas](), [collaboration](), [design](), [digital-experiences](), [figma](), [prototype](), [real-time](), [software]() ### AI overview Figma's Make-a-thon winners present six software designs that explore new ways to connect, reflect, and play. The examples include a multiplayer embroidery sampler built on a shared canvas and projects using facial gestures, immersive environments, and cross-time-zone interaction. ### Source excerpt From a multiplayer embroidery sampler to a photo booth that works across time zones, this year's Make-a-thon winners offer new ways to connect, reflect, and play through software. ## How Fountain keeps code generation on track for browser-based mobile games DevFeed: [How Fountain keeps code generation on track for browser-based mobile games]() Original publisher: [Read original article]() Published: 2026-03-27T07:00:00Z Content type: article Language: en Sources: [Mary Rose Cook]() Topics: [AI-assisted coding](), [Code](), [Mobile](), [WebGL](), [ui](), [Canvas](), [browser]() Tags: [agent](), [browser](), [bugs](), [canvas](), [code](), [code-generation](), [computer](), [developer](), [graphics](), [interface](), [language](), [model](), [render](), [tool](), [user-interface](), [vector](), [webgl]() ### AI overview The author describes Fountain, a game-making tool that uses a predefined framework, built-in systems, manipulable user interfaces, and a constrained target domain to keep generated code aligned while creating simple mobile arcade games. ### Source excerpt About nine months ago, my son said he wanted to make a video game. He said it was called Exploding Kitties. We made it together on my computer. He described the gameplay and drew the graphics. I vibed the code. The game basically worked. But we had to build it in small pieces. And, periodically, I had to spend time in the guts of the code, getting it back on the rails. Unifying two ways of doing the same thing. Fixing gnarlier bugs. Disentangling the game code from the engine. Today, I know that we'd be able to one-shot Exploding Kitties. The first reason: models and agent harnesses produce much higher intelligence. But, the second reason, the one I want to talk about, is the supporting techniques and environment. I've built a new game-making tool called Fountain. You can one-shot any simple mobile arcade game. Or, you can iterate your way to a more complex game and the code stays on the rails over many turns. Here's why it works - A framework that supplies decisions and built-ins Every game is given a game framework upfront. This framework encodes many decisions. That game entities have a certain data shape. That behavior abstraction is done with prototypal inheritance. That the coordinates of an entity represent its top left. This keeps the code generation aligned. And this framework includes generally useful built-ins. An update/event/draw loop. A WebGL canvas render surface. A collision detection and resolution system. A particle system. A system to detect input. This reduces the amount of code that must be generated. A manipulable artifact Prompting can be tiresome. Language is ambiguous. The model can interpret a prompt in a way the game designer didn't intend, and make the wrong change. Language is clumsy. It's hard to precisely indicate any point in a continuum. A color. A point. An amount. But there's a solution. Do it the old way. Give the game developer a user interface through which to express their intent. A color picker to choose the color of the water ## How to create custom Dials DevFeed: [How to create custom Dials]() Original publisher: [Read original article]() Author: sinasamaki Published: 2026-03-14T20:43:05Z Content type: tutorial Language: en Sources: [sinasamaki]() Topics: [Library](), [Canvas](), [render]() Tags: [animation](), [article](), [canvas](), [how-to](), [library](), [render]() ### AI overview A tutorial on customizing ChromaDial, including visual and invisible thumbs, drag and hover interactions, animated feedback, full-size touch areas, and custom track drawing with Canvas. ### Source excerpt ChromaDial is super customizable and delightful ## Adding accurate AsyncImage previews in Coil 3 with a Compose wrapper DevFeed: [Adding accurate AsyncImage previews in Coil 3 with a Compose wrapper]() Original publisher: [Read original article]() Author: Jake Lee Published: 2026-01-30T00:00:00Z Content type: tutorial Language: en Sources: [Jake Lee's Programming Blog]() Topics: [Compose](), [context](), [Canvas](), [function]() Tags: [android](), [canvas](), [coil](), [compose](), [how-to](), [image](), [jetpack-compose](), [ui]() ### AI overview A practical guide to improving Coil 3 AsyncImage previews in Jetpack Compose by overriding remote image fetching with a wrapper that supplies preview drawables. ### Source excerpt I recently migrated from Coil 2 to Coil 3, allowing remote image fetching to be overridden for better previews! Here's a simple wrapper implementation. ## BIY: Preparing a Dataset and Benchmarking AI Models for Scatterplot-Related Tasks DevFeed: [BIY: Preparing a Dataset and Benchmarking AI Models for Scatterplot-Related Tasks]() Original publisher: [Read original article]() Author: João Palmeiro Published: 2026-01-19T14:52:55Z Content type: article Language: en Sources: [Feedzai]() Topics: [Accessibility](), [LLM evaluation / benchmarking](), [multimodal-ai](), [Canvas](), [AI Models](), [dataset](), [SVG]() Tags: [accessibility](), [ai-models](), [artificial-intelligence](), [benchmarking](), [canvas](), [clustering](), [data-visualization](), [dataset](), [large-language-models](), [multimodal](), [multimodal-ai](), [outlier-detection](), [svg]() ### AI overview The article introduces Benchmark It Yourself (BIY), an effort to prepare a dataset and benchmark multimodal AI models for scatterplot-related tasks. It examines generating distribution-aware descriptions from scatterplot images to improve the accessibility of canvas charts, including direct description generation and structured-data extraction for predefined templates. Initial results were mixed. ### Source excerpt Benchmark It Yourself (BIY): Preparing a Dataset and Benchmarking AI Models for Scatterplot-Related Tasks When we need to visualize and interact with millions, or even just thousands, of individual points while analyzing data, we typically resort to rendering them in the browser using a canvas. The other common approach for the web, SVG, doesn't scale when the number of individual elements increases to such quantities. However, while solving one problem, canvas charts introduce a new challenge: accessibility. Although SVG charts are not accessible by default, they can be by design. Each part of an SVG chart has a corresponding element on the web page, allowing for a programmable, accessible experience for screen reader users. We can simply think of SVG as HTML. On the other hand, a canvas chart is just like a PNG image. If a screen reader user tries to learn more about a canvas chart, unless the developer has prepared a detailed description of it, they will just hear the word "image". There's no way to get an idea of what one of these charts represents, let alone extract any insights. For static charts, the solution can be as simple as preparing a description and integrating it into the rendered chart. However, for platforms leveraging dynamic, large datasets, automatically generating these descriptions is not a simple task, especially for charts like scatterplots where data distributions can assume countless forms. At Feedzai, we started exploring ways to generate data distribution-aware descriptions for scatterplots from their respective images using recent multimodal AI models. When the raw data is not available, or the datasets are composed of several thousand or million instances, relying on chart images and these models becomes tempting. This combination has the potential to generate such descriptions and serve them alongside their respective charts, significantly improving the accessibility of canvas charts. That said, we focused on two main directions: using ## Exploring Custom Text Rendering with Jetpack Compose DevFeed: [Exploring Custom Text Rendering with Jetpack Compose]() Original publisher: [Read original article]() Author: Segun Famisa Published: 2026-01-11T06:00:00Z Content type: tutorial Language: en Sources: [Segun Famisa]() Topics: [Jetpack Compose](), [Canvas](), [API]() Tags: [android](), [api](), [canvas](), [compose](), [how-to](), [jetpack-compose]() ### AI overview This tutorial explores custom text rendering in Jetpack Compose using the TextMeasurer, TextLayoutResult, and Canvas APIs. It explains how to measure text, inspect line and character-level layout information, and use those results when drawing text with custom effects. ### Source excerpt TL;DR: exploring TextMeasurer, TextLayoutResult and Canvas for custom text rendering with Jetpack compose My coworker showed me this article from devtechie on how to implement custom text rendering in SwiftUI. I was a bit envious of how easy it looked and I thought..."hmm, I think we should actually be able to do this in compose quite easily too". So, I decided to explore the lower level text APIs available on Compose and challenged myself to recreate the renderings with Compose. Before I talk through my take on some of the custom text renderings I want to recreate, I want to get straight to the main APIs that we can use to achieve the effects. Jetpack Compose Lower-Level Text APIs TextMeasurer The TextMeasurer API allows us to - you guessed it - measure the text before we draw it. It takes into account the style, text, constraints, and other things that could influence the size of the text. TextMeasurer has a measure function that returns a TextLayoutResult. The typical way one would create a text measurer is: val textStyle = MaterialTheme.typography.headlineLarge val text = "My special text" val textMeasurer = rememberTextMeasurer() val textLayoutResult = remember(text, textStyle, constraints) { textMeasurer.measure( text = text, style = textStyle, //constraints = constraints <--- if you need constraints ) } TextLayoutResult The TextLayoutResult is where the fun is. It contains information about the text being laid out. With TextLayoutResult, you can do a lot of cool things. You can get the number of lines required to draw the text via TextLayoutResult.lineCount. It also allows us to get the size of the text via TextLayoutResult.size. I really like this API because it's so powerful - it even gives us character by character information. You can get the bounding box Rect of a particular index in the text, and this is powerful for influencing the text rendering on a character-by-character basis. I strongly recommend going through the TextResultLayout docs to see what y ## Glitch Effect in Jetpack Compose DevFeed: [Glitch Effect in Jetpack Compose]() Original publisher: [Read original article]() Author: sinasamaki Published: 2025-10-11T08:00:46Z Content type: tutorial Language: en Sources: [sinasamaki]() Topics: [Jetpack Compose](), [Compose](), [Graphics](), [GUI]() Tags: [animation](), [article](), [canvas](), [compose](), [graphics](), [jetpack-compose](), [mutation](), [random](), [scale](), [slices](), [translation]() ### AI overview A tutorial on implementing a glitch effect in Jetpack Compose by drawing composable content to an offscreen buffer, slicing it horizontally, and applying randomized translations, scaling, color overlays, and timed animation. ### Source excerpt Easily apply sci-fi, cyberpunk effects on to your app ## Code golfing a tiny demo using maths and a pinch of insanity DevFeed: [Code golfing a tiny demo using maths and a pinch of insanity]() Original publisher: [Read original article]() Published: 2025-09-29T13:30:50Z Content type: tutorial Language: en Sources: [The Last Static Blog RSS]() Topics: [glsl](), [Code](), [Canvas](), [coding]() Tags: [3d](), [canvas](), [code](), [coding](), [floating-point](), [fun](), [glsl](), [graphics](), [math](), [prog]() ### AI overview This tutorial explains how a 448-character GLSL fragment shader creates a procedural demo by evaluating mathematical formulas for each pixel. It examines the shader structure, WebGL2 canvas inputs, code-golfing techniques, and a local live-coding workflow. ### Source excerpt A few weeks ago, I made a tiny demo that fits into 448 characters: Red Alp GLSL demo in 448 characters void main(){vec3 c,p,K=vec3(3,1,0);for(float z,i,a,g=1.,t,h,d,w,k=.15;i++<1e2;d=max(max(d-3. ,-d),a=z)*k,w=g-g/exp(h>.001?a++,d/.4:h*3e2),g-=a*=w,c+=a*d*4.5+(d>z?z:h/2e2)*K,a=min(p.y+2. ,1.),c.r+=w*a*a*.1,t+=min(h*.2,k/=.985))for(p=normalize(vec3(P+P-R,R.y))*t,p.xz*=mat2(cos( sin(T*.2)+K.zyxz*11.)),p.z+=T*.3,d=p.y,h=d+.5,a=.01;a<1.;a+=a)p.xz*=mat2(8,6,-6,8)*.1,d+=abs (dot(sin((p/a+T)*.3),p-p+a)),h+=abs(dot(sin(p.xz*.6/a),P-P+a));O=vec4(tanh(c),1);} Note The number of characters was 464 characters at first, but thanks to the community it got reduced further, and the article updated accordingly. There is no texture, no mesh, no 3D helper: it's simply a procedural mathematical formula evaluated at each pixel assigning them a color. Code golfing is about making it as short as possible, and thus is part of the art performance. To put things into perspective, the 853x480 JPEG thumbnail of this article is 167x larger than this code. You can watch a larger version on its main dedicated page, or a portage on Shadertoy (484 chars). If your device is not powerful enough (I'm sorry for the lag on this page) or doesn't support WebGL2, a short preview video can be seen on Mastodon. I'm guessing the wizardry of the code has confused many people so we're going to dive through the making-of together. Overall, this demo is a particularly dense and entangled compilation of different techniques, where each aspect could mandate a dedicated article. For that reason, some parts will prefer to link to external resources when the literacy is verbose on the subject. Warning Some demos in this article will start "decaying" over time due to floating point variables getting too large. Reloading the page should fix that. The base template The code is written in GLSL and is executed for each pixel (technically each fragment) on a simple quad geometry (to be accurate it's even a single big triang ## How to Make a Big Impact with a Small Team: Design Ops at Slack DevFeed: [How to Make a Big Impact with a Small Team: Design Ops at Slack]() Original publisher: [Read original article]() Author: andyacevedo Published: 2025-09-05T15:54:34Z Content type: opinion Language: en Sources: [Slack Design]() Topics: [Slack](), [Canvas]() Tags: [business](), [canvas](), [design](), [how-we-work](), [slack](), [strategy](), [team]() ### AI overview Slack describes how its small Design Operations team prioritizes work, aligns with company and design leadership goals, and scales programs to create broader impact across business, people, and product. ### Source excerpt Design Operations is all about helping designers do the best work of their lives. Our job is to clear the path so designers can focus on what they do best: design. At many tech companies, you'll find a more traditional embedded model--one Design Program Manager (DPM) per major product area. But in a lean team [...] The post How to Make a Big Impact with a Small Team: Design Ops at Slack appeared first on Slack Design. ## Animating Text along a Path in Jetpack Compose DevFeed: [Animating Text along a Path in Jetpack Compose]() Original publisher: [Read original article]() Author: sinasamaki Published: 2025-06-19T17:45:02Z Content type: tutorial Language: en Sources: [sinasamaki]() Topics: [Jetpack Compose](), [Canvas](), [Code](), [Graphics](), [Font]() Tags: [article](), [canvas](), [code](), [compose](), [function](), [graphics](), [jetpack-compose]() ### AI overview A tutorial on drawing text character by character along a path in Jetpack Compose. It explains measuring text and paths, positioning each character, animating its offset, and rotating characters according to the path tangent. ### Source excerpt How to position and rotate blocks of text on any path ## Exploding Words: An Interactive Canvas Demo DevFeed: [Exploding Words: An Interactive Canvas Demo]() Original publisher: [Read original article]() Author: James Long Published: 2025-04-12T12:00:00Z Content type: article Language: en Sources: [James Long]() Topics: [Canvas](), [function](), [object]() Tags: [array](), [canvas](), [copy](), [equals](), [experiment](), [function](), [object](), [return](), [svg]() ### AI overview An interactive canvas demo titled "Exploding words," accompanied by JavaScript code defining vector creation, comparison, copying, subtraction, multiplication, and addition operations. ### Source excerpt body { background-image: url(https://static.jlongster.com/20251008/purple-grain.svg); background-size: 500px 500px; background-color: #2E264E; } ^67fd6e
^043ea2 (function () { 'use strict'; var X = 0; var Y = 1; var Z = 2; var W = 3; function vec(x, y, z, w) { var arr; var len = w != undefined ? 4 : z != undefined ? 3 : y != undefined ? 2 : 1; if (typeof ArrayBuffer !== 'undefined') { var buffer = new ArrayBuffer(4 * len); arr = new Float32Array(buffer); } else { arr = []; } arr[X] = x; len >= 2 && (arr[Y] = y); len >= 3 && (arr[Z] = z); len == 4 && (arr[W] = w); return arr; } function vec_equals(v1, v2) { function fleq(x, y) { if (isNaN(x) && isNaN(y)) return true; return Math.abs(x - y) < 0.0000000001; } return ( fleq(v1[X], v2[X]) && fleq(v1[Y], v2[Y]) && fleq(v1[Z], v2[Z]) && fleq(v1[W], v2[W]) ); } function vec_copy(v1) { if (typeof Float32Array !== 'undefined' && v1 instanceof Float32Array) { var buffer = new ArrayBuffer(4 * v1.length); var arr = new Float32Array(buffer); arr[X] = v1[X]; arr[Y] = v1[Y]; arr[Z] = v1[Z]; arr[W] = v1[W]; return arr; } return Array.prototype.slice.call(v1); } function vec_pure_operation(op) { return function(v1, v2) { v1 = vec_copy(v1); op(v1, v2); return v1; }; } function _vec_subtract(v1, v2) { v1[X] = v1[X] - v2[X]; v1.length >= 2 && (v1[Y] = v1[Y] - v2[Y]); v1.length >= 3 && (v1[Z] = v1[Z] - v2[Z]); v1.length == 4 && (v1[W] = v1[W] - v2[W]); } var vec_subtract = vec_pure_operation(_vec_subtract); function _vec_multiply(v1, v2) { v1[X] = v1[X] * v2[X]; v1.length >= 2 && (v1[Y] = v1[Y] * v2[Y]); v1.length >= 3 && (v1[Z] = v1[Z] * v2[Z]); v1.length == 4 && (v1[W] = v1[W] * v2[W]); } function _vec_add( ## Verlet cloth DevFeed: [Verlet cloth]() Original publisher: [Read original article]() Author: James Long Published: 2025-04-11T12:00:00Z Content type: article Language: en Sources: [James Long]() Topics: [Demo](), [Code](), [Canvas]() Tags: [canvas](), [code](), [demo](), [experiment](), [script]() ### AI overview An interactive Verlet cloth demo lets users drag the cloth with the left mouse button, tear it with the right button, and adjust its size. The demo was written with a fork of LLJS that compiles to asm.js, and its code is available. ### Source excerpt body { background-color: black; } #demo-mount { margin-top: 50px; } .sizer { position: absolute; bottom: 60px; width: 500px; left: calc(50% - 250px); text-align: center; color: white; background-color: #303040; padding: 20px; border-radius: 6px; } .sizer input { width: 100%; margin-bottom: 20px; } .sizer .output { font-size: 3em; line-height: 1em; } .info { position: fixed; bottom: 0; right: 0; display: block; margin: 1.5em; } .info.closed { display: none; } .info span { display: block; text-align: right; font-size: .75em; } div.info { color: white; width: 250px; background-color: rgba(255, 255, 255, .2); padding: 1em; } a.info { color: #004854; background-color: white; border-radius: 50%; width: 25px; height: 25px; text-align: center; padding-top: 12px; line-height: 0; opacity: .4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a.info:hover { opacity: 1; cursor: pointer; } ^96c620
^f31aec
32 x 33
?

Drag the cloth around with the left mouse button, and tear it with the right button.

This was written with my fork of LLJS that compiles to asm.js. Get the code, and see more demos at my site. - James Long