imgAbstract converts a static img into squares, dots, and polygons.
Get the colors of an imageTransfer img to a canvas elementUse JS to capture the R, G, B, and Alpha of each pixelSet variable to define the sample size of colors and find the average color/alpha in that grid
Save color/alpha values to a javascript object
Create basic shapes (squares and dots)Make a control that will use the saved color/alpha values to redraw image in square or dot shapesGive the option to change the output grid size
- Create mouse interaction
- When a mouse/cursor hovers over a section, the grid shapes (dot or square) should push away from the origin of the mouse (like an explosion from the cursor origin)
- Will work on hover or click
- Create polygons
- Image has to be the same domain, however James Tomasino found out a clever work-around by creating a proxy file that saved locally can serve up images from other sites. https://github.com/jamestomasino/Reactive-Color
- Sporadically, image.onload event will trigger before the image has loaded, causing the code to break
- Some pixels are being read twice (approximately 2% in initial tests)
May 6, 2015
- Created drawDots() function
- Displays the image/color information on the canvas element
- Alpha/Transparency is represented by a dot's radius size
May 6, 2015
- Created the nested for loops to scan over the grid specified by sampleSize
- Created drawBoxes() function
- Displays the image/color information on the canvas element
May 5, 2015
- encapsulated code into one global object, 'capture'