Disegnare un (progressiva) schizzi di vernice su una tela

Sto cercando un metodo semplice che può in grado me per disegnare in una tela un schizzi di vernice come questo su: paint splash Disegnare un (progressiva) schizzi di vernice su una tela

Un metodo sarà quello di spara un sacco di piccole particelle che dipingono un piccolo cerchio, ma non voglio gestire molti oggetti particella.

EDIT: example here:jsfiddle.net/MK73j/4/

Un secondo metodo sarà quello di avere poche immagini e manipolare scala e la rotazione, ma voglio avere una buona casuale l'effetto.

Un terzo metodo sarà quello di fare alcuni punti litte casuali, unirli a curve bezier e riempire il contenuto, ma avrò un solo segno.

Beh, non so se c'è un metodo migliore per avere un effetto simile a questa immagine o se devo scegliere il 3 a cui ho pensato.

fonte

2013-04-12 Razouille

Vuoi bordi coloro fantasia 3D-ish ombra o possa disegno la forma è abbastanza? – Bergi

La forma è sufficiente al momento, ho modificato il mio post con un esempio che ho fatto se vuoi dare un'occhiata – Razouille

È possibile utilizzare l'illusione per creare un bel effetto di splat.

Poiché gli oggetti "crescono" mentre si avvicinano, è possibile animare una dimensione crescente più un piccolo movimento per creare il proprio effetto di splat.

È possibile utilizzare context.drawImage per gestire il ridimensionamento:

context.drawImage(splashImg, 0 ,0, splashImg.width, splashImg.height, 
        newX, newY, newWidth, newHeight);

Ecco codice e un violino: http://jsfiddle.net/m1erickson/r8Grf/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 

     window.requestAnimFrame = (function(callback) { 
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
      function(callback) { 
      window.setTimeout(callback, 1000/60); 
      }; 
     })(); 

     $("go").html("Loading..."); 

     var count=80; 
     var win=new Image(); 
     var splash; 
     win.onload=function(){ 
      splash=new Image(); 
      splash.onload=function(){ 
       ctx.drawImage(win,0,0); 
      } 
      splash.src="http://dl.dropbox.com/u/139992952/splash2.svg"; 
     } 
     win.src="http://dl.dropbox.com/u/139992952/window.png"; 

     $("#go").click(function(){ count=80; animate(); }); 

     function animate() { 
      // drawings 
      if(--count>1){ 
       ctx.clearRect(0, 0, canvas.width, canvas.height); 
       ctx.save(); 
       ctx.drawImage(win,0,0); 
       ctx.globalCompositeOperation = 'destination-over'; 
       ctx.drawImage(splash,0,0,splash.width,splash.height,25,25,splash.width/count,splash.height/count); 
       ctx.restore(); 
      } 

      // request new frame 
      requestAnimFrame(function() { 
       animate(); 
      }); 
     } 

    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <br/><button id="go">Splash!</button><br/><br/> 
    <canvas id="canvas" width=326 height=237></canvas> 
</body> 
</html>

fonte

2013-04-12 15:25:03 markE

Grazie per questo esempio, si unisce alla seconda soluzione che ho proposto, ma nel mio esempio potrebbero esserci molti schizzi gioca come se fossero gettato su un foglio di un pittore (non so se capisci cosa intendo). Forse il mio esempio ti aiuterà: http://jsfiddle.net/MK73j/4/ Come puoi vedere non è molto buono perché vediamo il movimento delle particelle, o devo sparare più particelle che non mi piacciono di prestazioni. – Razouille

Appena trovato questo: http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-in-hardware-acceleration-through-paintball.aspx – markE

È davvero fantastico. Che ne dici di avviarlo con un oggetto pre-rotto come una sfera e scambiarlo con lo splat non appena colpisce la superficie? –

Disegnare un (progressiva) schizzi di vernice su una tela

risposta

Problemi correlati