Skip to content

Commit ad25357

Browse files
author
fabianmoronzirfas
committed
content
1 parent 0c6cc7e commit ad25357

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+534
-33
lines changed

_includes/icon-link.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<svg class="icon-link"><use xlink:href="{{site.baseurl}}/assets/fonts/icons.svg#icon-link"></use></svg>

_includes/out-gif.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="img-container">
2+
<img src="{{site.baseurl}}/{{ page.path | replace:'index.md','' }}/out.gif" alt="">
3+
</div>

assets/fonts/demo.html

+12
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,10 @@
220220
<path d="m110 128c0-10-4-19-11-26-7-7-16-11-26-11-10 0-19 4-26 11-7 7-10 16-10 26 0 10 3 19 10 26 7 7 16 11 26 11 10 0 19-4 26-11 7-7 11-16 11-26z m305 165c0 10-4 18-11 25l-140 141c-8 7-16 10-26 10-10 0-19-3-26-10l-204-205c-8-7-14-16-19-29-5-12-7-23-7-33l0-119c0-10 3-18 11-26 7-7 15-10 25-10l119 0c10 0 21 2 34 7 12 5 21 11 29 19l204 204c7 7 11 16 11 26z m109 0c0 10-3 18-10 25l-141 141c-7 7-16 10-26 10-6 0-12-1-16-4-5-2-10-7-16-12l135-135c7-7 10-15 10-25 0-10-3-19-10-26l-205-204c-7-8-17-14-29-19-12-5-23-7-33-7l64 0c10 0 21 2 33 7 12 5 22 11 29 19l205 204c7 7 10 16 10 26z"/>
221221
</symbol>
222222

223+
<symbol id="icon-link" viewBox="0 0 512 512">
224+
<path d="m434 347c0-7-2-14-8-19l-59-59c-5-6-12-8-20-8-8 0-14 3-20 9 0 0 2 2 5 5 3 3 5 5 6 6 1 1 3 3 5 6 2 2 3 4 3 7 1 2 1 5 1 8 0 7-2 14-8 19-5 5-11 8-19 8-3 0-5 0-8-1-2-1-5-2-7-4-3-1-4-3-6-4-1-1-3-3-6-6-3-3-4-5-5-5-6 5-9 12-9 20 0 8 2 15 8 20l58 59c6 5 12 8 20 8 7 0 14-3 19-8l42-41c6-6 8-12 8-20z m-201-201c0-8-2-14-8-19l-58-60c-6-5-12-8-20-8-7 0-14 3-19 8l-42 42c-6 5-8 12-8 19 0 8 2 14 8 19l59 60c5 5 12 8 20 8 8 0 14-3 20-9 0-1-2-3-5-6-3-3-5-5-6-6-1-1-3-3-5-5-2-3-3-5-3-7-1-3-1-5-1-8 0-8 2-14 8-20 5-5 11-8 19-8 3 0 5 1 8 1 2 1 5 2 7 4 3 2 4 3 6 4 1 1 3 3 6 6 3 3 4 5 5 6 6-6 9-13 9-21z m256 201c0 23-8 43-24 58l-42 42c-16 16-35 24-58 24-23 0-43-8-58-24l-59-60c-16-15-24-35-24-58 0-23 8-43 25-59l-25-25c-16 16-36 25-59 25-23 0-43-8-59-24l-59-60c-16-16-24-35-24-58 0-23 8-42 24-58l42-42c16-16 35-23 58-23 23 0 43 8 58 24l59 59c16 16 24 35 24 58 0 23-8 43-25 60l25 25c16-17 36-25 59-25 23 0 43 8 59 24l59 59c16 16 24 36 24 58z"/>
225+
</symbol>
226+
223227
</svg>
224228

225229

@@ -277,6 +281,14 @@ <h2>icons reference</h2>
277281
<input type="text" readonly="readonly" value='<svg class="icon-tags"><use xlink:href="#icon-tags"></use></svg>'>
278282
</li>
279283

284+
<li>
285+
<svg class="icon-link">
286+
<use xlink:href="#icon-link"></use>
287+
</svg>
288+
289+
<input type="text" readonly="readonly" value='<svg class="icon-link"><use xlink:href="#icon-link"></use></svg>'>
290+
</li>
291+
280292
</ul>
281293

282294
<h2>How to add SVG sprite icons to your project?</h2>

assets/fonts/icons.svg

+4
Loading

atom.xml

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
layout: nil
33
title: blog atom feed
4+
meta: True
45
---
56
<?xml version="1.0" encoding="utf-8"?>
67
<feed xmlns="http://www.w3.org/2005/Atom">

