Referencia p5.Image

p5.Image

Una clase para describir una imagen.

Las imágenes son cuadrículas rectangulares de píxeles que pueden ser mostradas y modificadas.

Imágenes existentes pueden ser cargadas llamando a loadImage(). Imágenes en blanco pueden ser creadas llamando a createImage(). Los objetos p5.Image tienen métodos para tareas comunes como aplicar filtros y modificar valores de píxeles.

Ejemplos

Sintaxis

p5.Image(width, height)

Parámetros

width
height

Métodos

pixelDensity

Obtiene o establece la densidad de píxeles para pantallas de alta densidad de píxeles.

Por defecto, la densidad se establecerá en 1.

Llama a este método sin argumentos para obtener la densidad predeterminada, o pasa un número para establecer la densidad. Si se proporciona un número no positivo, se establece en 1 por defecto.

loadPixels

Carga el valor actual de cada píxel en la imagen en el array img.pixels.

img.loadPixels() debe ser llamado antes de leer o modificar los valores de los píxeles.

updatePixels

Actualiza el lienzo con los valores RGBA en el array img.pixels.

img.updatePixels() solo necesita ser llamado después de cambiar los valores en el array img.pixels. Tales cambios pueden ser realizados directamente después de llamar a img.loadPixels() o llamando a img.set().

Los parámetros opcionales x, y, width y height definen una subsección de la imagen para actualizar. Hacerlo puede mejorar el rendimiento en algunos casos.

Si la imagen fue cargada desde un GIF, entonces llamar a img.updatePixels() actualizará los píxeles en el fotograma actual.

get

Obtiene un píxel o una región de píxeles de la imagen.

img.get() es fácil de usar pero no es tan rápido como img.pixels. Utiliza img.pixels para leer muchos valores de píxeles.

La versión de img.get() sin parámetros devuelve la imagen completa.

La versión de img.get() con dos parámetros, como en img.get(10, 20), se interpreta como coordenadas. Devuelve un array con los valores [R, G, B, A] del píxel en el punto dado.

La versión de img.get() con cuatro parámetros, como en img.get(10, 20, 50, 90), se interpreta como coordenadas y dimensiones. Los dos primeros parámetros son las coordenadas de la esquina superior izquierda de la subsección. Los dos últimos parámetros son el ancho y la altura de la subsección. Devuelve una subsección del lienzo en un nuevo objeto p5.Image.

Utiliza img.get() en lugar de get() para trabajar directamente con imágenes.

set

Establece el color de uno o más píxeles dentro de una imagen.

img.set() es fácil de usar pero no es tan rápido como img.pixels. Utiliza img.pixels para establecer muchos valores de píxeles.

img.set() interpreta los dos primeros parámetros como coordenadas x e y. Interpreta el último parámetro como un valor de escala de grises, un array de píxel [R, G, B, A], un objeto p5.Color, u otro objeto p5.Image.

img.updatePixels() debe ser llamado después de usar img.set() para que los cambios aparezcan.

resize

Redimensiona la imagen a un ancho y alto dados.

El aspecto original de la imagen puede ser mantenido pasando 0 para cualquiera de width o height. Por ejemplo, llamar a img.resize(50, 0) en una imagen que era de 500 × 300 píxeles la redimensionará a 50 × 30 píxeles.

copy

Copia píxeles de una imagen fuente en esta.

El primer parámetro, srcImage, es un objeto opcional p5.Image para copiar. Si no se pasa una imagen fuente, entonces img.copy() puede copiar una región de esta imagen a otra región.

Los siguientes cuatro parámetros, sx, sy, sw y sh, determinan la región para copiar desde la imagen fuente. (sx, sy) es la esquina superior izquierda de la región. sw y sh son el ancho y alto de la región.

Los siguientes cuatro parámetros, dx, dy, dw y dh, determinan la región de esta imagen para copiar. (dx, dy) es la esquina superior izquierda de la región. dw y dh son el ancho y alto de la región.

Llamar a img.copy() escalará píxeles desde la región fuente si no es del mismo tamaño que la región de destino.

