Juega con las matemáticas: hacer el GIF animado y HTML5 (3 / 15 paso)

Paso 3: Conceptos básicos - rayas

Primero vamos a empezar con un ejemplo sencillo: rayas verticales. Para ello, sólo consideramos la coordenada x .

Ejecute MathVision.html en otra pestaña de tu navegador y copiar y pegar las fórmulas de ejemplo que encontrará a continuación.

Fórmula

 WIDTH = 200; RATIO = 1; X_MIN = 0; X_MAX = 10; Y_MIN = 0; Y_MAX = 10; color rgb(x, y) { int value = (int)x % 2; // (a) int luma = value * 255; // (b) return color(luma); // (c) } 

Explicación

(a) tomamos parte de la x (el (int) x aquí) y determinar si es par o impar (significa que el % 2 modulo 2). Esto obtiene un valor que es 0 o 1.

(b) multiplicamos el valor por 255 para obtener un número de luma en escala de grises (de 0 a 255). Porque valor es 0 o 1, luma será 0 o 255 aquí.

(c) devolver un color escala de grises, llamando a la función color() con sólo un parámetro.

Ejercicios

1. Hacer rayas diagonales. Sugerencia: utilizar también y.