37 lines
2.0 KiB
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. -->
|