dispatch snippet chapter contents into different existing chapters where it make more sense, and remove it.

Author: rvillemeur

Chapters/Attic/graphicsfoundation/bitmapFormDisplay.md

@@ -62,6 +62,41 @@ pict colors: map.
 pict initFromArray: bitmap.
 ```
 
+### transform a Form into ByteString and vice versa
+
+Starting from a ByteString (self), we can have a Form using this code:
+
+```st
+Form fromBinaryStream:
+			  self base64Decoded asByteArray readStream
+```
+
+and starting from a Form, we can translate it into a ByteString using this code: 
+
+```st
+byteString := (ByteArray streamContents: [ :out |
+	PNGReadWriter putForm: form onStream: out ]) base64Encoded.
+```
+
+It seems that doing the translation ByteString -> Form -> ByteString doesn't give the same ByteString between input/output but Form -> ByteString -> Form seems to work correctly (except maybe small changes invisible to the human eye).
+
+Also here we use `PNGReadWriter` but other subclasses of `ImageReadWriter` can be used depending on the format you want to save
+
+try this:
+
+```st
+String streamContents: [:s | self storeOn: s]
+```
+
+```st
+OpalCompiler new
+	source: self;
+	evaluate 
+```
+```st
+Object readFrom: byteString
+```
+
 ### Fun script
 
 We should revise it. 

Chapters/bloc/animation.md

@@ -247,6 +247,27 @@ BlTransformAnimation new
 	easing: BlEasing bounceOut.
 ```
 
+#### To go further with animations
+
+The most common animations are translations and rotations but, whenever we translate or rotate an object, its position doesn't change even if it does visually.
+
+But this doesn't mean that nothing changes, in fact the origin of the "transform axis" moves with the transformation, meaning that if we apply a horizontal translation to an element that was previously rotated for example 90 degrees, then the element will visually translate vertically like in this example.
+
+```st
+elt := BlElement new background: Color purple.
+
+t1 := (BlTransformAnimation translate: 150@0) duration: 2 seconds. 
+t2 := (BlTransformAnimation translate: 150@0) duration: 2 seconds.
+rotateAnimation := (BlTransformAnimation rotate: 90) duration: 2 seconds.
+
+elt addAnimation: (t1 onFinishedDo: [ elt addAnimation: (rotateAnimation onFinishedDo: [ elt addAnimation: (t2 onFinishedDo: [ elt position inspect ]) ]) ]).
+
+elt openInSpace.
+```
+
+And you will see that the position of the element hasn't changed and still is 0@0, but you can ask for `BlElement>>transformedBounds` to have the bounds of your element after its transformations if you need to exploit this visual position.
+
+
 #### Transform animation rotation pitfall
 
 A transform rotation has some peculiarities its worth highlighting.