mask

Aplica una máscara a una parte de la imagen con otra.

img.mask() utiliza el canal alfa de otro objeto p5.Image como el canal alfa para esta imagen. Las máscaras son acumulativas y no se pueden eliminar una vez aplicadas.

filter

Aplica un filtro de imagen a la imagen.

Las opciones predefinidas son:

INVERT

Invierte los colores en la imagen. No se utiliza ningún parámetro.

GRAY

Convierte la imagen a escala de grises. No se utiliza ningún parámetro.

THRESHOLD

Convierte la imagen a blanco y negro. Los píxeles con un valor de escala de grises por encima de un umbral dado se convierten en blanco. El resto se convierte en negro. El umbral debe estar entre 0.0 (negro) y 1.0 (blanco). Si no se especifica ningún valor, se utiliza 0.5.

OPAQUE

Establece el canal alfa para que sea completamente opaco. No se utiliza ningún parámetro.

POSTERIZE

Limita el número de colores en la imagen. Cada canal de color se limita al número de colores especificado. Los valores entre 2 y 255 son válidos, pero los resultados son más notables con valores más bajos. El valor predeterminado es 4.

BLUR

Difumina la imagen. El nivel de difuminado se especifica mediante un radio de desenfoque. Valores más grandes aumentan el desenfoque. El valor predeterminado es 4. Se utiliza un desenfoque gaussiano en modo P2D. Se utiliza un desenfoque de caja en modo WEBGL.

ERODE

Reduce las áreas claras. No se utiliza ningún parámetro.

DILATE

Aumenta las áreas claras. No se utiliza ningún parámetro.

blend

Copia una región de píxeles de otra imagen en esta.

El primer parámetro, srcImage, es el objeto p5.Image para mezclar.

Los siguientes cuatro parámetros, sx, sy, sw y sh, determinan la región para mezclar desde la imagen fuente. (sx, sy) es la esquina superior izquierda de la región. sw y sh son el ancho y alto de la región.

Los siguientes cuatro parámetros, dx, dy, dw y dh, determinan la región del lienzo para mezclar. (dx, dy) es la esquina superior izquierda de la región. dw y dh son el ancho y alto de la región.

El décimo parámetro, blendMode, establece el efecto utilizado para mezclar los colores de las imágenes. Las opciones son BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD o NORMAL.

save

Guarda la imagen en un archivo.

Por defecto, img.save() guarda la imagen como un archivo PNG llamado untitled.png.

"

El primer parámetro, filename, es opcional. Es una cadena que establece el nombre del archivo. Si se incluye una extensión de archivo, como en img.save('drawing.png'), entonces la imagen se guardará utilizando ese formato.

" "

El segundo parámetro, extension, también es opcional. Establece el formato de los archivos. Se puede usar 'png' o 'jpg'. Por ejemplo, img.save('drawing', 'jpg') guarda el lienzo en un archivo llamado drawing.jpg.

"

Nota: El navegador guardará el archivo inmediatamente o solicitará al usuario una ventana de diálogo.

La imagen solo se descargará como un GIF animado si se cargó desde un archivo GIF. Consulta saveGif() para crear nuevos GIF.

reset

Reinicia un GIF animado en su primer fotograma.

getCurrentFrame

Obtiene el índice del fotograma actual en un GIF animado.

setFrame

Establece el fotograma actual en un GIF animado.

numFrames

Devuelve el número de fotogramas en un GIF animado.

play

Reproduce un GIF animado que fue pausado con img.pause().

pause

Pausa un GIF animado.

El GIF puede ser reanudado llamando a img.play().

delay

Cambia el intervalo entre fotogramas en un GIF animado.

El primer parámetro, delay, es la duración del intervalo en milisegundos.

El segundo parámetro, index, es opcional. Si se proporciona, solo el fotograma en index tendrá su intervalo modificado. Todos los demás fotogramas mantendrán su intervalo predeterminado.

Notice any errors or typos? Please let us know. Please feel free to edit src/image/p5.Image.js and open a pull request!

Referencias Relacionadas