Download raw (4.4 KB)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotation Raster</title>
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<script type="text/javascript" src="/lib/paper-full.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#canvas").width($("#bitmap").width());
$("#canvas").height($("#bitmap").height());
});
</script>
<script type="text/paperscript" canvas="canvas">
var raster = new Raster('bitmap');
var size = new Size(100, 100);
var colSize = raster.size / size * 0.9;
var fullSize = size * colSize;
raster.visible = false;
raster.size = size;
for (var x = 0; x < size.width; x++) {
for (var y = 0; y < size.height; y++) {
var color = raster.getPixel(x, y);
var gray = (1 - color.gray) * 0.9;
if (gray > 0.1) {
var pos = new Point(x, y) * colSize + colSize / 2;
// RECTANGLE
//var rectSize = gray * colSize.width;
//var path = new Path.Rectangle([0, 0], [rectSize*5, rectSize]);
//path.fillColor = color;
// ARC DE CERCLE
//var path = new Path.Arc({
// from: [gray * colSize.width*5, 0],
// through: [6, 2],
// to: [8, 18],
// strokeColor: 'black',
// strokeWidth: gray * colSize.width/2
//});
// VER DE TERRE pour Katchen
var path = new Path();
path.moveTo(0, 0);
var Point1 = new Point(2, 4);
var Point2 = new Point(4, 2);
var Point3 = new Point(6, 4);
var Point4 = new Point(8, 4);
path.arcTo(Point1, Point2);
path.arcTo(Point2, Point3);
path.arcTo(Point3, Point4);
path.smooth();
path.scale(gray*5);
path.strokeColor = 'black';
path.fillColor = "white";
path.fillColor.alpha = 0;
// Steph: Bézier = cubic !
// UNE CROLLE POINTUE
//var path = new Path();
//path.moveTo(0, 0);
//path.arcTo((5,5), (7,7));
//path.arcTo((7,7), (0,0));
//path.scale(gray*5);
//path.strokeWidth = gray*5;
//path.strokeColor = 'black';
//path.fillColor = "white";
//path.fillColor.alpha = 0;
// VAN GOGH pour les singes
// var path = new Path();
// path.moveTo(0, 0);
// path.quadraticCurveTo((5.2730397,-1.44555), (10.94243,-1.41512), (16.19965,0.0869));
// path.quadraticCurveTo(( 51.45687,1.58896 ), (56.28658,4.55828), ( 50,8.57139)) ;
// path.quadraticCurveTo(( 1.06315,3.44701), (1.1742,7.22702), ( 0.0294,10.64778)) ;
// path.scale(gray*6);
// path.strokeColor = 'black';
// path.fillColor = "white";
// path.fillColor.alpha = 0;
// TRAIT
//var path = new Path();
//path.moveTo(0, 0);
//path.lineTo(0,5);
//path.scale(gray*5);
//path.strokeColor = 'black';
// THIS CHANGES POSITION AND ROTATES THE ELEMENT
path.position = pos + Math.random() * 5;
//path.position = pos;
path.rotate(gray * 180);
// OUTPUTS IN SVG
document.getElementById("svg").appendChild(path.exportSVG());
}
}
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<!-- CHANGE IMAGE URL HERE -->
<!--<img id="bitmap" src="/hichem/finaux/katchen/katchen-full-objects/katchen_0001_armure.png" />-->
<!-- <img id="bitmap" src="hichem/finaux/viandes magnétiques/kevin-singe01.png" style="display: none;" /> -->
<!--<img id="bitmap" src="hichem/objects-mid-gray/crisscross-canards-full.png" style="display: none;" />-->
<img id="bitmap" src="images/pif/balsa-detoure-sharp.jpg" style="display:none;" />
<svg id="svg" width="1200" height="2000"></svg>
</body>
</html>