Course details link
classmates web ring:
Table of Contents
| Carrés en 2 positions | Computer-rosace-series | de la serie 100 carres |
|---|---|---|
 |
 |
 |
| du cycle inclinaisions | Horizontales | Sainte-Victoire On Line |
 |
 |
 |
| 01 - Wrong map range | 02 - Wrong variable in sin | 03 - Worked! |
|---|---|---|
 |
 |
 |
float x = ofMap(sin(time*frequency )*amplitude, -amplitude, amplitude, 0, ofGetWidth()); |
float x = ofMap(sin(time * M_PI * 2 / period ), -1, 1, 0, ofGetWidth()); |
float x = ofMap(sin(y * frequency * M_PI * 2 / period ) *amplitude, -1, 1, 0, ofGetWidth()); |
-amplitude, amplitude range should have been -1, 1 |
instead of time use y value. |
Recreating the below curve table:
Equation:
The table is changing two parameters a and b.
Rows are increasing the a value from top to down. Range is [1,7]
Columns are increasing the b value from left to right . Range is [1,7]
| 01 - no grid | 02 - wrong spacing at grid | 03 - worked! |
|---|---|---|
 |
 |
 |
01 code snippet
float t = ofGetElapsedTimef();
float width = ofGetWidth();
float height = ofGetHeight();
for(int i=1; i< 8; i++)
{
for(int j=1; j<8; j++)
{
float x = ofMap(sin(i * t + M_PI * 0.5), -1, 1, 0, width);
float y = ofMap(sin(j * t ), -1, 1, 0, height) ;
ofDrawCircle(x, y, 5);
}
}03 code snippet
for(int i=1; i< 8; i++)
{
for(int j=1; j<8; j++)
{
float x = ofMap(sin(i * t + M_PI * 0.5), -1, 1, 0, cellW) + cellW* (i-1);
float y = ofMap(sin(j * t ), -1, 1, 0, cellH) + cellH*(j-1) ;
ofDrawCircle(x, y, 5);
}
}recreating snippets of Matrix III - John whitney
| 01 | 02 | 03 |
|---|---|---|
 |
 |
 |
removing the i from equation made them align too much. Also they should have collapsed in the middle but because of + M_PI * 0.5 it collapsed on the side. |
This version is closer to the original but they align to a lign before collapsing instead of coming from all sides. |
01 code snippet
for(int i=0; i< 24; i++)
{
float scale = ofMap(i, 0, 80, 0, 10);
float x = ofMap(sin(3 * (t*scale +i) + M_PI * 0.5),
-1, 1,
centerX - width/2, centerX + width/2);
float y = ofMap(sin(2 * (t*scale +i) ),
-1, 1,
centerY - height/2, centerY + height/2) ;
ofSetLineWidth(2);
drawHexagon(x, y, ofMap(sin(t + i * 0.1), -1, 1, 20, 200));
}recreating snippets of Catalog
Creating the basic shape
I studied the fan like shape using Figma.
 |
 |
|---|---|
| I first placed circles to create the shape as an intersection | Then found the origin points and the angles to recreate the arcs using ofPath |
ofPath path;
path.arcNegative(420-290,296-120, 200, 200, 257, 198);
path.arc (430-290,233-120, 200, 200, 180, 243);
path.arc (200-290,200-120, 200, 200, 314, 332);
path.close();
path.setCircleResolution(120);
path.setPolyWindingMode((ofPolyWindingMode) 2);
above code snippet renders the following shape
Code details:
- in order to move the shape origin to the middle every center point is offsetted by (290,120).
- arc draws the path in clockwise and arcNegative in counter-clockwise
- whole shape is drawn in clockwise
- Tried different PolyWindingModes and decided on using OF_POLY_WINDING_POSITIVE (2) which closed the path without artefacts.
Iterations
| 01 | 02 |
|---|---|
 |
 |
| The position of the arcs are correct but couldn't figure out the rotation yet. The pivot was not set properly for rotation. | The mouseX position is used to change the size of the shape. |
02
- used
ofEnableBlendMode(OF_BLENDMODE_ADD)to make the overlapping regions emit more light - used a fragment shader to color parts of the ofPath
| Original Work | Reproduction |
|---|---|
 |
 |
Used the FZGonta-kana font. Unzipping the font under MacOS was not trivial.
I found this command from here to unzip the font file that has japanese characters as a name:
$ ditto -V -x -k --sequesterRsrc --rsrc FILENAME.ZIP DESTINATIONDIRECTORY
fix screenshot colors: line 1917 of “ofGLRenderer.cpp”:
auto pixelFormat = OF_PIXELS_RGBA;
I suppose, becuase of the difference at the font the reproduction looks darker.
| Original | Recreation |
|---|---|
 |
 |
Shape Study
| Extracting the building blocks | seperating circles | finding points to draw an arrow between circles |
|---|---|---|
 |
 |
 |
| Iterations | Noise on circles |
|---|---|
 |
|
Experiments
| Noise by sampled degree (thickness) | Noise by cicle (thickness) |
|---|---|
 |
 |
 |
 |
| noise on sample degree | noise on sample degree with a smaller range | fix sample count and change sample degree |
|---|---|---|
 |
 |
 |
| Original | Recreation |
|---|---|
 |
 |
Shape Study
| Tracing dominating lines | Breaking them down | Iterations |
|---|---|---|
 |
 |
 |
Shape consists of 3 dominant lines: top, middle and bottom. Top and bottom lines are sampled with the same interval (linear), whereas the mid line is sampled in a skewed manner. I have tried couple of functions to recreate the same amount of skewness, and I found cubic function powf(x,3) to be the closest, but it is not the same.
3 main lines are defined as ofPolyline, since it has a handy function to get a point at a percentage.
3 points can be sampled from polyline as:
vector < ofPoint > ofApp::CreateArrow(ofPolyline top, ofPolyline mid, ofPolyline bottom, float percentage ){
vector < ofPoint > points;
points.push_back(top.getPointAtPercent(percentage));
points.push_back(mid.getPointAtPercent(powf(percentage, 3)));
points.push_back(bottom.getPointAtPercent(percentage));
return points;
} | Original | Attempts |
|---|---|
 |
 |
I tried to apply distortion to all the variables I can think of but could not find a way to distort the grid similarly.
I created the grid using polar coordinates instead of the cartesian to shape it circularly. It is written as a fragment shader and code can be found at: https://www.shadertoy.com/view/tlscWM
Bonus distortion effect:
Original: Pixellation by Lilian Schwartz: https://vimeo.com/56480534
I took some screen shots to be able to analyze the parts I would like to recreate:
 |
 |
And then created two different seed images. I wasn’t sure if the squares should be filled or not. In the end they didn’t make a much of a difference.
 |
 |
| Iterations | Operators |
|---|---|
 |
 |
I have iterated over different combinations of dilate, subtract and erode operators. One mistake I was making was subtracting always the initial image, that has resulted into similar looking squares all the time. When I changed operators to always apply from the previous image, I got interesting effects.
It was difficult to visualize the effect of the operators properly. That’s why I have created a small gui to see how each operator changes the visuals and what could be a good sequence of operators to create a similar looking imagery to Lilian Schwartz work. However, I couldn’t get the diagonal connections that appears in the original work.
I found it looked good when 2x dilate and 1x subtract operation are applied to an image each frame. These are the images that I got from this sequence:
 |
 |