56 | Read the full algorithm before drawing anything. Be aware of the freedom that is been allowed to you.
57 |
58 | Drawn on the paper sheet:
59 | - With a pencil
60 | - A rectangle
61 | - From any height or width
62 | - Parallel to the sheet of paper (not crosswise)
63 | - Drawn softly so you can easily erase it later on
64 |
65 | Inside the rectangle
66 | - With a 2mm wide black pen
67 | - Circles
68 | - Various sizes, willingly alternately
69 | - That do not overlap or contain itself
70 | - Few space between the circles
71 | - Circles fill the inside of the rectangle
72 | - From time to time, the circles are drawn with dotted strokes
73 | - Circles that overlap the sides of the rectangle will be closed with straight lines
74 |
75 | At the end
76 | - With an eraser
77 | - Erase the outline of the rectangle
78 |
79 |
80 | 10 people executed the algorithm. Here are the results:
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | Even if small unexpected differences by the execution happened, all are quite accurate. Despite the variations, Results became more visually consistent. The use of dedicated material created unity and a more unique look. Nevertheless, the lack of freedoms leaved to the executants led to a less original and dynamic final picture.
94 |
95 | ## Inserting personal dimensions
96 | To add freedom and to integrate external sources of variations, personal dimension became part of the algorithm. Executants were asked to integrate informations about their near family with the intent to become unique results for each execution.
97 |
98 | Here is the algorithm:
99 |
100 | On the given sheet of paper:
101 |
102 | - Draw with a pencil a closed form of free size and position. This form (the unity form) can be composed by straight and curved lines as well as by distinct angles. However, it shouldn't become too complex, because it won't make you the work easier later on. This form represents your near family (parents, brothers and sisters).
103 | - For every member of your family assign following colors:
104 | - Sisters: Light blue
105 | - Brothers: Apple green
106 | - Mother(s): Purple
107 | - Father(s): Salmon pink
108 | - For every member of your family assign also a free but non figurative form (The person form), that should represent this person. This form doesn't necessarily be a basic shape (circle, square, triangle, etc.).
109 | - Fill the family form with person forms in the appropriate color. Use for that the given néocolors. Every member of your family can be drawn many times in the family form. The more you see each member of your family, the more present its form will be represented (by repeating it, changing its size or using another visual dimension). Person forms cannot exceed the family form.
110 | - Erase the family form so that we only discern it by the accumulation of its contents.
111 |
112 | It's over, thank you for your time!
113 |
114 |
115 | And here the results:
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 | Every sheet of paper became different and there still was a unity between every drawings. The use of color and the fact that all of them got forms maintained in a wrapper form led to this unity. There is one story and one explanation for every execution. Multiple layers come to the game, the visual and personal aspect.
129 |
130 | If the goal has been to give the executants more freedom in order to get more various results, we can say it has been reached. However, even if that process is interesting, it has more of a psychoanalysis test than a pure algorithm. Also, it defers quite a lot from the previous one and the link is hard to grasp.
131 | That's what made the translation to a first coded version complicated.
132 |
133 |
134 | ## Getting confident with p5.js
135 | The next step after the analogous algorithm was to translate it in code. Accordingly, a javascript processing library called [p5.js](http://p5js.org/) was used. In order to get confident with the syntax and the possibilities of p5.js, following exercises have been made:
136 |
137 | **Exercice 1**: Draw a man with primitive form in 10 minutes:
138 |
139 |
140 | Using basic shapes, I draw jesus with a moving halo!
141 |
142 | **Exercice 2**: Draw an interesting color composition with HSB in 10 minutes:
143 |
144 |
145 | Using the hue of an inout color, I created a color triad.
146 |
147 | **Exercice 3**: Using javascript loops, create an interesting pattern in 10 minutes:
148 |
149 |
150 | Using an exponential increase of repeated ellipses, I drew this pattern.
151 |
152 |
153 | ## Translating the algorithm in p5js:
154 |
155 |
156 |
157 |
158 |
159 | The coded output was quite dissimilar from the results made by the executants. It loosed its base intention that was to include personal data as base for algorithmic rules. The interesting part that seemed to be appreciated is the use of the family as a variable. Our guest [Mey Lean Kronemann](http://meyleankronemann.de/) made the suggestion of investigating the topic of artificial life forms. The idea of forms representing families can be associated to flocking behaviors in biology and the aspect of the agglomerated circles to cells and/or bacterias. These hints were used as base for the next iteration of my algorithm.
160 |
161 | ## Cell- and molecular-like forms
162 | The coded version of the algorithm was inspired by natural micro living forms, molecules, cells, DNA etc. The algorithm draws circles (cells) that are bound to their siblings creating that way families of nested networks.
163 |
164 | See screenshots of the coding process:
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 | The step by step process of coding was meant to find the best way to connect circles together in a nice optic. Overlapping occurred and had to be avoided and variation was needed. Therefore, circles were displayed in a rows/columns system that took care of avoiding overlapping.
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 | The rows/columns system was a good solution for avoiding overlapping but the grid became really present, too present. Life forms are sometimes represented in a geometrical way but rarely look so in reality. The result had to look more natural and organic.
183 |
184 | Disorder was needed. In order to achieve this disorder, each element of the grid has been displaced with a noise in x and y. The pattern became interesting and still, the overlapping did not occur.
185 |
186 |
187 |
188 |
189 |
190 |
191 | ## What purpose for?
192 | The idea that unique steel barriers could be produced is an interesting application. The algorithm could be used to generate a unique pattern for each piece of barrier. That is how it could look like:
193 |
194 |
195 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 | Molecular Networks Algoritm
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/js/algorithm/defaults.js:
--------------------------------------------------------------------------------
1 | const Immutable = require('immutable');
2 |
3 | /**
4 | * Options to set for configuring the look of the algorithm
5 | * @type {Immutable.Map}
6 | */
7 | export default Immutable.Map({
8 | groupsAmount: 1,
9 | circleMinSize: 2,
10 | lineWeight: 1,
11 | backgroundColor: '#282828',
12 | wrapperSize: 30,
13 | mainHue: Math.random() * 360,
14 | formMargin: 2,
15 | circleProbability: 0.5,
16 | fragmentation: 20
17 | });
18 |
--------------------------------------------------------------------------------
/src/js/algorithm/drawer.js:
--------------------------------------------------------------------------------
1 | /* global window */
2 | import defaults from "./defaults";
3 |
4 | /**
5 | * @class Turn data of the model into forms
6 | * @return {Function} - An instance of the class.
7 | */
8 | export const Drawer = (p5) => {
9 | let that = {};
10 |
11 | that.construct = () => {};
12 |
13 | that.drawForm = (form) => {
14 | const circle = form.get("circle");
15 | if (circle) {
16 | let circleColor = circle.get("circleColor");
17 | // drawWrapper(x, y, default.get('wrapperSize'));
18 | form.get("connections").forEach(that.drawConnection);
19 | p5.noStroke();
20 | p5.fill(
21 | circleColor.hue,
22 | circleColor.saturation,
23 | circleColor.brightness,
24 | circleColor.alpha
25 | );
26 | p5.strokeWeight(defaults.get("lineWeight"));
27 | p5.ellipse(
28 | circle.get("x"),
29 | circle.get("y"),
30 | circle.get("size"),
31 | circle.get("size")
32 | );
33 | }
34 | };
35 |
36 | that.drawWrapper = (x, y, size) => {
37 | p5.stroke(0, 0, 0, 100);
38 | p5.strokeWeight(1);
39 | p5.rect(x, y, size, size);
40 | };
41 |
42 | that.drawConnection = (connection) => {
43 | p5.noFill()
44 | p5.strokeWeight(defaults.get("lineWeight"));
45 | p5.stroke(defaults.get("mainHue"), 50, 30)
46 | p5.bezier(
47 | connection.get("startPoint").x,
48 | connection.get("startPoint").y,
49 | connection.get("startPoint").bezierX,
50 | connection.get("startPoint").bezierY,
51 | connection.get("endPoint").bezierX,
52 | connection.get("endPoint").bezierY,
53 | connection.get("endPoint").x,
54 | connection.get("endPoint").y
55 | );
56 | };
57 |
58 | that.drawGroups = (groups) =>
59 | groups.forEach((group) => that.drawGroup(group));
60 | that.drawGroup = (group) =>
61 | group.get("forms").forEach((form) => that.drawForm(form));
62 |
63 | that.construct.apply(arguments);
64 | return that;
65 | };
66 |
67 | export default () => Drawer();
68 |
--------------------------------------------------------------------------------
/src/js/algorithm/model/connector.js:
--------------------------------------------------------------------------------
1 | /* global window */
2 | const Immutable = require('immutable');
3 | import defaults from '../defaults';
4 | import Group from './group';
5 |
6 | /**
7 | * @class Connects the dots together
8 | * Saves the points of the connections to neighbours in the model
9 | * @return {Function} - An instance of the class
10 | */
11 | const Groups = () => {
12 | let that = {};
13 |
14 | /**
15 | * Connects the forms toghether
16 | * @param {Immutable.Map} group - A Group (data) of forms
17 | * @return {Immutable.Map} - A Group (data) of forms with their connections
18 | */
19 | that.connectForms = (group) => {
20 | let rows = group.get('rows');
21 | let columns = group.get('columns');
22 | const finalForms = group.get('forms').map((form) => {
23 | let connections = Immutable.List([]);
24 | const isFirstColumn = form.get('column') === 1;
25 | const isFirstRow = form.get('row') === 1;
26 | const isLastRow = form.get('row') === rows;
27 | const isLastColumn = form.get('column') === columns;
28 | let forms = group.get('forms');
29 | let rightSibling;
30 | let leftSibling;
31 | let topSibling;
32 | let bottomSibling;
33 |
34 | if (!form.get('circle')) {
35 | return form;
36 | }
37 | if (!isFirstRow) {
38 | topSibling = that.getFormByPosition(
39 | forms, form.get('row') - 1, form.get('column'));
40 | if (topSibling.get('circle')) {
41 | connections = connections.push(
42 | that.addConnection('top', form, topSibling));
43 | }
44 | }
45 | if (!isFirstColumn) {
46 | leftSibling = that.getFormByPosition(
47 | forms, form.get('row'), form.get('column') - 1);
48 | if (leftSibling.get('circle')) {
49 | connections = connections.push(
50 | that.addConnection('left', form, leftSibling));
51 | }
52 | }
53 | if (!isLastRow) {
54 | bottomSibling = that.getFormByPosition(
55 | forms, form.get('row') + 1, form.get('column'));
56 | if (bottomSibling.get('circle')) {
57 | connections = connections.push(
58 | that.addConnection('bottom', form, bottomSibling));
59 | }
60 | }
61 | if (!isLastColumn) {
62 | rightSibling = that.getFormByPosition(
63 | forms, form.get('row'), form.get('column') + 1);
64 | if (rightSibling.get('circle')) {
65 | connections = connections.push(
66 | that.addConnection('right', form, rightSibling));
67 | }
68 | }
69 |
70 | return form.set('connections', connections);
71 | });
72 |
73 | return group.set('forms', finalForms);
74 | };
75 |
76 | /**
77 | * Adds a connection between one form and the other
78 | * @param {String} dir - Direction of the connection.
79 | * Wether 'right', 'left', 'top' or bottom
80 | * @param {Immutable.Map} startForm - The form (data) to connect from
81 | * @param {Immutable.Map} endForm - The form (data) to connect to
82 | * @return {Immutable.Map} - A Map with startPoint and endPoint (coordinates)
83 | */
84 | that.addConnection = (dir, startForm, endForm) => {
85 | let startPoint = {};
86 | let endPoint = {};
87 | switch (dir) {
88 | case 'right':
89 | startPoint = startForm.getIn([ 'circle', 'arcPoints' ]).right;
90 | endPoint = endForm.getIn([ 'circle', 'arcPoints' ]).left;
91 | break;
92 | case 'left':
93 | startPoint = startForm.getIn([ 'circle', 'arcPoints' ]).left;
94 | endPoint = endForm.getIn([ 'circle', 'arcPoints' ]).right;
95 | break;
96 | case 'top':
97 | startPoint = startForm.getIn([ 'circle', 'arcPoints' ]).top;
98 | endPoint = endForm.getIn([ 'circle', 'arcPoints' ]).bottom;
99 | break;
100 | case 'bottom':
101 | startPoint = startForm.getIn([ 'circle', 'arcPoints' ]).bottom;
102 | endPoint = endForm.getIn([ 'circle', 'arcPoints' ]).top;
103 | break;
104 | default:
105 | break;
106 | }
107 |
108 | return Immutable.Map({ startPoint, endPoint });
109 | };
110 |
111 | /**
112 | * Get a form in the matrix by position
113 | * @param {Immutable.List} forms - All the forms (data)
114 | * @param {Number} row - The row number where the needed form is located in
115 | * @param {Number} column - The column number where the needed form is located in
116 | * @return {Immutable.Map} - The Form (data) located in the given position
117 | */
118 | that.getFormByPosition = (forms, row, column) => {
119 | return forms.find((form) => {
120 | return form.get('row') === row &&
121 | form.get('column') === column;
122 | });
123 | };
124 |
125 | return that;
126 | };
127 |
128 | export default Groups;
129 |
--------------------------------------------------------------------------------
/src/js/algorithm/model/form.js:
--------------------------------------------------------------------------------
1 | /* global window */
2 | const Immutable = require("immutable");
3 | import defaults from "../defaults";
4 |
5 | /**
6 | * @class A form (data)
7 | * @param {Immutable.Map} configs - The configurations of the form
8 | * @return {Immutable.Map} - The form (data)
9 | */
10 | const Form = (configs, p5) => {
11 | const margin = defaults.get("formMargin");
12 | let form = configs
13 | .update("x", (x) => p5.random(x - margin, x + margin))
14 | .update("y", (y) => p5.random(y - margin, y + margin));
15 | const fragmentation = defaults.get("fragmentation")
16 | const nz = p5.noise(
17 | p5.map(form.get("x"), 0, p5.width, 0, fragmentation),
18 | p5.map(form.get("y"), 0, p5.height, 0, fragmentation),
19 | )
20 | const circleSize = p5.map(
21 | nz,
22 | 0,
23 | 1,
24 | defaults.get("circleMinSize"),
25 | defaults.get("wrapperSize")
26 | );
27 | const hasCircle = nz < defaults.get("circleProbability");
28 | const circleX = form.get("x") + defaults.get("wrapperSize") / 2 + p5.random(-3, 3);
29 | const circleY = form.get("y") + defaults.get("wrapperSize") / 2 + p5.random(-3, 3);
30 | let circle = Immutable.Map({
31 | x: circleX,
32 | y: circleY,
33 | size: circleSize,
34 | circleColor: form.get("circleColor"),
35 | arcPoints: {},
36 | });
37 |
38 | form = form.set("circle", circle);
39 |
40 | if (circle) {
41 | const circleCenter = circleSize / 2;
42 | circle = circle.set("arcPoints", {
43 | top: {
44 | x: circleX,
45 | y: circleY - circleCenter,
46 | bezierX: circleX,
47 | bezierY: configs.get("y"),
48 | },
49 | bottom: {
50 | x: circleX,
51 | y: circleY + circleCenter,
52 | bezierX: circleX,
53 | bezierY: configs.get("y") + form.get("size"),
54 | },
55 | left: {
56 | x: circleX - circleCenter,
57 | y: circleY,
58 | bezierX: configs.get("x"),
59 | bezierY: circleY,
60 | },
61 | right: {
62 | x: circleX + circleCenter,
63 | y: circleY,
64 | bezierX: configs.get("x") + form.get("size"),
65 | bezierY: circleY,
66 | },
67 | });
68 | form = form.set("circle", circle);
69 | }
70 |
71 | if (!hasCircle) {
72 | form = form.set("circle", false);
73 | }
74 | return form;
75 | };
76 |
77 | export default Form;
78 |
--------------------------------------------------------------------------------
/src/js/algorithm/model/group.js:
--------------------------------------------------------------------------------
1 | /* global window */
2 | const Immutable = require("immutable");
3 | import defaults from "../defaults";
4 | import Form from "./form";
5 | import Connector from "./connector";
6 |
7 | /**
8 | * @class A group of forms (layer) in a matrix (rows / columns)
9 | * @return {Function} An instance of the class
10 | */
11 | const Group = (p5) => {
12 | let that = {};
13 |
14 | /**
15 | * Creates a group with a given id
16 | * @param {Number} id - A unique id
17 | * @return {Immutable.Map} - A group (data) with forms in a matrix
18 | */
19 | that.createGroup = (id) => {
20 | const size = defaults.get("wrapperSize");
21 | let rows = Math.ceil(p5.windowWidth / size) + 1;
22 | let columns = Math.ceil(p5.windowWidth / size) + 1;
23 | let formPosX = 0 - size / 2;
24 | let formPosY = formPosX;
25 | let columnPosX = formPosX;
26 | let rowPosY = formPosY;
27 | let forms = Immutable.List([]);
28 |
29 | for (let row = 1; row <= rows; row++) {
30 | for (let column = 1; column <= columns; column++) {
31 | const form = Immutable.Map({
32 | id: `${id}-${row}-${column}`,
33 | circleColor: that.getGroupColor(
34 | columnPosX,
35 | rowPosY
36 | ),
37 | x: columnPosX,
38 | y: rowPosY,
39 | size,
40 | row,
41 | column,
42 | });
43 | forms = forms.push(Form(form, p5));
44 | columnPosX = column === columns ? formPosX : columnPosX + size;
45 | }
46 | rowPosY = row === rows ? formPosY : rowPosY + size;
47 | }
48 |
49 | let group = Immutable.Map({
50 | id,
51 | rows: rows,
52 | columns: columns,
53 | forms: forms,
54 | });
55 |
56 | group = Connector().connectForms(group);
57 |
58 | return group;
59 | };
60 |
61 | /**
62 | * Retrives a group color based on the id
63 | * @param {Number} id - The unique identifier for a group
64 | * @return {Object} - An Object with hue, saturation, brightness and alpha
65 | */
66 | that.getGroupColor = (x, y) => {
67 | const nz = p5.noise(
68 | p5.map(x, 0, p5.width, 0, defaults.get("fragmentation")),
69 | p5.map(y, 0, p5.height, 0, defaults.get("fragmentation")),
70 | )
71 | return {
72 | hue: defaults.get("mainHue") + p5.map(nz, 0, 1, 0, 360),
73 | saturation: 50,
74 | brightness: p5.map(nz, 0, 1, 0, 200),
75 | alpha: 100,
76 | };
77 | };
78 |
79 | return that;
80 | };
81 |
82 | export default Group;
83 |
--------------------------------------------------------------------------------
/src/js/algorithm/model/groups.js:
--------------------------------------------------------------------------------
1 | const Immutable = require("immutable");
2 | import defaults from "../defaults";
3 | import Group from "./group";
4 |
5 | /**
6 | * @class A list containing groups groups (data)
7 | * @return {Function} An instance of the class
8 | */
9 | const Groups = (p5) => {
10 | let that = {};
11 |
12 | /**
13 | * Retrieves all groups in a list
14 | * @return {Immutable.List} - The list of all groups
15 | */
16 | that.getGroups = () => {
17 | let groups = Immutable.List();
18 | for (let i = 1; i <= defaults.get("groupsAmount"); i++) {
19 | groups = groups.push(Group(p5).createGroup(i));
20 | }
21 | return groups;
22 | };
23 |
24 | return that;
25 | };
26 |
27 | export default Groups;
28 |
--------------------------------------------------------------------------------
/src/js/algorithm/setup.js:
--------------------------------------------------------------------------------
1 | /* global window */
2 | import defaults from "./defaults";
3 |
4 | /**
5 | * @class Initializes the p5 canevas and the key events
6 | * @return {Function} - An instance of the class
7 | */
8 | const Setup = (p5) => {
9 | let canvas;
10 | const that = {};
11 |
12 | that.setupCanvas = () => {
13 | canvas = p5.createCanvas(p5.windowWidth, p5.windowHeight);
14 | // canvas.position(0, 0);
15 | canvas.class("p5-canvas");
16 | canvas.parent("molectular-algorithm");
17 | p5.colorMode(p5.HSB);
18 |
19 | p5.background(defaults.get("backgroundColor"));
20 | };
21 |
22 | that.onKeyTyped = (key) => {
23 | if (key === "s") {
24 | p5.saveCanvas(canvas, "molecular-networks-export", "png");
25 | }
26 | };
27 |
28 | return that;
29 | };
30 |
31 | export default Setup;
32 |
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | /* global window */
2 | import p5 from "p5";
3 | import Immutable from "immutable";
4 | import setup from "./algorithm/setup";
5 | import { Drawer } from "./algorithm/drawer";
6 | import Groups from "./algorithm/model/groups";
7 | import defaults from "./algorithm/defaults"
8 |
9 | /**
10 | * Initialisation of the algorithm.
11 | * To be passed to a p5 class
12 | * @param {reference to p5} p5 - To be made global
13 | */
14 | const algorithm = (p5) => {
15 | p5.setup = setup(p5).setupCanvas;
16 | p5.keyTyped = setup(p5).onKeyTyped;
17 | p5.draw = () => {
18 | p5.background(
19 | defaults.get("mainHue"),
20 | 30,
21 | 10,
22 | )
23 | const drawer = new Drawer(p5);
24 | let groups = Groups(p5);
25 | groups = Immutable.List(groups.getGroups());
26 | p5.scale(1.2)
27 | p5.translate(0, -100)
28 | p5.rotate(0.1)
29 | drawer.drawGroups(groups);
30 | p5.noLoop();
31 | };
32 | };
33 |
34 | new p5(algorithm);
35 |
--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Open Sans", Arial, sans-serif;
3 | margin: 0;
4 | }
5 | a {
6 | text-decoration: none;
7 | transition: color 100ms ease-in-out, background 100ms ease-in-out;
8 | }
9 | ul,
10 | ul li {
11 | margin: 0;
12 | padding: 0;
13 | list-style: none;
14 | }
15 | #molectular-algorithm {
16 | position: absolute;
17 | top: 0;
18 | left: 0;
19 | width: 100%;
20 | height: 100%;
21 | transition: transform 200ms ease-in-out;
22 | }
23 | #molectular-algorithm canvas {
24 | visibility: visible !important;
25 | }
26 | .main-header {
27 | width: 360px;
28 | color: #fff;
29 | position: absolute;
30 | top: 20px;
31 | left: 20px;
32 | }
33 | .main-header a {
34 | color: #fff;
35 | }
36 | .main-header a:hover {
37 | color: #ccc;
38 | }
39 | .main-nav,
40 | .main-nav ul,
41 | .main-nav ul li,
42 | .main-nav ul a,
43 | display block {
44 | width: 100%;
45 | box-sizing: border-box;
46 | float: left;
47 | }
48 | .main-nav ul li {
49 | width: auto;
50 | margin-left: 1px;
51 | }
52 | .main-nav ul li a {
53 | padding: 8px 12px;
54 | background-color: #000;
55 | }
56 | .main-nav ul li a:hover {
57 | background-color: #f5f5f5;
58 | color: #000;
59 | }
60 | .main-nav ul li:first-child a {
61 | border-top-left-radius: 2px;
62 | border-bottom-left-radius: 2px;
63 | }
64 | .main-nav ul li:last-child a {
65 | border-top-right-radius: 2px;
66 | border-bottom-right-radius: 2px;
67 | }
68 |
--------------------------------------------------------------------------------
43 | 
44 | 
45 | 
46 | 
47 |
48 | Some parts of the algorithm's steps may not have been described precisely enough or have been disregarded, but the output is mostly loyal to my original expectations. Time has not been seriously taken in consideration and it led to unfinished results. Also, the interpretation of some rules has been different from executant to executant. For example, the last result did interpret the rule `not filled` as white circles on a dark background. These differences have been analyzed and considered for the next version of the algorithm as room for improvement.
49 |
50 | ---
51 |
52 | ## Corrections and improvements
53 | The second version of the algorithm attempts to avoid the misinterpretations of the first execution. Rules increased as well as the amount of executants:
54 |
55 | 
83 | 
84 | 
85 | 
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 |
93 | Even if small unexpected differences by the execution happened, all are quite accurate. Despite the variations, Results became more visually consistent. The use of dedicated material created unity and a more unique look. Nevertheless, the lack of freedoms leaved to the executants led to a less original and dynamic final picture.
94 |
95 | ## Inserting personal dimensions
96 | To add freedom and to integrate external sources of variations, personal dimension became part of the algorithm. Executants were asked to integrate informations about their near family with the intent to become unique results for each execution.
97 |
98 | Here is the algorithm:
99 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 |
128 | Every sheet of paper became different and there still was a unity between every drawings. The use of color and the fact that all of them got forms maintained in a wrapper form led to this unity. There is one story and one explanation for every execution. Multiple layers come to the game, the visual and personal aspect.
129 |
130 | If the goal has been to give the executants more freedom in order to get more various results, we can say it has been reached. However, even if that process is interesting, it has more of a psychoanalysis test than a pure algorithm. Also, it defers quite a lot from the previous one and the link is hard to grasp.
131 | That's what made the translation to a first coded version complicated.
132 |
133 |
134 | ## Getting confident with p5.js
135 | The next step after the analogous algorithm was to translate it in code. Accordingly, a javascript processing library called [p5.js](http://p5js.org/) was used. In order to get confident with the syntax and the possibilities of p5.js, following exercises have been made:
136 |
137 | **Exercice 1**: Draw a man with primitive form in 10 minutes:
138 |
139 | 
140 | Using basic shapes, I draw jesus with a moving halo!
141 |
142 | **Exercice 2**: Draw an interesting color composition with HSB in 10 minutes:
143 |
144 | 
145 | Using the hue of an inout color, I created a color triad.
146 |
147 | **Exercice 3**: Using javascript loops, create an interesting pattern in 10 minutes:
148 |
149 | 
150 | Using an exponential increase of repeated ellipses, I drew this pattern.
151 |
152 |
153 | ## Translating the algorithm in p5js:
154 | 
155 | 
156 | 
157 | 
158 |
159 | The coded output was quite dissimilar from the results made by the executants. It loosed its base intention that was to include personal data as base for algorithmic rules. The interesting part that seemed to be appreciated is the use of the family as a variable. Our guest [Mey Lean Kronemann](http://meyleankronemann.de/) made the suggestion of investigating the topic of artificial life forms. The idea of forms representing families can be associated to flocking behaviors in biology and the aspect of the agglomerated circles to cells and/or bacterias. These hints were used as base for the next iteration of my algorithm.
160 |
161 | ## Cell- and molecular-like forms
162 | The coded version of the algorithm was inspired by natural micro living forms, molecules, cells, DNA etc. The algorithm draws circles (cells) that are bound to their siblings creating that way families of nested networks.
163 |
164 | See screenshots of the coding process:
165 |
166 | 
167 | 
168 | 
169 | 
170 | 
171 | 
172 |
173 | The step by step process of coding was meant to find the best way to connect circles together in a nice optic. Overlapping occurred and had to be avoided and variation was needed. Therefore, circles were displayed in a rows/columns system that took care of avoiding overlapping.
174 |
175 | 
176 | 
177 | 
178 | 
179 | 
180 | 
181 |
182 | The rows/columns system was a good solution for avoiding overlapping but the grid became really present, too present. Life forms are sometimes represented in a geometrical way but rarely look so in reality. The result had to look more natural and organic.
183 |
184 | Disorder was needed. In order to achieve this disorder, each element of the grid has been displaced with a noise in x and y. The pattern became interesting and still, the overlapping did not occur.
185 |
186 | 
187 | 
188 | 
189 | 
190 |
191 | ## What purpose for?
192 | The idea that unique steel barriers could be produced is an interesting application. The algorithm could be used to generate a unique pattern for each piece of barrier. That is how it could look like:
193 |
194 | 
195 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |