Scribd
Cargar
0 vistas3 páginas

Processing

El documento es una guía de aprendizaje sobre el entorno de programación Processing, enfocándose en el dibujo computacional y la lógica de coordenadas. Se explica el sistema de coordenadas de Processing, cómo inicializar el lienzo digital, y se presentan conceptos básicos de geometría y aplicación de color. Además, incluye actividades prácticas para aplicar los conocimientos adquiridos, como el diseño de una casa utilizando diferentes formas y colores.

Cargado por

Javier
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0 vistas3 páginas

Processing

El documento es una guía de aprendizaje sobre el entorno de programación Processing, enfocándose en el dibujo computacional y la lógica de coordenadas. Se explica el sistema de coordenadas de Processing, cómo inicializar el lienzo digital, y se presentan conceptos básicos de geometría y aplicación de color. Además, incluye actividades prácticas para aplicar los conocimientos adquiridos, como el diseño de una casa utilizando diferentes formas y colores.

Cargado por

Javier
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Introducción a la Programación Processing — 2◦ BB

Dibujo Computacional y Lógica de


Coordenadas
Guía de aprendizaje para el entorno Processing

1 El Lienzo Digital
En programación creativa, nuestro papel es el **Lienzo** (Canvas). Es fundamental
entender que el sistema de coordenadas de Processing difiere del plano cartesiano
tradicional:

El punto de origen (0,0) es la esquina superior izquierda.

El eje X aumenta hacia la derecha.

El eje Y aumenta hacia abajo.

Figura 1: Sistema de coordenadas en Processing: el punto (0,0) se ubica en la esquina


superior izquierda.

Tamaño del Lienzo


Para inicializar nuestro espacio de trabajo usamos:
size(ancho, alto);
Ejemplo: size(500, 400); crea una ventana de 500 píxeles de ancho por 400 de
alto.

1
Introducción a la Programación Processing — 2◦ BB

2 Geometría Básica
2.1 Puntos, Líneas y Triángulos
Las formas se construyen conectando coordenadas específicas.
point(200, 300); // Un único punto
line(300, 200, 0, 400); // Linea de (300,200) a (0,400)
triangle(100, 100, 300, 100, 300, 400); // Un triángulo basado en 3 vértices

2.2 Figuras de Área


Para rectángulos y elipses, definimos su posición y dimensiones:

Rectángulo: rect(x, y, ancho, alto); El punto ( x, y) es la esquina.

Círculo/Elipse: ellipse(x, y, ancho, alto); El punto ( x, y) es el centro.

3 Aplicación de Color
Processing utiliza el modelo RGB. Cada valor (Rojo, Verde y Azul) va de 0 a 255.
background(100, 100, 100); // Fondo gris neutro
fill(255, 0, 0); // Relleno rojo intenso
stroke(0, 0, 255, 50); // Borde azul con transparencia (alfa)

2
Introducción a la Programación Processing — 2◦ BB

4 Laboratorio de Práctica
Actividad 1: Análisis Visual
Observa el siguiente código e imagina el resultado antes de ejecutarlo:
size(400, 400);
background(255);
fill(100, 50, 0);
rect(0, 0, 100, 50); // ¾Qué forma y color tendrá?

Actividad 2: Proyecto: La Casa

Utilizando la lógica del pizarrón, desarrolla el código para dibujar una casa. Debes
cumplir con los siguientes requisitos:

1. Estructura principal con un rect().

2. Techo utilizando un triangle().

3. Al menos una ventana circular (ellipse()).

4. Uso de al menos 3 colores diferentes.

Entrega: Envía tu archivo .pde a [Link]@[Link].

También podría gustarte