Online 3D editor tool for design and modeling.

If you like design and modeling, this online tool editor can help you using 3D graphics.

News : Top 5 Web Design Trends in 2023 from Red Stapler.

... you can find more about web design on the Red Stapler youtube channel. The next video is a good intro into the design web area with some simple examples:

Shadertoy: matrix rotation for uv.

Today I wrote a simple example in shadertoy about how to apply a rotation using rotation matrices with sin and cos for a uv, see wikipedia.

For uv I used already defined uv. I created a stripe using the modulo function to make rotation visible and completed the rotation with the iTime variable defined in shadertoy to rotate it continuously.

Here is the created source code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    //set the uv to a proper size on the center of screen 
    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
    // set rotation angle value
    float rot = radians(0.0);
    // this set rotation by time and 
    rot = iTime;a
    // algebra formula for rotation by matrix , https://en.wikipedia.org/wiki/Rotation_matrix
    mat2 m = mat2(cos(rot), -sin(rot), sin(rot), cos(rot));
    // rotation of uv with matrix algebra formula where is set the rotation angle 
    uv = m* uv;
    // define float by function module from 1.0 and uv.x - uv.y
    float d = mod(uv.x - uv.y, 1.0);
    // color for fragColor is value of fload d by module function
    vec4 col = vec4(vec3(d), 1.0);
    fragColor = vec4(col);
}

Here is an example share from my shadertoy account.

The threejs project by playdoh.

This is a beautiful website project named lagaleriedesespeces build with the Three.js library.

You can see it on this webpage.

Example with modified shader and threejs from the web.

I searched the web for an example with threejs and found an example created by someone else. I liked it and I modified it to look like this.

News : The Art of Code : How to turn your 2d fractal into 3d!

The The Art of Code come with a new video tutorial.

A while ago someone asked me if its possible to turn a 2d Koch Snowflake into 3d. I thought about it for a bit and came up with a few ways to do this. In this video we'll go over some of those ways!

3D Skyline GitHub contributions in the 2021.

View a 3D model of your GitHub contribution graph. Share it, print it, and more!

You can see this 3D example with my work in the year 2021.

Shadertoy: Use buffers - 001.

This tutorial is about how to use buffers with shadertoy webpage.

Create an account and use the New item from main menu to start a shader.

The default source code when you start the new shader is:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    // Time varying pixel color
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

    // Output to screen
    fragColor = vec4(col,1.0);
}

The buffers, Buffer A, Buffer B, Buffer C, and Buffer D, let you create "multi-pass" shaders.

You can run different shaders in each buffer and you can be passed to another buffer with fragColor.

Press the + tab to add a new buffer into the new shader.

See the next image.

The BufferA comes with this source code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    fragColor = vec4(0.0,0.0,1.0,1.0);
}

The next step is about the link between BufferA and main shader program.

Click on iChannel0 and select the BufferA, see the next image:

I change teh default BufferA source code with my old source code from another example:

// the my old example: https://www.shadertoy.com/view/XlSBz3
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy;
    // set center for circle
	vec2 center = iResolution.xy * 0.5;
    // set radius of circle
	float radius = 0.30 * iResolution.y;
    // create circle with delta and theta function
    // make delta 
    float d = length(center - uv) - radius;
    // make theta with color transparency to 0.4 and set 1 for clamp
    // the clamp is a returned value computed as min(max( x , minVal ), maxVal ).
	float t = clamp(d, 0.4, 1.0);
	fragColor = vec4( t, center, (120,230,0));
}    

Let's see one simple example:

Shadertoy: iChannel texture - 006.

Another simple example with the online shadertoy tool. In this example, I will show you how to use a webcam with a heat predator effect. And how to combine this effect with the webcam image.

vec3 predatorHeat(float v) {
float value = 1.0 - v;
return (0.5+0.5*smoothstep(0.0, 0.1, value))*vec3(
smoothstep(0.5, 0.3, value),
value < 0.3 ? smoothstep(0.0, 0.3, value) : smoothstep(1.0, 0.6, value),
smoothstep(0.4, 0.6, value)
);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;

vec4 temp = texture(iChannel0, uv);
vec4 temp2 = texture(iChannel1,uv);

float average = ((temp.r + temp.g + temp.b) / 2.5);

temp.rgb = vec3(predatorHeat(average));

if(uv.x > 0.5)
fragColor = temp;
else
fragColor = temp2;
}

Slices of Mars in full 3D.

Graphics contain elements with complex informational content and require human and technical processing resources.

The complexity of the informational content is the result of the processing and assimilation process.

I could continue on this topic but it would not be fair for readers to give courses on this topic.

However, we can see multiple examples on the web that highlight these arguments.

Here is a pretty interesting example for both developers and scientists.

