Skip to content

Commit 3aa0d98

Browse files
ff6347ff6347
committed
try to fix baseurl
1 parent 0a1f3ab commit 3aa0d98

File tree

15 files changed

+189
-171
lines changed

15 files changed

+189
-171
lines changed

‎_config.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ exclude:
1919
sass:
2020
sass_dir: assets/_scss
2121
style: compressed
22-
baseurl: /
22+
baseurl: ''
2323
kramdown:
2424
input: GFM
2525
syntax_highlighter: rouge

‎_data/menu.json

+19-17
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
[
22
{
3-
"title": "<svg class=\"icon-home\"><use xlink:href=\"/gestalten-in-code/assets/fonts/icons.svg#icon-home\"></use></svg>",
3+
"title": "<svg class=\"icon-home\"><use xlink:href=\"/assets/fonts/icons.svg#icon-home\"></use></svg>",
44
"url": "/"
5-
},{
6-
"title":"Categories",
7-
"url":"/categories"
85
},
9-
{"title":"Frameworks",
10-
"url":"/frameworks"
11-
},{
12-
"title":"Laws of Gestalt",
13-
"url":"/laws"
14-
},{
15-
"title":"Authors",
16-
"url":"/authors"
17-
},{
18-
"title":"Projects",
19-
"url":"/projects"
20-
}
21-
]
6+
{
7+
"title": "Categories",
8+
"url": "/categories"
9+
},
10+
{ "title": "Frameworks", "url": "/frameworks" },
11+
{
12+
"title": "Laws of Gestalt",
13+
"url": "/laws"
14+
},
15+
{
16+
"title": "Authors",
17+
"url": "/authors"
18+
},
19+
{
20+
"title": "Projects",
21+
"url": "/projects"
22+
}
23+
]

‎chance/basiljs/connect/index.md

+2-5
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,16 @@
22
layout: default
33
author: Fabian Morón Zirfas
44
title: Connect
5-
tags: [Basil.js, chance, repeat, Law of Proximity, Law of Connected Elements, ]
5+
tags: [Basil.js, chance, repeat, Law of Proximity, Law of Connected Elements]
66
permalink: /chance/connect/
7-
summary: Calculate the distance between two points and draw a line if they are in reach. Similar to the sketch <a href="/gestalten-in-code/chance/distance/">Distance</a>. Also an example for the "Law of Proximity"
7+
summary: Calculate the distance between two points and draw a line if they are in reach. Similar to the sketch <a href="/chance/distance/">Distance</a>. Also an example for the "Law of Proximity"
88
archive: connect.zip
99
---
1010

11-
1211
<!-- more -->
1312

1413
{% include out.html %}
1514

1615
```js
1716
{% include_relative connect.jsx %}
1817
```
19-
20-

‎chance/p5js/noise-line/index.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
layout: default
33
author: Fabian Morón Zirfas
44
title: Noise Line
5-
tags: [P5.js, chance, repeat, noise, ]
5+
tags: [P5.js, chance, repeat, noise]
66
permalink: /chance/noise-line/
7-
summary: Generate a line from the middle of one side of the convas to another. Similar to the sketch <a href="/gestalten-in-code/chance/noise/">Noise</a>.
7+
summary: Generate a line from the middle of one side of the convas to another. Similar to the sketch <a href="/chance/noise/">Noise</a>.
88
archive: noise-line.zip
99
---
1010

