浮動ボックスとp5.js

# はじめに

　浮動ボックスとp5.js.

https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Floats

https://openprocessing.org/sketch/2666222

```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<script src="https://cdn.jsdelivr.net/npm/p5@2.0.3/lib/p5.min.js"></script>
	<script src="mySketch.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	<main>
    <h1>浮動ボックスの例</h1>

    <div class="wrapper">
      <canvas id="myCanvas" class="box"></canvas>

      <p id="special p" class="special">
        　mainタグのwidthは90%ですから、基本的には横幅の90%の大きさになるんですが、
				max-widthが900pxに設定してあるので、900pxより大きくなることはありません。
				したがって、その場合は900pxとなります。
      </p>
    </div>

    <p>
			　<a href="https://beta.p5js.org/reference/p5/createcanvas/">createCanvasのレファレンス</a>を見ると分かりますが、
			第四引数にキャンバスエレメントを指定すると、その要素がキャンバスになります。しかし、意図した位置に配置されず、
			メインタグの後に来てしまいます。これはよろしくない。
    </p>

    <p>
      　そこでこのスケッチでは、キャンバス要素をspecial p要素の前（before）に配置することで、
			無理やりwrapperの中に戻してあげています。これで、意図した表示になります。
    </p>
	</main>
</body>

</html>
```

```css
main {
  width: 90%;
  max-width: 900px; /* こうすると幅が大きい場合は900pxが適用され短い場合は90%が適用されるようです。だから「max」なんですね。 */
  margin: 0 auto; /* autoなので左右は均等割り */
  font:
    1.2em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  float: right;
  margin: 15px;
  width: 150px;
  height: 100px;
  border-radius: 15px;
  background-color: rgb(207 220 232);
  padding: 1em; /* ごめんなさい「lem」じゃなくて「1em」なんですね。ややこしいわ。 */
}

.special {
  padding: 10px;
  color: navy;
}

.wrapper {
  background-color: rgb(148 172 255);
  padding: 10px;
  display: flow-root; /* これを指定するとまとめてはずせる */
}
```

```js
/*
  浮動ボックス
	https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Floats
*/

function setup() {
	const cvs = document.getElementById("myCanvas");
	createCanvas(150, 100, P2D, cvs);
	const special_p = document.getElementById("special p");
	special_p.before(cvs);
}

function draw() {
	background(0);
	textSize(24);
	textAlign(CENTER,CENTER);
	textStyle(ITALIC);
	fill(255);
	translate(40*cos(frameCount*TAU/480),0);
	text("TEXT",75,50);
}
```
実行結果

幅が広い場合
![wefvwvwv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/c113b662-6f40-440b-b756-0cf033f93ce3.png)
幅が狭い場合
![wv3wvvw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/9d20e6a2-9dd4-4b00-941b-91909d21816f.png)

# 工夫したポイント
　テキストにもあるように、jsの中でいろいろいじらないと、キャンバスが外に出てしまいます。試しにこうすると：
```js
function setup() {
	const cvs = document.getElementById("myCanvas");
	createCanvas(150, 100, P2D, cvs);
	//const special_p = document.getElementById("special p");
	//special_p.before(cvs);
}

function draw() {
	background(0);
	textSize(24);
	textAlign(CENTER,CENTER);
	textStyle(ITALIC);
	fill(255);
	translate(40*cos(frameCount*TAU/480),0);
	text("TEXT",75,50);
}
```
こうなります

![csvevwbvbvv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/94fbc34b-ba6c-4873-b39c-4706f46cea98.png)

htmlも書き換えられています。

![wcwvevwev.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/65e91e43-d171-41a2-aced-c8881db4f8ee.png)

中に入るように指定しても外に出されてしまうため、あとから入れなおす必要が生じるわけですね。ちなみにバージョンは2.0.3です。

# おわりに
　ここまでお読みいただいてありがとうございました。