Using ActionScript 3.0, we developed a random art generator that allows the user to select an area that they find appealing and submit a “hit test” that will output the objects that are within the selected area.
This idea is the initial phase of an application designed to output an image that appeals to the user based on the information within their selection.
Information such as shape, alpha, colors, size, etc. can be stored and based on these percentages a new image could generate, that should appeal to the viewer.
The challenge was to allow the user to create their own selection instead of providing static areas of the image for them to choose from.
I found some sample Actionscript 3.0 code online (flashandmath.com), where a user can input three points of a triangle which is drawn once the user confirms the final point. The user can also change their selection at any time, by dragging any one of the points while the image redraws itself and for added functionality, there is a reset button.
Also, from (flashandmath.com) I found another sample of a line segment drawn after two points are established. Both of these samples were helpful in creating a product that would allow the user to select their own defined area.
I began with the line segment code and rather than draw a line i created a rectangle. Working from the triangle sample, I then used a fill, instead of the line so the user can view the area that they’ve “highlighted”. Here is an excerpt that code (after event listener for mouse click), which also includes the submit button that collects info for output:
Both points, after placement, have the ability to be dragged but I was uncertain how to go about redrawing the image as it is re-sized. Within the samples, I found the code (which as you can see, I’ve made a comment to research the update event listener):
I had to play with the arrangement of the user created points, the highlighted box, objects for hit test and the drawing board (above the stage). It was important to be able to place the point on top of objects without being obstructed by them. The points had to remain on top of the highlighted box in order to allow them to be dragged later to reshape. The hit test needed to function properly and the arrangement affected this as well.
While the user created box was being worked on, so was the code for randomly generating objects (squares). We then combined these two samples to produce our mock-up example.
& the next step
I tried adding a “clear” button that would clear all the objects but when the objects were removed, I would then lose functionality with the rest of my options. I’ve left the code commented out but hope to revisit this for debugging.
The next major step would be to store a few properties of the squares (alpha, color, etc.) and have that info display as well.
Finally, our last step would be to generate an image for the user, based on the stored property information.
~ diette janssen