Paso 8: Conceptos básicos - interacción con el usuario
Ahora, la fórmula siguiente dará un punto tras el ratón y color después de la posición x . Se trata de una forma simple de interacción con el usuario.
Nota: Para experimentar la interactividad, siga http://www.openprocessing.org/sketch/138963
Fórmula
WIDTH = 250; RATIO = 1; X_MIN = -20; X_MAX = 20; Y_MIN = -20; Y_MAX = 20; MOUSE_MOVE = true; // (a) color hsb(x, y) { float d = dist(u, v, mouseX, mouseY) / WIDTH * 10; // (b) float shift = mouseX / WIDTH; // (c) float bright = (1/d) * 255; // (d) float hue = shift * 255; // (e) return color(hue, 255, bright); // (f) } Explicación
- (a) ajuste MOUSE_MOVE true asegurará para volver a dibujar sobre cualquier movimiento de ratón.
- (b) calcular la distancia del pixel actual del mouse. En lugar de x y de y, u y v se utilizan, ya que representan las coordenadas del pixel. Ancho se utiliza para normalizar y ser independiente del tamaño del lienzo actual. El valor 10 controla el tamaño del spot.
- (c) el cambio de color es proporcional a la posición horizontal del ratón del mouseX. Ancho se utiliza para que ese cambio va desde 0 a 1.
- (d) el brillo será máximo bajo el ratón y tenderá a cero para los pixeles del ratón.
- (e) para el matiz, escala el cambio de color, rango entre 0 y 255.
- (f) crear el color de píxel mediante el tono computado, brillo y una saturación máxima (255, para colores fuertes).
Notas:
- Para dibujar el plano simple formas siguiendo el ratón, MathVision es mucho menos eficiente que los primitivos de gráficos generalmente de Processing.js. Esto es porque MathVision vuelve a calcular cada pixel (aplicando la fórmula a cada uno) para cada redibujado del lienzo.
- Por otro lado, efectos tales como el halo que se puede ver aquí, se obtienen muy fácilmente.
