lorossi
diff --git a/‎LICENSE.md
Lines changed: 395 additions & 0 deletions b/‎LICENSE.md
Lines changed: 395 additions & 0 deletions
diff --git a/‎README.md
Lines changed: 9 additions & 0 deletions b/‎README.md
Lines changed: 9 additions & 0 deletions
diff --git a/‎css/style.css
Lines changed: 19 additions & 0 deletions b/‎css/style.css
Lines changed: 19 additions & 0 deletions
diff --git a/‎favicon.ico
1.12 KB b/‎favicon.ico
1.12 KB
diff --git a/‎index.html
Lines changed: 25 additions & 0 deletions b/‎index.html
Lines changed: 25 additions & 0 deletions
diff --git a/‎js/jquery-3.5.1.min.js
Lines changed: 2 additions & 0 deletions b/‎js/jquery-3.5.1.min.js
Lines changed: 2 additions & 0 deletions
diff --git a/‎js/main.js
Lines changed: 11 additions & 0 deletions b/‎js/main.js
Lines changed: 11 additions & 0 deletions
diff --git a/‎js/sketch.js
Lines changed: 65 additions & 0 deletions b/‎js/sketch.js
Lines changed: 65 additions & 0 deletions
@@ -0,0 +1,9 @@
+# Empty HTML5 Canvas Project
+I got bored of creating a new document every time.
+
+Contains all the needed files to create a new HTML5 page with a JS canvas inside.
+
+Just clone the repo or download the last release.
+
+## Credits
+This project is distributed under Attribution 4.0 International (CC BY 4.0) license.
@@ -0,0 +1,19 @@
+body *, body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.container {
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#sketch {
+  min-width: 300px;
+  min-height: 300px;
+}
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="description" content="Webpage description goes here"/>
+    <meta charset="utf-8">
+    <title>TITLE</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="author" content="Author Name">
+    <link rel="shortcut icon" href="favicon.ico"/>
+
+    <link rel="stylesheet" href="css/style.css">
+
+    <script src="js/jquery-3.5.1.min.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/sketch.js"></script>
+  </head>
+
+  <body>
+    <div class="container">
+      <canvas id="sketch"  width="900" height="900">
+      </canvas>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,11 @@
+/*jshint esversion: 8 */
+/*jshint strict: false */
+
+$(document).ready(() => {
+    canvas = $("#sketch")[0];
+    if (canvas.getContext) {
+      ctx = canvas.getContext("2d", {alpha: false});
+      s = new Sketch(canvas, ctx);
+      s.run();
+    }
+});
@@ -0,0 +1,65 @@
+/*jshint esversion: 6 */
+
+let chart, stats;
+let inside_points, total_points;
+let ctx, canvas;
+
+class Sketch {
+  constructor(canvas, ctx, fps) {
+    this.canvas = canvas;
+    this.ctx = ctx;
+    this.setFps(fps);
+  }
+
+  setFps(fps) {
+    // set fps
+    this.fps = fps || 60;
+    // keep track of time to handle fps
+    this.then = performance.now();
+    // time between frames
+    this.fps_interval = 1 / this.fps;
+  }
+
+  run() {
+    // bootstrap the sketch
+    this.setup();
+    // anti alias
+    this.ctx.imageSmoothingQuality = "high";
+    this.timeDraw();
+  }
+
+  timeDraw() {
+    // request another frame
+    window.requestAnimationFrame(this.timeDraw.bind(this));
+    let diff;
+    diff = performance.now() - this.then;
+    if (diff < this.fps_interval) {
+    // not enough time has passed, so we request next frame and give up on this render
+      return;
+    }
+    // updated last frame rendered time
+    this.then = performance.now();
+    // now draw
+    this.ctx.save();
+    this.draw();
+    this.ctx.restore();
+  }
+
+  background(color) {
+    // reset background
+    // reset canvas
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.ctx.restore();
+    // set background
+    this.ctx.fillStyle = color;
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  setup() {
+    // this is ran once
+  }
+
+  draw() {
+    // this is ran continuously
+  }
+}