chance/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ author: Fabian Morón Zirfas
44
title: Chance
55
tags: [basil.js, processing, P5.js]
66
summary: The chance that something happens.
7+
meta: True
78
---
89
<div class="hero">{{ page.summary }}</div>
910
In programming, it is also called random, graphics it is a powerful tool to create endless variations of the same motiv.

color/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: default
33
author: Fabian Morón Zirfas
44
title: Color
55
tags: [basil.js, processing, P5.js]
6+
meta: True
67
---
78

89
The Color.

data/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: default
33
author: Fabian Morón Zirfas
44
title: Data
55
tags: [basil.js, processing, P5.js]
6+
meta: True
67
---
78

89
The Data.

form/2d/basiljs/ribbon/index.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
---
22
layout: default
33
author: Fabian Morón Zirfas
4-
title: Displacement Map
4+
title: Ribbon
55
tags: [todo]
66
permalink: /form/ribbon/
77
summary: A sketch using a grayscale image as displacement map
8+
meta: True
89
---
910

1011
Some displacexment_map.

form/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: default
33
author: Fabian Morón Zirfas
44
title: Form
55
tags: [basil.js, processing, P5.js, 2D, 3D]
6+
meta: True
67
---
78

89

gestalt/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
layout: default
33
author: Fabian Morón Zirfas
44
tags: [gestalt, meta]
5+
meta: True
56
---

grid/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: default
33
author: Fabian Morón Zirfas
44
title: Grid
55
tags: [basil.js, processing, extendscript]
6+
meta: True
67
---
78

89
The Grid.

index.md

+9-5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22
layout: default
33
author: Fabian Morón Zirfas
44
title: Gestalten in Code
5-
categories:
6-
- meta
7-
- foo
85
tags: [welcome, foo]
6+
meta: True
97
---
108

119
## Gestalt | Definition of Gestalt by Merriam-Webster
@@ -63,9 +61,15 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
6361

6462

6563
{% for page in site.pages %}
66-
<div class="thumb" style="float:left;">
67-
<a href="{{ page.permalink | prepend: site.baseurl }}"><img src="{{site.baseurl}}/{{ page.path | replace:'index.md','' }}thumb.png"></a>
64+
{% if page.meta == nil %}
65+
66+
<div class="thumb" style="float:left; margin: 1em;max-width:128px;">
67+
<a href="{{ page.permalink | prepend: site.baseurl }}"><img src="{{site.baseurl}}/{{ page.path | replace:'index.md','' }}thumb.png">
68+
<div><small>{{page.title | truncate: 13,'…' | append: ' →'}}</small></div>
69+
</a>
70+
<div class="clear-float"></div>
6871
</div>
72+
{% endif %}
6973
{% endfor %}
7074

7175
<div class="clear-float"></div>

interact/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: default
33
author: Fabian Morón Zirfas
44
title: Interact
55
tags: [basil.js, P5.js]
6+
meta: True
67
---
78

89
Interaction

motion/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: default
33
author: Fabian Morón Zirfas
44
title: Motion
55
tags: [processing, P5.js]
6+
meta: True
67
---
78

89
The Motion.

motion/processing/Circular.zip

-203 KB
Binary file not shown.
+12-24
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// simple sketch that creates a sort of scanner
22

3-
//These are unused but got to have if you want to see the
3+
//These are unused but got to have if you want to see the
44
//simple code where it comes from in the draw
55
//int x = 0;
66
int step = 100; // step is just used to for the circles in the background
@@ -14,13 +14,13 @@ ScannPoint another_scanner;
1414
ArrayList <ScannPoint> scanns;
1515

