Hatena::Groupg21b

HTML+CSS+JavaScript

HTML+CSS+JavaScript

Web ページは,

で作る。

合体の仕方その1

授業サンプル(BulletHell_1_linear)が採用しているパターン

index.html をカレントフォルダに入れ,そこに,サブフォルダを作成して,ライブラリー,自作 JavaScript 用を配置する。

CSS は,index.html に直書き

カレントフォルダ
index.html ソース
<html>
<head>
	<meta charset="UTF-8">
	<!-- Framework -->
	<script language="javascript" type="text/javascript"
	src="./libs/p5.js"></script>
	<script language="javascript" type="text/javascript"
	src="./libs/p5.sound.js"></script>
	<script language="javascript" type="text/javascript"
	src="./libs/p5.play.js"></script>
	<script language="javascript" type="text/javascript"
	src="./libs/p5.dom.js"></script>
	<script language="javascript" type="text/javascript"
	src="./libs/p5.gui.quicksettings.js"></script>
	<script language="javascript" type="text/javascript"
	src="./libs/p5.gui.js"></script>
	<!-- Sketch -->
	<script language="javascript" type="text/javascript"
	src="./js/utility.js"></script>
	<script language="javascript" type="text/javascript"
	src="./js/sketch.js"></script>
	<!-- CSS -->
	<style>body{padding: 0; margin: 0;}</style>
</head>
<body>
</body>
</html>

合体の仕方その2 単純版

index.html ソース

(作成中)

参考 http://www.yosinex.top/entry/how-to-start-p5-and-processing

<html>
<head>
	<meta charset="UTF-8">
	<!-- Framework -->
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"</script>
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.js"</script>

	<script language="javascript" type="text/javascript"
	src="./libs/p5.play.js"></script>
	<script language="javascript" type="text/javascript"
	src="./libs/p5.dom.js"></script>
	<script language="javascript" type="text/javascript"
	src="./libs/p5.gui.quicksettings.js"></script>
	<script language="javascript" type="text/javascript"
	src="./libs/p5.gui.js"></script>
	<!-- Sketch -->
	<script language="javascript" type="text/javascript"
	src="./js/utility.js"></script>
	<script language="javascript" type="text/javascript"
	src="./js/sketch.js"></script>
	<!-- CSS -->
	<style>body{padding: 0; margin: 0;}</style>
</head>
<body>
</body>
</html>