creative programming applied to the science of cool visual shit in flash

DigiTidal Waves

2010-06-28T13:05:00.000-07:00

long time i didn't play with my little psykopaint

Observer pattern? Notifications? listener? event? WTF?

2010-04-29T04:09:00.000-07:00

I was using a class to broadcast events to any object without referencing them anywhere.
Making a new project on a new machine, i just thought i could grab the equivalent on the great word wide web.
So i Googled 'Observer pattern AS3', 'event broadcaster', 'notification'...

I found there are lots of misunderstanding between what an observer, a listener, an event are...
Some says that the listeners in flash are direct implementation of observer pattern.
But What i wanted was a centralised way to communicate between object. Instead of object directly referencing each others, they just listen to something without knowing where it comes from. This is highly interesting when you want to trigger events that changes lots of thing in your app without having dependencies!

I remember in pureMVC you could register a class Observer and send a notification. And any object in the framework can listen to it without knowing the object which sent it.
This was great exept i think the implementation is tied to the framework, therefore cannot be used standalone.

So i thought (for the 2 people who might read this blog) that i would share my lightweight implementation which i think is simpler and handier:

How it works:
C wants to know when someone say 'something'
C ask B to tell him when someone say 'something'
A say 'something'
B recieve 'something'
B warns C that someone said 'something'
C is happy

A and C doesn't know each others. They lived happily ever after... in their respective corners.

translation in actionscript:
in the class A:
EventBroadcaster.register(this,EventBroadcastsType.BROADCAST_SOMEONE_SAY_SOMETHING,doSomething);

in the class C:
EventBroadcaster.broadcastEvent(EventBroadcastsType.BROADCAST_SOMEONE_SAY_SOMETHING);

and that's it! Then the class A will call the function doSomething()

you can add parameters as well, if you wish:
ex: A.doSomething(eatYourGreen:Boolean,theAgeOfTheCaptain:int)
and in C:
EventBroadcaster.broadcastEvent(EventBroadcastsType.BROADCAST_SOMEONE_SAY_SOMETHING,true,71);

and A will call doSomething with the parameters.
This is just dead simple class , but dead useful.

Download the class here

REmix

2010-03-09T04:01:00.001-08:00

Just had a great new idea! Don't want to tell much more for now but here is the result!

First results subdivisions + psykopaint

2010-01-16T09:10:00.001-08:00

this on is with manual angles:

this on is with random angles:

I think it produces interesting results! With a good workflow and experiments in different directions it could really be interesting. This is what cubists have been trying to do with painting, here done in only a few moments!

Subdivisions results

2010-01-15T15:00:00.001-08:00

Here are different examples with different angle values:

Polygon subdivision!

2010-01-15T14:28:00.000-08:00

i am quite exited about this one. It looks rather dull for now maybe, but once it will be integrated into psykopaint it will do some crazy shit!!

It was quite tricky to obtain actually.
I wanted to subdivide polygons with a point and an angle. First i thought of voronoi and complex algorythm, but too complex for my little head.
So i went for the simplicity of oop and created a class Polygon in which i would have a method which will return 2 polygons with the point and angle.

- First get the 2 intersection points between the polygons segments and the line that extend the point and the angle.

- Then Compose 2 polygons whose segments are the ones of the parent polygon until it finds the intersection segment and then bypass the previous segments.

Not sure if it is clear, but here is the result:

CLICK inside the red rectangle several time.
It gets very pretty after a moment

Psykopaint update

2009-12-21T08:44:00.001-08:00

been very busy with lots of different stuffs recently.
But now i am back into psykopaint!

Added new functionality called quantification and unlimited output size!
here is a little example which illustrate those 2.
Not online yet, i need to finish lots of other stuffs first and optimise/debug before.

Click to see the fullsize image:

Lewsor microsite

2009-12-18T14:21:00.000-08:00

new experimental website i did for my music project.
vintage computer love inside.
A little equalizer with physic particles triggered via the sound volume.

Have a look:
www.lewsor.com

next step: Geometric tool

2009-09-06T04:30:00.000-07:00

Ok the new psykopaint beta 2 is up and running, recieved lots of good feedback so far.
The 2 main paint and brush tools have been improved, now i want to bring the geometric tool to a new level!

The next step for geometric tool (which cuts image parts into polygons, i already have the delaunay implemented, now i want to implement other algorithms), is to implement different kind of subdivisions. With different polygons, triangles, quadrilateral etc...

I was kind of upset to find that what i wanted was already done and so brilliantly by quasimondo : http://www.flickr.com/photos/quasimondo/3313534845/in/photostream/
But on the other hand now i know that it can lead to amazing results!

We cannot recreate the wheel all the time isn't it! But i'll just try to make it better. And i have my ideas on the subject already ;-)

So i equipped myself with a line intersection algorythm : http://blog.controul.com/2009/05/line-segment-intersection/
And we will see what will come up from this...

new psykopaint version coming soon

