Carpet Drawing

What

カーペットは一つの方向にしか絵を描くことはできません。逆方向になぞると描いた絵は消えてしまい、横方向になぞっても何も起きません。
この作品はそんなカーペット上でのお絵かきを画面で再現しました。
描画領域下のバーで線の細さを変えることができます。
スマホからは画面が下へ動いてしまい描くことができません。ごめんなさい

画面下のスライダーで線(指)の太さを変えることができます。スライダーの実装は簡単ですので是非参考にしてみて下さい。

How

var prevY = null;
var prevX = null;
var slider;

function setup() {
  createCanvas(500, 500);
  background("#7e280e");
  slider = createSlider(1, 20, 10);
  slider.position(10, 520);
}

function draw() {
  noStroke();
  strokeWeight(slider.value());
  if(mouseIsPressed){
    if(prevY !== null && mouseY > prevY){
      stroke("#631f0b");
      line(prevX, prevY, mouseX, mouseY);
    }
    if(prevY !== null && mouseY < prevY){
      stroke("#7e280e");
      line(prevX, prevY, mouseX, mouseY);
    }
    prevY = mouseY;
    prevX = mouseX;
  } else {
    prevY = null;
    prevX = null;
  }
}