ActionScript3 Individual Pixel Color Mapping

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Sat Nov 22, 2014 10:53 pm UTC

I'm trying to code a renderer in Flash for a mathematical theory I developed. It uses some similar principles to fractal rendering, including color-speed mapping. What I've been trying to figure out before anything else for three weeks is how to color manipulate individual pixels on the screen. That is to say, I don't have anything on the stage, and I'm trying to program it to draw it for me. Everything is Euclidean-based per coordinate point. How do I color each coordinate point based on an output value? The output value will be an absolute value percentage between 0 and 100, so I want to know how to map a color step value to an actual color for each pixel on the coordinate plane. That and how to shift the origin to be the center of the stage and be otherwise like a normal plane. I don't know if I'm being clear or not, so if you need clarification, just ask.
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.

User avatar
Xanthir
My HERO!!!
Posts: 5228
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Xanthir » Tue Nov 25, 2014 1:37 am UTC

Out of curiosity, why did you choose Flash? Are you already familiar with it? I ask only because I can't help at all with Flash coding, but if you were doing vanilla JS and using a <canvas> element, I could help a lot. I'll try to help with the non-coding parts in any case.

Are you asking for a good way to map a number to a color? Or are you actually asking how to specify the color of a given pixel? I can't quite tell from your problem description what area of the problem you've having trouble with.

If you just want a way to map a number to a color, there are some well-established good practices for this kind of thing. In particular, do *not* just map it to a "hue angle" to get a rainbow gradient; that's a terrible visualization tool. Color Brewer is a great resource for good colors to use. Your data sounds like it's probably "sequential", so just pick a set you like, set the number of color classes to 9, and interpolate between the provided colors to get continuous data. It's safe to do naive interpolation here - just split the hex colors into the three components (two digits each) and interpolate them independently.

If you can't figure out how to draw to the screen in Flash, what sorts of tutorials have you been using?

Shifting origin is just a math trick - the origin of canvas is in the upper-left corner, so if you want the point (0,0) to be in the center of the screen instead, just add half the screen width and half the screen height to each coordinate immediately before drawing. Screen coords have the positive y-axis pointing down, too, so you may have to negative the y coord first if you're expecting normal graphing coordinates.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Tue Nov 25, 2014 2:36 am UTC

Xanthir wrote:Out of curiosity, why did you choose Flash? Are you already familiar with it? I ask only because I can't help at all with Flash coding, but if you were doing vanilla JS and using a <canvas> element, I could help a lot. I'll try to help with the non-coding parts in any case.


I was trying to knock out two birds with one stone, since I need to learn AS3 for class.
Though if you're willing to help me with JS even though I hardly know any of it at all (aka virtually none)...

I'll type up my theory in full later, and if you can, please tell me how I should tackle this!
Right now I have a few... pressing matters I need to attend to.
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.

User avatar
PM 2Ring
Posts: 3620
Joined: Mon Jan 26, 2009 3:19 pm UTC
Location: Mid north coast, NSW, Australia

Re: ActionScript3 Individual Pixel Color Mapping

Postby PM 2Ring » Tue Nov 25, 2014 12:32 pm UTC

I know SFA about ActionScript3 but a quick look at the Wiki page tells me that "It is a dialect of ECMAScript (meaning it is a superset of the syntax and semantics of the language more widely known as JavaScript)".

However, IMHO the syntax of ActionScript3 looks a lot more like Java than JavaScript. I guess I understand the rationale for doing that - standard JavaScript is a fairly weakly-typed language so adding that Java stuff to it is probably an effort to tighten up the typing, but it comes at the expense of verbosity. But what would I know after a brief glimpse at a Wiki page. :)

I guess it could be a little confusing learning JavaScript at the same time as ActionScript3, so it might be an idea to concentrate on the AS3 since you need it for school. And if you later decide to learn plain JavaScript you'll have a bit of a head start. OTOH, if you have the time, I guess you could do it the other way round & learn JS first, which will give you some good grounding for AS3

