p5.js Web Editor | ms pain(t)

xxxxxxxxxx
var rand;
var w;
var x;
var y;
var z;
var a;
var b;
var c;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100);
  background(360, 0, 100);
}
function mouseDragged() {
  stroke(x, y, z);
​
  strokeWeight(w);
  line(mouseX, mouseY, pmouseX, pmouseY);
}
​
function draw() {
  //canvas
  {
    fill(215, 11, 91);
    noStroke();
    rect(0, 0, width / 32, height);
    rect(0, 0, width, (height / 32) * 5);
    rect((width / 32) * 31, 0, width, height);
    rect(0, (height / 32) * 31, width, height);
  }
  //Header
  {
    strokeWeight(2);
    stroke(211, 1, 90);
    fill(211, 1, 98);
    rect(0, 0, width, height / 8);
  }
  //palet
  {
    //random
    fill(x, y, z);
    rect(
      (width / 128) * 44,
      height / 128,
      (width / 128) * 13,
      (height / 128) * 13
    );
​
    //black
    fill(215, 11, 0);
    rect((width / 128) * 58, height / 128, (width / 64) * 3, (height / 64) * 3);
​
    //gray
    fill(113, 0, 50);
    rect((width / 128) * 65, height / 128, (width / 64) * 3, (height / 64) * 3);
​
    //burg
    fill(352, 97, 54);
    rect((width / 128) * 72, height / 128, (width / 64) * 3, (height / 64) * 3);
​
    //rud
    fill(358, 88, 93);
    rect((width / 128) * 79, height / 128, (width / 64) * 3, (height / 64) * 3);
​
    //org
    fill(25, 84, 98);
    rect((width / 128) * 86, height / 128, (width / 64) * 3, (height / 64) * 3);
​
    //yel = (57,100,100);
    fill(57, 100, 100);
    rect((width / 128) * 93, height / 128, (width / 64) * 3, (height / 64) * 3);
​
    //gre = (133,74,69);
    fill(133, 74, 69);
    rect(
      (width / 128) * 100,
      height / 128,
      (width / 64) * 3,
      (height / 64) * 3
    );
​
    // blu = (201,86,91);
    fill(201, 86, 91);
    rect(
      (width / 128) * 107,
      height / 128,
      (width / 64) * 3,
      (height / 64) * 3
    );
​
    // dblu = (236,69,80);
    fill(236, 69, 80);
    rect(
      (width / 128) * 114,
      height / 128,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // purp = (299,55,64);
    fill(299, 55, 64);
    rect(
      (width / 128) * 121,
      height / 128,
      (width / 64) * 3,
      (height / 64) * 3
    );
    //  white = (360,100,100);
    fill(360, 0, 100);
    rect(
      (width / 128) * 58,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // lgray = (113,0,76);
    fill(113, 0, 76);
    rect(
      (width / 128) * 65,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // brun = (21,53,73);
    fill(21, 53, 73);
    rect(
      (width / 128) * 72,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // pnk = (339,31,99);
    fill(339, 31, 99);
    rect(
      (width / 128) * 79,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // yorg = (47,95,99);
    fill(47, 95, 99);
    rect(
      (width / 128) * 86,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // lyel = (49,27,94);
    fill(49, 27, 94);
    rect(
      (width / 128) * 93,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // lgre = (75,87,90);
    fill(75, 87, 90);
    rect(
      (width / 128) * 100,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // lblu = (193,34,92);
    fill(193, 34, 92);
    rect(
      (width / 128) * 107,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // gblu = (214,41,75);
    fill(214, 41, 75);
    rect(
      (width / 128) * 114,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
    // lpurp = (254,17,91);
    fill(254, 17, 91);
    rect(
      (width / 128) * 121,
      (height / 128) * 8,
      (width / 64) * 3,
      (height / 64) * 3
    );
  }
  //tools
  {
    //brush size
    {
      fill(1, 0, 0);
      noStroke();
      rect(
        (width / 128) * 16,
        (height / 264) * 8,
        (width / 64) * 3,
        height / 264
      );
      rect(
        (width / 128) * 23,
        (height / 264) * 7,
        (width / 64) * 3,
        height / 128
      );
      rect(
        (width / 128) * 30,
        (height / 264) * 6,
        (width / 64) * 3,
        height / 64
      );
      rect(
        (width / 128) * 37,
        (height / 264) * 4,
        (width / 64) * 3,
        height / 32
      );
​
      noFill();
      stroke(211, 1, 90);
      strokeWeight(2);
​
      rect(
        (width / 128) * 16,
        height / 128,
        (width / 64) * 3,
        (height / 64) * 3
      );
      rect(
        (width / 128) * 23,
        height / 128,
        (width / 64) * 3,
        (height / 64) * 3
      );
      rect(
        (width / 128) * 30,
        height / 128,
        (width / 64) * 3,
        (height / 64) * 3
      );
      rect(
        (width / 128) * 37,
        height / 128,
        (width / 64) * 3,
        (height / 64) * 3
      );
​
      //save image
      {
        fill(236, 69, 80);
        rect(
          (width / 128) * 2,
          height / 128,
          (width / 128) * 13,
          (height / 128) * 13
        );
      }
      noStroke();
      fill(236, 0, 100);
      rect(
        (width / 128) * 5,
        height / 128,
        (width / 128) * 7,
        (height / 128) * 4
      );
​
      rect(
        (width / 128) * 6,
        (height / 128) * 8,
        (width / 128) * 5,
        (height / 128) * 4
      );
​
      fill(236, 69, 80);
      rect(
        (width / 264) * 13,
        (height / 264) * 17,
        (width / 264) * 3,
        (height / 264) * 7
      );
    }
  }
}
​
function mousePressed() {
  //colour selection
  {
    //r1
​
    if (collide((width / 128) * 58, height / 128)) {
      x = 215;
      y = 11;
      z = 0;
    } else if (collide((width / 128) * 65, height / 128)) {
      x = 113;
      y = 0;
      z = 50;
    } else if (collide((width / 128) * 72, height / 128)) {
      x = 352;
      y = 97;
      z = 54;
    } else if (collide((width / 128) * 79, height / 128)) {
      x = 358;
      y = 88;
      z = 93;
    } else if (collide((width / 128) * 86, height / 128)) {
      x = 25;
      y = 84;
      z = 98;
    } else if (collide((width / 128) * 93, height / 128)) {
      x = 57;
      y = 100;
      z = 100;
    } else if (collide((width / 128) * 100, height / 128)) {
      x = 133;
      y = 74;
      z = 69;
    } else if (collide((width / 128) * 107, height / 128)) {
      x = 201;
      y = 86;
      z = 91;
    } else if (collide((width / 128) * 114, height / 128)) {
      x = 236;
      y = 69;
      z = 80;
    } else if (collide((width / 128) * 121, height / 128)) {
      x = 299;
      y = 55;
      z = 64;
    }
    //r2
    else if (collide((width / 128) * 58, (height / 128) * 8)) {
      x = 360;
      y = 0;
      z = 100;
    } else if (collide((width / 128) * 65, (height / 128) * 8)) {
      x = 113;
      y = 0;
      z = 76;
    } else if (collide((width / 128) * 72, (height / 128) * 8)) {
      x = 21;
      y = 53;
      z = 73;
    } else if (collide((width / 128) * 79, (height / 128) * 8)) {
      x = 339;
      y = 31;
      z = 99;
    } else if (collide((width / 128) * 86, (height / 128) * 8)) {
      x = 47;
      y = 95;
      z = 99;
    } else if (collide((width / 128) * 93, (height / 128) * 8)) {
      x = 49;
      y = 27;
      z = 94;
    } else if (collide((width / 128) * 100, (height / 128) * 8)) {
      x = 75;
      y = 87;
      z = 90;
    } else if (collide((width / 128) * 107, (height / 128) * 8)) {
      x = 193;
      y = 34;
      z = 92;
    } else if (collide((width / 128) * 114, (height / 128) * 8)) {
      x = 214;
      y = 41;
      z = 75;
    } else if (collide((width / 128) * 121, (height / 128) * 8)) {
      x = 254;
      y = 17;
      z = 91;
    } //random
    else if (collidebig((width / 128) * 42, height / 128)) {
      x = random(0, 360);
      y = random(0, 99);
      z = random(0, 90);
    }
​
    //brush width
    {
      if (collide((width / 128) * 16, height / 128)) {
        w = 4;
      } else if (collide((width / 128) * 23, height / 128)) {
        w = 8;
      } else if (collide((width / 128) * 30, height / 128)) {
        w = 13;
      } else if (collide((width / 128) * 37, height / 128)) {
        w = 20;
      }
    }
    //save canvas as image
    if (collidebig((width / 128) * 2, height / 128)) {
      saveCanvas("myCanvas", "jpg");
      print("saving image");
    }
    return false;
  }
​
  function collide(x, y) {
    if (
      mouseX >= x &&
      mouseX <= x + (width / 64) * 3 &&
      mouseY >= y &&
      mouseY <= y + (height / 64) * 3
    ) {
      return true;
    }
    return false;
  }
​
  function collidebig(x, y) {
    if (
      mouseX >= x &&
      mouseX <= x + (width / 128) * 13 &&
      mouseY >= y &&
      mouseY <= y + (height / 128) * 13
    ) {
      return true;
    }
    return false;
  }
}
​
Cookies

Sketch Files

Console

Preview
