├── .gitignore
├── CircleAndRectangle
├── CircleAndRectangle.pde
└── svg
│ └── output.svg
├── Help
├── License.md
└── images
│ └── hero.png
├── HexSpin
├── HexSpin.pde
└── svg
│ └── output.svg
├── RandomArcs
├── RandomArcs.pde
└── svg
│ ├── output-000085.svg
│ └── output-000151.svg
├── RandomShapes
├── RandomShapes.pde
└── svg
│ ├── output-000156.svg
│ └── output-000200.svg
├── Readme.md
└── SunflowerPattern
├── SunflowerPattern.pde
└── svg
└── output.svg
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | applet
3 | application.linux32
4 | application.linux64
5 | application.windows32
6 | application.windows64
7 | application.macosx
8 |
--------------------------------------------------------------------------------
/CircleAndRectangle/CircleAndRectangle.pde:
--------------------------------------------------------------------------------
1 | import processing.svg.*;
2 |
3 | void setup() {
4 | size(250, 250); // Set up a 250×250 canvas.
5 | beginRecord(SVG, "svg/output.svg"); // Start recording drawing operations to this file.
6 | noLoop(); // Only run draw() once.
7 | }
8 |
9 | void draw() {
10 | noStroke(); // Turn off the border on objects we’re about to draw.
11 | fill(#4bbcf6); // Set the fill colour to light blue.
12 | rect(50, 50, 100, 100); // Draw a rectangle on the canvas and to the SVG file.
13 | fill(#5721a5); // Set the fill colour to purple.
14 | ellipse(150, 150, 100, 100); // Draw a circle on the canvas and to the SVG file.
15 | endRecord(); // Save and close the SVG file recording.
16 | }
17 |
--------------------------------------------------------------------------------
/CircleAndRectangle/svg/output.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
16 |
--------------------------------------------------------------------------------
/Help/License.md:
--------------------------------------------------------------------------------
1 | # BSD 3-Clause License
2 |
3 | Copyright (c) 2019. All rights reserved.
4 |
5 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
6 |
7 | - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
8 | - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
9 | - Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
10 |
11 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
12 |
--------------------------------------------------------------------------------
/Help/images/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bjango/Processing-SVG-experiments/6654e96c8a482ac0f4f1137d6f2b3cd5db8e1d6e/Help/images/hero.png
--------------------------------------------------------------------------------
/HexSpin/HexSpin.pde:
--------------------------------------------------------------------------------
1 | import processing.svg.*;
2 |
3 | void setup() {
4 | size(600, 600);
5 | beginRecord(SVG, "svg/output.svg"); // Start recording the SVG before setting the fill and stroke.
6 | noFill();
7 | stroke(255);
8 | noLoop(); // Only run draw() once.
9 | }
10 |
11 | void draw() {
12 | int numberOfHexes = 20;
13 | background(0);
14 |
15 | for (int i = 1; i < numberOfHexes; i++) {
16 | strokeWeight((numberOfHexes - i) * 0.6);
17 | hexagon(width / 2, height / 2, i * (width / numberOfHexes / 2), i);
18 | }
19 |
20 | endRecord();
21 | }
22 |
23 | void hexagon(float x, float y, float radius, float angle) {
24 | beginShape();
25 | for (float a = 0; a < TAU; a += TAU / 6) {
26 | vertex(x + cos(a + angle) * radius, y + sin(a + angle) * radius);
27 | }
28 | endShape(CLOSE);
29 | }
30 |
--------------------------------------------------------------------------------
/HexSpin/svg/output.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
34 |
--------------------------------------------------------------------------------
/RandomArcs/RandomArcs.pde:
--------------------------------------------------------------------------------
1 | import processing.svg.*;
2 |
3 | void setup() {
4 | size(600, 600);
5 | drawShapes();
6 | }
7 |
8 | void draw() {
9 | // We don’t need anything here, because the keyboard will trigger drawing.
10 | }
11 |
12 | void drawShapes() {
13 | background(0);
14 | noFill();
15 | rectMode(CENTER);
16 | ellipseMode(CENTER);
17 |
18 | for (int i = 1; i < 12; i++) {
19 | for (int j = 1; j < 12; j++) {
20 | pushMatrix();
21 | translate(i * 50, j * 50);
22 | rotate(random(TAU));
23 | strokeWeight(1.5);
24 | stroke(80);
25 | ellipse(0, 0, 30, 30);
26 | strokeWeight(3);
27 |
28 | int rand = round(random(4));
29 | switch(rand) {
30 | case 0:
31 | stroke(#fc6665);
32 | break;
33 | case 1:
34 | stroke(#9152e1);
35 | break;
36 | case 2:
37 | stroke(#4bbcf6);
38 | break;
39 | case 3:
40 | stroke(#f6e865);
41 | break;
42 | case 4:
43 | stroke(#97e365);
44 | break;
45 | }
46 |
47 | arc(0, 0, 30, 30, 0, 0.25 + random(0.5) * TAU);
48 | popMatrix();
49 | }
50 | }
51 | }
52 |
53 | void keyReleased() {
54 | if (key == 32) {
55 | noiseSeed((long)random(10000));
56 | drawShapes();
57 | }
58 | if (key == 10) {
59 | beginRecord(SVG, "svg/output-" + nf(frameCount, 6) + ".svg");
60 | drawShapes();
61 | endRecord();
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/RandomArcs/svg/output-000085.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
497 |
--------------------------------------------------------------------------------
/RandomArcs/svg/output-000151.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
497 |
--------------------------------------------------------------------------------
/RandomShapes/RandomShapes.pde:
--------------------------------------------------------------------------------
1 | import processing.svg.*;
2 |
3 | void setup() {
4 | size(600, 600);
5 | drawShapes();
6 | }
7 |
8 | void draw() {
9 | // We don’t need anything here, because the keyboard will trigger drawing.
10 | }
11 |
12 | void drawShapes() {
13 | background(0);
14 | rectMode(CENTER);
15 | ellipseMode(CENTER);
16 | strokeWeight(2);
17 |
18 | for (int i = 1; i < 12; i++) {
19 | for (int j = 1; j < 12; j++) {
20 | int rand = round(random(4));
21 | switch(rand) {
22 | case 0:
23 | stroke(#fc6665);
24 | fill(#fc6665, 150);
25 | break;
26 | case 1:
27 | stroke(#9152e1);
28 | fill(#9152e1, 150);
29 | break;
30 | case 2:
31 | stroke(#4bbcf6);
32 | fill(#4bbcf6, 150);
33 | break;
34 | case 3:
35 | stroke(#f6e865);
36 | fill(#f6e865, 150);
37 | break;
38 | case 4:
39 | stroke(#97e365);
40 | fill(#97e365, 150);
41 | break;
42 | }
43 |
44 | pushMatrix();
45 | translate(i * 50, j * 50);
46 | rotate(random(TAU));
47 |
48 | rand = round(random(4));
49 | switch(rand) {
50 | case 0:
51 | ellipse(0, 0, 30, 30);
52 | break;
53 | case 1:
54 | polygon(0, 0, 18, 3, 0);
55 | break;
56 | case 2:
57 | polygon(0, 0, 18, 4, 0);
58 | break;
59 | case 3:
60 | polygon(0, 0, 17, 5, 0);
61 | break;
62 | case 4:
63 | polygon(0, 0, 17, 6, 0);
64 | break;
65 | }
66 |
67 | popMatrix();
68 | }
69 | }
70 | }
71 |
72 | void keyReleased() {
73 | if (key == 32) {
74 | noiseSeed((long)random(10000));
75 | drawShapes();
76 | }
77 | if (key == 10) {
78 | beginRecord(SVG, "svg/output-" + nf(frameCount, 6) + ".svg");
79 | drawShapes();
80 | endRecord();
81 | }
82 | }
83 |
84 | void polygon(float x, float y, float radius, int sides, float angle) {
85 | beginShape();
86 | for (float a = 0; a < TAU; a += TAU / sides) {
87 | vertex(x + cos(a + angle) * radius, y + sin(a + angle) * radius);
88 | }
89 | endShape(CLOSE);
90 | }
91 |
--------------------------------------------------------------------------------
/RandomShapes/svg/output-000156.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
497 |
--------------------------------------------------------------------------------
/RandomShapes/svg/output-000200.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
497 |
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Processing SVG experiments
4 |
5 | I’ve been experimenting with creating SVGs programmatically, which opens up a world of possibilities. It allows patterns, shapes, and compositions that would not be easy or possible by hand. The results can then be imported into Illustrator, Sketch or your design tool of choice, augmenting their features.
6 |
7 | For more information, please take a look at this project’s companion article: [Creating SVGs using Processing](https://bjango.com/articles/processingsvg/)
8 |
9 | **Download:** **[Processing SVG experiments](https://github.com/bjango/Processing-SVG-experiments/archive/master.zip)**
10 |
11 | -----
12 |
13 | This project is free and open source, released under the [BSD license](https://github.com/bjango/Processing-SVG-experiments/blob/master/Help/License.md).
14 |
15 | Short questions about this project can be sent to [@marcedwards](https://twitter.com/marcedwards) or [@bjango](https://twitter.com/bjango) on Twitter. More verbose questions can be sent via the [Bjango contact page](https://bjango.com/contact/). If you notice any errors, please let me know.
16 |
17 | -----
18 |
19 | ```
20 | ::::::::: ::::::: :::: :::: ::: :::::::: ::::::::
21 | :+: :+: :+: :+: :+: :+:+: :+: :+: :+: :+: :+:
22 | +:+ +:+ +:+ +:+ +:+ :+:+:+ +:+ +:+ +:+ +:+
23 | +#++:++#+ +#+ +#++:++#++: +#+ +:+ +#+ :#: +#+ +:+
24 | +#+ +#+ +#+ +#+ +#+ +#+ +#+#+# +#+ +#+# +#+ +#+
25 | #+# #+# #+# #+# #+# #+# #+# #+#+# #+# #+# #+# #+#
26 | ######### ##### ### ### ### #### ######## ########
27 | ```
28 |
--------------------------------------------------------------------------------
/SunflowerPattern/SunflowerPattern.pde:
--------------------------------------------------------------------------------
1 | import processing.svg.*;
2 |
3 | void setup() {
4 | size(400, 400);
5 | beginRecord(SVG, "svg/output.svg");
6 | noStroke();
7 | noLoop();
8 | }
9 |
10 | void draw() {
11 | background(#191030);
12 | float steps = 50;
13 |
14 | for (int i = 0; i < steps; i++) {
15 | for (int j = 0; j < steps; j++) {
16 | float angle = j / steps * TAU + (i % 2 * TAU / steps / 2);
17 | float distance = easeInSin(i / steps) * 180;
18 |
19 | fill(lerpColor(#5ee4ff, #764aed, easeInN(i / steps, 2 + random(10))));
20 | circle(width / 2 + (cos(angle) * distance),
21 | height / 2 + (sin(angle) * distance),
22 | 1 + easeInSin(i / steps) * 8);
23 | }
24 | }
25 | endRecord();
26 | }
27 |
28 | float easeInSin(float t) {
29 | return 1 + sin(PI / 2 * t - PI / 2);
30 | }
31 |
32 | float easeInN(float t, float power) {
33 | return pow(t, power);
34 | }
35 |
--------------------------------------------------------------------------------