# Pixel by pixel

**URL:** <https://forum.kirupa.com/t/pixel-by-pixel/42566>\
**Category:** Uncategorized\
**Created:** [February 10, 2004, 1:28pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566 "2004-02-10T13:28:02Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hsadan](https://avatars.discourse-cdn.com/v4/letter/h/7bcc69/32.png) [@hsadan](https://forum.kirupa.com/u/hsadan)\
**Post date:** [February 10, 2004, 1:28pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/1 "2004-02-10T13:28:02Z")

</div>

i’m trying to get an effect by which an object (eg. the letter “A”) is simulated to be drawn/rendered pixel by pixel, or something of a mosaic effect.

the only method i can think of is to arrange squares to fit my object shape and then load them one by one using actionscript, but due to the size of my squares the image turns out not very precise. (in other words, ugly)

i could ofcourse lower down the size of each square, but that’s going to be very tedious and i dont really have that kind of time…

anyone got a solution to my problem? ☹  
is there any specific code i could use? (newbie at actionscript here, dont know more than just the basics)

thanks in advance

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2004, 5:18pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/2 "2004-02-10T17:18:21Z")

</div>

One solution could be that you load in an xml document that has each pixel for each letter defined. then you could load in the xml document and duplicate a small square movie clip for each letter for each location. That’d take the tediousness out of each letter, however you make it tedious to code hehe =) thats one solution i thought of right now.

Another solution would have to involve somehow determine thru AI what a letter should be and duplicate squares in relative to each square =)

Bottom line, none of these solutions are really easy, you’ll be doing some work either way =)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2004, 7:01pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/3 "2004-02-10T19:01:03Z")

</div>

[http://www.kirupa.com/developer/mx/fadegrid.htm](http://www.kirupa.com/developer/mx/fadegrid.htm) :beam:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 10, 2004, 8:28pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/4 "2004-02-10T20:28:06Z")

</div>

yeah voetsjoeba’s way is cool and easy

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 11, 2004, 8:54am UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/5 "2004-02-11T08:54:22Z")

</div>

whoa hey! thanks a lot. i did go through some of the actionscript tutorials, but i had skipped this one because i thought it refered to gridlines:sleep:

that did the trick. however, I’m now trying to make the grids appear randomly, but towards the end the script keeps calling numbers that were called before (i’m using random()) and it takes long to fill up those missing grids.

how can i prevent this (calling previously called numbers) from happening?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 11, 2004, 9:13am UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/6 "2004-02-11T09:13:38Z")

</div>

hm i’ve sorta managed to solve that problem, but now the script would stop executing towards the end (leave a few grids still at 100 alpha).

here’s the fademc function part of the script which i edited.

[AS]function fadeMC(mcnr, speed) {  
mcnr = random(368);  
if (this[“box”+mcnr].\_alpha == 100) {  
this[“box”+mcnr].onEnterFrame = function() {  
this.\_alpha -= speed;  
if (this.\_alpha\<=smoothness) {  
this.onEnterFrame = null;  
continueFade(this, speed);  
fadeOut(mcnr, speed);  
} else {  
fadeOut (0, 5);  
}  
}  
}  
}[/AS]

i added the \*if (this[“box”+mcnr].\_alpha == 100) { \* statement to ensure that the grid called would be one that is still yet to be faded out.

what am i missing? thanks a lot for the help.

\*note: random(368) is used because my image is 160x230 and my grids are 10x10

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 11, 2004, 2:59pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/7 "2004-02-11T14:59:04Z")

</div>

Well, I have created a random fading version of this effect, but there were some problems with it. For some reason I don’t know, Flash gives a 256 levels of recursion error at random times.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 11, 2004, 3:50pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/8 "2004-02-11T15:50:50Z")

</div>

oic.  
i noticed that when i lowered the smoothness to about 65 or below my problem would be solved.  
anyone got a better solution?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 11, 2004, 4:10pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/9 "2004-02-11T16:10:56Z")

</div>

> \*Originally posted by Voetsjoeba \*  
> \*\*Well, I have created a random fading version of this effect, but there were some problems with it. For some reason I don’t know, Flash gives a 256 levels of recursion error at random times. \*\*  
> Voets, try something like this:

```auto
//array to store the number of the movieclips
mcs_array = [];
//prototype to randomize an array
Array.prototype.randomize = function() {
	return this.sort(function (a, b) {
		return (Math.floor(Math.random()*2) == 0) ? 1 : -1;
	});
};
//Declare variables
xspacing = box._width;
yspacing = box._height;
depth = 0;
box._visible = 0;
smoothness = 90;
//Calculate positions and values
amH = Math.ceil(image._width/box._width);
amV = Math.ceil(image._height/box._height);
border._height = image._height+1;
border._width = image._width+1;
border._x = image._x-0.5;
border._y = image._y-0.5;
//Create grid
for (i=0; i<amH; i++) {
	for (var k = 0; k<amV; k++) {
		box.duplicateMovieClip("box"+depth, depth);
		cur = this["box"+depth];
		cur._x = image._x+(xspacing*i);
		cur._y = image._y+(yspacing*k);
		mcs_array.push(depth);
		depth++;
	}
	mcs_array.randomize();//randomize array
}
function fadeOut(startboxnr, speed) {
	fadeMC(startboxnr, speed);
}
function fadeMC(mcnr, speed) {
	this["box"+mcnr].onEnterFrame = function() {
		this._alpha -= speed;
		if (this._alpha<=smoothness) {
			delete this.onEnterFrame;
			continueFade(this, speed);
			fadeOut(mcs_array.pop(), speed);//fade out the last element from the array
		}
	};
}
function continueFade(mc, speed) {
	mc.onEnterFrame = function() {
		this._alpha -= speed;
		if (this._alpha<=0) {
			delete this.onEnterFrame;
		}
	};
}
fadeOut(mcs_array.pop(), 5);//start fading the last element fof the array

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 11, 2004, 6:19pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/10 "2004-02-11T18:19:26Z")

</div>

Nice solution, claudio 😉

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 11, 2004, 6:30pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/11 "2004-02-11T18:30:45Z")

</div>

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 12, 2004, 7:42am UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/12 "2004-02-12T07:42:49Z")

</div>

whoa, thanks a lot!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 12, 2004, 12:02pm UTC](https://forum.kirupa.com/t/pixel-by-pixel/42566/13 "2004-02-12T12:02:56Z")

</div>

welcome 😉