オリジナルペイントツール

by 高徳

2024-05-20 18:18:34

sketch.js

function setup() {
  createCanvas(600, 600); //ウィンドウサイズの指定
  background(0, 0, 0); //背景色を指定して1回だけ塗る。
}

function draw() {
  colorMode(HSB); //カラーモードがHSBに変わる
  // background(0, 0, 0); //背景色を指定して1回だけ塗る。
  if (mouseIsPressed == true) {
    //fill(0, 150, 200); //塗りの色を指定する
    //noStroke(); //線を「なし」にする。
    //circle(mouseX, mouseY, 10); //マウスの位置に線を書く。
    //stroke(0, 150, 200);
    //strokeWeifht(10);//線の太さを変える
    //line(pmouseX, pmouseY, mouseX, mouseY);
    //noFill(); //塗りをなしにする
    //fill(mouseX, 40, 90); //色相120、彩度100、明度100
    //fill((mouseX / 600) * 360, 40, 90); //色相部分を(mouseX / 600) * 360にすることで、下地のレインボーが均一に現れる表現に。
    //fill(random(0, 360), 50, 100); //色相をランダムで決める
    fill(20 + random(-15, 15), 100, 200, 0.5); //透明な絵の具

    noStroke();
    circle(
      mouseX + random(-15, 15),
      mouseY + random(-15, 15),
      20 + random(-20, 20),
    );
  }
}

function mousePressed() {
  //マウスのボタンが押し下げられた時の処理
}

function mouseReleased() {
  //マウスのボタンが離された時の処理
}

function keyPressed() {
  if (key == "s") {
    saveCanvas();
  }
}

ファイル一覧

  • index.html
  • p5.min.js
  • p5.sound.min.js
  • sketch.js
  • style.css

ファイルを再アップロード


サムネイル画像を変更