Learn creative coding writing simple programs

120. Interactive file visualizer using loadBytes

Here we modify the program that used loadBytes to display the content of a file as colored vertical lines.

The original program just displayed the first six hundred bytes as an static image. Now we add interactivity, so by moving the mouse left and right we can explore the content of the complete file.

The required changes are very few. We add setup() and draw() functions to animate the thing, and then we just add a new variable that contains a number. The number is used to avoid always reading from the beginning of the file. This number is an offset. To calculate the number we use map(). We map the horizontal position of the mouse in the screen to the position inside the loaded file.

Note: I tried loading different files and found that files with .ico extension produce very interesting patterns :)

Tags: loadBytes, visualize, bytes

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
 To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```