More PictXels…

This is the continuation and conclusion of Project 1. Last we I talked about the nature of the pixel[] array and how to access and manipulate it. There were some major performance issues with the way I wrote the preliminary code, namely trying to use the slider.value directly in the context of a for loop to manipulate the pixels[]. Top fix this performance issue I created            function create_ui. And using a variable I stored the slider.value to use in the pixels[]. After making this change there was no noticeable lag when adjusting the sliders.

function create_ui() {
  createP();

  // createSlider(min, max, [value], [step])
  let = slider1 = createSlider(0, 255, slider_r);
  slider1.input(function() {
    slider_r = slider1.value();
  });
  createP();

  // createSlider(min, max, [value], [step])
  let = slider2 = createSlider(0, 255, slider_g);
  slider2.input(function() {
    slider_g = slider2.value();
  });
  createP();

  // createSlider(min, max, [value], [step])
  let = slider3 = createSlider(0, 255, slider_b);
  slider3.input(function() {
    slider_b = slider3.value();
  });
  createP();

  // createSlider(min, max, [value], [step])
  let = slider4 = createSlider(0, 255, 128);
  slider4.input(function() {
    slider_lum = slider4.value();
  });
}

The above code shows the function create_ui, there are four sliders controlling Red, Green, Blue, and Alpha of any image loaded into the sketch.

Below is the important part of the code in terms of performance and where the manipulation of the image takes place.

a_vid.pixels[index + 0] = slider_r;
a_vid.pixels[index + 1] = slider_g;
a_vid.pixels[index + 2] = slider_b;      
a_vid.pixels[index + 3] = random(0, slider_lum);

After the changes were made everything worked as expected using an image.