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.

Spring Flowers WebGL Demo

A beautiful demo with WebGL.

The source code can be found on this GitHub repository.

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!

News : Jared "Disco Lando" Huckaby on Sprint Stint Winter 2022

Jared "Disco Lando" Huckaby is the Creative Content Lead at Cloud Imperium, Los Angeles. He was previously Associate Creative Producer, and Content Manager before that.

You can read more on this webpage.

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;
}

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 new Unity version 2020.2 .

Unity 3D is getting better every day. The new version 2020.2 offers many functions.

Shadertoy: The sin math function - 002.

This is another shader example to draw a sine math function using a sine wave, see Wikipedia. I used shadertoy website and the mat sin function by time. The source code is commented for a better understanding of it.

// this size of line to paint each pixel from screen
const float size = 0.01;

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    // resize uv 
    uv = uv  * 2.0;
    // translate normalized pixel coordinates uv from [0,1] to [-1, 1] with 
    uv = (uv - 1.0);

    // get uv.x aspect ratio
    uv.x *= iResolution.x / iResolution.y;
  
    // get simple sine 
    //float t = sin(uv.x);

    // get sine * 3 with same size uv will zoom the sine graphic
    // see also https://en.wikipedia.org/wiki/Sine_wave
    float t = sin(uv.x * 3.0);
    
 // select domain area of sine and drwa yellow color 
    // else put an blue color on rest
    if (uv.y >= t - size && uv.y <= t + size) {
        // draw sine
     fragColor = vec4(1.0,1.0,0.0,1.0);
    } else {
        // draw background
        fragColor = vec4(0.0,0.0,1.0,1.0);
    }
}

The result of this shader is this:

Fantasy-Map-Generator online tool.

This online map generator is a simple way to generate maps.
The full source code is free and can be found at this GitHub project.

You can test it at Fantasy-Map-Generator online tool.

Testing the ACE embeddable code editor.

Topday I try to use the ACE editor.

This is an embeddable code editor written in JavaScript with many features:

• Syntax highlighting for over 110 languages (TextMate/Sublime Text.tmlanguage files can be imported)
• Over 20 themes (TextMate/Sublime Text .tmtheme files can be imported)
• Automatic indent and outdent
• An optional command line
• Handles huge documents (four million lines seems to be the limit!)
• Fully customizable key bindings including vim and Emacs modes
• Search and replace with regular expressions
• Highlight matching parentheses
• Toggle between soft tabs and real tabs
• Displays hidden characters
• Drag and drop text using the mouse
• Line wrapping
• Code folding
• Multiple cursors and selections
• Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
• Cut, copy, and paste functionality

You can read more at the official website.

See the Pen ace_editor_001 by Cătălin George Feștilă (@catafest) on CodePen.

Unity 3D on Fedora 31 Linux distro.

First, you need to have good hardware to run the Unity 3D software on Fedora 31 Linux.
To install on Fedora 31 Linux is easy to do. You need to download the Unity beta application from this website.

[mythcat@desk ~]$ cd Downloads/
[mythcat@desk Downloads]$ chmod +x UnitySetup-2018.2.7f1 

You need to install this package for this file: libgconf-2.so.4

[root@desk Downloads]# dnf install GConf2-devel.x86_64

The next step is simple run the installer and follow the interface...

[mythcat@desk Downloads]$ ./UnitySetup-2018.2.7f1 

If you want to use a free license then you need to save the license from application into the file named Unity_v2018.2.7f1.alf .
Using the Unity website manual activate the free license and download the file named Unity_v2018.x.ulf. You can use the UnityHub.AppImage from Unity official website to install any Unity 3D version:

[mythcat@desk Downloads]$ chmod +x UnityHub.AppImage 
[mythcat@desk Downloads]$ ./UnityHub.AppImage 

See the screenshots:

Shadertoy: The sin math function - 001.

Another example with shadertoy online tool.
The example come with all comments to understand how the sine function is show on shadertoy website.

The wrld for custom maps.

A good map can have many features.
If you don't want to build one using advanced programming language then you can use this website.
You can use this with an online map with Unity, JavaScript, iOS and Android.
You can also build your indoor map and visualize any building in 3D.
All of these features let you optimize building management, resources, and planning.
The map can have many features like time of day, weather and seasons and heat map.
The next example is an outdoor map of my location.