@@ -354,4 +375,71 @@ BlNumberTransition new
 			ifFalse: [ anElement background: Color blue ] ].
 ```
 
+### Example -  Explosion animation
+
+We create an explosion animation by creating some BlElements and making them translate along a rotating line starting from a center point
+
+Here we also add a rotation on the BlElements themselves with random color
+
+```smalltalk
+space := BlSpace new.
+explosionCenter := 400 @ 300.
+
+0 to: 359 by: 12 do: [ :angle |
+    | anElement relativeFinalPosition |
+    relativeFinalPosition := 0@400 rotateBy: angle degreesToRadians about: 0@0.
+
+    anElement := BlElement new
+        background: Color random;
+        position: explosionCenter;
+        addAnimation: (BlTransformAnimation new
+            duration: 1200 milliSeconds;
+            transformDo: [ :t |
+                t translateBy: relativeFinalPosition.
+                t rotateBy: 180 ];
+            onFinishedDo: [ anElement removeFromParent ];
+          yourself);
+        yourself.
+
+    space root addChild: anElement ].
+space show.
+
+```
+
+### Enqueue tasks 
+
+This snippet is an example of how to enqueue tasks and delay the time of the next instruction. This is also an example of a circular animation using an offset on a shadow effect
+
+```smalltalk
+a := BlElement new
+    position: 50 @ 100;
+    size: 100 asPoint;
+    background: Color green;
+    yourself.
+
+a addAnimation: 
+    (BlNumberTransition new
+        from: 0;
+        to: Float twoPi;
+        duration: 5 seconds;
+        onStepDo: [ :t |
+            | offset |
+            offset := (t cos * 50) @ (t sin * 50).
+            a effect:
+                (BlSimpleShadowEffect
+                    color: Color blue
+                    offset: offset) ];
+        onFinishedDo: [
+                | removeAction |
+                removeAction :=
+                    BlDelayedTaskAction new
+                        delay: 2 seconds;
+                        action: [ a removeFromParent ];
+                        yourself.
+                a enqueueTask: removeAction ];
+        yourself).
+
+a openInSpace
+```
+
 ### Conclusion (missing)

Chapters/bloc/blocArchitecture.md

@@ -19,4 +19,126 @@ The phases are:
 
 ### Space explanation
 
+BlUniverse contain multiple BlSpace.
+We call `BlElement openInNewSpace`
+This will open a new OS Windows, with our scene
+
+BlSpace is your main entry point to your application. It'll connect you to 
+OS window, manage which element needs drawing and the rendering of your scene.
+Rendering is done by a dedicated render class, BARenderer by default.
+
+Host has their own pulse loop which are then transmitted to their BlSpace
+My loop follows the next rules:
+
+•	The #pulsePeriod duration is the minimum amount of time between two subsequent sends of #pulse.
+•	If a pulse took more time than #pulsePeriod, then the next pulse may either send the next #pulse immediately, or do a small wait before if another process with lower priority is suspended (and may be starving).
+
+The opened spaces listen the pulse to be synchronized and to update their state when it is needed.
+
+
+
+Each BlSpace is hosted in  a specific BlHost environment.
+All these BlHost are then accessible through BlUniverse.
+
+ As of this writing, it can be Morphic or an OS Window,
+using OSWindow and SDL2 backend. 
+
+
+
+We begin with `BlElement >> openInNewSpace`
+or `BlElement >> openInSpace`  which are equivalent.
+
+```smalltalk
+BlElement >> openInNewSpace
+	"Add self to a new BlSpace and show it. Answer such space."
+	
+	| aSpace |
+	aSpace := BlSpace new.
+	aSpace root addChild: self.
+	aSpace show.
+	^ aSpace
+```
+
+### Space extent following its child extent 
+
+```smalltalk
+space := BlSpace new.
+space show.
+
+rootUniqueChild := BlElement new
+	geometry: BlEllipseGeometry new;
+	background: Color blue;
+	"Transfer the new extent to the space"
+	addEventHandlerOn: BlElementExtentChangedEvent
+		do: [ :evt | space extent: evt target extent ]; 
+	yourself.
+space addChild: rootUniqueChild.
+
+"Gradually expand element in a background process"
+[ 	50 to: 400 by: 50 do: [ :sideLength |
+		rootUniqueChild size: (sideLength*2) @ sideLength.
+		500 milliSeconds wait ].
+	space close ] fork
+```
+
+Here, space extent is redefined whenever the extent of its child changes using a basic eventHandler
+
+### Center a space
+
+```smalltalk
+space := BlSpace new.
+space root background: Color lightGreen.
+
+space enqueueTask:
+   (BlTaskAction new
+      action: [ space center ];
+      yourself).
+
+space show
+```
+
+Spaces are by default opened with their origin on the top left or the screen, but we can change this by sending the message `BlSpace>>center`.
+However you might wonder why in this example we send it as a task that we enqueue, the reason behind it is that (apparently) the space needs to be rendered to be centered and executing something like the following snippet doesn't work
+
+```st
+space show; center
+```
+
+### Root Element is special
+
+```smalltalk
+a := BlElement new.
+aSpace := BlSpace new.
+aSpace root addChild: a.
+aSpace root background: Color transparent.
+aSpace extent: 200 asPoint; show.
+	
+wheel := Color wheel: 20.
+[ 	wheel do: [ :eachColor |
+		0.25 seconds wait.
+		a position: (a position + 5 asPoint).
+		a background: eachColor ] ] fork
+```
+
+When you set Color transparent as root's background, nothing clears the space
+
+```smalltalk
+a := BlElement new.
+aSpace := BlSpace new.
+aSpace root addChild: a.
+aSpace root background: Color blue.
+aSpace root size: 100 asPoint.
+aSpace extent: 150 asPoint; show.
+	
+wheel := Color wheel: 20.
+[ 	wheel do: [ :eachColor |
+		0.25 seconds wait.
+		a position: (a position + 5 asPoint).
+		a background: eachColor ] ] fork.
+```
+
+"When you set an exact root size, only a portion of the space might be cleared between frames"
+
+[Enzo] I keep this note here but I don't see any changes personally
+
 ###