sketch.js

let x = 50;
let y = 50;

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

function draw() {
  // background(0, 0, 0); //背景色を指定して1回だけ塗る。
  //
  x = x + 2;
  //xが右に行き過ぎたら改行
  if (x > 550) {
    x = 50;
    y = y + 60;
  }
}

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

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

function keyPressed() {
  //x、yの位置に円をかく

  //キーで色分け
  blendMode(DIFFERENCE); //ブレンドモードを「差」に変える

  if (key == "q") {
    noStroke();
    fill(0, 100, 100);
  }
  if (key == "w") {
    noStroke();
    fill(30, 100, 100);
  }
  if (key == "e") {
    noStroke();
    fill(60, 100, 100);
  }
  if (key == "r") {
    noStroke();
    fill(90, 100, 100);
  }
  if (key == "t") {
    noStroke();
    fill(120, 100, 100);
  }
  if (key == "y") {
    noStroke();
    fill(150, 100, 100);
  }
  if (key == "u") {
    noStroke();
    fill(180, 100, 100);
  }
  if (key == "i") {
    noStroke();
    fill(210, 100, 100);
  }
  if (key == "o") {
    noStroke();
    fill(240, 100, 100);
  }
  if (key == "p") {
    noStroke();
    fill(270, 100, 100);
  }
  if (key == "@") {
    noStroke();
    fill(300, 100, 100);
  }
  if (key == "[") {
    noStroke();
    fill(330, 100, 100);
  }

  circle(x, y, 50);

  //タイプされるたびxを増やす
  //x = x + 25;

  //xが右に行き過ぎたら改行
  //if (x > 550) {
  //  x = 50;
  //  y = y + 60;
  //}

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