JavaScript can be an elegant, concise and powerful language. However, it does come in for some criticism, partly due to a couple of questionable features. It is extremely popular since it is the primary Web scripting language: it can be easily used in a Web page (either as a separate file or embedded directly into the HTML); it can also be used in SVG (structured vector graphics) files to do various animation effects. Because it's so popular there are tons of tutorials and examples available, but the downside is that there are also tons of really crap JavaScript out there, and newbie JavaScript programmers may learn bad habits from such bad examples.

But if you follow good tutorials & use good sources for example code, and avoid using those questionable language features, then you can write code that you can be proud of that will run on anything that has a Web browser. In the olden days, there was considerable divergence in JavaScript support in the various browsers. There's still a little bit of that, but modern browsers are a lot more consistent in that regard, and there are JS libraries available that can handle that stuff, if necessary.

It's fairly easy to learn how to do graphics in JavaScript using the Canvas. You don't need to know a whole lot of JavaScript to get started and you can do impressive stuff with it almost straight away. And if it runs on your desktop computer it'll probably also run on you smart phone.

I suppose I ought to mention that doing individual pixel manipulation is a little tedious - Canvas is more oriented towards doing stuff at a higher level, at which it excels, but JS + Canvas pixel stuff is still fairly fast on a modern browser.

FWIW, here's a JS Mandelbrot generator I posted to the forum 3 years ago. Sure it's not super-fast, but it's not that slow either (unless you try to run it on an ancient browser). Because it uses hotkeys it's not ideal for use on a smart phone (or other touch-based system) but it should still work.
Last edited by PM 2Ring on Wed Nov 26, 2014 12:53 am UTC, edited 2 times in total.

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Tue Nov 25, 2014 11:18 pm UTC

PM 2Ring wrote:Canvas is more oriented towards doing stuff at a higher level, at which it excels, but JS + Canvas pixel stuff is still fairly fast on a modern browser.

FWIW, here's a JS Mandelbrot generator I posted to the forum 3 years ago. Sure it's not super-fast, but it's not that slow either (unless you try to run it on an ancient browser). Because it uses hotkeys it's not ideal for use on a smart phone (or other touch-based system) but it should still work.


Wait, where's the code on that?
I have seen a few Mandelbrot generators that use JS and AS3. That's how I was trying to learn how to make this thing.
Maybe if I figure out how to make the MSet first, then I'll be able to just slightly manipulate the code to compensate for my needs.
I was thinking about the canvas feature. But I wouldn't know how to use it!
If you can point me towards some good JS tutorials (with "good code" which as we know, no one knows how they make "good code"), I can try and teach myself JS. Now I truly understand xkcd 844 x'DDD
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.

User avatar
PM 2Ring
Posts: 3620
Joined: Mon Jan 26, 2009 3:19 pm UTC
Location: Mid north coast, NSW, Australia

Re: ActionScript3 Individual Pixel Color Mapping

Postby PM 2Ring » Wed Nov 26, 2014 1:26 am UTC

What do you mean "where's the code"? The JavaScript program is embedded in that HTML document. The core Mandelbrot calculation is performed in the mandelpoint function.

One of the best sites on the Web for learning about HTML/CSS and JavaScript is HTML Dog. It didn't exist years ago when I was first learning about this stuff, but I just had a quick browse at their JavaScript tutorial and it looks pretty good.

I originally learned a lot of JavaScript from a book, but it is rather ancient, so I won't mention the title.

I guess there may be other recommendations in the How Do I Learn About [n]? thread. And maybe Xanthir will have some other suggestions.

A very popular site for Web programming stuff is w3schools - they get lots of Google hits for common HTML/CSS/JS - related questions. But please avoid using that site! Some of their material is ok, but a lot of it is questionable, to say the least, or at least antiquated. Lots of people think they are some kind of Web authority because of the "W3" in the name, but they have nothing to do with the W3C, and w3schools refuse to make that clear on their site, despite having been requested to do so.
W3C wrote:The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential.


If you have any questions while working your way through the tutorials you can ask them in this forum - Fleeting Thoughts is good for little questions; for more serious questions, just start a thread. These forums aren't as busy as they were a few years ago, but there are still some very talented people lurking. Of course, it's a Good Idea to use a search engine first to see if your question has already been asked. If you see an answer from this site, or from Stack Exchange / Stack Overflow, it's probably trustworthy. If you get nothing but hits from w3schools, proceed with caution. :)

