El dibujo de gráficos básicos es la base para la animación y la interacción.El procesamiento proporciona una gran cantidad de funciones relacionadas con gráficos para satisfacer nuestras necesidades de dibujo.
1. Coordenadas
Los gráficos no se pueden separar del sistema de coordenadas. En Procesamiento, el origen es la esquina superior izquierda de la ventana, y el valor de las coordenadas aumenta desde el eje x izquierdo al derecho, y desde el eje superior al eje y. En cada programa de procesamiento, hay una función ** size () **, que se utiliza para establecer el ancho y la altura de la ventana en ejecución.
Usamos ** point () ** para dibujar el píxel más básico, sus parámetros son las coordenadas del eje x y del eje y.
2. Gráficos básicos
- Línea recta: línea (x1, y1, x2, y2)
- Triángulo: triángulo (x1, y1, x2, y2, x3, y3)
- Cuadrilátero: cuádruple (x1, y1, x2, y2, x3, y3, x4, y4)
- Rectángulo: rect (x, y, ancho, alto)
- Elipse: elipse (x, y, ancho, alto)
- 扇形 ：arco (x, y, ancho, alto, inicio, parada)
line(10, 10, 100, 20);
triangle(160, 40, 180, 10, 200, 30);
quad(40, 30, 90, 50, 90, 80, 20, 70);
rect(150, 60, 50, 40);
ellipse(50,120,40,30);
ellipse(130,120,40,40);
arc(40, 150, 50,60,0,3);
Vale la pena señalar que los dos últimos parámetros de arc () ** son el ángulo de ajuste, y la unidad se expresa en radianes, donde 180 °, 45 °, 90 °, 360 ° definen los nombres especiales PI, QUARTER_PI, HALF_PI, TWO_PI .
3. Orden de dibujo
Debido a la ejecución secuencial del programa, si las coordenadas de los dos gráficos tienen partes superpuestas, los gráficos dibujados más adelante sobrescribirán los gráficos dibujados antes.
4. Propiedades de dibujo
- Estilo de grosor de trazo: strokeWeight () , el parámetro predeterminado es 1 píxel
size(480, 120);
ellipse(35,60,60,60);
strokeWeight(5);
ellipse(105,60,60,60);
strokeWeight(8);
ellipse(175,60,60,60);
strokeWeight(20);
ellipse(260,60,60,60);
- Estilo de punto final de trazo: strokeCap () , parámetros REDONDO (círculo), CUADRADO (cuadrado), PROYECTO (híbrido)
size(480, 120);
strokeWeight(20);
line(30,25,100,95);
strokeCap(SQUARE);
line(130,25,200,95);
strokeCap(PROJECT);
line(230,25,300,95);
strokeCap(ROUND);
line(330,25,400,95);
- Estilo de esquina de línea: strokeJoin () , parámetros REDONDO (círculo), BISEL (corte en bisel), INGLETE (junta de inglete)
size(480, 120);
strokeWeight(10);
rect(20,25,60,60);
strokeJoin(ROUND);
rect(100,25,60,60);
strokeJoin(BEVEL);
rect(180,25,60,60);
strokeJoin(MITER);
rect(260,25,60,60);
5. Color
Todos los gráficos se rellenan inicialmente con trazos blancos y negros. Podemos usar las funciones background () , fill () y stroke () para cambiar el color. Podemos usar un parámetro 0-255 para representar la escala de grises, pero en más casos, usaremos tres parámetros RGB 0-255 para crear color.
size(480, 120);
noStroke(); //隐藏描边
background(0, 25, 50);
fill(255, 0, 0);
ellipse(120, 90, 200, 200);
fill(0, 255, 0);
ellipse(228, -8, 200, 200);
fill(0, 0, 255);
ellipse(256, 126, 200, 200);
El cuarto parámetro opcional alfa se puede establecer en las funciones ** fill () y strock () ** para controlar la transparencia, y el rango de valores es 0-255.
Con estas funciones de dibujo, básicamente podemos satisfacer nuestras diversas necesidades de dibujo, también puede probarlo.
Preste atención al número público "TonyCode" y responda "1024" para obtener materiales de aprendizaje 1000G.
Blog personal
