Merge pull request #43 from berinhard/topic/examples-code

Show python code in examples page
berinhard · May 27, 2019 · 8da410f · 8da410f
2 parents 556bb3c + 9080887
commit 8da410f
Show file tree

Hide file tree

Showing 8 changed files with 560 additions and 15 deletions.
diff --git a/docs/examples/sketch_001/index.html b/docs/examples/sketch_001/index.html
@@ -11,6 +11,26 @@
 
     <script src="static/p5.js"></script>
     <script src="target/sketch_001.js"  type="module"></script>
+
+     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+    <style>
+        html {
+          overflow-y: scroll;
+        }
+
+        .demoContainer {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        pre {
+            padding-left: 2em;
+        }
+    </style>
   </head>
 
   <body>
@@ -19,8 +39,52 @@
     </p>
 
 
-    <div id="sketch-holder">
-          <!-- You sketch will go here! -->
+    <div class="demoContainer">
+        <div id="sketch-holder" style="">
+              <!-- You sketch will go here! -->
+        </div>
+        <div style="">
+          <pre>
+             <code>
+from pytop5js import *
+
+t = 0
+
+def setup():
+    createCanvas(600, 600)
+    stroke(250)
+    strokeWeight(3)
+    fill(40, 200, 40)
+
+
+def draw():
+    global t
+    background(10, 10)
+
+    xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, True)
+    yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, True)
+    for x in range(0, width, 30):
+        for y in range(0, height, 30):
+
+            angle = xAngle * (x / width) + yAngle * (y / height)
+
+            myX = x + 20 * cos(2 * PI * t + angle)
+            myY = y + 20 * sin(2 * TWO_PI * t + angle)
+
+            ellipse(myX, myY, 10)
+
+    t = t + 0.01
+
+    console.log(frameRate())
+
+
+my_p5 = start_p5(setup, draw, {})
+              </code>
+          </pre>
+        </div>
     </div>
+
   </body>
+
+
 </html>
diff --git a/docs/examples/sketch_002/index.html b/docs/examples/sketch_002/index.html
@@ -11,15 +11,79 @@
 
     <script src="static/p5.js"></script>
     <script src="target/sketch_002.js"  type="module"></script>
+
+     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+    <style>
+        html {
+          overflow-y: scroll;
+        }
+
+        .demoContainer {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        pre {
+            padding-left: 2em;
+        }
+    </style>
   </head>
 
   <body>
     <p style="background-color: #f6f8fa">
       Python code <a href="https://github.com/berinhard/pyp5js/blob/develop/docs/examples/sketch_002" target="_blank">here</a>.
     </p>
 
-    <div id="sketch-holder">
-          <!-- You sketch will go here! -->
+    <div class="demoContainer">
+        <div id="sketch-holder" style="">
+              <!-- You sketch will go here! -->
+        </div>
+
+
+        <div style="">
+          <pre>
+             <code>
+"""
+ * Move Eye.
+ * by Simon Greenwold.
+ *
+ * The camera lifts up (controlled by mouseY) while looking at the same point.
+ """
+from pytop5js import *
+
+def setup():
+    createCanvas(640, 360, _P5_INSTANCE.WEBGL)
+    fill(204)
+
+
+def draw():
+    ambientLight(50)
+    directionalLight(255, 0, 0, 0.25, 0.25, 0);
+    background(0)
+
+    # Change height of the camera with mouseY
+    camera(30.0, mouseY, 220.0,  # eyeX, eyeY, eyeZ
+           0.0, 0.0, 0.0,        # centerX, centerY, centerZ
+           0.0, 1.0, 0.0)        # upX, upY, upZ
+
+    noStroke()
+    box(90)
+    stroke(255)
+    line(-100, 0, 0, 100, 0, 0)
+    line(0, -100, 0, 0, 100, 0)
+    line(0, 0, -100, 0, 0, 100)
+
+
+# This is required by pyp5js to work
+start_p5(setup, draw, {})
+              </code>
+          </pre>
+        </div>
+
     </div>
   </body>
 </html>
diff --git a/docs/examples/sketch_003/index.html b/docs/examples/sketch_003/index.html
@@ -11,14 +11,63 @@
 
     <script src="static/p5.js"></script>
     <script src="target/sketch_003.js"  type="module"></script>
+
+     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+    <style>
+        html {
+          overflow-y: scroll;
+        }
+
+        .demoContainer {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        pre {
+            padding-left: 2em;
+        }
+    </style>
   </head>
 
   <body>
     <p style="background-color: #f6f8fa">
       Python code <a href="https://github.com/berinhard/pyp5js/blob/develop/docs/examples/sketch_003" target="_blank">here</a>.
     </p>
-    <div id="sketch-holder">
-          <!-- You sketch will go here! -->
+
+    <div class="demoContainer">
+        <div id="sketch-holder">
+              <!-- You sketch will go here! -->
+        </div>
+
+        <pre>
+           <code>
+# 3d example
+from pytop5js import *
+
+
+def setup():
+    createCanvas(600, 600, WEBGL)
+
+def draw():
+  background(200)
+  translate(-100, -100, 0)
+  push()
+  normalMaterial()
+  rotateZ(frameCount * 0.01)
+  rotateX(frameCount * 0.01)
+  rotateY(frameCount * 0.01)
+  box(50, 70, 100)
+  pop()
+
+
+start_p5(setup, draw, {})
+           </code>
+        </pre>
+
     </div>
   </body>
 </html>