2009-08-22T05:47:00.000-07:00

I have been very busy recently,
but still working here and there for psykopaint. I plan to release the next version quite soon, with new features but specially dramatic algorythm improvements!
The painting process just got easier and the result is just way more impressive than before! Here are two example that took me exactly 3.03 minutes for each to do! I made a video of how the portrait image was done, it is like speed painting in real time! I am really exited about this upcoming version, i honestly believe it will blow a few minds!

With this i will add a facebook connect service for the site. Like this i don't have to handle image hosting and registration process and plus it will be easier to spread the word and share with others!

One of The coolest bug i have ever done

2009-07-14T09:27:00.000-07:00

I love Errors!
I was working on a kind of elastic lamp wire stuff...for somebody ;-)) So i decided to Build my own basic physic engine for fun.
And adding the wrong kind of spring give me something really cool:
No wait! Actually it is a game. try to catch the stuff!

[EDIT:]
Here is the original. The slider controls the gravity.
It is actually done with 4 points which have spring constraints between themselves. Add gravity and air friction to it. Then we draw a quadratic bezier curve between those points and this is what we get!
Also there are some hitareas that follow the curves so you can rollover on those and the speed of the cursor is given to the thread.(althought this doesn't work as good as i want yet)

You can drag the bottom stuff, but you can also drag a part of the thread and have fun.

www.psykopaint.com

2009-06-03T10:36:00.000-07:00

by the way my psykopaint is online and is getting more and more attention!

http://www.psykopaint.com/

This is still a very early version by i still recieved lots of visits! And lots of blogs talking about it everywhere.
I have lots of ideas for new brushes, i want to finish all the things around, like gallery, interface etc... and then concentrate on creation and improvement of new brushes.
Have fun

displacement shirt!

2009-06-03T10:32:00.000-07:00

I had to create a little tool for Nike Kit builder site that will be coming soon.
UPDATE: here is the url of the final site:
http://www.nike.com/nikeos/p/nikefootball/en_GB/kitbuilder
(i have been responsible for most front end content on the site but the big essential of the site has been made by 2 other great developers Stuart Lees and Ozay Olkan (dev get so few credits sometimes))

Even if all the features couldn't not be implemented on a production level i wanted to share this with you.
We want to have a custom logo, and player name and number incrusted in the T-shirt.
The previous version of this tool was in papervision using meshes etc... and was very complicated... So i came up with a solution of displacement map.

this example use a normal map calculated of the t shirt, with the shadows we can get a normal map out of it, then displace the content and then add on top of it the destaturated version of the tshirt in multiply blendmode to get the shadows on top of the logo.
If you notice the number bends perfectly with the shapes of the tshirt.

Psykopaint!

2009-05-02T10:00:00.000-07:00

here it is, i found the name for my crazy painting application !!
Psykopaint!

I registered the domain name already, setup my svn, now i need to design a logo and redesign the whole to adapt the new name.

I like it, it sounds crazy, adventurous, spontaneous and cool. That's what i want!
That is a shame psychopaint.com was not available else i would have taken it. Maybe if it gets successful, who knows?!

So far i got 6 brushes.
- Strokes : regular painting with series of strokes, looks like traditional brush painting
- Polygons : throw some triangles,squares,pentagons etc...
- Particles : use particle engine on characters to print, very cool!
- Shapes : simple but effective, draw a shape
- Ribbons : Natzke style! very fun to use
- Geometric : use Delaunay triangles to make geometrical faces, i want to implement Voronoi later, which is the version with polygons instead of triangle basically.

Funny i discover somebody doing exact same thing as one of the brush as a plug in for photoshop :http://www.jonathanpuckey.com/projects/delaunay-raster/
But mine is cooler hehe!

particle painter

2009-03-16T11:25:00.000-07:00

I am moving forward in my photo painting project!
I am very exited about it, i am building now the framework so it will be very easy to add more brushes as time goes by, i am thinking to add brushes of famous painters styles, like pollock brush, van gogh, a ribbon brush called Natzke brush lol etc...
no shame but i want to make something big that will revolutionize digital painting!

Here is a little example with the Particle brush and a flowers background. For now there are no controls but imagine in the future you could change the brush shape, the way particles flies with gravity, wind, rotation, smoothness etc... That will make some really interesting results!

PRESS THE MOUSE :

Prepare for the future of painting!

2009-03-12T11:23:00.000-07:00

I am in a period between 2 contracts, so in order to not get rusted i decided to launch a new project of image painting tool. Basically you take a random picture and you can make an impressionist painting out of it!! So people could upload their picture, or take webcam snapshot, or an image from the web and paint out of it using different kind of brushes.
It is totally different from what photoshop can do, it looks like painterX more exept that the colors are driven by a source image! Like What Natzke does, but with loads of user interface controls and different brushes.
I am very glad of the result! I just don't want to show just yet how the tool is working, just show you some examples:

From this:To this:

spirals

2009-02-09T07:22:00.001-08:00

circle color sampling

2009-02-09T06:59:00.001-08:00

color sampling improved

2009-02-09T06:53:00.000-08:00

new serie of experiments using color sampling, this time we sample multiple points at the same time and assign it to different shapes.

clip snashot pattern featuring minicats during WWII

2008-09-26T09:20:00.000-07:00

digital flower

2008-09-26T02:48:00.000-07:00

Use a custom minimal but handy class To create a Polygon (Which extends Shape)
var newPolygon:Polygon = new Polygon(5,100,0xFFFFFF)
where 5 is the number of sides (here a pentagon) , 100 is the size from the center, and 0xFFFFFF is the color.

Polygon Class

Time O'clock

2008-09-25T07:03:00.001-07:00

parallax strokes

2008-09-25T06:43:00.000-07:00

birth of dimensions

2008-09-25T06:04:00.000-07:00

StageResizeManager class

2008-09-19T08:16:00.000-07:00

here is a class for repositioning assets when we resize the stage.
example:

StageResizeManager.addConstraint(clip,StageResizeManager.TOP,50);
//Will position clip at 50 pixels from the top of the stage

StageResizeManager.addConstraint(clip,StageResizeManager.CENTERX,0);
//Will position clip in the center on the x axis

StageResizeManager.addConstraint(clip,StageResizeManager.CENTERX,-clip.width/2);
//if the anchor point is on the top left of the clip (which is the default in flash) this will center the clip and shift the position of the half of the width of the clip to make it perfectly centered

StageResizeManager.addConstraint(clip,StageResizeManager.PERCENTY,33);
//this will position the clip at 33 percent on the y axis

The availables constraints which are defined as constants of the class are :
RIGHT
LEFT
TOP
BOTTOM
CENTERX
CENTERY
PERCENTX
PERCENTY

Source + example

class

FunkyTransitions class!

2008-09-17T09:27:00.000-07:00

introducing FunkyTransition class which aim is to make cool stuffs very quickly and easily.

note you have to include caurina's transitions to use it.
I didn't bother put a right package name to it as it is quite rough for the moment but you can still use it and modify it the way you like.

var rootTransitions = new FunkyTransitions(target);
rootTransitions.dropItAll();

OR

//to make clips explode with center explosion point the center of the screen
rootTransitions.explodeItAll(stage.stageWidth/2,stage.stageHeight/2);

//then to make clips go back to their original positions with as parameter the kind of caurina tweener method to use , see there : http://code.google.com/p/tweener/
rootTransitions.backInPlace("easeOutCirc")

Send me some examples of stuffs you did with it and i'll be happy too.

Source + example

Splitter class

2008-09-17T07:19:00.000-07:00

I think it is time to share some secret technics.

Here is an example of a custom class Splitter which split a clip into little pieces.
You can then play with all the little pieces, change their position or color or whatever ...
Feel free to use this class the way you want in any projects, just send me a link to the stuffs you did with it and i'll be an happy cat.

How to use it:
var splitter:Splitter = new Splitter(sourceMc, piecesContainer);

var pieces:Array = splitter.split(10);
// where 10 is the number of pieces (make rectangular pieces if the image is a rectangle)
OR

var pieces:Array = splitter.splitBySliceSize(15);
// where 15 is the size in pixels of the pieces (make square pieces)

//then do something with the array ...

source + simple example

visual illusions

2008-08-12T09:05:00.000-07:00

Those images are an illustration of 'artefact' that happens when we get some lines very close from each others.
Check the 'pipes' image closely and then from far distance. How our mind close the gap between the different clips which composes it. See Gestalt psychology theory.

the chinese girl

2008-08-12T06:41:00.000-07:00

Those images where made using color sampling technic (inspired from Natzke) Different variation around the same image.

serie of letters organisations

2008-08-12T06:30:00.000-07:00

first cool shit

2008-08-12T06:09:00.000-07:00

This blog will be about my visual experiments using flash mainly (but maybe photoshop for croping a little :-) )

Using code to do design is mainly because we couldn't achieve the same result with any traditional image editing software.
There are lots of fabulous stuffs made with digital painting in photoshop or with 3d softwares that i just can't match with my shitty skills.
I can do little stuffs with it but my knowledge is more advanced in programming i would say, so i use the tools that i know to produce what i want. (But also tools influences the outcome a lot.)

Programming is just a tool, like brushes are the tools of the painter.
Programming is for me one of the most creative tool to achieve art.
I think there is still a big area to explore with those tools.

But i don't pretend recreating the wheel. I am just a follower, taking inspiration from Eric Natzke, john Maeda, Joshua Davis...
Those are my teachers althought i didn't meet them directly,this is the magic of internet, but that didn't stop me from sucking up their ideas.
I'll just try to do something in the continuity of what they did.
But in a different manner.
With my own sensibility and ideas.

Hope you will appreciate the outcome of my personal enjoyments as much as i enjoyed doing them.