Pictures, or video for that matter, are just pixels…lots of pixels in fact if we talk in terms of an array[] there are FOUR times as many index positions as there are pixels.
Pictures, or video for that matter, are just pixels…lots of pixels in fact if we talk in terms of an array[] there are FOUR times as many index positions as there are pixels. This isn’t really an issue when we think about how to access each of those positions.
for (let y = 0; y < height; y += 1) {
for (let x = 0; x < width; x += 1) {
let index = (y + x * width) * 4;The nested for loop allows the pixels to load to the canvas in the way we would expect and the resulting image is identical copy of the image we loaded into the sketch.
By loading the image into the canvas this way it enables direct access to each individual aspect of each individual pixel–red, green, blue and alpha.
For project 1 I wanted to take an image or set of images and manipulate the RGB and alpha values using the DOM createSlider() element. I was able to accomplish this fairly easily. There are a few issues I’m working through though.
- At a some combinations of RGBA values the slider become unresponsive and moving the slider has no affect on the image.
- Trying to add a window that allows the area of the image that the RGBA is applied to.
- In order to have three sliders effect the RGB values individually I had to add o copy of the image as the background(), this isn’t necessarily a problem, just looking for a different solution.
- Trying to using the web cam for this is almost impossible due to the lag, I plan on trying to use Visual Studio and run this sketch with a web cam and see if there are any changes.
More to come before this is finished, stay tuned for next week same bat-channel, same bat-time.
Check out the working sketch.
