let ss_slider;

let dots_checkbox;

let pixels_checkbox;

let aa_checkbox;

let draw_dots = true;

let draw_pixels = true;

let aa = true;

let draw_grid = true;

​

​

function setup() {

  createCanvas(800, 800);

​

  // Creating the w_slider

  w_slider = createSlider(5, 51, 9, 2);

  w_slider.position(20, 20);

  let wSliderLabel = createP('Resolution');

  wSliderLabel.position(50, -10);

  wSliderLabel.style('color', 'white'); // Customize the label color

​

  // Creating the ss_slider

  ss_slider = createSlider(1, 4, 2, 1);

  ss_slider.position(20, 60);

  let ssSliderLabel = createP('Sample Count');

  ssSliderLabel.position(40, 28);

  ssSliderLabel.style('color', 'white'); // Customize the label color

​

  // Creating the dots_checkbox

  dots_checkbox = createCheckbox('Samples', true);

  dots_checkbox.style("color", "white");

  dots_checkbox.position(width-120, height-100);

  dots_checkbox.changed(() => {

    draw_dots = dots_checkbox.checked();

  });

​

  // Creating the pixels_checkbox

  pixels_checkbox = createCheckbox('Pixels', true);

  pixels_checkbox.style("color", "white");

  pixels_checkbox.position(width-120, height-70);

  pixels_checkbox.changed(() => {

    draw_pixels = pixels_checkbox.checked();

  });

  // Creating the aa_checkbox

  aa_checkbox = createCheckbox('Anti Aliasing', true);

  aa_checkbox.style("color", "white");

  aa_checkbox.position(width-120, height-40);

  aa_checkbox.changed(() => {

    aa = aa_checkbox.checked();

  });

  // Creating the grid_checkbox

  grid_checkbox = createCheckbox('Grid', true);

  grid_checkbox.style("color", "white");

  grid_checkbox.position(width-120, height-130);

  grid_checkbox.changed(() => {

    draw_grid = grid_checkbox.checked();

  });

}

​

​

​

function draw() {

  // resolution

  let w = w_slider.value();

  // sample_rate

  let ss = ss_slider.value();

  background(20);

  // let w = floor(map(mouseX, 0, width, 9, 20));

  if(w%2==0)

    w++;

  // pixel grid

  scale(width/w);

  stroke(255, 255, 255, 55);

  strokeWeight(0.01);

  if(draw_grid) {

    for(let i=1; i<w; i++) {

      line(0, i, w, i);

      line(i, 0, i, w);

    } 

  }

  // template triangle

  noFill();

  stroke("white");

  strokeWeight(0.003*w);

  let p0 = [w*0.9, w*0.1];

  let p1 = [w*0.3, w*0.1];

  let p2 = [w*0.1, w*0.9];

  triangle(

    p0[0], p0[1],

    p1[0], p1[1],

    p2[0], p2[1]

  )

  // draw sample points

  let point_r = 0.1;

  noStroke();

  fill("#00BCD449");

  // each pixel

  for(let i=0; i<w; i++) {

    for(let j=0; j<w; j++) {

      let how_many_in = 0; // how many subpixels inside the triangle

      // each subpixel

      for(let k=0; k<pow(2, ss-1); k++) {

        for(let l=0; l<pow(2, ss-1); l++) {

          let x = i + 1/(pow(2, ss)) + 2/(pow(2, ss))*k;

          let y = j + 1/(pow(2, ss)) + 2/(pow(2, ss))*l;

          if(in_triangle(x, y, p0, p1, p2)) {

            fill("#FF5722CC");

            how_many_in++;

          } 

          else {

            fill("#00BCD411");

          }

          if(draw_dots)

            circle(x, y, point_r);

        }

      }

      // color the pixel

      if(draw_pixels == true) {

        if(aa)

          fill(255, 255, 255, map(how_many_in, 0, ss*ss, 0, 255));

        else

          fill(255, 255, 255, (how_many_in>0)*255);

        square(i, j, 1);

      }

    }

  }

}

​

function in_triangle(x, y, p0, p1, p2) {

  // Calculate vectors from p0 to p1 and p0 to p2

  const v0x = p2[0] - p0[0];

  const v0y = p2[1] - p0[1];

  const v1x = p1[0] - p0[0];

  const v1y = p1[1] - p0[1];

  const v2x = x - p0[0];

  const v2y = y - p0[1];

​

  // Compute dot products

  const dot00 = v0x * v0x + v0y * v0y;

  const dot01 = v0x * v1x + v0y * v1y;

  const dot02 = v0x * v2x + v0y * v2y;

  const dot11 = v1x * v1x + v1y * v1y;

  const dot12 = v1x * v2x + v1y * v2y;

​

  // Compute barycentric coordinates

  const denom = dot00 * dot11 - dot01 * dot01;

  if (denom === 0) {

      return false; // Triangle is degenerate (area is zero)

  }

​

  const invDenom = 1 / denom;

  const u = (dot11 * dot02 - dot01 * dot12) * invDenom;

  const v = (dot00 * dot12 - dot01 * dot02) * invDenom;

​

  // Check if point is inside the triangle

  return u >= 0 && v >= 0 && u + v <= 1;

}