p5.jsでGoogle Fontsの使い方

p5.jsでのGoogle Fontsの使い方です。
Google Fontsを使おうとなったらいつも忘れているナンバー１です。
毎回調べていてイヤになります（汗）。

p5.jsのeditorの場合

1. GoogleFontsページ（https://fonts.google.com/）を開く
2. Fontをダウンロード（Get Font）する
3. editorでfontsフォルダをつくる
4. fontsフォルダにフォントをアップロードする（.ttf）
5. フォントを読み込む変数を定義する（let font;）
6. preload関数を作りloadFont()でフォントを読み込む
7. textFont(font)でフォントを設定する

p5.js Editor

コード例

確認用に作ってみました。

p5.js Editorで確認用サンプルを見る

let font;

function preload() {
  font = loadFont("fonts/DelaGothicOne-Regular.ttf");
}

function draw() {
  background(220);
  textAlign(CENTER, CENTER);
  textSize(60);
  textFont(font);
  fill(255);
  text("gravity", width / 2, height / 2);
}

Generative Design with p5.js - [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング

Pythonでリストの最大値・最小値を取得する

AtCoderはPythonでやっています。
私はPythonだけでなくプログラミングも初心者なので、便利機能を知らずに苦しむことが多いです。知っていたらすぐにできるのに、知らないためによく苦しんでいます。

リストの最大値や最小値はわかっているつもりですが、実際に問題を解いているときは頭の中は混乱しているのでよく忘れてしまいます。

リストの最大値

max()にリストを入れます。

a = [70, 55, 47, 69, 91]
print(max(a))
# 91

リストの最小値

min()にリストを入れます。

a = [70, 55, 47, 69, 91]
print(min(a))
# 47

yuuuha.hatenablog.com

アルゴリズム的思考力が身につく！ プログラミングコンテストAtCoder入門

HSBの色の番号

色を使うとき、HSBはすごくわかりやすい。

けど、RGBほどイメージはしづらい。

ぱっと目で見てわかるようにp5.jsで作ってみました。

HSBカラー

コードはこちら↓

let cols = 19;
let rows = 19;
let size;

function setup() {
  createCanvas(800, 800);
  colorMode(HSB,360,100,100,100);
  size = width / cols;
}

function draw() {
  background(220);
  for (let i = 0; i < 361; i++) {
    let x = (i % cols) * size;
    let y = Math.floor(i / rows) * size;

    fill(i,100,100,100);
    rect(x, y, size, size);
    
    fill(0,0,0,100);
    textSize(15)
    text(i,x+2,y+size/2);
  }
}

function keyPressed(){
  if(key=='s'){
    saveCanvas('color-number.png')
  }
}

同じ動きでも色が違えば全然印象が変わる。
赤系の時と青系の時ではデザイン自体も変える必要があったりする。

色はしっかり勉強する必要がありそうです。

Generative Design with p5.js　［p5.js版ジェネラティブデザイン］ ―ウェブでのクリエイティブ・コーディング

CodePenを活用したい（Canvasで画面ぴっちり方法）

Canvasで何かを作って残しておくのはむつかしいです。

特に、アニメーションだったり、マウスに反応するものだったりするとむつかしい。

JavaScriptのコードをWebサイトにして残しておけばいいのですが、面倒です。

簡単な作業でブログに残したい。

CodePenを活用

そこで、CodePenを活用できればと思っています。

CodePenは便利で利用は簡単ですが、過去に使った時にうまくいかなかったので避けていました。

しかし、いろんな人がちゃんと使っているので私の使い方が悪かったと思い直して、活用していきたいと思います。

使ってみる

テストで使ってみました。

問題なさそうです。

See the Pen 230718-1 by yusaku (@yuuuha) on CodePen.

ただいつものように作ってしまうと、画面いっぱいにならずに不自然になります。

そこで、CodePen用に画面ぴっちりで作成してみました。

コード

▼ HTML

widthとheightを100％にしてみました。

<canvas id='canvas' width="100%" height='100%'></canvas>

▼ CSS

overflowをhidden、marginをゼロにして、#canvasのwidthを100％にしました。

html {
  overflow: hidden;
}

body {
  margin: 0;
}

#canvas {
  background-color: cornflowerblue;
  width: 100%;
  height: auto;
}

▼ JavaScript

innerWidthとinnerHeightをcanvas.widthとcanvas.heightに入れています。

let canvas, ctx;
let innerWidth, innerHeight;

window.addEventListener("load", () => {
  initial();
  myrender();
});

function initial() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  innerWidth = canvas.width;
  innerHeight = canvas.height;
}

function myrender() {
  ctx.beginPath();
  ctx.arc(innerWidth / 2, innerHeight / 2, 30, 0, Math.PI * 2, false);
  ctx.fillStyle = "white";
  ctx.fill();
}

この場合、pxを使わずに作って方がいいのかな？

yuuuha.hatenablog.com

Designing Math.　数学とデザインをむすぶプログラミング入門

Canvasで画像をダウンロードしたい（keydownイベント）

Canvas（JavaScript）をいじっていると、たまに良いのができる。

そんなときは画像に残したい。

今まではHTMLでbuttonタグを作って、ボタンをクリックしてダウンロードしていました。

yuuuha.hatenablog.com

キーを押してダウンロードする

しかし、マウスを動かすことなしに、その場でダウンロードしたいときが多い。

今回はキーを押してダウンロードする方法を確認してみる。

調べてみると、keydownイベントを使うようです。

developer.mozilla.org

addEventListenerで[keydown]を指定して、event.keyでキーを取れるようです。

[s]キーを押すと、canvasの画像をダウンロードできるようにしてみました。

document.addEventListener('keydown', (e) => {
        if (e.key === 's') {
            let a = document.createElement('a')
            a.href = canvas.toDataURL('image/png', 1.0)
            a.download = 'canvas_0717-1'
            a.click()
        }
    })

上記のように小文字の「s」だとテキストを入力する場合は不便そうなので、大文字にしたりあまり使わないキーを割り当てるほうがいいかもしれません。

Designing Math.　数学とデザインをむすぶプログラミング入門