adding variable geometr

3 years ago · 53f2bf9c5b
12 changed files with 219399 additions and 1 deletions
--- a/command-line/js/p5.js
+++ b/command-line/js/p5.js
--- a/command-line/js/variable-geometry-cover.js
+++ b/command-line/js/variable-geometry-cover.js
@ -0,0 +1,46 @@
+/* --- Variable Geometry 1 (cover) --- */
+
+/*Inspired by David Reinfurt's work - Multi*/
+var moving_size = 50;
+var static_size = 20;
+
+function setup() {
+  var c = createCanvas(600, 600);
+  c.parent('variable-geometry');
+  frameRate(15);
+}
+
+function draw() {
+  //background
+  //background(random(230, 240));
+
+  //left
+  noStroke()
+  fill(0);
+  rect(97, 169, 79, 12);
+
+  //right
+  rect(365, 184, 20, 15);
+  fill(20, 20, 120);
+
+  beginShape();
+  vertex(365, 199);
+  vertex(385, 199);
+  vertex(372, 216);
+  vertex(358, 216);
+  endShape(CLOSE);
+
+  //bottom
+  noFill();
+  stroke(130);
+  strokeWeight(2);
+  ellipse(255, 350, static_size, static_size);
+
+  //mouse interactions
+  //stroke(180);
+  //ellipse(mouseX, mouseY, moving_size, moving_size);
+
+  //if (mouseIsPressed) {
+  //  static_size = floor(random(5, 20));
+  //}
+}
--- a/command-line/templates/template.html
+++ b/command-line/templates/template.html
@ -6,7 +6,9 @@
 	<script src="./js/paged.polyfill.js" type="text/javascript"></script>
 	<link href="./css/interface.css" rel="stylesheet" type="text/css">
 	<link href="./css/print.css" rel="stylesheet" type="text/css" media="print">
-	<!-- <script src="https://gitlab.com/aesthetic-programming/book/-/raw/master/public/p5_SampleCode/libraries/p5.js"></script> -->
+	<script src="./js/p5.js"></script>
+	<script src="./js/variable-geometry-cover.js"></script>
+	<!-- <script src="./js/variable-geometry-inside.js"></script> -->
 </head>
 <body>
 	<div id="wrapper">
--- a/web-interface/static/fonts/Bitter-Bold.ttf
+++ b/web-interface/static/fonts/Bitter-Bold.ttf
--- a/web-interface/static/fonts/Bitter-BoldItalic.ttf
+++ b/web-interface/static/fonts/Bitter-BoldItalic.ttf
--- a/web-interface/static/fonts/Bitter-ExtraBold.ttf
+++ b/web-interface/static/fonts/Bitter-ExtraBold.ttf
--- a/web-interface/static/fonts/Bitter-ExtraBoldItalic.ttf
+++ b/web-interface/static/fonts/Bitter-ExtraBoldItalic.ttf
--- a/web-interface/static/fonts/Bitter-MediumItalic.ttf
+++ b/web-interface/static/fonts/Bitter-MediumItalic.ttf
--- a/web-interface/static/fonts/Bitter-SemiBoldItalic.ttf
+++ b/web-interface/static/fonts/Bitter-SemiBoldItalic.ttf
--- a/web-interface/static/js/p5.js
+++ b/web-interface/static/js/p5.js
--- a/web-interface/static/js/variable-geometry-cover.js
+++ b/web-interface/static/js/variable-geometry-cover.js
@ -0,0 +1,46 @@
+/* --- Variable Geometry 1 (cover) --- */
+
+/*Inspired by David Reinfurt's work - Multi*/
+var moving_size = 50;
+var static_size = 20;
+
+function setup() {
+  var c = createCanvas(600, 600);
+  c.parent('variable-geometry');
+  frameRate(15);
+}
+
+function draw() {
+  //background
+  //background(random(230, 240));
+
+  //left
+  noStroke()
+  fill(0);
+  rect(97, 169, 79, 12);
+
+  //right
+  rect(365, 184, 20, 15);
+  fill(20, 20, 120);
+
+  beginShape();
+  vertex(365, 199);
+  vertex(385, 199);
+  vertex(372, 216);
+  vertex(358, 216);
+  endShape(CLOSE);
+
+  //bottom
+  noFill();
+  stroke(130);
+  strokeWeight(2);
+  ellipse(255, 350, static_size, static_size);
+
+  //mouse interactions
+  //stroke(180);
+  //ellipse(mouseX, mouseY, moving_size, moving_size);
+
+  //if (mouseIsPressed) {
+  //  static_size = floor(random(5, 20));
+  //}
+}
--- a/web-interface/templates/wrapping-templates/template.html
+++ b/web-interface/templates/wrapping-templates/template.html
@ -6,6 +6,8 @@
 	<script src="./static/js/paged.polyfill.js" type="text/javascript"></script>
 	<link href="./static/css/interface.css" rel="stylesheet" type="text/css">
 	<link href="./static/css/print.css" rel="stylesheet" type="text/css" media="print">
+	<script src="./js/p5.js"></script>
+	<script src="./js/variable-geometry-cover.js"></script>
 </head>
 <body>
 	<div id="wrapper">