unleashed-coding · appositum · Apr 4, 2019 · Apr 4, 2019 · Apr 4, 2019 · Apr 4, 2019
diff --git a/sqdorte/artegenerativafoda.js b/sqdorte/artegenerativafoda.js
@@ -13,7 +13,7 @@ function defaultArgs() {
 }
 
 function setup() {
-  createCanvas(window.innerWidth-4, window.innerHeight-4);
+  createCanvas(window.innerWidth, window.innerHeight);
   defaultArgs();
   r = -100;
 };

diff --git a/sqdorte/generarstistic.js → sqdorte/generartistic.js b/sqdorte/generarstistic.js → sqdorte/generartistic.js
@@ -3,7 +3,7 @@ var s;
 var p;
 
 function setup() {
-  createCanvas(window.innerWidth-4, window.innerHeight-4);
+  createCanvas(window.innerWidth, window.innerHeight);
 
   l = 15;     // length
   s = 30;     // spacing

diff --git a/sqdorte/index.html b/sqdorte/index.html
@@ -3,11 +3,12 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>plzkillme</title>
-    <style> body {padding: 0; margin: 0;} </style>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
-    <script src="generarstistic.js"></script>
+    <title id="title">:: sqdorte ::</title>
+    <link id="style" rel="stylesheet" type="text/css" href="style.css">
+    <script id="script" src="menu.js"></script>
   </head>
   <body>
+    <ul id="ul">
+    </ul>
   </body>
 </html>
diff --git a/sqdorte/jooj.js b/sqdorte/jooj.js
diff --git a/sqdorte/menu.js b/sqdorte/menu.js
@@ -0,0 +1,36 @@
+window.onload = function() {
+
+  arts = ['artegenerativafoda', 'generartistic', 'selgnairt'];
+  ul = document.getElementById('ul');
+
+  arts.forEach(art => {
+    a = document.createElement('A');
+    a.setAttribute('onclick', `loadArt('${art}')`)
+    a.innerHTML = art
+
+    li = document.createElement('LI');
+    li.appendChild(a);
+
+    ul.appendChild(li);
+  })
+}
+
+function injectScript(src) {
+  script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.async = true;
+  script.src = src;
+  document.head.appendChild(script);
+}
+
+function loadArt(name) {
+  document.title = name;
+  document.body.removeChild(document.getElementById('ul'));
+
+  document.getElementById('style').setAttribute('href', 'p5.css');
+
+  injectScript(`${name}.js`);
+  injectScript('https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js');
+
+  document.head.removeChild(document.getElementById('script'));
+}
diff --git a/sqdorte/p5.css b/sqdorte/p5.css
@@ -0,0 +1,11 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/sqdorte/plzkillme.js b/sqdorte/plzkillme.js
diff --git a/sqdorte/selgnairt.js b/sqdorte/selgnairt.js
@@ -0,0 +1,29 @@
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+
+  fill(0);
+  frameRate(30);
+  j = 0;
+
+  s = Math.floor(Math.random()*100+20);     // spacing
+}
+
+
+function draw() {
+  if (j <= height) {
+
+    for (var i = 0; i <= width; i += s) {
+      triangle(
+        i,j,
+        i+(Math.random() <= 0.5 ? 1 : -1)*s,
+        j+(Math.random() <= 0.5 ? 1 : -1)*s,
+        i+(Math.random() <= 0.5 ? 1 : -1)*s,
+        j+(Math.random() <= 0.5 ? 1 : -1)*s
+      )
+    }
+
+    if ( i >= width ) {
+      j += s;
+    }
+  }
+}
diff --git a/sqdorte/style.css b/sqdorte/style.css
@@ -0,0 +1,19 @@
+ul {
+  list-style: none;
+  text-align: center;
+}
+
+li {
+  padding-top: 30px; 
+}
+
+a {
+  outline: none;
+  color: #4c4d4f;
+  text-decoration: none;
+}
+
+a:hover {
+  font-weight: bold;
+  color: #8fefb2;
+}