Processing Ellipses (#1800)

* Processing Ellipses * Processing Mondrian
lingonsaft · Oct 15, 2018 · d1bf696 · d1bf696 · vercel · Oct 15, 2018
1 parent dd82633
commit d1bf696
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 0 deletions.
diff --git a/contributors.html b/contributors.html
@@ -193,6 +193,7 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/felipedf">Felipe D Ferreira</a>
         <a class="box-item" href="https://github.com/nosesdive">Noppadol Sukprapa</a>
         <a class="box-item" href="https://github.com/cassadab">Brady Cassada</a>
+        <a class="box-item" href="https://github.com/thomprycejones">Thomas Pryce Jones</a>
         <a class="box-item" href="https://github.com/evanwaltersdev">Evan Walters</a>
         <a class="box-item" href="https://github.com/nzer0nz">Nonthawat Duangchai</a>
         <a class="box-item" href="https://github.com/CQW-Code">Chris Watkin</a>
@@ -343,6 +344,7 @@ <h3 class="mb-5">Check available pages</h3>
               <li><a href="colorgame.html">colorgame</a></li>
               <li><a href="contributors.html">contributors</a></li>
               <li><a href="dry.html">dry</a></li>
+              <li><a href="ellipses.html">Ellipses</a></li>
               <li><a href="Fireworks.html">Fireworks</a></li>
               <li><a href="Flappy.html">Flappy</a></li>
               <li><a href="foxy.html">foxy</a></li>

diff --git a/ellipses.html b/ellipses.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
+    <script src="scripts/ellipses.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -467,6 +467,7 @@ <h3 class="mb-5">Check available pages</h3>
                 <li><a href="colorgame.html">colorgame</a></li>
                 <li><a href="contributors.html">contributors</a></li>
                 <li><a href="dry.html">dry</a></li>
+                <li><a href="ellipses.html">Ellipses</a></li>
                 <li><a href="Fireworks.html">Fireworks</a></li>
                 <li><a href="Flappy.html">Flappy</a></li>
                 <li><a href="foxy.html">foxy</a></li>
@@ -491,6 +492,7 @@ <h3 class="mb-5">Check available pages</h3>
                 <li><a href="turndown.html">Turndown</a></li>
                 <li><a href="helloGLSL.html">WebGL HELLO</a></li>
                 <li><a href="funPlus.html">Fun + Helloween</a></li>
+                <li><a href="mondrian.html">Mondrian</a></li>
 		            <li><a href="Hacktoberfest_help.html">Hacktoberfest Intro</a></li>
                 <li><a href="etchfun.html">Etch Fun</a></li>
             </ul>

diff --git a/mondrian.html b/mondrian.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
+    <script src="scripts/mondrian.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/scripts/ellipses.js b/scripts/ellipses.js
@@ -0,0 +1,8 @@
+function setup() {
+    createCanvas(displayWidth, displayHeight);
+  }
+
+  function draw() {
+    fill(Math.floor((Math.random() * 255) + 1));
+    ellipse(mouseX, mouseY, 80, 80);
+  }
diff --git a/scripts/mondrian.js b/scripts/mondrian.js
@@ -0,0 +1,39 @@
+function setup() {
+    createCanvas(720, 716);
+    background(255);
+}
+
+function draw() {
+    strokeWeight(19);
+
+    fill(255, 0, 0);
+    rect(80, 80, 340, 360); //red rectangle 1
+    fill(255, 0, 0);
+    rect(670, 530, 340, 360); //red rectangle 2
+    fill(255, 255, 0);
+    rect(420, -10, 250, 270); //yellow rectangle 1 
+    fill(255, 255, 0);
+    rect(-10, 530, 90, 270); //yellow rectangle 2
+    fill(0, 0, 0);
+    rect(80, 440, 180, 180); //black rectangle 1
+    fill(0, 0, 0);
+    rect(270, 620, 140, 40); //black rectangle 2
+    fill(0, 0, 255);
+    rect(420, 540, 240, 130); //blue rectangle 1
+
+    line(20, 80, 670, 80); //horizontal 1
+    line(20, 260, 80, 260); //horizontal 2
+    line(440, 260, 670, 260); //horizontal 2
+    line(80, 440, 670, 440); //horizontal 3
+    line(20, 530, 720, 530); //horizontal 4
+    line(80, 620, 420, 620); //horizontal 5
+    line(270, 670, 670, 670); //horizontal 6
+
+    line(80, 80, 80, 690); //vertical 1 
+    line(170, 20, 170, 80); //vertical 2
+    line(265, 440, 265, 700); //vertical 3 
+    line(420, 20, 420, 690); //vertical 4
+    line(550, 270, 550, 440); //vertical 5
+    line(670, 20, 670, 690); //vertical 6
+
+}