1616
void setup() {
17-
18-
size(800, 800,P2D);
17+
18+
size(800, 800, P2D);
1919

2020
colorMode(HSB, 360, 100, 100); // because HSB is cooler
2121
scanns = new ArrayList<ScannPoint>(); // init the list
2222

23-
23+
2424
// ScannPoint(float _radius, color _c, float _w, float _amount, float _x)
2525
// radius is the radius of the orbit
2626
// color is the color of the ellipse
@@ -30,33 +30,21 @@ void setup() {
3030

3131
scanner = new ScannPoint(300, color(260, 90, 90), 5, 100, 90);
3232
another_scanner = new ScannPoint(305, color(360, 90, 90), 5, 100, 90);
33-
33+
3434
// fill the list with new scan points
35-
for(int i = 100; i < 300; i+=5){
36-
scanns.add(new ScannPoint(i, color(160, 90, 90), 5, random(10,100), random(360)));
35+
for (int i = 100; i < 300; i+=5) {
36+
scanns.add(new ScannPoint(i, color(160, 90, 90), 5, random(10, 100), random(360)));
3737
}
38+
smooth(2);
3839
}
3940
void draw() {
40-
smooth(2);
4141

4242
bg_and_ranges(); // clear the bg and draw the circles
43-
for(int i = 0; i < scanns.size();i++){
43+
for (int i = 0; i < scanns.size(); i++) {
4444
scanns.get(i).run();
45-
4645
}
47-
scanner.run(); // run one scanner
46+
scanner.run(); // run one scanner
4847
another_scanner.run(); // run another
49-
50-
51-
// this is the origianl code where it came from
52-
// off+=.01;
53-
// x++;
54-
// pushMatrix();
55-
// translate(width/2, height/2);// bring zero point to the center
56-
// float n = noise(off) * 100;
57-
// float px = sin(radians(x%360))*(radius + n);
58-
// float py = cos(radians(x%360))*(radius + n);
59-
// fill(162, 90, 90);
60-
// ellipse (px, py, 5, 5 );
61-
// popMatrix();
48+
// saveFrame("seq/out-####.png");
49+
// if(frameCount == 250) exit();
6250
}
-202 KB
Binary file not shown.

motion/processing/circular/index.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
layout: default
3+
author: Fabian Morón Zirfas
4+
title: Circular
5+
tags: [processing, motion, chance, class, repeat, Law of Common Fate]
6+
permalink: /motion/circular/
7+
summary: Visualizes the "Law of Common Fate". Elements with the same directional motion and/or same speed are seen as a group.
8+
archive: circular.zip
9+
---
10+
11+
<div class="hero">{{page.summary}}</div>
12+
13+
<!-- more -->
14+
15+
{% include out-gif.html %}
16+
17+
```java
18+
{% include_relative circular.pde %}
19+
```
20+
21+
```java
22+
{% include_relative ScannPoint.pde %}
23+
```
24+
25+
```java
26+
{% include_relative util.pde %}
27+
```
28+
29+
30+
31+

motion/processing/circular/out.gif

15.6 MB
Loading

motion/processing/circular/thumb.png

11.4 KB
Loading

motion/processing/common_fate.zip

285 KB
Binary file not shown.

motion/processing/common_fate/common_fate.pde

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ void setup() {
2323
void draw() {
2424
background(255); // clear the background
2525
sys.run(); // run the system
26-
//saveFrame("seq/out-####.png");
26+
// saveFrame("seq/out-####.png");
27+
// if(frameCount == 250) exit();
2728
}
2829
/**
2930
* the particle system cass
+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
layout: default
3+
author: Fabian Morón Zirfas
4+
title: Common Fate
5+
tags: [processing, motion, chance, class, repeat, Law of Common Fate]
6+
permalink: /motion/common-fate/
7+
summary: Visualizes the "Law of Common Fate". Elements with the same directional motion and/or same speed are seen as a group.
8+
archive: common_fate.zip
9+
---
10+
11+
<div class="hero">{{page.summary}}</div>
12+
13+
<!-- more -->
14+
15+
{% include out-gif.html %}
16+
17+
```java
18+
{% include_relative common_fate.pde %}
19+
```
20+
21+
22+

motion/processing/common_fate/out.gif

432 KB
Loading
2.33 KB
Loading

motion/processing/connectedNodes.zip

51.1 KB
Binary file not shown.

motion/processing/connectedNodes/connectedNodes.pde

+9-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ void setup() {
3434
.setValue(distance);
3535
background(white); // bg for startup
3636

37-
size(800, 500);
37+
size(500, 500);
3838
// the starting distance for the calculation of the lines
3939
// create the NodeSystem with distance
4040
ns = new NodeSystem(distance);
@@ -66,6 +66,13 @@ void draw() {
6666
noStroke();
6767
rect(0, 0, 250, 100);
6868

69-
//saveFrame("images/nodes-####.jpg");
69+
7070
// noLoop();
71+
}
72+
73+
void keyPressed(){
74+
if(key == 's' || key == 'S'){
75+
saveFrame("out.png");
76+
77+
}
7178
}
+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
layout: default
3+
author: Fabian Morón Zirfas
4+
title: Connected Nodes
5+
tags: [processing, color, ui, interact, library, motion, chance, class, repeat]
6+
permalink: /motion/connected-nodes/
7+
summary: Connect nodes by distance. A rather complex sketch that makes use of several techniques. Similar to <a href="/gestalten-in-code/chance/connect/">Connect</a> and <a href="/gestalten-in-code/chance/distance/">Distance</a>
8+
archive: color_wheel.zip
9+
---
10+
11+
<div class="hero">{{page.summary}}</div>
12+
13+
<!-- more -->
14+
15+
{% include out.html %}
16+
17+
```java
18+
{% include_relative connectedNodes.pde %}
19+
```
20+
21+
```java
22+
{% include_relative Node.pde %}
23+
```
24+
25+
```java
26+
{% include_relative NodeSystem.pde %}
27+
```
28+
29+
44.2 KB
Loading
5.25 KB
Loading
Loading

0 commit comments

Comments
 (0)