tutorial

function parameters +w, h, x, y +t = current time (ms) +d[] = imageData array +r, g, b, a = color values +mousex, mousey + +Math aliases +floor, ceil, round +abs, sign, mod(n,m) +pow, exp, sqrt +cos, sin, tan +acos, asin, atan, atan2 +random() +E, PI, PHI + +convenience functions +clamp(n,min,max) +mix(n,a,b) (lerp) +step(a,b) +smoothstep(min,max,n) +avg(m,n,a) +cosp, sinp (mapped to [0,1]) +pixel(x,y) == 4*(y*w+h) +dist(x,y,a,b) +angle(x,y,a,b) +rand(n), randint(n) +randrange(a,b) +choice(array) +deg(radians), rad(degrees) + +set pixel color +rgb(r,g,b) +rgbref([rgb]) +black() white() red() +gray(n) + +color spaces +rgb2xyz(rgb) +xyz2rgb(xyz) +xyz2hunterlab(xyz) +hunterlab2xyz(Lab) +xyz2cielab(xyz) +cielab2xyz(Lab) +rgb2hsl(rgb) +hsl2rgb(hsl) +rgb2cmy(r,g,b) +cmy2rgb(cmy) +cmy2cmyk(cmy) +cmyk2cmy(cmyk) +(not all have been tested) +

function parameters -w, h, x, y -t = current time (ms) -d[] = imageData array -r, g, b, a = color values -mousex, mousey - -Math aliases -floor, ceil, round -abs, sign, mod(n,m) -pow, exp, sqrt -cos, sin, tan -acos, asin, atan, atan2 -random() -E, PI, PHI - -convenience functions -clamp(n,min,max) -mix(n,a,b) (lerp) -step(a,b) -smoothstep(min,max,n) -avg(m,n,a) -cosp, sinp (mapped to [0,1]) -pixel(x,y) == 4*(y*w+h) -dist(x,y,a,b) -angle(x,y,a,b) -rand(n), randint(n) -randrange(a,b) -choice(array) -deg(radians), rad(degrees) - -set pixel color -rgb(r,g,b) -rgbref([rgb]) -black() white() red() -gray(n) - -color spaces -rgb2xyz(rgb) -xyz2rgb(xyz) -xyz2hunterlab(xyz) -hunterlab2xyz(Lab) -xyz2cielab(xyz) -cielab2xyz(Lab) -rgb2hsl(rgb) -hsl2rgb(hsl) -rgb2cmy(r,g,b) -cmy2rgb(cmy) -cmy2cmyk(cmy) -cmyk2cmy(cmyk) -(not all have been tested) -

About ShaderBlaster -Shaders are little programs that draw a picture, pixel by pixel. With ShaderBlaster, use shaders on gifs and images to make new effects. +

Shaders are little programs that draw a picture, pixel by pixel. With ShaderBlaster, use shaders on gifs and images to make new effects. -Your basic variables are position (x, y), time (t), and color (r, g, b, a). +Your basic variables are position (x, y), +time (t), and color (r, g, b, a). Many math functions such as cos and sqrt are available, along with functions from GLSL like step and mix. Click commands to see a complete list. -- cgit v1.2.3-70-g09d2 From 2c0ddba2dab715a7c81a106edcfdd9f5be0592a2 Mon Sep 17 00:00:00 2001 From: jules Date: Sun, 2 Feb 2014 02:45:04 -0500 Subject: boldness --- tutorial.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'tutorial.html') diff --git a/tutorial.html b/tutorial.html index f994c2a..69b293e 100644 --- a/tutorial.html +++ b/tutorial.html @@ -16,9 +16,9 @@ a{ color: #a39; } Your basic variables are position (x, y), time (t), and color (r, g, b, a). -Many math functions such as cos and sqrt are available, along with functions from GLSL like step and mix. Click commands to see a complete list. +Many math functions such as cos and sqrt are available, along with functions from GLSL like step and mix. Click commands to see a complete list. -Use the bar below to search Dumpfm and Photoblaster for images, or use your own. +Use the bar below to search Dumpfm and Photoblaster for images. If you make a cool effect, you can render it out to a gif, or save the shader for others to use.

-- cgit v1.2.3-70-g09d2 From 536e76601b10fbf1e03d994750e045b08922555a Mon Sep 17 00:00:00 2001 From: jules Date: Mon, 3 Feb 2014 10:46:00 -0500 Subject: copy --- tutorial.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tutorial.html') diff --git a/tutorial.html b/tutorial.html index 69b293e..7ea652b 100644 --- a/tutorial.html +++ b/tutorial.html @@ -16,7 +16,7 @@ a{ color: #a39; } Your basic variables are position (x, y), time (t), and color (r, g, b, a). -Many math functions such as cos and sqrt are available, along with functions from GLSL like step and mix. Click commands to see a complete list. +Many math functions such as cos and sqrt are available, along with functions from GLSL like step and mix. You can see a full list by clicking "commands" above. Use the bar below to search Dumpfm and Photoblaster for images. -- cgit v1.2.3-70-g09d2 From c563bfa3df10aac45e0f121f4977c5e8484cc525 Mon Sep 17 00:00:00 2001 From: Jules Date: Tue, 4 Feb 2014 12:08:19 -0500 Subject: copy --- shader-combo.html | 2 +- tutorial.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'tutorial.html') diff --git a/shader-combo.html b/shader-combo.html index 7952ade..8eda2c0 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -30,7 +30,7 @@ a { color: #00f; } .ui-sortable-helper { cursor: -webkit-grabbing !important; } #commands { top:40px;right:20px; width:190px;height:calc(95% - 230px); } -#tutorial { top:40px;right:30px; width:290px;height:325px; display: block;} +#tutorial { top:40px;right:30px; width:290px;height:360px; display: block;} .iframe { position: absolute; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; } .iframe iframe {width: 100%;height:100%;margin:0;padding:0;border:0;} .iframe.dragging iframe { pointer-events: none; } diff --git a/tutorial.html b/tutorial.html index 7ea652b..ba6d216 100644 --- a/tutorial.html +++ b/tutorial.html @@ -3,7 +3,7 @@ tutorial -

Shaders are little programs that draw a picture, pixel by pixel. With ShaderBlaster, use shaders on gifs and images to make new effects. +

Shaders are procedures that draw a picture by coloring each pixel individually. Use shaders on gifs and images to make new effects. Your basic variables are position (x, y), time (t), and color (r, g, b, a). -Many math functions such as cos and sqrt are available, along with functions from GLSL like step and mix. You can see a full list by clicking "commands" above. +Many math functions such as cos and sqrt are available, along with functions from GLSL like step and mix. You can see a full list by clicking "commands" above. When you make a cool effect, render a gif and save the shader for others to use. -Click "images" below to search Dumpfm and Photoblaster for images, or enter a URL at top left. - -If you make a cool effect, you can render it out to a gif, or save the shader for others to use. +You can apply these shaders to any image. Click "images" below to search Dumpfm and Photoblaster, or enter a URL at top left.

shaderblaster