Procedural texture

• 2D color gradient. For 1D color gradient see here
• defined by a function whose value is computed rather than looked up

images

pascal images (up to 24 bit color)

max(x,y)

xor

sin

sin(x)

sin(x*y)

sin(x) + sin(y)

sin(x) + sin(y) + sin(x+y)

whirl

gray = 8 bit color ( c images )

cabs(z)

carg(z)

max min

star 8

himmelblau function

checkerboard and grid

cartesian

polar

Compare with:

• grid for binary decomposition

Theory

Procedural textures are 2D or 3D plots of mathematical functions (called procedures)

Parts

• 2D scalar field ( 2D array , image, complex plane )
• color
  • modes
  • function f : (R x R) maps to color
• plane transformations
• Texture Mapping = repeatedly paint the same small picture onto your geometry

color modes

• color depth
• color from palette

Color depth

• 24 bit color (rgb)
• 8 bit color mode: gray shades ( where r=g=b)
• 1 bit color mode: Black and White ( b&w )

 case ColorType of
                    TrueColor: if FunctionType=HSV   // 24 bit color
                    	then kolor:=k 
                    	else kolor:=Rainbow(kMin,kMAx,k mod kmax);
                    Direct:    kolor:=k;
                    GrayScale: kolor:=GrayScaleF(Round((k*256) div kmax)); // 8 bit color
                    Pseudo8bit:kolor:=GivePseudo8bitColor(k mod 255);
                    BlackAndWhite: if odd(k) then kolor:=clBlack // 1 bit color
                                         else kolor:=clWhite;
                  end; // case  ColorType }

color functions

Function

• input: the texture coordinates: ( x,y)
• output: a color value

Color functions

pascal

For color functions in pascal ( Delphi) see file: ColorM.pas

Here input is a pair of integers (x,y):

• x in [0, bitmapa.width-1]
• y in [0, bitmapa.height-1]

Function Projection(center:TPoint;height:integer;x,y:integer;FunctionType:TFunctionType):integer;
  // F: C --> R
  //var r:extended; //radius
  begin

     case FunctionType of
            HSV:        result:= Point2Color(X,y);
            AbsZ:       result:=round(sqrt(sqr(X-center.X)+sqr(y-center.Y)));
            ArgZ:       result:=round(RadToDeg(Pi+ArcTan2(y-center.Y,center.X-x)));
            Whirl:      result:=round(sqrt(sqr(X-center.X)+sqr(y-center.Y))+RadToDeg(2*Pi+ArcTan2(y-center.Y,center.X-x)));
            ReZ:        result:=y ;  // horizontal lines
            Saddle:     result:=abs(sqr(x-center.X)-round(sqr(y-center.y) / 2)) ;
            RePlusIm:   result:=y+x;
            MaxReIm:    result:=max(abs(center.x-x),abs(center.Y-y)); // or
            AbsReIm:    result:=abs((center.x-x)*(center.Y-y));           // biomorph
            ImDivRe:    result:=floor(tan((center.Y-y) / (center.X-x+0.000001)));  //
            ImReDiv:    result:=y+x+(100*y div (x+1));
            manhattan:  result:=sqr(abs(center.X-x)+abs(center.Y-y));                                                              // ClientHeight*(sin+1)/2= [0,ClientHeight]

            sinusX:     result:=round(bitmapa.Width*sin(Pi*DegToRad(x)));
            Sinus:      result:=y+round(height*(sin(Pi*DegToRad(x))+1)/8);
            // sin   is in  [-1,+1]
            // (sin+1)      [0,2]
            // (sin+1)/2    [0,1]
            SinusXY:    result:=y+round(height*(sin(Pi*DegToRad(x + y))+1)/8);
            SinusXmY:   result:=y+round(height*(sin(Pi*DegToRad(x*y))+1)/8);
            SinXSinY:   result:=round((height * (2+sin(Pi*DegToRad(y)) + sin(Pi*DegToRad(x)))) /4);//try to change numerical values
            sinXYXY:     result:=round ( height * (2+sin(Pi*DegToRad(y)) + sin(Pi*DegToRad(x))+sin(Pi*DegToRad(x+y)))/8 );
            XorY:         result:=x or  y;
            XxorY:        result:=x xor y;
            XshlY:        result:=x shl y;
            XshrY:        result:=x shr y;
            XandY:        result:=x and y;
            sqrtM:        result:=round(sqrt(x*y)) ;
            ftMax:        result:=Round((center.Y-y) / sqr(center.X -x + 0.0001));
            plasma: result:=round(bitmapa.Width*sin(Pi*DegToRad(x)));
            else          result:=y; //
          end; // case
  end;

c

Here input is a pair of doubles z = (x,y)

• x in [-1,1]
• y in [-1,1]

double conic(double complex z)
{
  double argument;
  
  argument = carg(z); //   argument in radians from -pi to pi
  
  argument = fabs(argument)/ M_PI;
      
  return argument; // argument in range from 0.0 to 1.0
}

// https://en.wikipedia.org/wiki/Himmelblau%27s_function
double GiveHimmelblau(double x, double y){
	// map input to [-m,m]x[-m,m]
	double m = 6.0;
	x *= m;
	y *= m;
	double a = x*x+y-11.0;
	double b = x+y*y-7.0;
	// mapped output to 
	 return (a*a + b*b)/200.0;

}

