We Are Back : la renaissance de la demoscene
0 likes356 views
Présentation effectuée à la "DEVCON 6" par Christophe Villeneuve sur " We are back : la renaissance de la démoscène". La conférence a pour but de montrer les créations graphiques appelées DEMO (dans les années 80-90) l'utilisation du Framework CODEF dans une page Web avec comme cas Exemple Drupal.
![Devcon #6 –
3D: script (1/
myobjvert=[
{x:-100, y:0, z: 100},
{x: 100, y:0, z: 100},
{x: 100, y:0, z: -100},
{x:-100, y:0, z: -100},
{x:0, y: 200, z: 0},
{x:0, y:-200, z: 0},
];
var myimage=new image('media/prog.jpg');
myobj=[
{p1:1, p2:4, p3:0, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })},
{p1:2, p2:4, p3:1, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })},
{p1:3, p2:4, p3:2, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })},
{p1:0, p2:4, p3:3, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })},
{p1:0, p2:5, p3:1, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,params...},
{p1:1, p2:5, p3:2, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,params...},
{p1:2, p2:5, p3:3, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,params...},
{p1:3, p2:5, p3:0, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,params...},
];](https://image.slidesharecdn.com/we-are-back-180627070524/85/We-Are-Back-la-renaissance-de-la-demoscene-16-320.jpg)
![Devcon #6 –
ScrollText: source (1/2)
var myfont = new image('media/font2.png');
var mycanvas;
var myscrolltext;
var myscrollparam=[
{myvalue: 0, amp: 125, inc:0.2, offset: -0.04},];
function init(){
mycanvas=new canvas(640,480,"main");
myfont.initTile(32,32,32);
myscrolltext = new scrolltext_horizontal();
myscrolltext.scrtxt=
"DEVCON 6 : SPECIAL CODING – LIVECODING ";
myscrolltext.init(mycanvas,myfont,1,myscrollparam);
go();
}](https://image.slidesharecdn.com/we-are-back-180627070524/85/We-Are-Back-la-renaissance-de-la-demoscene-20-320.jpg)
![Devcon #6 –
Les images: source
var my2dstarfield;
var my2dstarsparams = [
{nb: 30, speedy: 0, speedx: 1, params: 0},
{nb: 30, speedy: 0, speedx: 0.8, params: 1},
{nb: 30, speedy: 0, speedx: 0.6, params: 2},
];
var bubble = new Array();
bubble[0] = new image('media/bubble0.png');
bubble[1] = new image('media/bubble1.png');
bubble[2] = new image('media/bubble2.png');
function init() {
mycanvas = new canvas(640, 480, "main");
my2dstarfield = new starfield2D_img(mycanvas,
bubble, my2dstarsparams);
go();
}
function go() {
mycanvas.fill('#000000');
my2dstarfield.draw();
requestAnimFrame(go);
}](https://image.slidesharecdn.com/we-are-back-180627070524/85/We-Are-Back-la-renaissance-de-la-demoscene-23-320.jpg)
We Are Back : la renaissance de la demoscene
- 1. We Are Back Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Devcon #6 – le 25 juin 2018 la renaissance de la démoscène
- 2. Devcon #6 – Court et rapide ● Histoire ● Le réel
- 4. Devcon #6 – A travers les siècles 8 bits 32/64 bits 16 bits Année Ere primaire Age D'or 16 bits Big Bang 8 bits Ere secondaire PC 32 bits Ere tertiaire Nomade / ludos Ere quaternaire Futur Nomade
- 5. Devcon #6 – Big bang chez les 8 bits Barbitoric Defence Force Oric - 2003 Batman Forever Forever Amstrad CPC - 2011 #2600 Noice Atari VCS - 2003
- 6. Devcon #6 – Ere primaire des 16 bits Arte Sanity (Amiga) Fantasia Dune & Sector One (Atari)
- 7. Devcon #6 – Ere secondaire 32 bits Rupture ASD Windows - 2009
- 8. Devcon #6 – Ere tertiaire par les nomades Retrostation Sector One & Dune Playstation 3 - 2010
- 9. Devcon #6 – Ere quaternaire Les Internets / Le Web / l'AR / la VR / la XR...
- 10. Le réel
- 11. Devcon #6 – We Are Back url : http://wab.com
- 12. Devcon #6 – Codef ● Canvas Oldshool Demo Effect Framework ● © Antoine “NONAMENO” Santo ● Framework Open Source ● Réaliser des animations facilement ● Spécifique animation ● Plateforme de réalisation – WAB (We Are Back)
- 13. Devcon #6 – Effets ● Affiche image ● Scroll (text / image) ● Déformation ● Objet 3D ● ...
- 14. Devcon #6 – Les bases <script src=/slideshow/we-are-back-la-renaissance-de-la-demoscene/103244084/"codef/codef_core.js"></script> <script> // // Déclaration variable function init() { mycanvas=new canvas(800,600,"main"); go(); } function go(){ mycanvas.fill('#000000'); myimage.draw(mycanvas,myimageX,200); // Votre code requestAnimFrame( go ); } </script>
- 15. Devcon #6 – 3D 2
- 16. Devcon #6 – 3D: script (1/ myobjvert=[ {x:-100, y:0, z: 100}, {x: 100, y:0, z: 100}, {x: 100, y:0, z: -100}, {x:-100, y:0, z: -100}, {x:0, y: 200, z: 0}, {x:0, y:-200, z: 0}, ]; var myimage=new image('media/prog.jpg'); myobj=[ {p1:1, p2:4, p3:0, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:2, p2:4, p3:1, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:3, p2:4, p3:2, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:0, p2:4, p3:3, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:0, p2:5, p3:1, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,params...}, {p1:1, p2:5, p3:2, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,params...}, {p1:2, p2:5, p3:3, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,params...}, {p1:3, p2:5, p3:0, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,params...}, ];
- 17. Devcon #6 – 3D: script (2/ function go(){ mycanvas.fill('#000000'); my3d.group.rotation.x+=0.01; my3d.group.rotation.y+=0.03; my3d.group.rotation.z+=0.06; my3d.draw(); requestAnimFrame( go ); }
- 18. Devcon #6 – Cas pratique ● Insérer une animation (démo) avec un bandeau dans une page web ● Message dynamique avec le CMS Drupal 2
- 19. Devcon #6 – Etape 1: ScrollText 4
- 20. Devcon #6 – ScrollText: source (1/2) var myfont = new image('media/font2.png'); var mycanvas; var myscrolltext; var myscrollparam=[ {myvalue: 0, amp: 125, inc:0.2, offset: -0.04},]; function init(){ mycanvas=new canvas(640,480,"main"); myfont.initTile(32,32,32); myscrolltext = new scrolltext_horizontal(); myscrolltext.scrtxt= "DEVCON 6 : SPECIAL CODING – LIVECODING "; myscrolltext.init(mycanvas,myfont,1,myscrollparam); go(); }
- 21. Devcon #6 – ScrollText: source (2/2) function go(){ mycanvas.fill('#FFFFFF'); myscrolltext.draw(240-16); requestAnimFrame( go ); }
- 22. Devcon #6 – Etape 2: Les images Champs étoiles (Starfields)
- 23. Devcon #6 – Les images: source var my2dstarfield; var my2dstarsparams = [ {nb: 30, speedy: 0, speedx: 1, params: 0}, {nb: 30, speedy: 0, speedx: 0.8, params: 1}, {nb: 30, speedy: 0, speedx: 0.6, params: 2}, ]; var bubble = new Array(); bubble[0] = new image('media/bubble0.png'); bubble[1] = new image('media/bubble1.png'); bubble[2] = new image('media/bubble2.png'); function init() { mycanvas = new canvas(640, 480, "main"); my2dstarfield = new starfield2D_img(mycanvas, bubble, my2dstarsparams); go(); } function go() { mycanvas.fill('#000000'); my2dstarfield.draw(); requestAnimFrame(go); }
- 24. Devcon #6 – Etape 3: Musique <script src=/slideshow/we-are-back-la-renaissance-de-la-demoscene/103244084/"codef/codef_music.js"></script> <script> var player = new music("MK"); player.LoadAndRun('son.mod'); </script>
- 26. Devcon #6 – Source : https://github.com/hellosct1/wab-demo
- 27. Devcon #6 – Résultat: Animation dans une page Web
- 28. Devcon #6 – Ere ... State of the Art Le demoscener redeviendrai Ungerground Le demoscener devient ubiquitaire Le demoscener est un artiste reconnu Le demoscener est indispensable à l'homme du futur
- 29. Devcon #6 – Liens ● La démoscène: Pouet – https://www.pouet.net ● Site Officiel CODEF – http://codef.santo.fr/ ● Code source – https://github.com/N0NameN0/CODEF ● Production – http://wab.com/
- 30. Devcon #6 – Qui??? Christophe Villeneuve mozilla reps - firefox os - B2GOS - ausy - afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – Libre@toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – elephpant - owasp -security
- 31. Devcon #6 – Merci Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr