|
The Aphantasia Visualizer is designed to help show others what you see if you have aphantasia (dimished or lack of mental imagery) or hyperphantasia (acute ability to form mental imagery). BRIEF INTRODUCTION I have aphantasia, but my SO refuses to believe me. He has no problem visualizing things with his minds eye. Recently it struck me that I could use Javascript to write a Visualizer that would allow me to show others what I see (or in my case, don't see). Thus, the creation of this Aphantasia Visualizer. Did it work? No, he still does not believe me. Regardless, I think this may be a useful tool, at least for some (hopefully you). QUICK START The Visualizer has a lot of different modes, buttons, and controls. However, there is an easier way to dial in what you see than just stabbing controls in the dark (pun intended). By default the Visualizer comes up in eyes-open, hyperphantasia mode, with a random scene. Overtop the scene will be a random visualization image that fades out in two seconds (and then repeats after two seconds). I did this just to have the initial display be something interesting, rather than just black. Don't worry, you can change everything (and I mean everything). To start using the Visualizer quickly, use the Quick Presets pulldown at the top of the dislay area to select a starting visualization based on what you want. The presets are divided into groups:
Simply select the preset that is closest to what you experience, and then use the controls to further refine the selection. The Visualizer give you the following basic capabilities:
Use this Visualizer to generate an approximation of what you see, in various conditions (eyes closed, eyes open,etc). You can show and share this visual with others. BROWSER SPEED This visualization tool uses Javascript, which means it runs completely on your browser. Because of this, the speed of your computer impacts the quality of the visualization. If you experience poor animation quality (stuttering, etc) try reducing the frame rate using the FPS pulldown. You can also try using a smaller canvas using the Canvas Size pulldown. BASIC CONTROLS Let's go over the basic controls on the screen:
Let's go over the controls from the easiest to the more complex... CANVAS SIZE PULLDOWN By default the Visualizer comes up with a canvas that is 800 x 800 in size. The Canvas Size Pulldown lets you modify the canvas up to 1000 x 1000 in size (the canvas is always square). Simply select the desired canvas size that you want to use. THE FPS PULLDOWN On the right side is a pulldown with choices labeled in FPS (Frames Per Second). This is the update rate for the animations (Waveform and Imagery fade). In general, 50 should be fine. You can use lower frame rates if your computer is slower. Adjusting the frame rate is also important for certain people where the background they experience with their eyes closed changes periodically. You can use the FPS pulldown to find a frame rate that is closer to what you experience (if you experience such a thing). If you are using the Visualization Image fader capability, lower FPS settings will affect the speed and smoothness of the fade. When using the fader, settings of a minimum of 20 FPS should be used. Finally, the frame rate also controls the rate at which the Waveforms and any Noise is drawn into the imagery. Use it to control the speed of those effects. THE COPY URL BUTTON On the right side, just to the left of the HELP button is a button with a down-pointing arrow. When you have a visualization that you like, and want to make a note of it or share it with someone else, click this button. When you click the button, a URL will be generated which, when clicked on, will take whomever to the visualizer with the settings you have now. Yes, the URL is long, sorry about that. That's because there are a lot of settings. Note that not all browsers will let Javascript put things into your clipboard. Thus, when you click the button, we display a dialog saying we tried to put it in the clipboard, but we also show you the URL in case it didn't work (you can copy and paste it from the dialog yourself). In most cases, though, for most modern browers - the URL should copy to your clipboard just fine. Note, in the situation where I may add more settings to the visualizer in the future, past URLs you created may no longer load properly (or at all). If this happens - recreate your experience. (Over time I expect things to not change much, but initially there may be changes as I receive feedback from users.) THE HELP BUTTON The HELP button displays, um..., well - this Help manual. That's it. (Oh ya, it will appear in a new tab/window so it does not interrupt your visualization.) THE BACKGROUND COLOR CHIP Next to the Canvas Size pulldown is a square which contains the current Background Color. This square (chip) is clickable (click on it). When you click on the Background Color Chip (or any Color Chip in the visualizer, there are many) you get a Color Editor Dialog. We will specifically describe how to use the Color Editor in the next section. The Background Color defaults to black, on intial load. This is the base color that appears behind everything else (Waveforms, Scenery, Imagery, etc). In general, you can leave it black (as you can adjust the background color in other ways, such as in your Waveform settings, etc). However, I like to use it to dial in the darkest color I see when my eyes are closed (and I'm in the dark), and then build the rest on top of that color. When I close my eyes, without imagining anything, I see a very dark, mostly redish (with some other colors that come and go), mottled field. The colors and pattern shift slowly over time, but don't move around very much. So, for me, the darkest color I see is a very, very, very dark red. And that is often when I will dial in. THE COLOR EDITOR When you click the Background Color Chip (or any other Color Chip in the visualizer) you will get the Color Editor dialog. First, you can move any dialog by selecting the background in the title area, and dragging the window to any desired position. At the top of the Color Editor Dialog are two color chips, side by side. The color chip on the left is the Current Color. That is, the color you are editing. The color chip on the right is the New Color. That is, the color you want to replace the Current Color with. The little triangle below the Current Color lets you change the Color Picker from a square to a triangle (and back). Pick which ever you find easier to use. To select a Hue, click the colors in the circular Hue Ring. As you change the Hue you wlil see the rest of the elements on the page change to match the Hue you have dialed in. The square (or tringular) area in the middle lets you select the Saturation (amount of color) as well as Brightness (how close to black, or white, it is). Click in this area to select the desired color. The slider on the right lets you select the Alpha (or Transparency) of the color. When at the top, the color is fully opaque (no transparency). When at the very bottom, the color is totally transparent (invisible). Setting the slider between the two extremes lets you dial in the desired transparency. As you change the transparency, the New Color window will change and reveal a checkboard pattern behind the color. This lets you see how the transparency looks against another pattern. Use the controls to select the desired color and any transparency. If you want to start over, click the Current Color chip and it will replace the New Color. When you are happy with your new color, click the USE NEW COLOR button. You can also click DO NOT USE to cancel the Color Editor and not use any new color you selected. THE IMAGERY BUTTON The IMAGERY button lets you select a Visualization Image as well as a Scenery Image. This dialog is divided into two sections. The top section lets you set the Visualization Image, while the bottom section lets you set the Scenery. The Visualization Image (Visualize Image) is the image you are trying to imagine. The visualizer offers the following choices:
Select the desired image you want (if any) from the Visualize Image pulldown. Use the Image Alpha slider to select the transparency of the Visualiation Image. All the way to the left is fully transparent (invisible). All the way to the right is fully opaque (no transparency). Between these two extremes are the various transparency levels. The Visualization Image sits on top of everything else, and thus if you select a transparent value, you will see through (depending on how much transparency you selected) to what is behind it (Scenery and/or Waveforms/Noise). The Display pulldown lets you select exactly how you want the visualization image displayed:
First, an explanation. It seems that different people see different things (if anything at all) when they try to visualize an image (say... a sheep). Some see the full color sheep. Some see a fainter, but still full color sheep. Some see a more solid color, in the shape of a sheep. And some (like me) tend to see (if at all) just an outline of the sheep. Thus, this setting lets you select exactly what you tend to see. For me, it's Outline Only. So, select the desired option from the list that best represents what you see. Keep in mind that the choice might change for you, if you are doing an eyes-open versus eyes-closed visualization! The Outline Size option lets you select how wide the outline is, if you are using one of the outline Display options. To the left is smaller, to the right is bigger. Set it to the size of the outline that you see (when I see an outline, mine is actually somewhat thick). The Outline Color Chip lets you select the color for the outline. Click the color to display the Color Editor dialog. Use the Color Editor to modify the color. Note that the transparency slider can also be used to make the outline partially transparent. The Interior Color Chip lets you select the color for the interior mask. Click the color to display the Color Editor dialog. Use the Color Editor to modify the color. Note that the transparency slider can also be used to make the interior mask partially transparent. The Fade Out pulldown lets you select whether or not the visualization image fades over time, and if so, how fast. To explain... it seems that for some people, when they try to visualize an image - whatever they get doesn't last long, and fades out fairly quickly. For me, if I get any imagery at all it generally lasts about a second or so before fading away (at which point I have to force it to show up again, if I can). If your visualization fades, use the pulldown to select how fast it fades, anywhere from a half second to a minute. Note that the FPS pulldown will affect the smoothness of the fade (select 20 or higher FPS for smooth fades). When using the fader, the fade will proceed over the specified time, after which there will be a two second pause before the image appears again and the fade starts over. The two second pause can not be changed by the user. Below the Visualize Image setup area is the Scenery setup area. This lets you select any scenery for your visualization. Scenery can be used for both eyes-closed as well as eyes-open visualizations. We supply a couple of eyes-closed scenes which represent what some people may see as the background when their eyes are closed. The eyes-open scenes are for visualizations with your eyes open. You do not need to use scenes. If you do not use scenes (or use transparency on your scenes) all Waveforms, noise, and background color you have set will show through. However, since scenes are super easy to use, using the eyes-closed images may be faster than learning to master the far more complex Waveform system. The following eyes-closed scenes are offered:
The following eyes-open scenes are offered:
Keep in mind that any visualization image will apear on top of any scenery, while any Waveforms, Noise, and Background Color will appear below any scenery. Use the Scenery Alpha slider to select the transparency of the Scenery Image. All the way to the left is fully transparent (invisible). All the way to the right is fully opaque (no transparency). Between these two extremes are the various transparency levels. Using transparency on the Scenery image lets you see through to the Waveforms, Noise, and the Background Color. THE WAVEFORMS BUTTON The WAVEFORMS button lets you specify the Waveform and Noise settings. The Waveforms and Noise layer is the lowest visual layer. That is, any visualization image and scenery image appears on top of this layer. Note that if you are using a Scenery Image, and have it fully opaque (not transparent at all) then you won't be able to see the Waveform and Noise layer. This layer is only visible when you are not using a Scene, or the Scene is partially transparent. Specifically, the most useful Scenes to combine with Waveforms and/or Noise (using the Scene Alpha setting for transparency) are the eyes-closed Scenes, where Waveforms and Noise can contribute to the overall effect. Before I describe how to use the Waveform and Noise system, let's see why they are useful. Waveforms and Noise can help create the background you see when your eyes are closed and you are not trying to visualize anything. With their eyes closed most people see a dark, but not black background (even in total darkness). As I mentioned before, I see a very, very dark redish mottled background with a sprinkling of other subtle colors. We already discussed the Background Color, which lets you set a base background color (and this color is used by the Waveform and Noise system). However, most people don't see a solid background - but rather, a patterned or mottled background. It seems that some people may also see subtle geometric patterns in the background. Likewise, for most people the background is not static (never changing) but slowly shifts over time, with elements shifting, or changing intensity/color, etc. Sigh... so... the Waveform and Noise system attempts to (at least somewhat) simulate all the above. It's nearly an impossible task (but one that may improve with time). Note that this system is animated, and varius settings will change the look (and speed) of the animations. Furthermore, the FPS pulldown will affect the animation speed. Select a proper FPS to best match your visual experience. Finally, when experimenting with Waveforms and Noise, we recommend turning all Visual and Scenery images off, so you can concentrate on the background. Let's start with Noise, since it is the easiest to understand. To access the Noise system, click the WAVEFORMS button and scroll to the bottom of the Waveforms dialog. Adding Noise to your background is a good way to simulate a slightly shifting colored background. The effect can be as subtle, or strong as you desire. Start by using the Use pulldown to select whether or not to add Noise to the Background Color (and any Waveforms). Select Add Noise to enable Noise. Below the pulldown are six sliders, two for Red, two for Green, and two for Blue. These let you set the Minimum and Maximum values for the noise, in each of the color channels. Since my personal background has a small amount of redish noise, I can set the Red Minimum to zero (left most) and Maximum to about 20%, and the Green and Blue minimum and maximums to zero. If I want to sprinkle other colors in, I can raise the maximum of all sliders (as each color channel is randomized individually). This will sprinkle other colors in, depending on how you set your sliders. To use the Waveform System, again use the WAVEFORMS button to open the Waveform Setup dialog. Above the Noise area is the Waveform area. This is divided left and right into Horizontal and Vertical Waveforms. And then each section has four different Waveforms:
The Waveform system works like a loom. A loom weaves a pattern by mixing horizontal and vertical threads. This works the same way. Consider the canvas itself as our loom. Our horizontal threads are being introduced on the left side, and our vertical threads are being introduced from the top. The threads in our case, are Waveforms. Each row and each column gets a value from the specified Waveform(s). For example, if you select Sine for the Horizontal, then you will see horizontal sine waves (basically, vertical bars). If you select Sine for the Vertical, then you will see vertical sine waves (basically, horizontal bars). Likewise for Triangle, Square, and Ramp. Each of those produce the referenced Waveform in the direction you picked it in (horizontal, or vertical). Note, you can select more than one Waveform. For example, you can select both Sine and Square for Horizontal, and all four for Vertical, if you desire. (Depending on your computer OS, to select multiple hold either control, or option, or alt, or command, and select). To turn a Waveform off (or all of them off) select them, again holding whatever magical key works for your OS. The Layout pulldown lets you specify how multiple Waveforms are displayed. This only applies if you are using multiple Waveforms:
If you are using the Sequential Layout, then each thread is the next selected Waveform, and this loops till there are no more threads for that side of the canvas. If you are using the Random Layout, then each thread is picked at random from the available selected Waveforms, until there are no more threads for that side of the canvas. If you are using the Combined Layout, then each thread is an averaged combination of all available selected Waveforms. (By the way, this is in my opinion the most useful setting.) Below the Layout pulldown are areas for Sine, Triangle, Square, and Ramp setup. Each area contains identical controls, so will describe them all at once. Obviously, the controls in each area control that Waveform. For example, the controls in the Sine area control the Sine Waveform, and so forth. Use the Color Chip to set the Waveforms color. Keep in mind that the transparency (alpha) setting is valid and if non-opaque, will allow the Background Color to bleed through. Use the Step slider to set the Waveforms animation step. If the slider is centered, this is zero (no movement). Slide to the right of center to animate in one direction, and to the left of center to animate in the other. Keep in mind that this setting works with the FPS pulldown for the final animation speed (hint, set FPS first). Use the Frequency slider to set the Waveforms frequency. The frequency is how wide the Waveform is, in relation to the canvas. All the way to the left is the lowest (widest) frequency. All the way to the right is the highest (thinest) frequency. Use the Amplitude slider to set the Waveforms amplitude. The amplitude is the height of the Waveform. All the way to the left is the lowest (darkest) amplitude. All the way to the right is the highest (brightest) amplitude. The canvas colors are calculated as a combination of all the threads. First, the horizontal and vertical Waveform colors are calculated. Next, if there is noise, it is added to those colors. Finally, the resulting colors are added to the Background base color and the final result is averaged (actually, after each step, that steps combination is averaged, but whatever). While using Noise is pretty straight forward, incorporating Waveforms requires some experimenting. I find that having a Sine in both horizontal and vertical with a frequency of zero, give a nice gradient that is somewhat brighter in the center - similar to my eyes. But, obviously the amplitude has to be muted (or transparency used, or the color set properly) otherwise it is too bright. CONCLUSION Well, that's about it for our little guide. Hope you find the visualizer useful (or at least mildly entertaining). This project uses the html5kellycolorpicker by Vladimir and Xdialog by Thierry Godefroy. |