/*
	https://iquilezles.org/www/articles/checkerfiltering/checkerfiltering.htm
	checkers, in mod form
*/
double checker( double x, double y){

	double m = 5.0; 
	// map input from [-1,1]x[-1,1] to [-m,m]x[-m,m]
	int ix = floor(m*x);
	int iy = floor(m*y);


	return abs(ix + iy) % 2;


}

/* 
 r is the smooth potential and phi is the final angle
 code by xenodreambuie : "I call this texture pyramids. My code in Pascal for the Star8 texture is "
 
 
*/ 

double GiveStar8(double r, double phi){
	double fr;
	double fphi;
	double t;
	double g;
	
	fr = fabs(frac(r));
  	fphi = fabs(frac(phi));
  	if (fphi>fr) {
    		t= fr; 
    		fr= fphi; 
    		fphi=t;
    		}
  
	g = 1+1.5*fphi-2.5*fr;
	t = 1-2.5*fphi-fr;
	if (t> g) 
	  	{ g = t;}
	if (g<0)
  		{g=0;}
  	
	return g;
}

The checkerboard pattern is regular grid of equal-sized colored squares

files

• ColorM.pas
• Rainbow.exe - windows executable program, can be run also on linux
• d.c - c version of Rainbow program
• g.sh bash script for converting ppm files to png

See also

functions

• [Test functions for optimization in wikipedia] (https://en.wikipedia.org/wiki/Test_functions_for_optimization)
• heman - a tiny MIT-licensed C library of image utilities for dealing with height maps, normal maps, distance fields,
• Mixture - s a powerful node-based tool crafted in unity to generate all kinds of textures in realtime
• TextureSynthesis -
• Texture Analysis and Synthesis
• Representation and Synthesis of Visual Texture by Javier Portilla and Eero P. Simoncelli
  • LabForComputationalVision: textureSynth
• Shader Coding: Space GIF step-by-step by The Art of Code
• island-gradient by Code 2D
• 2D distance functions by inigo quilez
• a-simple-procedural-texture-algorithm by by Herman Tulleken
• 1D color gradient
• ptdesigner by drummyfish
• texture-studio
• create-repeating-patterns-with-cycles-procedural-textures
• Sample Procedural Textures from
• Textures by David J. Eck
• what-is-procedural-workflow
• 2D textures in Maya
• A-generic-lattice-noise-algorithm-an-evolution-of
• RippleWeave - A function grapher by Xing and ( Ripple Weave Collection Nested trigonometric functions mapped onto HSL space. RippleWeave, 2021.)

Chladni patterns

• Chladni plate interference surfaces Written by Paul Bourke April 2001
• Enrique Zeleny - "Chladni Figures" Wolfram Demonstrations Project Published: December 6 2008
• Albert Callejo 2009
• vasyan on FF
  • gallery
• Evgeny Demidov
  • chladni
  • waves
• Tonoscope
• shadertoy
• dmackinnon
  • r_examples and blog
• inéquation à 2 inconnues by Patrick Clément

2D noise

• Pocedural_Noise(2f)
• FastNoise by Auburn

transformations

• imitate-a-textured-sphere-in-2d

Midpoint Displacement fractal

• Midpoint Displacement Fractals by Faber and aplet

run

pascal

On linux ( tested on Ubuntu 20.04):

wine ./Rainbow.exe
wine ./exe/Rainbow.exe

Use:

• open main menu, choose options item
• choose color mode
• use arrow up and down keys to change functions
• use shift+arrow to change color type
• check the options in the status bar

History

Old ( but still interesting) Pascal ( Borland Delphi 7.0 personal edition ) program Rainbow for windows ( but can also be run on Linux using wine)

dead old www address: fraktal.republika.pl/tecza.html

Last modification: 2005-05-29

Licence and contributors

• licence - GNU General Public License v3.0
• function star8 by xenodreambuie ( pascal)
• FUNCTION HSVtoColor from UNIT HSVLibrary ( efg, July 1999 www.efg2.com/lab Copyright 1999, All Rights Reserved. May be used freely for non-commercial purposes.
• Function Rainbow by Witold J.Janik; WJJ@CAD.PL thx for Andrzeja W¹sika from pl.comp.lang.delphi http://4programmers.net/view.php?id=201

Git

create a new repository on the command line

echo "# Procedural-texture" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote set-url origin git@github.com:adammaj1/2D-color-gradient-or-Procedural-texture.git
git push -u origin main

local repo

~/Pobrane/r20051021 

Subdirectory

mkdir images
git add *.png
git mv  *.png ./images
git commit -m "move"
git push -u origin main

then link the images:

![](./images/n.png "description") 

gitm mv -f 

warning

distribute binary

The page build completed successfully, but returned the following warning for the `main` branch:

It looks like you're using GitHub Pages to distribute binary files. We strongly suggest that you use releases to ship projects on GitHub. Releases are GitHub's way of packaging and providing software to your users. You can think of it as a replacement to using downloads to provide software. We found the following file(s) which may be a good candidate for releases: 

The only way to prevent these warnings from being sent is to either:

• Remove the executables from your repository
• Store them on a different branch from your Pages publishing source
• Store them outside of the docs directory, if you’re using this directory to host your site

markdown

• mastering-markdown

authenticate

automatically-authenticate-into-github

git remote set-url origin git@github.com:adammaj1/Procedural-texture.git