캔버스

Question

나는이 효과를 복제하는 것을 시도하고있다,하지만 난 자습서 따라 매우 어려운 제공 찾을 수에 채워진 픽셀 위치의 x와 y 값을 얻기 : http://tympanus.net/Tutorials/InteractiveTypographyEffects/index3.html

을 기본적으로, 캔버스에 텍스트를 입력 할 (단일 프레임처럼) 정말 빠르게, 전체 페이지의 픽셀을 하나씩 스캔하여 이미지 데이터를 얻고, 픽셀이 채워지면 입자를 x 및 y 위치로 밀어 넣습니다.

은 내가 getImageData 작동 방법 및 픽셀이 같은 하나 하나를 검사하는 방법을 알고 :

var numPixels = imageData.width*imageData.height; 

for (var i = 0; i < numPixels; i++) { 
    pixels[i*4] = 255; // Red 
    pixels[i*4+1] = 0; // Green 
    pixels[i*4+2] = 0; // Blue 
    pixels[i*4+3] = 255; // Alpha 
}; 

그러나, 나는 그들의 x와 y 위치를 검색 할 수 있어야합니다. 다음

Answer 1

을 환영하여 모든 아이디어와 제안이 더있다, 불행하게도 나는 꽤 많은 시간 동안이 붙어 봤는데 .. 예상대로 작동하지 않습니다

for (var x = 0; x < imageData.width; x++) { 
    for (var y = 0; y < imageData.height; y++){ 
     var i = x * 4 + y * 4 * imageData.width; 
     if (i === 255) { 
      particles.push(new Particle(x, y); //Push a particle if the pixel is filled with any color 
     } 
    } 
} 

그러나 :이 같은 시도 파티클을 배치 할 수있는 그리드를 만들기 위해 픽셀을 양자화하고 싶을 것입니다 (링크 된 데모 참조).

이렇게하려면 단일 눈금 셀의 너비와 높이를 설정하여 눈금을 정의하면됩니다. 그런 다음 픽셀 세트가 있는지 여부를 확인하기 위해 각 그리드 모서리 (또는 중심 등)에서 픽셀을 선택합니다. 그런 다음 해당 위치에 대한 입자를 만듭니다.

시각적으로 만족스러운 결과를 얻으려면 글꼴 위치, 글꼴 크기 및 그리드 크기로 놀기 만하면됩니다.

은 자세한 내용과 데모 코드를 다음을 참조하십시오

var ctx = canvas.getContext('2d'), 
 
    width = ctx.canvas.width, 
 
    height = ctx.canvas.height, 
 

 
    particles = [], 
 
    gridX = 8, 
 
    gridY = 8; 
 

 
function Particle(x, y) { 
 
    this.x = x; 
 
    this.y = y; 
 
} 
 

 
// fill some text 
 
ctx.font = 'bold 80px sans-serif'; 
 
ctx.fillStyle = '#ff0'; 
 
ctx.fillText("STACKOVERFLOW", 5, 120); 
 

 
// now parse bitmap based on grid 
 
var idata = ctx.getImageData(0, 0, width, height); 
 

 
// use a 32-bit buffer as we are only checking if a pixel is set or not 
 
var buffer32 = new Uint32Array(idata.data.buffer); 
 

 
// using two loops here, single loop with index-to-x/y is also an option 
 
for(var y = 0; y < height; y += gridY) { 
 
    for(var x = 0; x < width; x += gridX) { 
 

 
    //buffer32[] will have a value > 0 (true) if set, if not 0=false 
 
    if (buffer32[y * width + x]) { 
 
     particles.push(new Particle(x, y)); 
 
    } 
 
    } 
 
} 
 

 
// render particles 
 
ctx.clearRect(0, 0, width, height); 
 

 
particles.forEach(function(p) { 
 
    ctx.fillRect(p.x - 2, p.y - 2, 4, 4); // just squares here 
 
})

#canvas {background:#000}

<canvas id=canvas width=500 height=180></canvas>