User avatar
Xanthir
My HERO!!!
Posts: 5228
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Xanthir » Wed Nov 26, 2014 2:07 am UTC

PM 2Ring wrote:I know SFA about ActionScript3 but a quick look at the Wiki page tells me that "It is a dialect of ECMAScript (meaning it is a superset of the syntax and semantics of the language more widely known as JavaScript)".

However, IMHO the syntax of ActionScript3 looks a lot more like Java than JavaScript. I guess I understand the rationale for doing that - standard JavaScript is a fairly weakly-typed language so adding that Java stuff to it is probably an effort to tighten up the typing, but it comes at the expense of verbosity. But what would I know after a brief glimpse at a Wiki page. :)

ActionScript is really not much at all like JS anymore; AS was based on the ECMAScript4 spec, which never caught on the web; JS jumped from ES3 to ES5 instead. ES4 was all about typing and namespacing and some other stuff that was quite premature.

And even if it was, drawing APIs aren't part of the language, so knowledge of one won't help you with the other, except insofar as most basic drawing APIs are pretty similar in design.

It's fairly easy to learn how to do graphics in JavaScript using the Canvas. You don't need to know a whole lot of JavaScript to get started and you can do impressive stuff with it almost straight away. And if it runs on your desktop computer it'll probably also run on you smart phone.

Yeah, this is why I like doing JS - it runs literally everywhere, unlike Flash.

I suppose I ought to mention that doing individual pixel manipulation is a little tedious - Canvas is more oriented towards doing stuff at a higher level, at which it excels, but JS + Canvas pixel stuff is still fairly fast on a modern browser.

It's not really. You can "draw" individual pixels just fine by doing 1x1 drawRect() calls, or you can manipulate an ImageData directly, which is what I do for a lot of my canvas playing.

FWIW, here's a JS Mandelbrot generator I posted to the forum 3 years ago. Sure it's not super-fast, but it's not that slow either (unless you try to run it on an ancient browser). Because it uses hotkeys it's not ideal for use on a smart phone (or other touch-based system) but it should still work.

Here's one of my old mandelbrot generators, which overlays the Julia set for that point on top of it (click to get a higher-definition version of the image on the second canvas). Here's a fun little "tree fractal" that responds to your mouse cursor. It looks like I didn't preserve my Mandelbrot "click to zoom" page; too bad.

And while we're on the subject of playing with canvas in JS, here's a bunch of demos about manipulating pixels of a video while it's playing, including grayscaling it, embossing it, turning it into ASCII art, and a few others. That series is nice because I put it together for a teaching blog post, so it's a nice progression of complexity.

As PM2Ring said, this is all HTML and JS - the page contains all the source code. Just right-click and select "View Source" (or I think Ctrl-U works in most/all browsers).
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Wed Nov 26, 2014 4:22 am UTC

Xanthir wrote:Here's one of my old mandelbrot generators, which overlays the Julia set for that point on top of it (click to get a higher-definition version of the image on the second canvas). Here's a fun little "tree fractal" that responds to your mouse cursor. It looks like I didn't preserve my Mandelbrot "click to zoom" page; too bad.



Oh I really love them (I really love fractals) :D
I love the Mset with the Julia Set overlay! That's so clever!

Hmm... I like the tree one, too. But I think it should have a greater iteration depth the further out it is. :v
So cool ^_^
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.

User avatar
Xanthir
My HERO!!!
Posts: 5228
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Xanthir » Wed Nov 26, 2014 5:01 am UTC

Girl-With-A-Math-Fetish wrote:Hmm... I like the tree one, too. But I think it should have a greater iteration depth the further out it is. :v
So cool ^_^

Done, though it definitely affects the framerate when you move too far out. ^_^
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Wed Nov 26, 2014 5:46 am UTC

I think that would depend on the computer and browser. It works fine for me ^_^
Oooo so cool x3
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.

EvanED
Posts: 4327
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby EvanED » Wed Nov 26, 2014 7:31 am UTC