Shadertoy: iChannel texture - 005.

This simple example is a kaleidoscope distorsion with math functions: sine and cosine.

You can see this book name it A Mathematical Kaleidoscope: Applications in Industry, Business and Science by B Conolly, S. Vajda how math can solve many issues.

You can change the parameters to see how they interact and how the distortions and use the mouse.

Shadertoy: iChannel texture - 004.

Here is a simple example that can help us understand a bit about the theory of spatial frequency.

This theory is used in various fields as wave propagation.

The example is very simple for a better understanding.

You can change the parameters to see how they interact and how the distortions are.

Shadertoy: iChannel texture - 003.

In the last tutorial I add a sphere distortion and sphere distortion with movement.

Today I use iChannel2 ro get input from keyboard and use this input to move with an offset.

The source code is not perfect because I used multiple areas with texture and I add keyboard offset.

This can be solve easy if I use a buffer.

The main goal of this tutorial is to see how you can use keyboard with iChannel input.

Shadertoy: iChannel texture - 002.

In the last example I created a surface with a texture by channel inputs.

Now, I add a sphere distortion and sphere distortion with movement.

This is the source code I used:

#define PI 3.1415926

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;
    // get poins 
    vec2 p = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
    // set surface formula
    vec3 v = vec3(p.x, p.y, sqrt(1.0 - p.x * p.x - p.y * p.y));
    // create normals 
    vec3 n = normalize(v);
    
    // https://en.wikipedia.org/wiki/Distortion_(optics)
    vec2 sphere_distortion = vec2(atan(n.z, n.x) / PI,0.00000001 * p.y);

    vec4 color = vec4(0.0,0.0,0.0,0.0);
    
    if (uv.x > 0.0 && uv.x < 0.5)
    {
   		//color = texture(iChannel0, vec2(1.0 - (uv.x/0.5),uv.y/0.5)+ sphere_distortion);
        // with movement iTime
        color = texture(iChannel0, vec2(1.0 * iTime- (uv.x/0.5),uv.y/0.5)+ sphere_distortion);
    } 
    else if (uv.x > 0.5 && uv.x < 1.0) 
    { 
        //color = texture(iChannel1, vec2((uv.x/0.5),uv.y)+ sphere_distortion);
        // with movement iTime
        color = texture(iChannel0, vec2(iTime-(uv.x/0.5),uv.y)+ sphere_distortion);
        
    } 
	fragColor = color;
}

Shadertoy: iChannel texture - 001.

In this example with shadertoy online tool I will show you how to map a texture from iChannel texture input and UV areas.

 void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy / iResolution.xy;
    
   vec4 color = vec4(0.0,0.0,0.0,0.0);
    
    if (uv.x > 0.0 && uv.x < 0.5)
    {
   		color = texture(iChannel0, vec2(1.0 - (uv.x/0.5), uv.y/0.5));
    } 
    else if (uv.x > 0.5 && uv.x < 1.0) 
    { 
        color = texture(iChannel1, vec2(1.0 - (uv.x/0.5), uv.y));
    } 
	fragColor = color;
} 

You can see this example online:

Shadertoy: create the environment - 001.

Today I will show you two ways to create an environment using shader toy online tool.

One uses a cube map and the other uses the classic ray marching method.

Both examples are mathematically simple to understand.

For a better understanding of the method ray marching you can see this link.

The bobsprite editor - web tool .

This online editor has several functions to create sprites and animations used in game development

The development team tells us:

BobSprite is a browser-based free online sprite editor excellent for pixel art. It also has tools and effects for normal drawing and painting.

I found an video tutorial on youtube with this online tool:

Krita 4.2.9: Brushes from iforce 73 artist.

These brushes created by an artist named iforce 73 can be found here and here.
You can find youtube examples with these sets of brushes on the youtube official channel.

The batwerk online game.

This online game is a simple game with bats that must eat gifts.
Depending on this craving you will be rewarded with winnings.
A simple game that you can play in your free time.

Multiple online tools on angrytools webpage.

The angrytools webpage comes with multiple online tools.
These tools solve multiple issues for you, like:

• Online CSS Gradient Generator;
• Gradient to Image Maker;
• Android Button Maker;
• Code for Email;
• CSS Generator;
• Android Pixel Calculator;
• Basic Commands - Ubuntu/Windows;
• CSS Animation Kit;
• Total Text Converter;
• Ultimate Bootstrap Editor;
• CSS Media Query;

Click on bottom button for each online tool.
A new webpage is open with the tool, make changes, and use the result.
For example, click on Gradient to Image Maker button to use this feature.
The new page is open with a gradient area and example.
Select your gradient from Presets and use generate source button to fill CSS code area with the CSS source code for that gradient.
You can copy this source code and use it in your project.