homework-and-stuffs/school/cpsc335/proj1/group-work/index-js-p5-example.html

37 lines
2.0 KiB
HTML

<!DOCTYPE html> <!-- this is a JS comment --> <!-- -->
<html lang=""> <!-- HTML page begs/ends w 'html' tag -->
<head> <!-- HTML page has 'head'section and 'body' section -->
<meta foo="Time-stamp: <2020-02-02 17:14:59 Chuck Siska>">
<!-- a JS comment.-->
<!--
Some code, mod'd, from "Introducing JavaScript Game Development" by Stuart.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P5-JS-HTML</title> <!-- Browser or tab title -->
<link rel="stylesheet" href="assets/styles.css"> <!-- Tiny CSS style file -->
<style> body {padding: 0; margin: 0;} </style> <!-- Bit of in-line CSS -->
<script src="p5.js"></script> <!-- Load P5.JS, one file -->
<!-- For more P5.JS, CF https://github.com/processing/p5.js/wiki -->
<script src="cs-sketch.js"></script> <!-- Load my setup+draw P5-req'd fcns -->
</head>
<body> <!-- HTML page body, where raw text gets displayed on the page -->
<h1>Playing the HTML canvas w P5</h1> <!-- Text in a high priority heading -->
<!--
<canvas id="cs-canvas" width="400" height="400"></canvas>
-->
<p> <!-- A paragraph 'break', to start a new paragraph -->
Now is the time for all good squid to come to the aid of their waters.
</body> <!-- HTML display page ends here -->
<script src="assets/draw-stuff.js"></script> <!-- Load some JS fcns in a file -->
<!-- <script src="../assets/tools.js"></script> Load more JS fcns -->
<script> <!-- And run some JS code if needed; but better in sketch.js. -->
</script>
</html>
<!-- F12 on keyboard opens Console+Inspector+Debugger window on most Browsers. -->
<!-- F12 Debugger window > Watch+Breakpoint pane > 2-vertical-bars icon stops anim. -->
<!-- In JS, outputting alert/message popup, also pauses anim (with your msg). -->
<!-- In JS, outputting pgm state info to console can help w debugging. -->
<!-- Add a P5 keyPressed( ) fcn to toggle a Stop global var if you like. -->