Utiliser Sage dans une page web

Utiliser Sage dans une page web

14 octobre 2011 | Mise à jour: 07 mai 2012 | Catégories: web, sage | View Comments

Lorsque j'ai participé aux Sage Days 31 à Seattle en juin dernier (conférence dont l'objectif était de développer le Sage Notebook), j'ai rencontré Jason Grout (Drake University, Iowa). Le projet de Jason était de parvenir à utiliser Sage directement dans une page web (voir la discussion public single cell sur sage-devel pour en savoir plus).

Son projet est toujours en cours, mais il semble déjà être fonctionnel à en juger la page web de Rob Beezer (University of Puget Sound, Washington) qui illustre un exemple en faisant des calculs sur le graphe de Petersen et le calcul d'un factoriel.

Essayons d'immiter ce qu'il a fait! Dans la cellule qui suit, on définit une fonction de deux variables \(f(x,y) = \frac{xy}{e^{x^2 + y^2}}\) et on affiche ses lignes de niveau. Cliquez sur le bouton Calculer pour les afficher. Vous pouvez aussi changer la fonction et réévaluer la cellule.

Les graphes 3D fonctionnent aussi. Par exemple, ajoutez la ligne suivante dans la cellule et cliquez sur Calculer:

plot3d(f, (x,-4,4), (y,-4,4))

Vous obtiendrez le graphe 3D de la surface \(z = f(x,y)\).

Comment faire ?

Pour rendre ceci possible, il faut d'abord faire appel au serveur Single Cell logé à l'adresse http://aleph.sagemath.org. Cela se fait avec le code suivant:

<!-- Sage Free Trial  -->
<script type="text/javascript" src="http://aleph.sagemath.org/static/jquery.min.js"></script>
<script type="text/javascript" src="http://aleph.sagemath.org/embedded_sagecell.js"></script>
<script>
$(function() {
var makecells = function() {
singlecell.makeSagecell({
inputLocation: '#first_cell',
editor: 'codemirror',
replaceOutput: true,
hide: ['editorToggle', 'sageMode', 'computationID', 'messages', 'sessionTitle', 'done', 'sessionFilesTitle', 'sessionFiles',  'files', 'sageMode'],
evalButtonText: 'Calculer'
});
}
sagecell.init(makecells);
})
</script>

Et un peu plus bas dans la même page web, on écrit le code suivant, ce qui crée la cellule ci-haut:

<!-- First cell -->
<div id="first_cell"><script type="text/code">f(x,y) = x * y / exp(x^2 + y^2)
G = implicit_plot(f(x,y) , (x,-3,3), (y,-3,3), contours=30, cmap='hsv')
G.show(aspect_ratio=1)
</script></div>
blog comments powered by Disqus