Sites Web
Code source de créations PHP
Générateur de vignettes à la vollée :
>><?
/********************************************************************************/
/* générateur automatique de vignettes en ligne */
/* gère les formats JPEG, PNG et GIF, préserve le cannal alpha des PNG */
/* */
/* copyright Daniel MIHALCEA (c) 2011 http://mihalcea.fr/ */
/* */
/* @param {File} f: fichier pointant vers l'image source ou URL */
/* @param {Number} [h=128]: taille de la vignette, 128 pixels par défaut */
/* @param {Bool} [r=0]: si les vignettes doivent êtres carrées ou non */
/* @returns {Image} vignette de l'image */
/* */
/********************************************************************************/
$f = ( (isset($_GET['f'])) ? $_GET['f'] : '' ); // on récupère le nom du fichier
$h = (int) ( (isset($_GET['h'])) ? $_GET['h'] : '128' ); // on récupère la hauteur
$r = (bool) ( (isset($_GET['r'])) ? $_GET['r'] : '0' ); // doit-on générer une vignette carrée ?
if ($f{0} == '/') $f = $_SERVER['DOCUMENT_ROOT'].$f; // si le chemin est lié à la racine, on prends la racine du serveur
if (!is_numeric ($h) || $h<1) $h = 128; // si la dimention est incorrecte on prends la dimention par défaut
function error($txt) {
global $h, $im1;
$im1 = ImageCreateTrueColor($h, $h);
$blanc = imagecolorallocate($im1, 255, 255, 255);
imagestring($im1, 2, 2, 0, $txt, $blanc);
finalise();
exit;
}
function finalise() {
global $ext, $im1;
switch ($ext) { // on génère l'image finale selon le format
case 'jpg' :
case 'jpeg' :
imagejpeg($im1);
break;
case 'gif' :
imagegif($im1);
break;
case 'png' :
default :
imagepng($im1);
break;
}
imagedestroy($im1);
}
if (!is_file($f) && strtolower(substr($f, 0, 7)!='http://')) { // si le fichier n'existe pas, on affiche un message et on quitte
header('Content-Type: image/png');
error('fichier introuvable');
}
$ext = strtolower(substr($f, strrpos($f, '.') + 1)); // on récupère l'extenssion du fichier
switch ($ext) { // on envoie l'entête correspondant et on récupère l'image
case 'jpg' :
case 'jpeg' :
header('Content-Type: image/jpeg');
$im0 = @imagecreatefromjpeg($f);
break;
case 'gif' :
header('Content-Type: image/gif');
$im0 = @imagecreatefromgif($f);
break;
case 'png' :
header('Content-Type: image/png');
$im0 = @imagecreatefrompng($f);
break;
default : // le type de l'image n'est pas supporté
header('Content-Type: image/png');
$im0 = ImageCreateTrueColor($h, $h);
$blanc = imagecolorallocate($im0, 255, 255, 255);
$r = 'fichier non supporté';
imagestring($im0, 2, 2, 0, $r, $blanc);
imagepng($im0);
exit;
}
if (!$im0) {
error('erreur d'access');
}
// on récupère les dimensions de l'image originale
$h0 = ImageSY($im0);
$l0 = ImageSX($im0);
if ($r == '1') { // si les vignettes sont carrées
$im1 = ImageCreateTrueColor($h, $h);
ImageAlphaBlending($im1, false);
imagesavealpha($im1, true);
if ($h0 < $l0) { // si l'image est en mode paysage
$h1 = $h;
$l1 = floor($l0/$h0*$h1);
imagecopyresampled ($im1, $im0, ($h1-$l1)/2, 0, 0, 0, $l1, $h1, $l0, $h0);
} else { // ou portrait
$l1 = $h;
$h1 = floor($h0/$l0*$l1);
imagecopyresampled ($im1, $im0, 0, ($l1-$h1)/2, 0, 0, $l1, $h1, $l0, $h0);
}
} else { // ou sinon on respecte les proportions d'origine
if ($h0 > $l0) { // si l'image est en mode portrait
$h1 = $h;
$l1 = floor($l0/$h0*$h1);
} else { // ou paysage
$l1 = $h;
$h1 = floor($h0/$l0*$l1);
}
$im1 = ImageCreateTrueColor($l1, $h1);
ImageAlphaBlending($im1, false);
imagesavealpha($im1, true);
imagecopyresampled ($im1, $im0, 0, 0, 0, 0, $l1, $h1, $l0, $h0);
}
imagedestroy($im0);
finalise();
?>
Générateur de fractale (ensemble de Mandelbrot) :
>> -
exemple 1 -
exemple 2<?
/********************************************************************************/
/* générateur de fractale, ensemble de Mandelbrot */
/* */
/* copyright Daniel MIHALCEA (c) 2011 http://mihalcea.fr/ */
/* */
/* @param {Number} f: fichier pointant vers l'image source ou URL */
/* @param {Number} h: hauteur en pixels de l'image générée */
/* @param {Number} w: largeur en pixels de l'image générée */
/* @param {Number} cx: coordonnée x du centre de l'image */
/* @param {Number} cy: coordonnée y du centre de l'image */
/* @param {Number} s: facteur de zoom */
/* @returns {Image} ensemble de Mandelbrot */
/* */
/********************************************************************************/
header("Content-Type: image/png");
// header("Content-Type: text/plain"); echo " ";
function microtime_float() {
return array_sum(explode(' ', microtime()));
}
$temps_debut = microtime_float(); // début chrono
$height = $_GET['h'];
$width = $_GET['w'];
$cx = $_GET['cx'];
$cy = $_GET['cy'];
$scale = $_GET['s'];
$limit = 4;
$nmax = 128;
if ($height == '') $height = 200;
if ($width == '') $width = 320;
if ($cx == '') $cx = -0.5;
if ($cy == '') $cy = 0;
if ($scale == '') $scale = 0.01;
$h2 = $height/2;
$w2 = $width/2;
$im = ImageCreateTrueColor($width, $height);
for ($x=0; $x<$width; $x++) {
$ax = $cx + ($x-$w2)*$scale;
for ($y=0; $y<$height; $y++) {
$ay = $cy + ($y-$h2)*$scale;
$a1 = $ax;
$b1 = $ay;
$lp = 0;
while($lp<$nmax) {
$aa = $a1*$a1;
$bb = $b1*$b1;
if ($aa+$bb>$limit) {break;}
$a2 = $aa-$bb+$ax;
$b2 = 2*$a1*$b1+$ay;
$a1 = $a2;
$b1 = $b2;
$lp++;
}
if ($lp === $nmax) {
$r = 0;
$v = 0;
$b = 0;
} else {
$r = floor(128*log($lp, 10));
$v = $lp*2;
$b = $lp;
}
$c = imagecolorallocate ($im, $r, $v, $b);
imagesetpixel ($im, $x, $y, $c);
}
}
$blanc = imagecolorallocate($im, 255, 255, 255);
imagestring($im, 2, $width - 150, $height - 16, 'Daniel Mihalcea (c) 2010', $blanc);
$temps_fin = microtime_float(); // fin chrono
imagestring($im, 2, 0, 0, 'calcul : '.round($temps_fin - $temps_debut, 3).'s', $blanc);
imagepng($im);
imagedestroy($im);
?>
Générateur de cartes de visites élécrtoniques vCard (.vcf) :
>> -
voir<?
function addimage ($photo, $h) {
list ($h0, $l0, $type) = getimagesize($photo);
switch($type) {
case 1: $im0 = ImageCreateFromgif($photo); break;
case 2: $im0 = ImageCreateFromjpeg($photo); break;
case 3: $im0 = ImageCreateFrompng($photo); break;
default: return; break;
}
if ($h0 > $l0) {
$h1 = $h;
$l1 = floor($l0/$h0*$h1);
} else {
$l1 = $h;
$h1 = floor($h0/$l0*$l1);
}
$im1 = ImageCreateTrueColor($l1, $h1);
imagecopyresampled ($im1, $im0, 0, 0, 0, 0, $l1, $h1, $l0, $h0);
imagedestroy ($im0);
ob_start();
switch($type) {
case 1: imagegif($im1, null, 75); break;
case 2: imagejpeg($im1, null, 75); break;
case 3: imagepng($im1, null, 75); break;
default: echo ''; break;
}
$data = ob_get_contents();
ob_end_clean();
imagedestroy ($im1);
switch($type) {
case 1: $p .= "PHOTO;ENCODING=BASE64;TYPE=GIF:"; break;
case 2: $p .= "PHOTO;ENCODING=BASE64;TYPE=JPEG:"; break;
case 3: $p .= "PHOTO;ENCODING=BASE64;TYPE=PNG:"; break;
}
$j = strlen($p);
$vcard = $p;
$image = base64_encode($data)."\n";
for ($i=0; $i<strlen($image); $i++) {
if(($i+$j-1)%75==0)
$vcard.="\r\n ".$image[$i];
else
$vcard.=$image[$i];
}
return $vcard;
}
$nom = $_POST['nom'];
if ($nom != "")
{
$count++;
$filename = "$nom.vcf";
$vcard = "";
$prenom = $_POST['prenom'];
$titre = $_POST['titre'];
$org = $_POST['org'];
$cell = $_POST['cell'];
$home = $_POST['home'];
$work = $_POST['work'];
$fax = $_POST['fax'];
$rue = $_POST['rue'];
$ville = $_POST['ville'];
$region = $_POST['region'];
$zip = $_POST['zip'];
$pays = $_POST['pays'];
$mail = $_POST['mail'];
$url = $_POST['url'];
$photo = $_FILES['photo']['tmp_name'];
//$ = $_POST[''];
$nom = strtoupper($nom[0]).strtolower(substr($nom, 1, strlen($nom)-1));
$prenom = strtoupper($prenom[0]).strtolower(substr($prenom, 1, strlen($prenom)-1));
$vcard = "BEGIN:VCARD\n";
$vcard .= "VERSION:3.0\n";
$vcard .= "N:$nom;$prenom;;$titre;\n";
$vcard .= "FN:$prenom $nom\n";
if ($org != "") {$vcard .= "ORG:$org\n";}
if ($cell != "") {$vcard .= "TEL;TYPE=cell:$cell\n";}
if ($home != "") {$vcard .= "TEL;TYPE=home:$home\n";}
if ($work != "") {$vcard .= "TEL;TYPE=work:$work\n";}
if ($fax != "") {$vcard .= "TEL;TYPE=fax:$fax\n";}
if ($rue != "") {$vcard .= "ADR;TYPE=dom,home,postal:;;$rue;$ville;$regions;$zip;$pays\n";}
if ($mail != "") {$vcard .= "EMAIL;TYPE=internet,pref:$mail\n";}
if ($url != "") {$vcard .= "URL:$url\n";}
if ($photo != "") {$vcard .= addimage($photo, 64);}
//if ($ != "") {$vcard .= "\n";}
$vcard .= "NOTE:Generated with vCard online generator by Daniel Mihalcea.\n";
$vcard .= "END:VCARD\n";
Header("Content-Disposition: attachment; filename=$filename");
Header("Content-Length: ".strlen($vcard));
Header("Connection: close");
Header("Content-Type: text/x-vCard; charset=utf-8; name=$filename");
//echo "<pre>";
echo $vcard;
} else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Générateur vCard enLigne</title>
<link href="vcard.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
div#page {
width: 120mm;
}
div#gauche {
float: left;
width: 50mm;
}
div#centre {
float: left;
width: 0mm;
}
div#droite {
float: left;
width: 50mm;
}
div#info {
float: left;
width: 64px;
height: 64px;
}
div#id1 {
float: right;
height: 64px;
width: 64px;
text-align: right;
}
div#id2 {
height: 64px;
}
div#soc1 {
height: 24px;
width: auto;
text-align: right;
}
div#soc2 {
height: 24px;
}
div#tel1 {
height: 96px;
width: auto;
text-align: right;
}
div#tel2 {
height: 96px;
}
div#adr1 {
height: 128px;
width: auto;
text-align: right;
}
div#adr2 {
height: 128px;
}
div#mel1 {
height: 24px;
width: auto;
text-align: right;
}
div#mel2 {
height: 24px;
}
div#web1 {
height: 24px;
width: auto;
text-align: right;
}
div#web2 {
height: 24px;
}
div#pic1 {
height: 24px;
width: auto;
text-align: right;
}
div#pic2 {
height: 24px;
}
div#gnr1 {
height: 24px;
width: auto;
text-align: right;
}
div#gnr2 {
height: 24px;
}
div#copy {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-align: center;
}
h1 {
margin: 8px;
text-align: center;
}
input.champ {
font-family: Arial, Helvetica, sans-serif;
width: 128px;
uheight: 14px;
}
input:focus {
background-color: #0CF;
}
.descr {
width: auto;
text-align: justify;
}
div {
uborder: dotted;
border-width: thin;
upadding: 0px;
margin: 2px;
}
-->
</style>
</head>
<body>
<div id="page">
<h1>Générateur vCard en Ligne</h1>
<div class="descr">
Remplissez le formulaire pour générer automatiquement une carte de visite au format vCard(.VCF), aucun champ à part le nom n'est obligatoire. Vous pouvez ajouter une photo JPEG, GIF ou PNG elle sera automatiquement redimensionnée.
</div>
<form method="post" enctype="multipart/form-data" action="">
<div id="gauche">
<div id="info">
<input type="radio" name="titre" id="mr" value="Mr"/><label for="mr">Mr</label><br/>
<input type="radio" name="titre" id="mme" value="Mme"/><label for="mme">Mme</label><br/>
<input type="radio" name="titre" id="mlle" value="Mlle"/><label for="mlle">Mlle</label><br/>
</div>
<div id="id1">
Nom<br/>
Prénom<br/>
</div>
<div style="clear:both;"></div>
<div id="soc1">
Société
</div>
<div id="tel1">
Téléphone<br/>
Portable<br/>
Domicile<br/>
Travail<br/>
Fax
</div>
<div id="adr1">
Adresse<br/>
rue<br/>
ville<br/>
région<br/>
code postal<br/>
pays<br/>
</div>
<div id="mel1">
e-mail
</div>
<div id="web1">
web
</div>
<div id="pic1">
photo
</div>
<div id="gnr1">
</div>
</div>
<div id="centre">
<img src="vl.png" width="2" height="430">
</div>
<div id="droite">
<div id="id2">
<input type="text" name="nom" id="nom" class="champ"/><br/>
<input type="text" name="prenom" id="prenom" class="champ"/><br/>
</div>
<div></div>
<div id="soc2">
<input type="text" name="org" class="champ"/>
</div>
<div id="tel2">
<br/>
<input type="text" name="cell" class="champ"/><br/>
<input type="text" name="home" class="champ"/><br/>
<input type="text" name="work" class="champ"/><br/>
<input type="text" name="fax" class="champ"/>
</div>
<div id="adr2">
<br/>
<input type="text" name="rue" class="champ"/><br/>
<input type="text" name="ville" class="champ"/><br/>
<input type="text" name="region" class="champ"/><br/>
<input type="text" name="zip" class="champ"/><br/>
<input type="text" name="pays" class="champ"/><br/>
</div>
<div id="mel2">
<input type="text" name="mail" class="champ"/>
</div>
<div id="web2">
<input type="text" name="url" class="champ"/>
</div>
<div id="pic2">
<input type="file" name="photo" class="champ" id="photo" />
</div>
<div id="gnr2">
<input type="submit" value="Génerer"/>
</div>
</div>
<div style="clear:both;"></div>
</form>
<div id="copy">
vCard online generator - © 2010 - Daniel Mihalcea
</div>
</div>
</body>
</html>
<?
}
?>
Scripts divers
Générateur de fractales en JavaScript/HTML5 (Mandelbrot, Julia, Koch, Sierpiński, Heighway) avec exploration à la souris + molette :
>> -
voir<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fractales JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{margin:0px;}
label{display:block;float:left;margin-right:16px;text-align:right;width:100px;}
input{width:100px;}
#canvas{ubackground:#000;}
#param{position:absolute;top:0px;left:1000px;width:230px;padding:10px;text-align:justify;}
#calc{position:fixed;top:0px;left:0px;width:100%;height:100%;background:rgba(255,255,255,0.5);udisplay:none;}
#calc2{position:absolute;width:200px;height:20px;left:50%;margin-left:-100px;top:50%;margin-top:-10px;}
</style>
<meta property="og:title" content="Fractales JavaScript" />
<meta property="og:url" content="http://mihalcea.fr/src/mandelbrot.htm" />
<meta property="og:image" content="http://mihalcea.fr/src/mandel.png" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Générateur de fractales écrit en JavaScript & HTML5 par Daniel MIHALCEA." />
</head>
<body>
<canvas id="canvas" width="1000" height="800"></canvas>
<form id="param">
<label for="formiter">Itérations</label><input id="formiter" type="text" value="100" onchange="nmax=parseInt(this.value);" /><br />
Le nombre d'itérations est volontairement bridé pour certaines fractales (Koch1 : 9, Koch2 : 5, Sierpiński : 12, Heighway : 18).
<hr />
fenêtre<br />
<label for="formxmin">xmin</label><input id="formxmin" type="text" value="-2" onchange="xmin=parseInt(this.value);" /><br />
<label for="formxmax">xmax</label><input id="formxmax" type="text" value="1" onchange="xmax=parseInt(this.value);" /><br />
<label for="formymin">ymin</label><input id="formymin" type="text" value="-1.2" onchange="ymin=parseInt(this.value);" /><br />
<label for="formymax">ymax</label><input id="formymax" type="text" value="1.2" onchange="ymax=parseInt(this.value);" />
<hr />
<input type="button" value="Reinitialiser" onclick="reinit();" /> <input type="button" value="1:1" onclick="ratio();" />
<hr />
Canevas<br />
<label for="formlarg">largeur</label><input id="formlarg" type="text" value="1000" onchange="cwidth=parseInt(this.value);" /><br />
<label for="formhaut">hauteur</label><input id="formhaut" type="text" value="800" onchange="cheight=parseInt(this.value);" />
<hr />
Choix de la fractale<br />
<label for="formmand">Mandelbrot</label><input id="formmand" type="radio" name="fract" onchange="frct=1;" checked /><br />
<label for="formjul1">Julia 1</label><input id="formjul1" type="radio" name="fract" onchange="frct=2;" /><br />
<label for="formjul2">Julia 2</label><input id="formjul2" type="radio" name="fract" onchange="frct=3;" /><br />
<label for="formjul3">Julia 3</label><input id="formjul3" type="radio" name="fract" onchange="frct=4;" /><br />
<label for="formkoc1">Koch 1</label><input id="formkoc1" type="radio" name="fract" onchange="frct=5;" /><br />
<label for="formkoc2">Koch 2</label><input id="formkoc2" type="radio" name="fract" onchange="frct=6;" /><br />
<label for="formsier">Sierpiński</label><input id="formsier" type="radio" name="fract" onchange="frct=7;" /><br />
<label for="formdrag">Heighway</label><input id="formdrag" type="radio" name="fract" onchange="frct=8;" />
<hr />
<input type="button" value="Rendu" onclick="draw();" /><br />
<span id="disp"></span>
</form>
<div id="calc"><div id="calc2">calcul en cours...</div></div>
<script type="text/javascript">
"use strict";
var cwidth = 1000;
var cheight = 800;
var xmin = -2;
var xmax = 1;
var ymin = -1.2;
var ymax = 1.2;
var nmax = 100;
var l = 4;
var frct = 1;
var d0,d1;
function mandelbrot(){
var context,img,r,v,b,a;
var xs = (xmax-xmin)/cwidth;
var ys = (ymax-ymin)/cheight;
d0 = new Date();
context = document.getElementById("canvas").getContext("2d");
document.getElementById("canvas").width = cwidth;
document.getElementById("canvas").height = cheight;
document.getElementById("param").style.left = cwidth+"px";
img = context.createImageData(cwidth,cheight);
for (var y=0,j=0;y<cheight;y++){
var cy = ymax - y*ys;
for (var x=0;x<cwidth;x++){
var cx = xmin + x*xs;
var x1 = cx;
var y1 = cy;
for(var i=0;i<nmax;i++){
var xx = x1*x1;
var yy = y1*y1;
if (xx+yy>l){break;}
y1 = 2*x1*y1+cy;
x1 = xx-yy+cx;
}
if (i === nmax){
r=0;
v=0;
b=0;
a=255;
} else {
r=Math.floor(128*Math.log(i)/Math.log(10));
v=i*2;
b=i;
a=255;
}
img.data[j++] = r;
img.data[j++] = v;
img.data[j++] = b;
img.data[j++] = a;
}
}
context.putImageData(img, 0, 0);
d1 = new Date();
var d = (d1-d0)/1000;
document.getElementById("disp").innerHTML = "temps de calcul : "+d.toString()+"sec";
document.getElementById("calc").style.display = "none";
}
function julia(n){
var context,img,r,v,b,a;
d0 = new Date();
context = document.getElementById("canvas").getContext("2d");
document.getElementById("canvas").width = cwidth;
document.getElementById("canvas").height = cheight;
document.getElementById("param").style.left = cwidth+"px";
img = context.createImageData(cwidth,cheight);
var xs = (xmax-xmin)/cwidth;
var ys = (ymax-ymin)/cheight;
for (var y=0,j=0;y<cheight;y++){
var cy = ymax - y*ys;
for (var x=0;x<cwidth;x++){
var cr,ci;
if (n === 1) {
cr = 0.285;
ci = 0.01;
}else if (n === 2) {
cr = 0.28;
ci = -0.02;
}else{
cr = -0.15;
ci = 1.03;
}
var cx = xmin + x*xs;
var x1 = cx;
var y1 = cy;
for(var i=0;i<nmax;i++){
var xx = x1*x1;
var yy = y1*y1;
if (xx+yy>l){break;}
y1 = 2*x1*y1+ci;
x1 = xx-yy+cr;
}
if (i === nmax){
r=0;
v=0;
b=0;
a=255;
} else {
r=Math.floor(128*Math.log(i)/Math.log(10));
v=i*2;
b=i;
a=255;
}
img.data[j++] = r;
img.data[j++] = v;
img.data[j++] = b;
img.data[j++] = a;
}
}
context.putImageData(img, 0, 0);
d1 = new Date();
var d = (d1-d0)/1000;
document.getElementById("disp").innerHTML = "temps de calcul : "+d.toString()+"sec";
document.getElementById("calc").style.display = "none";
}
var cosa = Math.cos(Math.PI/3);
var sina = Math.sin(Math.PI/3);
function koch(x1,y1,x2,y2,i,ctx){
if ((i>=nmax)||(i>=9)){
var xs = cwidth/(xmax-xmin);
var ys = cheight/(ymax-ymin);
var xa = (x1-xmin)*xs;
var ya = (-y1+ymax)*ys;
var xb = (x2-xmin)*xs;
var yb = (-y2+ymax)*ys;
ctx.lineJoin = "bevel";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(xa,ya);
ctx.lineTo(xb,yb);
ctx.stroke();
}else{
var xa,ya,xb,yb,xc,yc;
xa = x1+(x2-x1)/3;
ya = y1+(y2-y1)/3;
xc = x1+2*(x2-x1)/3;
yc = y1+2*(y2-y1)/3;
xb = cosa*(xc-xa) - sina*(yc-ya) + xa;
yb = sina*(xc-xa) + cosa*(yc-ya) + ya;
i++;
koch(x1,y1,xa,ya,i,ctx);
koch(xa,ya,xb,yb,i,ctx);
koch(xb,yb,xc,yc,i,ctx);
koch(xc,yc,x2,y2,i,ctx);
}
}
function koch2(x1,y1,x2,y2,i,ctx){
if ((i>=nmax)||(i>=5)){
var xs = cwidth/(xmax-xmin);
var ys = cheight/(ymax-ymin);
var xa = (x1-xmin)*xs;
var ya = (-y1+ymax)*ys;
var xb = (x2-xmin)*xs;
var yb = (-y2+ymax)*ys;
ctx.lineJoin = "bevel";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(xa,ya);
ctx.lineTo(xb,yb);
ctx.stroke();
}else{
var xa,ya,xb,yb,xc,yc,xd,yd,xe,ye,xf,yf,xg,yg;
var xs = x2-x1;
var ys = y2-y1;
xa = x1+xs/4;
ya = y1+ys/4;
xd = x1+2*xs/4;
yd = y1+2*ys/4;
xg = x1+3*xs/4;
yg = y1+3*ys/4;
xb = xa-(yd-ya);
yb = ya+(xd-xa);
xc = xd-(yg-yd);
yc = yd+(xg-xd);
xe = xd-(xc-xd);
ye = yd-(yc-yd);
xf = xg-(yd-yg);
yf = yg+(xd-xg);
i++;
koch2(x1,y1,xa,ya,i,ctx);
koch2(xa,ya,xb,yb,i,ctx);
koch2(xb,yb,xc,yc,i,ctx);
koch2(xc,yc,xd,yd,i,ctx);
koch2(xd,yd,xe,ye,i,ctx);
koch2(xe,ye,xf,yf,i,ctx);
koch2(xf,yf,xg,yg,i,ctx);
koch2(xg,yg,x2,y2,i,ctx);
}
}
function vankoch(){
d0 = new Date();
context = document.getElementById("canvas").getContext("2d");
document.getElementById("canvas").width = cwidth;
document.getElementById("canvas").height = cheight;
document.getElementById("param").style.left = cwidth+"px";
if (nmax>9) {nmax = 9;document.getElementById("formiter").value=nmax;}
context.strokeStyle = "black";
koch(-1,1,1,1,0,context);
koch(1,1,0,-0.732,0,context);
koch(0,-0.732,-1,1,0,context);
d1 = new Date();
var d = (d1-d0)/1000;
document.getElementById("disp").innerHTML = "temps de calcul : "+d.toString()+"sec";
document.getElementById("calc").style.display = "none";
}
function vankoch2(){
d0 = new Date();
context = document.getElementById("canvas").getContext("2d");
document.getElementById("canvas").width = cwidth;
document.getElementById("canvas").height = cheight;
document.getElementById("param").style.left = cwidth+"px";
if (nmax>5) {nmax = 5;document.getElementById("formiter").value=nmax;}
context.strokeStyle = "black";
koch2(-1,1,1,1,0,context);
koch2(1,1,1,-1,0,context);
koch2(1,-1,-1,-1,0,context);
koch2(-1,-1,-1,1,0,context);
d1 = new Date();
var d = (d1-d0)/1000;
document.getElementById("disp").innerHTML = "temps de calcul : "+d.toString()+"sec";
document.getElementById("calc").style.display = "none";
}
function sierp(x1,y1,x2,y2,x3,y3,i,ctx){
if ((i>=nmax)||(i>=12)){
var xs = cwidth/(xmax-xmin);
var ys = cheight/(ymax-ymin);
var xa = (x1-xmin)*xs;
var ya = (-y1+ymax)*ys;
var xb = (x2-xmin)*xs;
var yb = (-y2+ymax)*ys;
var xc = (x3-xmin)*xs;
var yc = (-y3+ymax)*ys;
ctx.lineJoin = "bevel";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(xa,ya);
ctx.lineTo(xb,yb);
ctx.lineTo(xc,yc);
ctx.closePath();
ctx.fill();
}else{
var a = x1+(x3-x1)/4;
var b = x1+2*(x3-x1)/4;
var c = x1+3*(x3-x1)/4;
var d = y1+(y2-y1)/2;
i++;
sierp(x1,y1,a,d,b,y1,i,ctx);
sierp(a,d,x2,y2,c,d,i,ctx);
sierp(b,y1,c,d,x3,y3,i,ctx);
}
}
function sierpinski(){
d0 = new Date();
context = document.getElementById("canvas").getContext("2d");
document.getElementById("canvas").width = cwidth;
document.getElementById("canvas").height = cheight;
document.getElementById("param").style.left = cwidth+"px";
if (nmax>12) {nmax = 12;document.getElementById("formiter").value=nmax;}
context.strokeStyle = "black";
sierp(-1,-0.732,0,1,1,-0.732,0,context);
d1 = new Date();
var d = (d1-d0)/1000;
document.getElementById("disp").innerHTML = "temps de calcul : "+d.toString()+"sec";
document.getElementById("calc").style.display = "none";
}
function dragon(x1,y1,x2,y2,i,ctx){
if ((i>=nmax)||(i>=18)){
var xs = cwidth/(xmax-xmin);
var ys = cheight/(ymax-ymin);
var xa = (x1-xmin)*xs;
var ya = (-y1+ymax)*ys;
var xb = (x2-xmin)*xs;
var yb = (-y2+ymax)*ys;
ctx.lineJoin = "bevel";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(xa,ya);
ctx.lineTo(xb,yb);
ctx.stroke();
}else{
var xs = x2-x1;
var ys = y2-y1;
var x = x1+xs/2;
var y = y1+ys/2;
i++;
x = (x2-x1)/2 + (y2-y1)/2 + x1;
y = (y2-y1)/2 - (x2-x1)/2 + y1;
dragon(x1,y1,x,y,i,ctx);
dragon(x2,y2,x,y,i,ctx);
}
}
function heightway(){
d0 = new Date();
context = document.getElementById("canvas").getContext("2d");
document.getElementById("canvas").width = cwidth;
document.getElementById("canvas").height = cheight;
document.getElementById("param").style.left = cwidth+"px";
if (nmax>18) {nmax = 18;document.getElementById("formiter").value=nmax;}
context.strokeStyle = "red";
dragon(-1,0,1,0,0,context);
context.strokeStyle = "green";
dragon(1,0,-1,0,0,context);
context.strokeStyle = "blue";
dragon(1,0,3,0,0,context);
context.strokeStyle = "purple";
dragon(3,0,1,0,0,context);
d1 = new Date();
var d = (d1-d0)/1000;
document.getElementById("disp").innerHTML = "temps de calcul : "+d.toString()+"sec";
document.getElementById("calc").style.display = "none";
}
function draw(){
setTimeout("fractale()", 10);
}
function fractale(){
document.getElementById("calc").style.display = "block";
switch(frct){
case 1:
default:
mandelbrot();
break;
case 2:
julia(1);
break;
case 3:
julia(2);
break;
case 4:
julia(3);
break;
case 5:
vankoch();
break;
case 6:
vankoch2();
break;
case 7:
sierpinski();
break;
case 8:
heightway();
break;
}
}
function reinit(){
cwidth = 1000;document.getElementById("formlarg").value=cwidth;
cheight = 800;document.getElementById("formhaut").value=cheight;
xmin = -2;document.getElementById("formxmin").value=xmin;
xmax = 1;document.getElementById("formxmax").value=xmax;
ymin = -1.2;document.getElementById("formymin").value=ymin;
ymax = 1.2;document.getElementById("formymax").value=ymax;
nmax = 100;document.getElementById("formiter").value=nmax;
draw();
}
function ratio(){
var dx = xmax-xmin;
var dy = dx*cheight/cwidth;
var y0 = (ymin+ymax)/2;
ymin = y0-(dy/2);document.getElementById("formymin").value=ymin;
ymax = y0+(dy/2);document.getElementById("formymax").value=ymax;
draw();
}
var m_x = "0";
var m_y = "0";
var m_x0 = "0";
var m_y0 = "0";
function mousse_position (e) {
m_x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX+document.body.scrollLeft;
m_y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY+document.body.scrollTop;
}
function handle(delta) {
var dx = xmax-xmin;
var dy = ymax-ymin;
var xs = (xmax-xmin)/cwidth;
var ys = (ymax-ymin)/cheight;
var x = parseInt(m_x);
var y = parseInt(m_y);
var cx = xmin + x*xs;
var cy = ymax - y*ys;
if (delta < 0){
dx*=2;
dy*=2;
}else{
dx/=2;
dy/=2;
}
xmin = cx - dx/2;document.getElementById("formxmin").value=xmin;
xmax = cx + dx/2;document.getElementById("formxmax").value=xmax;
ymin = cy - dy/2;document.getElementById("formymin").value=ymin;
ymax = cy + dy/2;document.getElementById("formymax").value=ymax;
draw();
}
function wheel(event){
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta){
delta = event.wheelDelta/120;
if (window.opera)
delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
var context;
var img;
var mov=false;
function begin(event){
m_x0 = m_x;
m_y0 = m_y;
context = document.getElementById("canvas").getContext("2d");
img = context.getImageData(0, 0, cwidth, cheight);
mov=true;
}
function move(event){
if (!mov) return;
var xs=(xmax-xmin)/cwidth;
var ys=(ymax-ymin)/cheight;
var mx=m_x-m_x0;
var my=m_y-m_y0;
var cx=- mx*xs;
var cy=my*ys;
document.getElementById("formxmin").value=xmin+cx;
document.getElementById("formxmax").value=xmax+cx;
document.getElementById("formymin").value=ymin+cy;
document.getElementById("formymax").value=ymax+cy;
context.clearRect(0,0,cwidth,cheight);
context.putImageData(img,mx,my);
}
function end(event){
mov=false;
var xs = (xmax-xmin)/cwidth;
var ys = (ymax-ymin)/cheight;
var mx = m_x-m_x0;
var my = m_y-m_y0;
var cx = - mx*xs;
var cy = my*ys;
xmin+=cx;document.getElementById("formxmin").value=xmin;
xmax+=cx;document.getElementById("formxmax").value=xmax;
ymin+=cy;document.getElementById("formymin").value=ymin;
ymax+=cy;document.getElementById("formymax").value=ymax;
draw();
}
window.document.onmousemove = mousse_position;
if (window.addEventListener)
document.getElementById("canvas").addEventListener('DOMMouseScroll', wheel, false);
document.getElementById("canvas").onmousewheel = wheel;
document.getElementById("canvas").onmousedown = begin;
document.getElementById("canvas").onmousemove = move;
document.getElementById("canvas").onmouseup = end;
draw();
</script>
</body>
</html>
Calculatrice graphique avec exploration à la souris + molette :
>> -
voir<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calculatrice Graphique JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{margin:0px;}
label{display:block;float:left;margin-right:16px;text-align:right;width:100px;}
input{width:100px;}
#canvas{ubackground:#000;}
#param{position:absolute;top:0px;left:1000px;width:230px;padding:10px;text-align:justify;}
#calc{position:fixed;top:0px;left:0px;width:100%;height:100%;background:rgba(255,255,255,0.5);udisplay:none;}
#calc2{position:absolute;width:200px;height:20px;left:50%;margin-left:-100px;top:50%;margin-top:-10px;}
.fx{width:180px;}
</style>
<meta property="og:title" content="Calculatrice Graphique JavaScript" />
<meta property="og:url" content="http://mihalcea.fr/src/graph.htm" />
<meta property="og:image" content="http://mihalcea.fr/src/graph.png" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Calculatrice Graphique écrite en JavaScript & HTML5 par Daniel MIHALCEA." />
</head>
<body>
<canvas id="canvas" width="1000" height="800"></canvas>
<form id="param">
Fonction :<br />
f(x) = <input id="formfx" type="text" onchange="fx=this.value;" class="fx" />
<hr />
fenêtre<br />
<label for="formxmin">xmin</label><input id="formxmin" type="text" value="-2" onchange="xmin=parseInt(this.value);" /><br />
<label for="formxmax">xmax</label><input id="formxmax" type="text" value="1" onchange="xmax=parseInt(this.value);" /><br />
<label for="formymin">ymin</label><input id="formymin" type="text" value="-1.2" onchange="ymin=parseInt(this.value);" /><br />
<label for="formymax">ymax</label><input id="formymax" type="text" value="1.2" onchange="ymax=parseInt(this.value);" />
<hr />
<input type="button" value="Reinitialiser" onclick="reinit();" /> <input type="button" value="1:1" onclick="ratio();" />
<hr />
Canevas<br />
<label for="formlarg">largeur</label><input id="formlarg" type="text" value="1000" onchange="cwidth=parseInt(this.value);" /><br />
<label for="formhaut">hauteur</label><input id="formhaut" type="text" value="800" onchange="cheight=parseInt(this.value);" />
<hr />
<hr />
<input type="button" value="Calcul" onclick="draw();" /><br />
<span id="disp"></span>
</form>
<div id="calc"><div id="calc2">calcul en cours...</div></div>
<script type="text/javascript">
var cwidth = 1000;
var cheight = 800;
var xmin = -2;document.getElementById("formxmin").value=xmin;
var xmax = 6;document.getElementById("formxmax").value=xmax;
var ymin = -3.2;document.getElementById("formymin").value=ymin;
var ymax = 3.2;document.getElementById("formymax").value=ymax;
var step = 1;
var dx = cwidth/(xmax-xmin);
var dy = cheight/(ymax-ymin);
var type = 1;
var d0,d1;
var fx="cos(x/2)+sin(x*2)";document.getElementById("formfx").value=fx;
function x2scr(x){
return (x-xmin)*dx;
}
function y2scr(y){
return (-y+ymax)*dy;
}
function scr2x(x){
return xmin+x/dx;
}
function scr2y(y){
return ymax-y/dy;
}
function cartline(x1,y1,x2,y2,c,ctx){
ctx.beginPath();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.strokeStyle = c;
context.moveTo(x2scr(x1),y2scr(y1));
context.lineTo(x2scr(x2),y2scr(y2));
context.stroke();
}
function line(x1,y1,x2,y2,c,ctx){
ctx.beginPath();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.strokeStyle = c;
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.stroke();
}
function drawgrid(ctx){
for(var i=0;i<xmax;i+=step){
var a = x2scr(i);
line(a,0,a,cheight,"#ccc",ctx);
}
for(var i=0;i>xmin;i-=step){
var a = x2scr(i);
line(a,0,a,cheight,"#ccc",ctx);
}
for(var i=0;i<ymax;i+=step){
var b = y2scr(i);
line(0,b,cwidth,b,"#ccc",ctx);
}
for(var i=0;i>ymin;i-=step){
var b = y2scr(i);
line(0,b,cwidth,b,"#ccc",ctx);
}
}
function drawaxis(ctx){
var a,b;
line(0,y2scr(0),cwidth,y2scr(0),"black",ctx);
line(x2scr(0),0,x2scr(0),cheight,"black",ctx);
b = y2scr(0);
for(var i=0;i<xmax;i+=step){
var a = x2scr(i);
line(a,b,a,b-4,"black",ctx);
}
for(var i=0;i>xmin;i-=step){
var a = x2scr(i);
line(a,b,a,b-4,"black",ctx);
}
ctx.strokeText("x", cwidth-10, b-5);
a = x2scr(0);
for(var i=0;i<ymax;i+=step){
var b = y2scr(i);
line(a,b,a+4,b,"black",ctx);
}
for(var i=0;i>ymin;i-=step){
var b = y2scr(i);
line(a,b,a+4,b,"black",ctx);
}
ctx.strokeText("y", a+5, 10);
}
function cos(x){return Math.cos(x);}
function sin(x){return Math.sin(x);}
function tan(x){return Math.tan(x);}
function log(x,b){if(b===undefined){b=10;};return Math.log(x)/Math.log(b);}
function ln(x){return Math.log(x);}
function parsefx(f){
f = f.replace("pi","Math.PI");
return f;
}
function cartesien(){
d0 = new Date();
context = document.getElementById("canvas").getContext("2d");
document.getElementById("canvas").width = cwidth;
document.getElementById("canvas").height = cheight;
document.getElementById("param").style.left = cwidth+"px";
drawgrid(context);
drawaxis(context);
var i=0;
var x = scr2x(i);
fx2 = parsefx(fx);
y = eval(fx2);
context.lineJoin = "bevel";
context.lineWidth = 1;
context.beginPath();
context.strokeStyle = "red";
context.moveTo(i,y2scr(y));
for(i=1;i<cwidth;i++){
x = scr2x(i);
y = eval(fx2);
context.lineTo(i,y2scr(y));
}
context.stroke();
d1 = new Date();
var d = (d1-d0)/1000;
document.getElementById("disp").innerHTML = "temps de calcul : "+d.toString()+"sec";
document.getElementById("calc").style.display = "none";
}
function polaire(){
}
function calc(){
document.getElementById("calc").style.display = "block";
dx = cwidth/(xmax-xmin);
dy = cheight/(ymax-ymin);
switch(type){
case 1:
default:
cartesien();
break;
case 2:
polaire();
break;
}
}
function draw(){
setTimeout("calc()", 10);
}
function reinit(){
cwidth = 1000;document.getElementById("formlarg").value=cwidth;
cheight = 800;document.getElementById("formhaut").value=cheight;
xmin = -2;document.getElementById("formxmin").value=xmin;
xmax = 6;document.getElementById("formxmax").value=xmax;
ymin = -3.2;document.getElementById("formymin").value=ymin;
ymax = 3.2;document.getElementById("formymax").value=ymax;
dx = cwidth/(xmax-xmin);
dy = cheight/(ymax-ymin);
draw();
}
function ratio(){
var dx = xmax-xmin;
var dy = dx*cheight/cwidth;
var y0 = (ymin+ymax)/2;
ymin = y0-(dy/2);document.getElementById("formymin").value=ymin;
ymax = y0+(dy/2);document.getElementById("formymax").value=ymax;
draw();
}
var m_x = "0";
var m_y = "0";
var m_x0 = "0";
var m_y0 = "0";
function mousse_position (e) {
m_x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX+document.body.scrollLeft;
m_y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY+document.body.scrollTop;
}
function handle(delta) {
var dx = xmax-xmin;
var dy = ymax-ymin;
var xs = (xmax-xmin)/cwidth;
var ys = (ymax-ymin)/cheight;
var x = parseInt(m_x);
var y = parseInt(m_y);
var cx = xmin + x*xs;
var cy = ymax - y*ys;
if (delta < 0){
dx*=2;
dy*=2;
}else{
dx/=2;
dy/=2;
}
xmin = cx - dx/2;document.getElementById("formxmin").value=xmin;
xmax = cx + dx/2;document.getElementById("formxmax").value=xmax;
ymin = cy - dy/2;document.getElementById("formymin").value=ymin;
ymax = cy + dy/2;document.getElementById("formymax").value=ymax;
draw();
}
function wheel(event){
var delta = 0;
if (!event)
event = window.event;
if (event.wheelDelta){
delta = event.wheelDelta/120;
if (window.opera)
delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
var context;
var img;
var mov=false;
function begin(event){
m_x0 = m_x;
m_y0 = m_y;
context = document.getElementById("canvas").getContext("2d");
img = context.getImageData(0, 0, cwidth, cheight);
mov=true;
}
function move(event){
if (!mov) return;
var xs=(xmax-xmin)/cwidth;
var ys=(ymax-ymin)/cheight;
var mx=m_x-m_x0;
var my=m_y-m_y0;
var cx=- mx*xs;
var cy=my*ys;
document.getElementById("formxmin").value=xmin+cx;
document.getElementById("formxmax").value=xmax+cx;
document.getElementById("formymin").value=ymin+cy;
document.getElementById("formymax").value=ymax+cy;
context.clearRect(0,0,cwidth,cheight);
context.putImageData(img,mx,my);
}
function end(event){
mov=false;
var xs = (xmax-xmin)/cwidth;
var ys = (ymax-ymin)/cheight;
var mx = m_x-m_x0;
var my = m_y-m_y0;
var cx = - mx*xs;
var cy = my*ys;
xmin+=cx;document.getElementById("formxmin").value=xmin;
xmax+=cx;document.getElementById("formxmax").value=xmax;
ymin+=cy;document.getElementById("formymin").value=ymin;
ymax+=cy;document.getElementById("formymax").value=ymax;
draw();
}
window.document.onmousemove = mousse_position;
if (window.addEventListener)
document.getElementById("canvas").addEventListener('DOMMouseScroll', wheel, false);
document.getElementById("canvas").onmousewheel = wheel;
document.getElementById("canvas").onmousedown = begin;
document.getElementById("canvas").onmousemove = move;
document.getElementById("canvas").onmouseup = end;
draw();
</script>
</body>
</html>
