The Paint API gives us low-level access to CSS rendering. Instead of showing people the same imagery every time they visit a page, we can display something special and unique for them! What is the CSS Paint API? For example, a rule could be “if a random number is greater than 50, render a red square, if it is less than 50, render a blue square*,”* and, in the browser, a source of randomness could be Math.random().īy taking a generative approach to creating patterns, we can generate near-infinite variations of a single idea - this is both an inspiring addition to the creative process and a fantastic opportunity to delight our users. We define some rules and allow a source of randomness to guide us to an outcome. Generative art/design is any work created with an element of chance. If you are already familiar with the CSS Paint API and generative art/design, feel free to skip ahead to the next section. If you don’t feel like navigating another article, however, here are a couple of key concepts to be familiar with before moving on. If you are new to either subject, this will be a great place to start. Speaking of which… Before we startįor a comprehensive introduction to both the Paint API and generative art/design, I recommend popping over to the first entry in this series. We will do a quick overview before we get started. A little familiarity with generative art and some knowledge of the Paint API/HTML canvas will be handy but not essential. This tutorial is perfect for folks who are comfortable writing HTML, CSS, and JavaScript. Spellbooks/text editors at the ready, friends, let’s do some magic! Intended audience In this tutorial, we will be using the Paint API to create three (hopefully!) beautiful, generative patterns that could be used to add a delicious spoonful of character to a range of websites/applications. The doors to a mystical new world are well and truly open! For the first time, we have a section of CSS that exists for the sole purpose of programmatically creating images. For us web folk, this is incredibly exciting. Recently, though, CSS was gifted an exciting new set of APIs known as Houdini, and one of them - the Paint API - is specifically designed for rendering 2D graphics.
From Lynn Fisher’s joyful A Single Div creations to Diana Smith’s staggeringly detailed CSS paintings, wildly creative, highly skilled developers have - over the years - continuously pushed web technologies to their limits and crafted innovative, inspiring visuals.ĬSS, however, has never really had an API dedicated to… well, just drawing stuff! As demonstrated by the talented folks above, it certainly can render most things, but it’s not always easy, and it’s not always practical for production sites/applications. The browser has long been a medium for art and design.
0 kommentar(er)
