P5.js入門（チェック柄を書いてみる）

4041 ワード
processing プログラミング初心者 プログラミング入門 プログラミング教育 p5.js processing テキストリンク

目次

  1. はじめに
  2. 導入
  3. とりあえず書いてみる
  4. 色の調整(map関数）
  5. 紙袋柄へ

はじめに

対象者

・プログラミングを始めてみたい
・趣味プログラマー（僕です）
・チームラボに感動した（僕です笑）

導入

基本的には他の記事を参照ください。
ATOM + p5xjs-autocomplete　で入力
http://blog.livedoor.jp/reona396/archives/55571609.html

Webエディターで実行、デバッグ
https://editor.p5js.org/

が楽かな〜と思ったんですが、
アドバイスあれば下さい（笑）

とりあえず書いてみる

何を作ろうか

これを流し読みするとよいです。
https://www.amazon.co.jp/dp/B07DQHV9GX/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
マウスの座標で、色や形状を変えていく例が多く出てきますね。
同じコンセプトで作ってみましょう。

チェック柄

実は奥が深いチェック柄
https://thequalityclothing.com/types-of-plaid/
伊勢丹の紙袋も何度かリニューアルしているらしいです。
https://matome.naver.jp/odai/2141031017954780201

新しい伊勢丹の紙袋を考えてみましょう（伊勢丹の関係者の皆様、怒らないでください）。

コーディング

とりあえずは実行しましょう。
　・マウスx座標：マスの大きさ
　・マウスy座標：チェックの色
　・q,wキー：背景の色

var bg_color;　//背景色

function setup() {
  bg_color = 255;　//背景色の初期設定
  createCanvas(600, 600);
  noStroke();
  colorMode(HSB,width,height,100);
}

function draw() {
  console.log(bg_color);
  var stepX = mouseX + 2;
  background(bg_color, 100, 100);
  fill(mouseY, 100, 100);　//色の指定
  for(var gridX = 20; gridX < height; gridX += stepX){
    rect(gridX,0,20,height);　//縦線を書く
    rect(0,gridX,width,20);　//横線を書く
  }
}
function keyPressed() {
  if ((key == 'q') || (key == 'Q')) {
    bg_color += 20; //背景色の変更
  }
  if ((key == 'w') || (key == 'W')) {
    bg_color -= 20; //1背景色の変更
  }
}

う〜ん、色の範囲狭くない？？？

色の調整（MAP関数）

MAP関数とはなんぞや
https://www.youtube.com/watch?v=nicMAoW6u1g
英語の勉強にw
まぁ実行してみましょう。

HSBの数値の指定は・・・？
最大：360
今、HSBのHの値はマウスのy座標から引用している・・・
y座標の最大値：600（キャンバスのサイズより）

これを調整するためMAP関数を使用する。

var bg_color;　//背景色

function setup() {
  bg_color = 255;　//背景色の初期設定
  createCanvas(600, 600);
  noStroke();
  colorMode(HSB,width,height,100);
}

function draw() {
  var sq_color = map(mouseY,0,600,0,360) //色の範囲の設定
  console.log(sq_color);
  var stepX = mouseX + 2;
  background(bg_color, 100, 100);
  fill(sq_color, 100, 100);　//色の指定
  for(var gridX = 20; gridX < height; gridX += stepX){
    rect(gridX,0,20,height);　//縦線を書く
    rect(0,gridX,width,20);　//横線を書く
  }
}
function keyPressed() {
  if ((key == 'q') || (key == 'Q')) {
    bg_color += 20; //背景色の変更
  }
  if ((key == 'w') || (key == 'W')) {
    bg_color -= 20; //1背景色の変更
  }
}

色の範囲広がりましたね！

紙袋柄へ

続きは後日・・・

全体的にもう少し加筆します。