added template

DrSpaniel · Jan 25, 2024 · bc3d7f0 · bc3d7f0
1 parent eecdaaf
commit bc3d7f0
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 0 deletions.
diff --git a/projects/Wint24/TemplateP5/README.md b/projects/Wint24/TemplateP5/README.md
@@ -0,0 +1,3 @@
+# Template p5 project
+
+This is the README file for the entire project. For more official projects you should write information here about the nature of the project, your name, any special explanations of how the project works, etc.
diff --git a/projects/Wint24/TemplateP5/assets/images/bg.jpg b/projects/Wint24/TemplateP5/assets/images/bg.jpg
diff --git a/projects/Wint24/TemplateP5/assets/images/clown.png b/projects/Wint24/TemplateP5/assets/images/clown.png
diff --git a/projects/Wint24/TemplateP5/assets/sounds/bark.wav b/projects/Wint24/TemplateP5/assets/sounds/bark.wav
diff --git a/projects/Wint24/TemplateP5/css/style.css b/projects/Wint24/TemplateP5/css/style.css
@@ -0,0 +1,20 @@
+/*********************************************
+
+Here is a description of any special CSS used.
+In this case it's just padding and margin to 0
+and then centring the canvas (and anything else)
+using the CSS Grid.
+
+Also hides overflow.
+
+**********************************************/
+
+body {
+  padding: 0;
+  margin: 0;
+  display: grid; /* Set up the grid and justify/align to center */
+  justify-content: center;
+  align-content: center;
+  height: 100vh; /* Body is the height of the viewport */
+  overflow: hidden; /* Hide anything that goes off the window size */
+}
diff --git a/projects/Wint24/TemplateP5/index.html b/projects/Wint24/TemplateP5/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
+
+    <title>CHANGE THIS TITLE IN INDEX.HTML!</title>
+
+    <!-- CSS stylesheet(s) -->
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
+
+    <!-- Library script(s) -->
+    <script src="js/libraries/p5.min.js"></script>
+    <script src="js/libraries/p5.sound.min.js"></script>
+
+    <!-- My script(s) -->
+    <script src="js/script.js"></script>
+  </head>
+
+  <body>
+    <!-- HTML would go here if needed. -->
+  </body>
+
+</html>
diff --git a/projects/Wint24/TemplateP5/js/libraries/p5.min.js b/projects/Wint24/TemplateP5/js/libraries/p5.min.js
diff --git a/projects/Wint24/TemplateP5/js/libraries/p5.sound.min.js b/projects/Wint24/TemplateP5/js/libraries/p5.sound.min.js
diff --git a/projects/Wint24/TemplateP5/js/script.js b/projects/Wint24/TemplateP5/js/script.js
@@ -0,0 +1,36 @@
+/**
+ * Title of Project
+ * Author Name
+ *
+ * This is a template. You must fill in the title, author,
+ * and this description to match your project!
+ */
+
+"use strict";
+
+/**
+ * Description of preload
+ */
+function preload() {}
+
+let bg;
+
+/**
+ * Description of setup
+ */
+function setup() {
+  createCanvas(windowWidth, windowHeight); //autosize
+  bg = loadImage("assets/images/bg.jpg");
+}
+
+/**
+ * Description of draw()
+ */
+function draw() {
+  background(bg);
+}
+
+function windowResized() {
+  //resize canvas when window is resized
+  resizeCanvas(windowWidth, windowHeight);
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Template p5 project

		This is the README file for the entire project. For more official projects you should write information here about the nature of the project, your name, any special explanations of how the project works, etc.