@@ -19,4 +19,4 @@ archive: noise-line.zip
1919
```
2020

2121
<script type="text/javascript" src="{{site.baseurl}}/assets/js/p5.min.js"></script>
22-
<script type="text/javascript" src="{{site.baseurl}}/{{ page.path | replace:'.md','.js' }}"></script>
22+
<script type="text/javascript" src="{{site.baseurl}}/{{ page.path | replace:'.md','.js' }}"></script>

‎color/p5js/colored-disco/index.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
---
1+
---
22
layout: p5js
33
author: Malte Völkner
44
author-url: https://github.com/MalteVoelkner
55
title: colored disco
6-
tags:
6+
tags:
77
- P5.js
88
- color
99
- repeat
1010
permalink: /color/colored-disco/
1111
summary: change light strobe, reminding of a disco light.
12-
---
12+
---
1313

14-
![](/gestalten-in-code/color/p5js/colored-disco/images/colored-disco_1.png)
15-
![](/gestalten-in-code/color/p5js/colored-disco/images/colored-disco_2.png)
16-
![](/gestalten-in-code/color/p5js/colored-disco/images/colored-disco_3.png)
17-
![](/gestalten-in-code/color/p5js/colored-disco/images/colored-disco_4.png)
18-
![](/gestalten-in-code/color/p5js/colored-disco/images/colored-disco_5.png)
14+
![](/color/p5js/colored-disco/images/colored-disco_1.png)
15+
![](/color/p5js/colored-disco/images/colored-disco_2.png)
16+
![](/color/p5js/colored-disco/images/colored-disco_3.png)
17+
![](/color/p5js/colored-disco/images/colored-disco_4.png)
18+
![](/color/p5js/colored-disco/images/colored-disco_5.png)

‎data/p5js/mountain-view/index.js

+43-24
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
//mountain - array
2-
var x1, y1, x2, y2;
3-
x1 = [19, 56, 84, 112, 158, 182, 270, 298, 333, 364, 393, 407, 454, 500, 517, 554, 585, 622, 675, 689, 720, 790, 847, 900, 932, 987, 1046];
4-
y1 = [428, 390, 386, 425, 416, 393, 376, 348, 313, 305, 337, 353, 374, 327, 311, 286, 341, 319, 345, 382, 408, 424, 417, 410, 385, 360, 304];
5-
x2 = [48, 78, 103, 139, 174, 237, 285, 327, 358, 380, 400, 453, 479, 511, 541, 580, 609, 658, 686, 724, 775, 831, 882, 938, 979, 1035, 1057];
6-
y2 = [399, 368, 406, 400, 400, 337, 361, 319, 289, 321, 344, 399, 349, 316, 286, 313, 318, 353, 355, 382, 408, 424, 417, 410, 385, 314, 293];
2+
var x1, y1, x2, y2;
3+
x1 = [
4+
19, 56, 84, 112, 158, 182, 270, 298, 333, 364, 393, 407, 454, 500, 517, 554,
5+
585, 622, 675, 689, 720, 790, 847, 900, 932, 987, 1046,
6+
];
7+
y1 = [
8+
428, 390, 386, 425, 416, 393, 376, 348, 313, 305, 337, 353, 374, 327, 311,
9+
286, 341, 319, 345, 382, 408, 424, 417, 410, 385, 360, 304,
10+
];
11+
x2 = [
12+
48, 78, 103, 139, 174, 237, 285, 327, 358, 380, 400, 453, 479, 511, 541, 580,
13+
609, 658, 686, 724, 775, 831, 882, 938, 979, 1035, 1057,
14+
];
15+
y2 = [
16+
399, 368, 406, 400, 400, 337, 361, 319, 289, 321, 344, 399, 349, 316, 286,
17+
313, 318, 353, 355, 382, 408, 424, 417, 410, 385, 314, 293,
18+
];
719

820
function preload() {
9-
fontLight = loadFont("/gestalten-in-code/data/p5js/mountain-view/assets/Proxima-Nova_Light.otf");
21+
fontLight = loadFont(
22+
'/data/p5js/mountain-view/assets/Proxima-Nova_Light.otf',
23+
);
1024
}
1125

1226
function setup() {
@@ -15,53 +29,58 @@ function setup() {
1529
colorMode(HSB);
1630
background(100);
1731

18-
//map legend
32+
//map legend
1933
fill(15);
2034
textSize(17);
21-
textFont(fontLight)
35+
textFont(fontLight);
2236
textAlign(RIGHT, BASELINE);
23-
text("BERCHTESGADEN", 10*width/24, 19*height/21);
37+
text('BERCHTESGADEN', (10 * width) / 24, (19 * height) / 21);
2438
textAlign(LEFT, BASELINE);
25-
text("NUSSDORF", 14*width/24, 19*height/21);
39+
text('NUSSDORF', (14 * width) / 24, (19 * height) / 21);
2640

2741
stroke(15);
2842
strokeWeight(1);
29-
line(11*width/24, 181*height/203, 13*width/24, 181*height/203);
43+
line(
44+
(11 * width) / 24,
45+
(181 * height) / 203,
46+
(13 * width) / 24,
47+
(181 * height) / 203,
48+
);
3049

3150
noFill();
3251
beginShape();
33-
vertex(13*width/24-5, 181*height/203-3);
34-
vertex(13*width/24, 181*height/203+0.5);
35-
vertex(13*width/24-5, 181*height/203+3.5);
52+
vertex((13 * width) / 24 - 5, (181 * height) / 203 - 3);
53+
vertex((13 * width) / 24, (181 * height) / 203 + 0.5);
54+
vertex((13 * width) / 24 - 5, (181 * height) / 203 + 3.5);
3655
endShape();
3756

38-
//mountain - colors
57+
//mountain - colors
3958
var rot = color(5, 80, 85);
4059
var gelb = color(50, 85, 90);
4160
var blau = color(225, 65, 55);
4261
var schwarz = color(25, 10, 15);
4362

44-
//mountain
45-
for(var i = 0; i <= 29; i++){
63+
//mountain
64+
for (var i = 0; i <= 29; i++) {
4665
if (y1[i] <= 348) {
4766
stroke(blau);
4867
strokeWeight(10);
4968
strokeCap(SQUARE);
50-
line (x1[i], y1[i], x2[i], y2[i]);
51-
} else if (y2[i] >= 400) {
69+
line(x1[i], y1[i], x2[i], y2[i]);
70+
} else if (y2[i] >= 400) {
5271
stroke(rot);
5372
strokeWeight(10);
5473
strokeCap(SQUARE);
55-
line (x1[i], y1[i], x2[i], y2[i]);
56-
} else {
74+
line(x1[i], y1[i], x2[i], y2[i]);
75+
} else {
5776
stroke(gelb);
5877
strokeWeight(10);
5978
strokeCap(SQUARE);
60-
line (x1[i], y1[i], x2[i], y2[i]);
61-
}
79+
line(x1[i], y1[i], x2[i], y2[i]);
80+
}
6281
}
6382
}
6483

6584
function mouseClicked() {
6685
save('berglandschaft01.png');
67-
}
86+
}

‎data/p5js/open-paths/index.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ var CANADA_eastlon = -119.75009; // the most right point
2525
* This is Germany bounding box
2626
*/
2727
var DE_westlon = 2.50652; // the most left point
28-
var DE_northlat = 54.81060; // the most top point
28+
var DE_northlat = 54.8106; // the most top point
2929
var DE_southlat = 46.99199; // the most bottom point
3030
var DE_eastlon = 17.31609; // the most right point
3131

@@ -57,8 +57,9 @@ var FHP_eastlon = 13.054676055908203; // the most right point
5757
var locs = [];
5858
var json = null;
5959
function preload() {
60-
61-
json = loadJSON('https://raw.githubusercontent.com/fabianmoronzirfas/gestalten-in-code/master/data/p5js/open-paths/openpaths_fabiantheblind.json');
60+
json = loadJSON(
61+
'https://raw.githubusercontent.com/fabianmoronzirfas/gestalten-in-code/master/data/p5js/open-paths/openpaths_fabiantheblind.json',
62+
);
6263
}
6364
function setup() {
6465
var canvas = createCanvas(640, 360);
@@ -73,14 +74,14 @@ function setup() {
7374
strokeWeight(1);
7475
stroke(0);
7576
beginShape();
76-
for(var i = 0; i < json.length; i++) {
77+
for (var i = 0; i < json.length; i++) {
7778
// console.log(json[i].lat);
7879
var x = width * ((DE_westlon - json[i].lon) / (DE_westlon - DE_eastlon));
79-
var y = (height * ((DE_northlat - json[i].lat) / (DE_northlat - DE_southlat)));
80+
var y =
81+
height * ((DE_northlat - json[i].lat) / (DE_northlat - DE_southlat));
8082
vertex(x, y); // draw the vertex
8183
}
8284
endShape();
8385
// saveCanvas(canvas, 'out', 'png');
8486
}
85-
function draw() {
86-
}
87+
function draw() {}

‎frameworks/index.md

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
---
1+
---
22
layout: default
33
author: Fabian Morón Zirfas
44
title: Frameworks (P5)
55
meta: True
66
permalink: /frameworks/
77
nosource: True
8-
---
8+
---
9+
910
> What? P5? I thought it is Processing. Is it P5.js or what?
10-
> Rock Strongo
11+
> Rock Strongo
1112
12-
The naming "P5" is not a widely known convention. It is more or less my own term to combine all those flavors of Processing into one single title. Why mixing them all together? In the last several years I tried to teach each of these frameworks on its own. It turned out that each has its advantages and disadvantages _(who would have thought of that)_. if you want to create something for the web - use [P5.js](/gestalten-in-code/p5js). If you want lots of particles or interact with hardware - use [Processing](/gestalten-in-code/processing) and if you need fine grained macro typography go for [Basil.js](/gestalten-in-code/basiljs) or [Extendscript](/gestalten-in-code/extendscript). Don't lock yourself in one box. Use the right tool for the right job.
13+
The naming "P5" is not a widely known convention. It is more or less my own term to combine all those flavors of Processing into one single title. Why mixing them all together? In the last several years I tried to teach each of these frameworks on its own. It turned out that each has its advantages and disadvantages _(who would have thought of that)_. if you want to create something for the web - use [P5.js](/p5js). If you want lots of particles or interact with hardware - use [Processing](/processing) and if you need fine grained macro typography go for [Basil.js](/basiljs) or [Extendscript](/extendscript). Don't lock yourself in one box. Use the right tool for the right job.
1314

14-
## Processing [{% include icon-link.html %}]({{site.baseurl}}/processing)
15+
## Processing [{% include icon-link.html %}]({{site.baseurl}}/processing)
1516

1617
{% include filtered-index-overview.html param="processing" %}
1718

‎frameworks/p5.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@ nosource: True
77
---
88

99
> What? P5? I thought it is Processing. Is it P5.js or what?
10-
> Rock Strongo
10+
> Rock Strongo
1111
12-
The naming "P5" is not a known convention. It is rather my own term to combine all those flavors of Processing into one single title. Why mixing them all together? In the last several years I tried to teach each of these frameworks on its own. It turned out that each has its advantages and disadvantages _(who would have thought of that)_. if you want to create something for the web - use [P5.js](/gestalten-in-code/p5js). If you want lots of particles or interact with hardware - use [Processing](/gestalten-in-code/processing) and if you need fine grained macro typography go for [Basil.js](/gestalten-in-code/basiljs) or [Extendscript](/gestalten-in-code/extendscript). Don't lock yourself in one box. Use the right tool for the right job.
12+
The naming "P5" is not a known convention. It is rather my own term to combine all those flavors of Processing into one single title. Why mixing them all together? In the last several years I tried to teach each of these frameworks on its own. It turned out that each has its advantages and disadvantages _(who would have thought of that)_. if you want to create something for the web - use [P5.js](/p5js). If you want lots of particles or interact with hardware - use [Processing](/processing) and if you need fine grained macro typography go for [Basil.js](/basiljs) or [Extendscript](/extendscript). Don't lock yourself in one box. Use the right tool for the right job.

‎index.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
---
1+
---
22
layout: default
33
title: Gestalten in Code
44
meta: True
5-
---
5+
---
66

77
> "program the beautiful"
8-
> Max Bense
8+
> Max Bense
99
10+
<div class="hero">What is <em>"Gestalten in Code"</em>?<br>It is an exploration into the the depths of generative design. It is learning material for an upcoming seminar at the <a href="http://www.fh-potsdam.de/">University of Applied Sciences Potsdam (Germany)</a> by <a href="http://fabianmoronzirfas.me/">Fabian Morón Zirfas</a>. It is an attempt to apply the "Laws of Gestalt" in programming. Last but not least it is a comparison of several creative coding frameworks. To show how the same language can be applied in different contexts. .</div>
1011

11-
<div class="hero">What is <em>"Gestalten in Code"</em>?<br>It is an exploration into the the depths of generative design. It is learning material for an upcoming seminar at the <a href="http://www.fh-potsdam.de/">University of Applied Sciences Potsdam (Germany)</a> by <a href="http://fabianmoronzirfas.me/">Fabian Morón Zirfas</a>. It is an attempt to apply the "Laws of Gestalt" in programming. Last but not least it is a comparison of several creative coding frameworks. To show how the same language can be applied in different contexts. .</div>
12-
13-
The examples on this site are clustered in different ways. By [categories](/gestalten-in-code/categories/) like [form](/gestalten-in-code/form/), [color](/gestalten-in-code/color/), [typography](/gestalten-in-code/typography/), by [framework](/gestalten-in-code/frameworks) like [Processing](/gestalten-in-code/processing/), [P5.js](/gestalten-in-code/p5js/), [Basil.js](/gestalten-in-code/basiljs) and also by the [Laws of Gestalt](/gestalten-in-code/laws/) like the [Law of Proximity](/gestalten-in-code/law-of/proximity), the [Law of Similarity](/gestalten-in-code/law-of/similarity) or the [Law of Common Fate](/gestalten-in-code/law-of/common-fate) _(to name a few)_. Some of them might appear in different categories. Feel free to explore them. If you run into any errors, have questions or contributions contact me on [GitHub](https://github.com/fabianmoronzirfas/gestalten-in-code/issues).
12+
The examples on this site are clustered in different ways. By [categories](/gestalten-in-code/categories/) like [form](/gestalten-in-code/form/), [color](/gestalten-in-code/color/), [typography](/gestalten-in-code/typography/), by [framework](/gestalten-in-code/frameworks) like [Processing](/gestalten-in-code/processing/), [P5.js](/gestalten-in-code/p5js/), [Basil.js](/gestalten-in-code/basiljs) and also by the [Laws of Gestalt](/gestalten-in-code/laws/) like the [Law of Proximity](/gestalten-in-code/law-of/proximity), the [Law of Similarity](/gestalten-in-code/law-of/similarity) or the [Law of Common Fate](/gestalten-in-code/law-of/common-fate) _(to name a few)_. Some of them might appear in different categories. Feel free to explore them. If you run into any errors, have questions or contributions contact me on [GitHub](https://github.com/fabianmoronzirfas/gestalten-in-code/issues).
1413

1514
<hr>
1615

1716
<div class="index-overview">
18-
{% include thumb-noblock.html url="/gestalten-in-code/frameworks" title="Frameworks" thumb="/gestalten-in-code/assets/images/logo-thumb.png" %}
17+
{% include thumb-noblock.html url="/frameworks" title="Frameworks" thumb="/assets/images/logo-thumb.png" %}
18+
19+
{% include thumb-noblock.html url="/laws" title="Laws of Gestalt" thumb="/assets/images/gest-thumb.png" %}
1920

20-
{% include thumb-noblock.html url="/gestalten-in-code/laws" title="Laws of Gestalt" thumb="/gestalten-in-code/assets/images/gest-thumb.png" %}
21+
{% include thumb-noblock.html url="/categories" title="Categories" thumb="/assets/images/cats-thumb.png" %}
2122

22-
{% include thumb-noblock.html url="/gestalten-in-code/categories" title="Categories" thumb="/gestalten-in-code/assets/images/cats-thumb.png" %}
2323
</div>
2424
<div class="clear-float"></div>
2525

@@ -33,8 +33,8 @@ The examples on this site are clustered in different ways. By [categories](/gest
3333
{% assign title = page.title | downcase | replace: '.','' | replace: ' ','-'| replace:'ä','ae' | replace:'ö','oe'| replace:'ü','ue'| replace:'ß','ss' %}
3434
{% assign tgtxt = tg | downcase | replace: '.','' | replace: ' ','-'| replace:'ä','ae' | replace:'ö','oe'| replace:'ü','ue'| replace:'ß','ss' %}
3535
{% if title == tgtxt %}
36-
found a match --> {{title}}:{{tg}} <br>
36+
found a match --> {{title}}:{{tg}} <br>
3737
{% endif %}
3838
{% endfor %}
3939
{% endfor %}
40-
{% endcomment %}
40+
{% endcomment %}

‎interact/processing/simple_paint/index.md

+2-5
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
layout: default
33
author: Fabian Morón Zirfas
44
title: Simple Paint
5-
tags: [processing, interact,chance ]
5+
tags: [processing, interact, chance]
66
permalink: /interact/simple-paint/
7-
summary: A even simpler paint program then <a href="/gestalten-in-code/interact/paint/">paint</a>.
7+
summary: A even simpler paint program then <a href="/interact/paint/">paint</a>.
88
---
99

1010
{{page.summary}}
@@ -16,6 +16,3 @@ summary: A even simpler paint program then <a href="/gestalten-in-code/interact/
1616
```js
1717
{% include_relative simple_paint.pde %}
1818
```
19-
20-
21-

‎laws/law-of-similarity.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Law of Similarity
33
meta: True
44
layout: default
5-
summary: Elements within an assortment that are similar to each other are perceived as a group. This can be achieved by <a href="/gestalten-in-code/form">form</a>, <a href="/gestalten-in-code/color">color</a>, texture or even <a href="/gestalten-in-code/motion">motion</a>.
5+
summary: Elements within an assortment that are similar to each other are perceived as a group. This can be achieved by <a href="/form">form</a>, <a href="/color">color</a>, texture or even <a href="/motion">motion</a>.
66
permalink: /law-of/similarity/
77
nosource: True
88
---

0 commit comments

Comments
 (0)