background preloader

Generative art

Facebook Twitter

Shadertoy BETA. This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Preprocessor: # #define #undef #if #ifdef #ifndef #else #elif #endif #error #pragma #extension #version #line Operators: () + - ! * / % << >>< ><= >= == ! = && || Comments: // /* */ Types: void bool int float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 mat2 mat3 mat4 sampler2D Function Parameter Qualifiers: [none], in, out, inout Global Variable Qualifiers: const Vector Components: .xyzw .rgba .stpq Flow Control: if else for return break continue Output: vec4 gl_FragColor Input: vec4 gl_FragCoord Built-in Functions: How-to Use structs: struct myDataType { float occlusion; vec3 color; }; myDataType myData = myDataType(0.7, vec3(1.0, 2.0, 3.0)); Initialize arrays: arrays cannot be initialized in WebGL.

Be careful! The f suffix for floating pont numbers: 1.0f is illegal in GLSL. Shadertoy specific inputs Shadertoy outputs. \\ creative code sketches. [JSConfUS 2013] Steven Wittens: Making WebGL Dance. WebGL - Web API Interfaces | MDN. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements. Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; however, the user's device must also have hardware that supports these features.

The <canvas> element is also used by the Canvas API to do 2D graphics on web pages. Reference Standard interfaces Extensions Events Constants and types WebGL 2 WebGL 2 is a major update to WebGL which is provided through the WebGL2RenderingContext interface. See also the blog post "WebGL 2 lands in Firefox" and for a few demos.

Guides and tutorials Guides Data in WebGL A guide to variables, buffers, and other types of data used when writing WebGL code. WebGL best practices Legend. An Introduction to Shaders. Introduction I've previously given you an introduction to Three.js. If you've not read that you might want to as it's the foundation on which I will be building during this article. What I want to do is discuss shaders. WebGL is brilliant, and as I've said before Three.js (and other libraries) do a fantastic job of abstracting away the difficulties for you. But there will be times you want to achieve a specific effect, or you will want to dig a little deeper into how that amazing stuff appeared on your screen, and shaders will almost certainly be a part of that equation. Also if you're like me you may well want to go from the basic stuff in the last tutorial to something a little more tricky. I'll work on the basis that you're using Three.js, since it does a lot of the donkey work for us in terms of getting the shader going. 1.

WebGL does not offer the use of the Fixed Pipeline, which is a shorthand way of saying that it doesn't give you any means of rendering your stuff out of the box. A Beginner's Guide to Coding Graphics Shaders - Tuts+ Game Development Tutorial. Learning to write graphics shaders is learning to leverage the power of the GPU, with its thousands of cores all running in parallel. It's a kind of programming that requires a different mindset, but unlocking its potential is worth the initial trouble. Virtually every modern graphics simulation you see is powered in some way by code written for the GPU, from the realistic lighting effects in cutting edge AAA games to 2D post-processing effects and fluid simulations.

