Gráficos y sonido

Imágenes: Image

Image es una imagen en memoria (píxeles RGBA) con la que se generan gráficas, mapas, texturas para juegos, miniaturas o banners. Todo se dibuja con transparencia y bordes suaves, y se guarda como PNG, JPG, BMP o TGA.

var im = Image(300, 150, "#1e2030")                 // ancho, alto y fondo
im.rect(20, 20, 120, 60, "#2f81f7")                 // rectángulo relleno
im.rect(160, 20, 120, 60, "#ffffff", false)         // solo el borde
im.circle(80, 115, 25, Color(255, 200, 0, 180))     // color semitransparente
im.line(160, 100, 280, 130, "#7ee787", 3)           // línea de 3 píxeles
var ancho = im.text(170, 105, "HyperEZ", "white", 20)
print(im, ancho > 0, im.get(30, 30))
im.save(Path.join(Path.temp, "dibujo.png"))

Los colores se pueden escribir como Color(r, g, b, a), "#rrggbb", "#rrggbbaa" o por nombre ("red", "white", "gold"...: la paleta de HyperEZ).

Ejemplos completos: una gráfica de barras y el conjunto de Mandelbrot. Las imágenes de presentación del repositorio también están hechas así: tools/banner.hz.

Sonido: import audio

La biblioteca audio crea sonidos y música muestra a muestra y los guarda como WAV (el formato que abre cualquier reproductor y cualquier motor de juegos).

import audio
var s = audio.Sound()
s.melody("C4 E4 G4 C5", 0.2)               // notas inglesas: C do, D re, E mi, F fa, G sol, A la, B si
s.silence(0.1)
s.tone(440, 0.3, 0.3, "square")            // frecuencia, segundos, volumen, forma de onda
s.note("F#4", 0.2).note("-", 0.1)          // "-" es un silencio
print(round(s.duration, 2), "segundos", audio.frequency("A4"), "Hz")
s.save(Path.join(Path.temp, "efecto.wav"))

• Formas de onda: "sine" (suave), "square" (de consola antigua), "triangle", "saw" y "noise" (explosiones, viento).
• mix(otro, desde) suma otro sonido encima: acordes, bajo y melodía, efectos.
• toBytes() da el WAV como Bytes (por ejemplo para enviarlo con Http).

El ejemplo examples/audio/melodia.hz compone una melodía con bajo.

Más dibujo y filtros en Image

var im = Image(300, 160, "#ffffff")
im.gradient("#dbeafe", "#ffffff")                                   // degradado de fondo
im.ellipse(80, 80, 60, 35, "#2f81f7")
im.polygon([[180, 130], [230, 30], [280, 130]], "#f0883e")          // triángulo
im.floodFill(5, 5, "#fff5d6", 30)                                   // bote de pintura con tolerancia
var girada = im.rotate(90)
im.copy().blur(3).save("desenfocada.png")
im.copy().sepia().save("antigua.png")
im.copy().brightness(1.2).contrast(1.3).save("viva.png")
im.copy().threshold(128).save("blanco-y-negro.png")
print(girada.width, girada.height)

Gráficas y dibujos vectoriales: import svg

Los SVG son dibujos que se ven nítidos a cualquier tamaño y se abren con cualquier navegador (o se insertan en una página web).

import svg

var d = svg.Drawing(400, 200, "#ffffff")
d.rect(10, 10, 120, 80, { fill: "#2f81f7", rx: 8 })
d.circle(250, 60, 40, { fill: "#ffc857", stroke: "#1f2328", width: 2 })
d.line(10, 150, 390, 150, { stroke: "#d0d7de", width: 2, dash: "6 4" })
d.text(20, 185, "Hecho con HyperEZ", { size: 22, weight: "bold" })
d.save("dibujo.svg")

svg.barChart({ ene: 120, feb: 95, mar: 160 }, { title: "Ventas" }).save("ventas.svg")
svg.lineChart([3, 5, 4, 8, 7], { title: "Temperatura", color: "#3fb950" }).save("linea.svg")
svg.pieChart({ web: 45, tienda: 35, teléfono: 20 }, { title: "Canales" }).save("tarta.svg")

Figuras: rect, circle, ellipse, line, polyline, polygon, path (trazados SVG), text y raw (SVG escrito a mano). El estilo es un mapa: fill, stroke, width (grosor), opacity, rx (esquinas redondeadas), size, font, anchor, weight, dash... Ejemplo completo: datos/graficas.hz.