Le NewSchool en web

Le 10 juin 2016Very Important Party (VIP)
Le NewSchool en Web
Christophe Villeneuve
@hellosct1

Sommaire
● Approche
● Mutation
● Le NewSchool : CODEF
●

Approche

OldSchool

CrackTro

Mutation

La mutation : Le Web
● HTML / HTML 5
● Javascript
● Flash
● CSS
● Canvas / WebGL

NewSchool

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)

We Are Back
url : http://wab.com

Animation Simple
Script : tutorials05_core.html

Code source
function go(){
mycanvas.fill('#000000');
myimage.draw(mycanvas,myimageX,200);
myimageX+=myimageMove;
if(myimageX>640-myimage.img.width)
myimageMove=-1;
if(myimageX<0)
myimageMove=1;
requestAnimFrame( go );
}

3d
Script : tutorials67_3d.html

Code
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('vip2016.png');
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,
{p1:3, p2:4, p3:2, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
{p1:0, p2:4, p3:3, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
{p1:0, p2:5, p3:1, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
{p1:1, p2:5, p3:2, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
{p1:2, p2:5, p3:3, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
{p1:3, p2:5, p3:0, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1,
];

Code (2/2)
function go(){
my3d.group.rotation.x+=0.01;
my3d.group.rotation.y+=0.03;
my3d.group.rotation.z+=0.06;
my3d.draw();
}

FAST COMPO

Insertion en HTML
<!DOCTYPE HTML>
<html>
<head>
</head>
<body onLoad="init();">
<center>
<div id="main"></div>
</center>
</body>
</html>
Emplacement de votre code JS <script></script>

Code

Coder (1/3)
● Format compatible
– HTML
– JS
– CSS

Coder (2/3)
<script>
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="VERY IMPORTANT PARTY 2016 ";
myscrolltext.init(mycanvas,myfont,1,myscrollparam);
go();
}

Coder (3/3)
function go(){
myscrolltext.draw(240-16);
}
</script>

Résultat
Script : tutorials31_scrolltext.html

Graphisme

Afficher un Graph (1/2)
– JPEG
– PNG
– GIF

Afficher un Graph (2/2)
<script src="codef/codef_core.js"></script>
<script>
var myimage=new image('vip2016.png');
var mycanvas;
function init() {
mycanvas=new canvas(640,480,"main");
myimage.setmidhandle();
go();
}
function go() {
myimage.draw(mycanvas,150,250);
}
</script>

Résultat
Script : tutorials20_fx.html

Musique

Jouer une musique (1/2)
– YM
– MOD
– XM

Jouer une musique
<script src="
http://codef.santo.fr/codef/codef_music.js">
</script>
<script>
var player = new music("MK");
//player.stereo(true);
player.LoadAndRun('../media/hmd3.mod');
</script>

Résultat
Script : tutorials81_music.html

Qui ???
Christophe
Villeneuve
mozilla reps - firefox os - afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – Libre@toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – ausy - elephpant

Liens
● Site Officiel
– http://codef.santo.fr/
● Code source
– https://github.com/N0NameN0/CODEF
● Production
– http://wab.com/

Le NewSchool en web

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Le NewSchool en web

Similar to Le NewSchool en web (11)

More from Christophe Villeneuve

More from Christophe Villeneuve (20)

Le NewSchool en web