Shader programming sometimes comes off as an enigmatic black magic and is often misunderstood. There are lots of code samples out there that show you how to create incredible effects, but offer little or no explanation. This guide aims to bridge that gap. This is a general guide, so what you learn here will apply to anything that can run shaders. A shader is simply a program that runs in the graphics pipeline and tells the computer how to render each pixel. Shaders are written in a special shading language. Congratulations! Shaders - Beautiful Seams. Understanding and writing shaders for complex animations with Processing and GLGraphics Last week-end I took part in a masterclass workshop organized by Processing Paris about shaders. The workshop was brilliantly led by v3ga ( with about 20 participants locked in a large room full of computers for 3 days. A shader is a program that runs directly on the graphical card (GPU) of a computer.

Using information sent by the processor (CPU), shaders are responsible for rasterizing and displaying any graphics elements displayed on a screen. The term shader comes from their first use on older computers, where they were mainly responsible for calculating levels of darkness of surfaces to create the illusion of depth. Since they run on the GPU, shaders are very, very fast. In some cases, it is better to do as much as possible with shaders. But it is not always a good idea to do everything in shaders. These last experimentations with typography were made with an eye-tracker in mind. WebGL Boilerplate. This is a continuation from WebGL Fundamentals. WebGL sometimes appears complicated to learn because most lessons go over everything all at once.

I'll try to avoid that where possible and break it down into smaller pieces. One of things that makes WebGL seem complicated is that you have these 2 tiny functions, a vertex shader and a fragment shader. Those two functions usually run on your GPU which is where all the speed comes from. That's also why they are written in a custom language, a language that matches what a GPU can do. Those 2 functions need to be compiled and linked. Here's the boilerplate code for compiling a shader. And the boilerplate code for linking 2 shaders into a program Of course how you decide to handle errors might be different.

I like store my shaders in non javascript <script> tags. Now to compile a shader I can just do var shader = compileShaderFromScript(gl, "someScriptTagId"); /** * Creates a program from 2 script tags. * * @param {! Generative Art Links. Some links to Generative Art, Math & Fractals, and other creative ways of creating computional imagery. The list is not meant to be exhaustive: rather, it is a list of my favorite links. Generative Art Software General-Purpose Software Processing is probably the most used platform for Generative Art. It is an “open source programming language and integrated development environment (IDE) built for the electronic arts and visual design communities”. Java-based. Nodebox – A Python based alternative to Processing.

Vvvv is “a toolkit for real time video synthesis”. PureData a “real-time graphical dataflow programming environment for audio, video, and graphical processing.” Specific Systems Context Free Art – uses Context Free Design Grammars to generate 2D images. Structure Synth – my own attempt to extend Context Free Art into three dimensions. Ready. K3DSurf – 3D surface generator (for a nice example check out this one by Schmiegl). Fractals and Math Art Software Fragmentarium. J. People Projects. Schwarm - Autonomous drawing agents by Andreas Nicolas Fischer (@__anf) Schwarm by Andreas Nicolas Fischer is a Processing application that uses a swarm of particles to gradually create an abstract composition from photographs. The drawing agents behave according to a set of rules, but have a degree of autonomy. Each time the software is run it produces an infinite sequence of unique images. The software analyzes a sequence of images using their color values at their origin, which it then spreads like a brush would spread paint.

After a predefined amount of time a new image becomes the source of the composition and all values definining shape and direction of the movement are being reset. The transition between the images happens seamlessly, sometimes barely perceptible in realtime. The photographs only serve as a source for color and composition. The main focus, Andreas tells CAN, is the ephemeral nature of the ever-changing composition. Four images showing an overlay of original images and particle swarms. Project Page | Andreas Nicolas Fischer. Constructs | W:Blut - Creative Coding. Warning: all OpenGL con­structs are bro­ken for online view­ing.

Download and hope… Fixation data fix­a­tion (2012) Duality (2012) Stack (2011) McCabeism (2011) Collapse (2011) Vordel (2011) Condel (2011) Decon (2011) 2D Boolean (2011) Tetramass (2011) Tree (2011) Orthomass (2011) Obsessive poly­he­dron dis­or­der (2011) Segseg 3D (2011) Danzer 2D (2010) Traffic (2010) Division (2010) Limpet (2010) Diatom (2010) Core (2010) Inside I (2009) Boombox (2009) Buckyslice (2009) Sticky cube (2009) Alignment (revis­ited) (2009) Voronoi Ball (2009) Glow Flock (2009) Voronoi Fractal 2 (revis­ited) (2009) Delaunay Flock (2009) Flock in a Box (2009) Flock on a Plane (2009) Strange Symmetry 2 — Wreath (2009) Strange Symmetry 2 — Lite (2009) SeR II (2008) Tardis 01 (2008) Fine Structure 3D (2008) Curvature (2008) Voronoi fractal | W:Blut - Creative Coding. I set myself a challenge last weekend: starting only from the code for the intersection point of two lines, I would try to make a Voronoi fractal applet without using any further reference.

This actually had a reason: I can draw a Voronoi graph on paper but I do not know how to draw it. Bear with me on this, it'll make sense... Try it yourself, constructing a sketch of a Voronoi graph is simple: Draw some random dots. Connect all dots with straight lines. Bisect all connecting lines (i.e. draw a perpendicular straight line through the middle of the connecting lines). One of my rough sketches: A deceptively simple process. In the end, I found a way of making the computer do the same thing. Two nights and an insight in yet another amazing way our brains work later, this is what I came up with. Update : I've replaced the applet with a new version using less memory. Generative Portraits with Processing.js | Brondbjerg Design & Development Blog. We recently produced a series of generative portrait experiments using Processing.

I thought it would be useful to talk about the background of the project and also document the process of writing the algorithm, producing PDFs for print and porting the application onto the web with Processing.js. Dead Presidents - Generative Portraits with Processing & Processing.js Background Digital design is often created and consumed on-screen and can be clinical and lacking serendipity. We wanted to create work that draws from analogue sources and so, this project started as an investigation into colour and composition sampling from existing classical portraits and landscapes.

We created an algorithmic drawing tool in Processing which, as you drew, sampled the average colour between the last two positions of your mouse. We discussed this project recently on the fantastic Artists & Algorists site. The Drawing Algorithm The algorithm starts from a simple idea: Here’s some code to do that: Conclusion Thanks! Chris Riebschlager - Processing Sketches. Ex Nihilo. GLSL Sandbox Gallery. GuruBlog - neon lines in processing using a glsl filter. I made a short processing script that draws sine curves and uses a glsl blur filter to add a neon effect To create this effect you need a processing sketch drawing the curves and a glsl filter that adds the blur effect.

Open processing and enter the following code to create the sine curves. PShader blur; void setup() { size(600,300,P3D); blur = loadShader("blur.glsl"); } void draw() { background(0); strokeWeight(1); noFill(); for( int j=0; j<10; j++) { stroke( 255*noise(j/1.0),255-255*noise(j/1.0),255); beginShape(); float f1 = noise(j/10.0)+0.5; float f2 = noise(j/7.0); float f3 = noise(j/1.3)+.5; float f4 = noise(j/1.2,frameCount/500.0); for( int i=0; i<610; i+=10) { vertex( i, height/2+(100*f4)*sin(f1*TWO_PI*i/600 + 100*f2 - frameCount/(100.0*f3))); } endShape(); } filter(blur); // if ( frameCount <= 500 ) { // saveFrame( "f-####.png" ); // } } Now create a new Textfile, enter the following glsl code and save it as "blur.glsl".

Andres Colubri | Projects & Collaborations. Shader Library. The Book of Shaders. Geometry, Textures & Shaders with Processing - Tutorial by @AmnonOwed. Processing - Shaders. This tutorial is for Processing version 2.0+. If you see any errors or have comments, please let us know. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. The code for this tutorial is available here.

What is a Shader? A new feature in Processing 2 is the inclusion of GLSL shaders. In order to understand how shaders work and how they can be used to extend the drawing capabilities of Processing, it is necessary to have an overview of the key concepts of shader programming, first in general and then from the "point of view" of a Processing sketch. Answering the question alluded by the title of this section, a shader is basically a program that runs on the Graphics Processing Unit (GPU) of the computer, and generates the visual output we see on the screen given the information that defines a 2D or 3D scene: vertices, colors, textures, lights, etc. The first stage in the pipeline is the vertex shader. The PShader class Color shaders. GPU Gems. GPU Gems is now available, right here, online.

You can purchase a beautifully printed version of this book, and others in the series, at a 30% discount courtesy of InformIT and Addison-Wesley. Please visit our Recent Documents page to see all the latest whitepapers and conference presentations that can help you with your projects. Now is an excellent time to be working in the field of computer graphics. Over the past five years, GPU technology has advanced in astounding ways, and at an explosive pace. The rendering rate, as measured in pixels per second, has been approximately doubling every six months during those five years. A factor of two is certainly exciting enough, but more exciting is the wonder of compounding. Not only has performance increased, but also the quality of computation and the flexibility of graphics programming have steadily improved during that same time. We have entered the era of programmable GPUs. The first effects of fast, programmable GPUs are subtle.

U.S. OpenGL Tutorials | Computer Graphics Tutorials and Examples with OpenGL. Using Shaders in the Browser with WebGL. Shaders - Beautiful Seams. Modern OpenGL tutorial (python) This tutorial is part of the vispy project which is an OpenGL-based interactive visualization library in Python. During this tutorial, only the vispy low-level interface (named gloo) will be used. A stand-alone gloo package is distributed along this tutorial but you should use the vispy.gloo package from the latest vispy distribution which is more up-to-date. Before diving into the core tutorial, it is important to understand that OpenGL has evolved over the years and a big change occured in 2003 with the introduction of the dynamic pipeline (OpenGL 2.0), i.e. the use of shaders that allow to have direct access to the GPU.

Note ES is a light version of OpenGL for embedded systems such as tablets or mobiles. Before this version, OpenGL was using a fixed pipeline and you may still find a lot of tutorials that still use this fixed pipeline. Then it's most certainly a tutorial that adress the fixed pipeline. What are shaders ? The shader language is called glsl. What are buffers ? Summary Program.