background preloader

GLSL Sandbox Gallery

Related:  Node.js | Graphics

Processing.js Fabric.js Javascript Canvas Library 15 great HTML5 and CSS3 generators HTML5 and CSS3 are great languages to start off learning with, and I’ve always thought that one of the best ways to start learning is to just dive in and manipulate the code. As you could probably tell, this is where generators step in. They are a great way to generate some code, play with it, and learn. Not only that, they are incredibly useful because often times as a developer or designer we find we are doing things over and over again. As an example, I have a text-expander snippet that creates an HTML5 template that I wrote about here. I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. CSS3 Generators There is a somewhat negative connotation when it comes to these generators, and I have to say that as a designer and developer there is nothing negative about using one. General Generators This section will focus on generators that take care of the broad spectrum needs and usages.

JavaScript Image ASCIIfier Utilizing magic and the <canvas> element to turn internet images into sexy ASCII art Download : jsascii.js Example usage: Original image: ASCII image: jsAscii grabs the image from the page and paints it on a hidden canvas element. The following custom attributes can be set on image elements to control the ASCII conversion: asciify=(true/false) Set to true to convert image to ASCII asciiresolution=(low/medium/high)Set to high to use all pixels in image, medium to use every other and low to use only one in four pixels. asciiscale=(1-5)Set to 1 to maintain the size of the original image, 2 to double the size, etc. asciicolor=(true/false)Set to true to render the characters in color. asciiblock=(true/false)Set to true to render the characters as colored blocks (only if asciicolor=true). asciiinvert=(true/false)Inverts the character lookup table, so bright becomes dark and vice versa. asciichars=("...")Use a custom character lookup table, default is " .

Mobiscroll - The customizable HTML5 spinner control for touch devices like smartphones and tablets Livecodelab Getting Started with Three.js | Aerotwist ## Introduction I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser. With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5’s canvas, WebGL or SVG. And since it’s open source you could even get involved with the project. For all the awesomeness of Three.js, there can be times where you might struggle. The basics I will assume that you have at least a passing knowledge of 3D, and reasonable proficiency with JavaScript. In our 3D world we will have some of the following, which I will guide you through the process of creating: A scene A renderer A camera An object or two (with materials) You can, of course, do some crazy things, and my hope is that you will go on to do that and start to experiment with 3D in your browser. Support Set the Scene

Literally Canvas Meemoo hackable web apps | Meemoo project by Forrest Oliphant nestorsilk/ThreeNodes4Max.js Source code: Documentation: Introduction Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean operations like union and intersection to combine 3D solids. This library implements CSG operations on meshes elegantly and concisely using BSP trees, and is meant to serve as an easily understandable implementation of the algorithm. Example usage: Operations This library provides three CSG operations: union, subtract, and intersect. The solids a and b above were generated with the following code: Combined CSG Example Below is a solid constructed from a combination of operations: The solids above were generated with the following code: Try it! Edit the code below to construct your own solids.

/reFiddle+/ colony Colony is a neat little visualisation tool for exploring Node projects and their dependencies using d3.js. Each file is represented as a node in the graph. If one file depends on another, a link is made between the two files. Each file is coloured based on the module they belong to. By hovering over a node, you can see the file's name, the files it depends on (light), and the files that depend on it (dark). This demo is a visualisation of colony's own code and dependencies, but you can use the command-line tool to apply it to almost any NPM module or CommonJS project. Click on any file to focus on it: this displays the file's source code and hides any unrelated files on the screen. By pressing the tilde (~) key, you can toggle the size of this text box.

Examples Examples Boolean Operations Candy Crash Satie Liked To Draw Chain Tadpoles Nyan Rainbow Rounded Rectangles Radial Rainbows Meta Balls Voronoi Future Splash Smoothing Spiral Raster Division Raster Q-bertify Path Intersections Path Simplification Hit Testing Bouncing Balls