Fractals are fun to (write programs to) draw. I rewrote a fractal generator a while back as my first couple non-toy (though still pretty simple) C++ programs... once using Win32 API then again in MFC. The latter was the source of my first multi-hour debugging session... and the source of my insistence on compiling everything I can with high warning levels. :-) (It was an if (x=y) bug...)

User avatar
Xenomortis
Not actually a special flower.
Posts: 1397
Joined: Thu Oct 11, 2012 8:47 am UTC

Re: ActionScript3 Individual Pixel Color Mapping

Postby Xenomortis » Wed Nov 26, 2014 11:05 am UTC

EvanED wrote:Fractals are fun to (write programs to) draw.

Damn casuals.

PM 2Ring wrote:FWIW, here's a JS Mandelbrot generator I posted to the forum 3 years ago. Sure it's not super-fast, but it's not that slow either (unless you try to run it on an ancient browser). Because it uses hotkeys it's not ideal for use on a smart phone (or other touch-based system) but it should still work.

It's faster than my C++ attempts (and now I'm sad).
Image

User avatar
PM 2Ring
Posts: 3620
Joined: Mon Jan 26, 2009 3:19 pm UTC
Location: Mid north coast, NSW, Australia

Re: ActionScript3 Individual Pixel Color Mapping

Postby PM 2Ring » Thu Nov 27, 2014 6:36 am UTC

Xenomortis wrote:
PM 2Ring wrote:FWIW, here's a JS Mandelbrot generator I posted to the forum 3 years ago. Sure it's not super-fast, but it's not that slow either (unless you try to run it on an ancient browser). Because it uses hotkeys it's not ideal for use on a smart phone (or other touch-based system) but it should still work.

It's faster than my C++ attempts (and now I'm sad).


That JS program is faster than my Python / GTK2 program, although the Python one does a lot more rendering because it takes 7 passes to render one frame. It first uses 64x64 pixel blocks, then 32x32, etc, and it renders a row of blocks at a time. Although all that rendering slows things down a tad it makes it easy to quickly zoom in. This program has a proper GTK gui, which makes it a bit more user-friendly than a hotkey-based program.

My fastest MSet renderer to date is written in C for X windows. Once again, it uses hotkeys; I'm not crazy enough to create a GUI in X, it was bad enough just doing XImage raster stuff. :) I spent a little bit of time studying the X docs when I wrote this program (6 years ago), but it's certainly not great code. It's mostly derived from a simple demo program I found that showed the basics of doing pixel manipulation in X, so my coding style is fairly cargo-cultish.

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Sun Nov 30, 2014 5:19 am UTC

PM 2Ring wrote:My fastest MSet renderer to date is written in C for X windows. Once again, it uses hotkeys; I'm not crazy enough to create a GUI in X, it was bad enough just doing XImage raster stuff. :) I spent a little bit of time studying the X docs when I wrote this program (6 years ago), but it's certainly not great code. It's mostly derived from a simple demo program I found that showed the basics of doing pixel manipulation in X, so my coding style is fairly cargo-cultish.


My first Mset render was done in code. Someone introduced it to me (although for whatever reason I knew what it was immediately... brains are weird) and explained it to me via programming. :3
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Thu Dec 04, 2014 11:02 pm UTC

@Xanthir

I got your tree site listed on PointlessSites.com. So if you track traffic, and wondering where the extra traffic is coming from, it's from that site. It's a rather popular site, and I thought it fit its theme (there are similarly pointless interactive things) well, and apparently, so did the mods. xD
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.

User avatar
PM 2Ring
Posts: 3620
Joined: Mon Jan 26, 2009 3:19 pm UTC
Location: Mid north coast, NSW, Australia

Re: ActionScript3 Individual Pixel Color Mapping

Postby PM 2Ring » Sun Dec 07, 2014 3:29 am UTC

Girl-With-A-Math-Fetish wrote:
PM 2Ring wrote:My fastest MSet renderer to date is written in C for X windows. Once again, it uses hotkeys; I'm not crazy enough to create a GUI in X, it was bad enough just doing XImage raster stuff. :) I spent a little bit of time studying the X docs when I wrote this program (6 years ago), but it's certainly not great code. It's mostly derived from a simple demo program I found that showed the basics of doing pixel manipulation in X, so my coding style is fairly cargo-cultish.


