# Blender – configure freestyle rendering for black and white sketches

World setting –> Horizon Color –> white

Rendering –> Freestyle

next to Render Panel:

• Render Layers, Hidden
• Edge Mark (render) Strg + E at Edge

—-

For Camera View press “0”, then press “N” for Properties, then View –> “Lock Camera to View”

Strg+ 0

# Python – Simulate talking enums and bitsflags

Enum

“id” of entry is rising 1 by 1 (seen at http://stackoverflow.com/questions/36932/how-can-i-represent-an-enum-in-python)

```def enum(*sequential):
enums = dict(zip(sequential, range(len(sequential)) ))
return type('Enum', (), enums)```

# Bitflags

“id” of entry is rising exponentialto power of 2 to allow check for multiple bits

```def bitflag(*sequential):
bitflags = dict(zip(sequential, [2**i for i in range(len(sequential))] ))
return type('Bitflag', (), bitflags)```

# Conditional plotting

### Solution:

set value to (1/0)

### Example:

plot sin(x) only for positive values:

`plot sin(x)>0?sin(x):(1/0)`

# python numpy quickies

Generate a 2 x 4 array of ints between 0 and 4, inclusive:

>>> np.random.randint(5, size=(2, 4))
array([[4, 0, 2, 1],
[3, 2, 2, 0]])

see http://docs.scipy.org/doc/numpy/reference/generated/numpy.random.randint.html

## Evenly spaced values for an interval

Specfiy number of segments

numpy.linspace(startstopnum=50endpoint=Trueretstep=Falsenumpy.linspace reference

Return evenly spaced numbers over a specified interval.

May include stop value (endpoint = True)

### Specify step interval size

numpy.arange([start], stop[, step], dtype=Nonenumpy.arange reference

Return evenly spaced values within a given interval.

### Create Sample Positions for pixels

def genPixelSamples(width, height, numWidth, numHeight, midPoint = True):
“if midPoint = true, sample is positioned at pixel center, else in the corner”
“output with y in 0 and x in 1 of 3rd dimension”
output = np.zeros([numHeight, numWidth, 2])
#y
output[:,:,0] = np.outer( np.linspace(0, height, numHeight, False), np.ones([numWidth]) );
#x
output[:,:,1] = np.outer( np.ones([numHeight]), np.linspace(0, width, numWidth, False) );

if midPoint:
output[:,:] += 0.5 * output[1,1]

return output

# Object Intersection Routines

http://www.realtimerendering.com/intersections.html – website for book real time rendering (Tomas Akenine-Möller, Eric Haines, and Naty Hoffman), containing number of intersection routines for different object types

http://fileadmin.cs.lth.se/cs/Personal/Tomas_Akenine-Moller/raytri/ – variations of Moller Trumbore

# convert string into binary representation (8 bits per char)

split string into chars, for each char get ordinal number, and create string using 8bit  format of the number. Concat all

```def str_2_binrep(s):
return "".join(['{0:008b}'.format(ord(c)) for c in list(s)])

example:

>>> str_2_binrep("Hello World")
'0100100001100101011011000110110001101111001000000101011101101111011100100110110001100100'```

If you want to have a space in between, just write

`'{0:008b} '`

## split string into groups of n characters

fill array with substrings, range(start, stop, stepwidth)

```def str_splitintogroups(s, n):
return [s[i : (i+n) ] for i in range(0, len(s), n)]

example:

>>> str_splitintogroups("split string into groups", 3)
['spl', 'it ', 'str', 'ing', ' in', 'to ', 'gro', 'ups']```

## XOR of two strings

zip builds tuples containing the ith char of each string; for each pair the xor of the octal number of the char is converted into char and appended

```def str_xor(s1, s2):
return "".join([chr( ord(c1) ^ ord(c2) ) for (c1,c2) in zip(s1, s2)])

example:

>>> str_xor("Hello", "World")
'\x1f\n\x1e\x00\x0b'

>>> str_xor("Hello", "Hello")
'\x00\x00\x00\x00\x00'```

## Encode String as hex, and decode back

String encode, see http://docs.python.org/2/library/codecs.html#standard-encodings for possible encodings (python 2); output is using 2 digits each per byte of input

```example:

>>> "BibiBlocksberg".encode('hex')
'42696269426c6f636b7362657267'

>>> "BibiBlocksberg".encode('hex').decode('hex')
'BibiBlocksberg'```

## Dec to Hex, Hex to Dec

How to convert a decimal number into a hex representation:

```examples:

>>> hex(1000)
'0x3e8'

>>> "%X"%1000
'3E8'```

How to convert a from hex (or other) back to decimal representation:

```examples:

>>> int("3E8", 16)
1000

>>> int("1001", 2)
9```

# Find object in image using the histograms

Situation:
You want to detect some object (image B) in image A.

Therefore you can use the histogram, that is the color/grayscale distribution of the object’s image. Shorthand said, you have a look onto which values are characteristic for the object, which means, they are more probable to appear in the object’s image than in the rest of the image. Then you select the region in Image A which has most of these characteristic pixel values.

This is done the following way.
Calculate both histograms for image A and B.
By dividing the histogram of image B by the histogram of image A element wise, you get high values for those bins, that have a relative high count for image B in comparison to image A. Note that values, that do not appear in image A lead to infinity, but later on, these bins wont be used. But be careful, if you do more operations on the histogram, like smoothing.

The new “histogram” now contains something like likelihood values telling how probable an intensity value belongs to the object.
Now we map each pixel of image A to its likelihood and take the average over a region with size of image B.

High values in the modified image indicate a high probability that this region contains the object.

Here some Octave code:

```function [idy, idx] = histMatch(A, B)
%HISTMATCH find Pattern B in A using Histogram

% hit: how to read images into matrices

%calculate histograms
hA = histc(A(:), [0:1:255]);
hB = histc(B(:), [0:1:255]);

%calculate division (max 1)
hC = hB./hA;
%set maximum 1 (not needed, are not accessed anyway)
hC = min(hC, 1);

%map values from A to hC
A2 = hC(A);

%determine coordinates of maximum
%maximum per column with rowIndex
[colMax, rowIndices] = max(A3);
%maximum over the maxima
[max, colIndex] = max(colMax);

idx = colIndex;
idy = rowIndices(idx);

end
```

# How to receive and parse a JSON array

Situation:
You got some (client) application, that needs data from a mysql database.
The application cannot connect to the database itself. It sends a HTTP GET/POST request to a webserver, that gets the data out of the mysql database and packs it into a JSON Array. This JSON Array is sent back to the client.

The client receives the JSON Array and parses it.

This is the php code for the webserver (inspired from )

```
/**
*
* @return list of users
*/

String serverUrl = SERVER_URL + SERVER_URL_QUERYUSERLIST;

//TODO: implement multiple tries with exponential backoff if server is not responding
DefaultHttpClient hc = new DefaultHttpClient();
ResponseHandler <String> res = new BasicResponseHandler();
HttpGet getMethod = new HttpGet(serverUrl);

Vector<String> retVector = new Vector<String>();
try {
String response = hc.execute(getMethod, res);
Log.i(TAG, "Http response: " + response);
// todo check if successfull and not error

// parse string
try {
JSONArray jsonArray = new JSONArray(response);
for (int i = 0; i < jsonArray.length(); ++i) {
JSONObject row = jsonArray.getJSONObject(i);
}
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

} catch (ClientProtocolException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

return retVector;
}
```

# How to expose data from a mysql database via php/JSON for access via HTTP

Situation:
You got some (client) application, that needs data from a mysql database.
The application cannot connect to the database itself. It sends a HTTP GET/POST request to a webserver, that gets the data out of the mysql database and packs it into a JSON Array. This JSON Array is sent back to the client.

(Follow up situation, the client has to request and parse the data)

What you need:

– mysql database
– webserver with php

This is the php code for the webserver (inspired from )

```<?php
// connect to Database
\$dbUri = "...";
\$dbUser = "...";
\$dbDatabaseName = "...";

// establish connection
\$db = mysql_connect(\$dbUri, \$dbUser, \$dbPassword) OR
die(mysql_error());

mysql_select_db(\$dbDatabaseName, \$db) OR
die(mysql_error());

\$sqlquery = "SELECT ... FROM ... WHERE ... ORDER BY ... ASC;";

\$result = mysql_query(\$sqlquery) OR
die(mysql_error());

if (mysql_errno()) {
} else {
\$rows = array();
// fill array
while(\$r = mysql_fetch_assoc(\$result)) {
\$rows[] = \$r;
}
// encode array as JSON and print it
print json_encode(\$rows);
}
?>```

# WebGL – Get the ball rolling

What do we need for a small first WebGL experiment?

First of all we need a webpage containing the canvas element (html5), which is used to create the GL context and display the rendered framebuffer.

WebGL uses javascript to set up the rendering pipeline. We use the onload event handler of the body element (which is called after the html page has been loaded), and include the javascript file webGL_JuliaSet.js where the callback method is implemented. Of course, instead of the include, the javascript code can also be defined in place in the html file.

```<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WEBGL Test Page</title>
<canvas id="myCanvas">
If you see this, your browser does not support the canvas element.
</canvas>
<script src="./webGL_JuliaSet.js"/>
</body>
</html>```

We will edit the html later on, for example to add event handlers for mouse events, but the basic stuff is set up.Let’s continue with the javascript file. I wont catch all eventualities and errors, in order to keep it simple. Of course later on, for a real project, stuff like the GL initialisation should be put into an external javascript file containing all the helper functions with proper exception and error handling.

The entry function is the one set for the onload event handler of the body element in the html file.

```function myStart()
{
...
```

We specify a variable with name `glContext` that will hold the gl context. In order to get the gl context, we first retrieve the canvas element. Afterwards we call its getContext method.

```function myStart()
{
var glContext;
try
{
var canvas = document.getElementById("myCanvas");
glContext = canvas.getContext("experimental-webgl");
}
catch(e)
{
return;
}
...
}
```

WebGL implements the OpenGL ES 2.0 standard, so instead of the fixed function pipeline, we need to program the pipeline using a glProgram, which contains atleast a vertex and a fragment shader. In order to create a glProgram we use the glContext.

```...
// create program
var program;
program = glContext.createProgram();
...
```

The vertex shader gets vertex attributes as input and specifies varyings as output. For the fragment stage, the varyings of the vertices building the rasterized triangle will be interpolated across the triangle.

Our vertex shader shall take a 2D Vector (vec2) as input for the vertex position. We define a attribute vPosition of type vec2, that we will supply later on with the 2 dimensional vertex positions. The vertex position is passed through to the the predefined vec4 gl_Position, which specifies the position of the vertex in clip space coordinates. (Note: gl_Position expects a vec4 instead of a vec2. We set the z-coordinate to 0.0 and the w to 1.0)
Additionally we want to have a 3D Vector (vec3) as input for the vertex color. We define a attribute vColor of type vec3, that we will supply later on with the 2 dimensional vertex positions. Furthermore we specify that the vertex shader shall output a vec3 we call varColor_V2F. The vertex shader looks like:

```// per vertex attributes
attribute vec2 vPosition;
attribute vec3 vColor;

// varyings (out)
varying vec3 varColor_V2F;

void main()
{
varColor_V2D = vColor;
gl_Position = vec4(vPosition, 0.0, 1.0);
}
```

Shaders are supplied as a string containing the source. A nice way to handle this within html and js, is to use the html script element with its type and text. (see http://www.khronos.org/webgl/wiki/Tutorial)
Once again, we keep it “simpler” and define the shaderSource directly as a string variable. For that reason, the shader source contains these weird looking “\n\”s for the line endings.

```  var vertexShaderSource = "\
// per vertex attributes                  \n\
attribute vec2 vPosition;                 \n\
attribute vec3 vColor;                    \n\
\n\
// varyings (out)                         \n\
varying vec3 varColor_V2F;                \n\
\n\
void main()                               \n\
{                                         \n\
varColor_V2D = vColor;                  \n\
gl_Position = vec4(vPosition, 0.0, 1.0); \n\
}                                         \n\
"
```

Aterwards we supply the source code and compile the shader.

```...
...
```

After compiling the shader, we query the compileStatus to check for a successful compilation

```...
// Check the successful compilation
glContext.COMPILE_STATUS);
if (!compileStatus) {
// Something went wrong during compilation; get the error
return null;
}
...
```

The same procedure once again for the fragment shader. The fragment shader takes the vec3 varColor_V2F from the vertex shader (but interpolated) as input and sets the predefined value gl_FragColor. (Note: gl_FragColor expects a vec4 instead of a vec3. We set the alpha component to 1.0)

```// per fragment
varying vec3 varColor_V2F;

void main()
{
gl_FragColor = vec4(varColor_V2F, 1.0);
}
```

Here comes the string containing the source.

```  var fragmentShaderSource = "\
// per fragment                            \n\
varying vec3 varColor_V2F;                 \n\
\n\
void main()                                \n\
{                                          \n\
gl_FragColor = vec4(varColor_V2F, 1.0);  \n\
}                                          \n\
"
```

This time we create the shader object of type FRAGMENT_SHADER, supply the source code and compile the shader. And we don’t forget to check he compile status.

```...

// Check the successful compilation
if (!compileStatus) {
// Something went wrong during compilation; get the error
return null;
}
...
```

The compiled shaders can now be attached to the glProgram, which is linked afterwards.

```...

glContext.useProgram(program);
```

TODO:
Here javascript side array definition. Full screen Quad by two triangles. Defined arrays for vertex positions and colors aswell as indices.
Note that the indices are the same for the vertex positions and colors, because OpenGL does not support multiple indexing.

```...
// vertex positions array
var vertexPositions = new Float32Array(
[  1.0,  1.0,  0.0, // v0
-1.0,  1.0,  0.0, // v1
-1.0, -1.0,  0.0, // v2
1.0, -1.0,  0.0  // v3
]);
// vertex indices for triangles
var indices = new Uint16Array(
[  0, 1, 2, // triangle 1
0, 2, 3  // triangle 2
]);
var vertexColors = new Float32Array(
[
1.0, 0.0, 0.0, //v0 --> red
0.0, 1.0, 0.0, //v1 --> green
0.0, 0.0, 1.0, //v2 --> blue
1.0, 1.0, 1.0  //v3 --> white
]);
```

We want to use vertex buffers, that is buffers alocated on the device (GPU) for rendering. We create the buffers and upload the data.

TODO: difference between ELEMENT_ARRAY_BUFFER and ARRAY_BUFFER

```...
// create, bind and fill vertex Buffer
var vertexPositionBufferID = gl.createBuffer();
glContext.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBufferID);
glContext.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW);
glContext.bindBuffer(gl.ARRAY_BUFFER, null);

// create, bind and fill texCoord Buffer
var vertexColorBufferID = glContext.createBuffer();
glContext.bindBuffer(gl.ARRAY_BUFFER, vertexColorBufferID);
glContext.bufferData(gl.ARRAY_BUFFER, vertexColorBufferID, glContext.STATIC_DRAW);
glContext.bindBuffer(gl.ARRAY_BUFFER, null);

// create, bind and fill index Buffer
var indexBufferID = glContext.createBuffer();
glContext.bindBuffer(glContext.ELEMENT_ARRAY_BUFFER, indexBufferID);
glContext.bufferData(glContext.ELEMENT_ARRAY_BUFFER, indices, glContext.STATIC_DRAW);
```

To connect the buffers to the specific attributes in the vertex shader we first query the location of an attribute and enable the vertex array stream for the location. Then we set the pointer for the attribute location to the buffer by first binding the buffer and then setting the attribute’s pointer to position 0. (Note: Multiple attribute can be set to one buffer (TODO: verschraenkte daten) by specifying offsets.

```...
// vertex position buffer to attribute vPosition
var vPositionLoc = gl.getAttribLocation(program, "vPosition");
glContext.enableVertexAttribArray(vPositionLoc);
glContext.bindBuffer(gl.ARRAY_BUFFER, vertexPositionsBufferID);
glContext.vertexAttribPointer(vPositionLoc, 3, glContext.FLOAT, false, 0, 0);

// vertex color buffer to attribute vColor
var vColorLoc = gglContextl.getAttribLocation(program, "vColor");
glContext.enableVertexAttribArray(vColorLoc);
glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexColorsBufferID);
glContext.vertexAttribPointer(vColorLoc, 3, glContext.FLOAT, false, 0, 0);

var err = glContext.getError();
if (err != glContext.NO_ERROR)
{
}
```

The index buffer is not used here (it is no attribute), it is used later on for the drawing call.

We want to have 50 frames per seconds, so we start a timer with 20 ms for the drawing.

```...
// start timer
setInterval(function() { drawPicture(glContext) }, 10);
```

TODO: draw Method

```...
function drawPicture(glContext)
{
// Make sure the canvas is sized correctly.
try
{
reshape(glContext);
} catch(e)
{
}

//glContext.enable( glContext.SAMPLE_COVERAGE );
//update uniforms
// none for now

// Clear the canvas
glContext.clear(glContext.COLOR_BUFFER_BIT | glContext.DEPTH_BUFFER_BIT);

var err = glContext.getError();
if (err!=0)
{