canvas-sketch-util - Utilities for sketching in Canvas, WebGL and generative art

  •        8

Utilities for generative art in Canvas, WebGL and JavaScript. This is designed to be used alongside the canvas-sketch toolset, but it is generic enough to work for various Node.js/Browser use cases.

https://github.com/mattdesl/canvas-sketch-util

Dependencies:

defined : ^1.0.0
seed-random : ^2.2.0
simplex-noise : ^2.4.0

Tags
Implementation
License
Platform

   




Related Projects

canvas-sketch - [beta] A framework for making generative artwork in JavaScript and the browser.

  •    Javascript

This is in early beta stages, don't expect it to work reliably across versions yet. I'm looking for collaborators and beta testers, so please post an issue if you find any problems or want to help out with this project in some way. canvas-sketch is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser.

react-native-sketch - 🎨 A React Native <Sketch /> component for touch-based drawing.

  •    Objective-C

A React Native component for touch-based drawing. The project contains a folder examples that contains few demos of how to use react-native-sketch. Just copy and paste the code to your React Native application.

p5 - JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing

  •    Javascript

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web.Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

react-native-sketch-canvas - A React Native component for drawing by touching on both iOS and Android

  •    Javascript

A React Native component for drawing by touching on both iOS and Android. To use an image as background, localSourceImage(see below) reqires an object, which consists of filename, directory(optional) and mode(optional). Note: Because native module cannot read the file in JS bundle, file path cannot be relative to JS side. For example, '../assets/image/image.png' will fail to load image.

sketch - A Common Lisp framework for the creation of electronic art, visual design, game prototyping, game making, computer graphics, exploration of human-computer interaction, and more

  •    Common

Sketch is a Common Lisp environment for the creation of electronic art, visual design, game prototyping, game making, computer graphics, exploration of human-computer interaction and more. It is inspired by Processing Language and shares some of the API. To make Sketch run correctly, though, a few requirements must be met.


sketch.js - Cross-Platform JavaScript Creative Coding Framework

  •    Javascript

A tiny (~2kb gzipped) platform for JavaScript creative coding. sketch.js lets you get straight to the fun parts of creative coding, without ever having to worry about shims or boilerplate code.

sketch-rnn - Multilayer LSTM and Mixture Density Network for modelling path-level SVG Vector Graphics data in TensorFlow

  •    Python

This version of sketch-rnn has been depreciated. Please see an updated version of sketch-rnn, which is a full generative model for vector drawings. Implementation multi-layer recurrent neural network (RNN, LSTM GRU) used to model and generate sketches stored in .svg vector graphic files. The methodology used is to combine Mixture Density Networks with a RNN, along with modelling dynamic end-of-stroke and end-of-content probabilities learned from a large corpus of similar .svg files, to generate drawings that is simlar to the vector training data.

sketch-constructor - Read/write/manipulate Sketch files in Node without Sketch plugins!

  •    Javascript

This library is a work in progress, use at your own risk. But feel free to help out where you see bugs or incomplete things! Also, because this library is not using any Sketch APIs/libraries and manipulating the underlying sketch files, the internal file API might change in the future. We will do our best to keep up with any Sketch changes and communicate any breaking API changes. If you want to produce Sketch assets for your design team that are generated from your production codebase in a reliable and consistent way, like part of a build process or CI/CD pipeline. Or maybe you want to have your source of truth for your design tokens or components in Sketch, you can use this to extract that data out into your codebase.

Sketch-Constraints - 📏 A plugin that integrates constraints in Sketch to lay out layers.

  •    Javascript

Sketch Constraints is a plugin that integrates constraints in Sketch to lay out layers. These constraints are relative to the parent, either a group or an artboard. With Sketch Runner, just go to the install command and search for Sketch Constraints. Runner allows you to manage plugins and do much more to speed up your workflow in Sketch. Download Runner here.

wind-js - An demo animation of wind on a Canvas layer in the JSAPI

  •    Javascript

This project is an experiment in client-side data processing and visualization. Most of the code in this project is taken from https://github.com/cambecc/earth and has been re-purposed to support easier application to a variety of mapping APIs and Frameworks. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). The data is passed into a JS class called Windy which takes the bounds of the map, the data, and the canvas element and then applies a Bilinear Interpolation to generate a smooth surface. Once the surface has been generated a function randomly places "particles" onto the canvas at random x/y points. Each particle is then "evolved", moving in a direction and at a velocity dictated by the interpolated surface.

color-wander - :art: Generative artwork in node/browser based on a seeded random

  •    Javascript

Generative artwork in node/browser based on a seeded random.In Chrome, you can right-click the canvas an "Save As" to get the full resolution.

Sketch-Mate - These plugins will make you best friends with Sketch.

  •    Javascript

These plugins will make you best friends with Sketch. To install only a selection of plugins, you will first need to place the library file inventory.js in the root of your Sketch Plugins directory. This is very important as all plugins rely on its functionality.

html-sketchapp-cli - Quickly generate Sketch libraries from HTML documents and living style guides, powered by html-sketchapp

  •    Javascript

Quickly generate Sketch libraries from HTML documents and living style guides, powered by html-sketchapp and Puppeteer. Then run the html-sketchapp command to generate JSON files in html-sketchapp's "Almost Sketch" format, ready to be imported into Sketch.

Sketch-Find-And-Replace - Sketch plugin to do a find and replace on text within layers

  •    Javascript

Finds text in selected layer(s) and all layers contained within - and replaces it with different text. Features partial, case sensitive and full-document matching. Ready for Sketch 48, 47, 46.

MotionCAPTCHA - MotionCAPTCHA jQuery Plugin - Stop Spam, Draw Shapes

  •    Javascript

MotionCAPTCHA is a jQuery CAPTCHA plugin that requires users to sketch the shape they see in the canvas in order to submit a form. At the moment, it's just a proof-of-concept, (no IE support) but the next releases will see progressive enhancement and the ability to use this in production environments as a serious CAPTCHA alternative.

EaselJS - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier

  •    Javascript

EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the CreateJS suite: SoundJS, PreloadJS, and TweenJS.

origami.js - Powerful and Lightweight Library to create using HTML5 Canvas

  •    Javascript

Initially, it's a tool for teaching geometry, web, and javascript in schools. Currently, it's a powerful library to create using HTML5 Canvas. Want to contribute? Follow these recommendations.

Sketch-SF-UI-Font-Fixer - A Sketch plugin that adjusts the character spacing on text layers using iOS 9's SF UI Text/SF UI Display fonts to what it would be when used in an iOS app

  •    

A Sketch plugin that adjusts the character spacing on text layers using iOS 9's SF UI Text/Display fonts to what it would be when used in the app. E.g. If you use SF UI Text at 16pt the script will set this layer's character spacing to -0.32.

sketch-palettes - A Sketch plugin for exporting and importing fill presets

  •    Javascript

A Sketch plugin for exporting and importing fill presets. It supports colors, gradients, and Pattern fills. Move the Sketch Palettes plugin into your Plugins folder or double-click the .sketchplugin file.

sketch-data-populator - A Sketch App plugin to populate your documents with meaningful data

  •    Javascript

Read more about designing with meaningful data. Sketch Data Populator not only makes you more productive (probably around 60x faster), it changes the way you design user interfaces (at least that's what happened to us).