My first Mset render was done in code. Someone introduced it to me (although for whatever reason I knew what it was immediately... brains are weird) and explained it to me via programming. :3


I meant to ask this earlier, but I forgot. What does "My first Mset render was done in code" mean? It would be excruciatingly tedious to render the Mset without using a computer program. :)

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Mon Dec 08, 2014 4:35 am UTC

PM 2Ring wrote:I meant to ask this earlier, but I forgot. What does "My first Mset render was done in code" mean? It would be excruciatingly tedious to render the Mset without using a computer program. :)


Nonono what I meant is that I didn't use an existing program to render a M-Set. I coded one up myself (as in, with help from a friend that did it in front of me via skype, explaining to me what each part of the code was). Didn't use UltraFractal or an online renderer or anything. I forgot that you might not know of the countless renderers out there x'D Kalles Fraktaler, Ultra Fractal, etc. for Msets, Mandelbulb 3D, Mandelbulber, for 3D fractals, Apophysis 7x 15B, Chaotica, JWildfire, etc. for fractal flames and tiles... mmm I reaaaallly love fractals. My nickname is fractal. My username specifically refers to my thing for fractals (not solely such, but 50% of such). x'DDD

Although I do enjoy hand-drawing fractals. Simpler fractals, like the Koch curve and the Sierpinski Gasket/Carpet, and space filling curves and... mmm... fractals <3 I used to hand-draw the Mset on my hand quite often, but more often than not people thought I was drawing a penis on my arm... xD
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.

User avatar
PM 2Ring
Posts: 3620
Joined: Mon Jan 26, 2009 3:19 pm UTC
Location: Mid north coast, NSW, Australia

Re: ActionScript3 Individual Pixel Color Mapping

Postby PM 2Ring » Tue Dec 09, 2014 3:41 am UTC

Ah, now I get it. :) I do realise that there are lots of fractal rendering programs out there. Just about anybody who's learned to do graphics programming in the last several decades has written a fractal maker of some description; I almost always do an Mset renderer as one of my first projects when learning a new language. It's good to see that fractint, the fractal workhorse of ancient times is still going, even though it's getting close to 30 years old.

When the Mandelbulb was still very new I wrote a fairly basic Mandelbulb program that didn't directly display the Mandelbulb object: it's output is a data file suitable for use by POV-Ray. That way, I could concentrate on calculating the Mandelbulb and leave all the 3D rendering stuff to POV-Ray, which can make beautiful 3D images.

I have drawn some simple fractals by hand, though, eg Sierpinski triangles & squares, but that was back before computers with decent graphics capability were common.

User avatar
Girl-With-A-Math-Fetish
Posts: 205
Joined: Mon Jun 30, 2014 9:02 am UTC
Location: The Complex Plane in the Mandelbrot Set
Contact:

Re: ActionScript3 Individual Pixel Color Mapping

Postby Girl-With-A-Math-Fetish » Tue Dec 09, 2014 11:00 pm UTC

PM 2Ring wrote:It's good to see that fractint, the fractal workhorse of ancient times is still going, even though it's getting close to 30 years old.

When the Mandelbulb was still very new I wrote a fairly basic Mandelbulb program that didn't directly display the Mandelbulb object: it's output is a data file suitable for use by POV-Ray. That way, I could concentrate on calculating the Mandelbulb and leave all the 3D rendering stuff to POV-Ray, which can make beautiful 3D images.

I have drawn some simple fractals by hand, though, eg Sierpinski triangles & squares, but that was back before computers with decent graphics capability were common.


The program Mandelbulb 3D takes care of the coding work for you xD You can change any or all of a plethora of parameters. The Mandelbulb is just the default preset. It's also real good for fractal zooms. Oh how I'd love to export a "smooth" fractal and use it as a game world. Exploration and puzzle-based game.

Ahh yes, FractInt. FractInt is pretty interesting, but its navigation is awfully cumbersome, as I'm too young and have never used a DOS-style navigation system.

Almost all my schoolwork has at least one fractal scribbled onto it xD
I'm sexually attracted to the International Space Station. You have now had your daily dose of Internet.


Return to “Coding”

Who is online

Users browsing this forum: chridd, gd1 and 8 guests