Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 69 vistas

    Processing Cap.2 Arte Electronico

    Cargado por

    Ariel Mercocha
    El documento describe los elementos estructurales de un programa como órdenes e instrucciones que deben finalizar con ";" y comentarios que comienzan con "//" o "/* */". También describe atributos de líneas como el color RGB y HSB, formas geométricas como triángulos, cuadriláteros y formas curvas como arcos, y variables que almacenan valores para ser usados en el programa.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Processing Cap.2 Arte Electronico

    Cargado por

    Ariel Mercocha
    69 vistas42 páginas
    El documento describe los elementos estructurales de un programa como órdenes e instrucciones que deben finalizar con ";" y comentarios que comienzan con "//" o "/* */". También describe atributos de líneas como el color RGB y HSB, formas geométricas como triángulos, cuadriláteros y formas curvas como arcos, y variables que almacenan valores para ser usados en el programa.

    Título original

    PROCESSING CAP.2 ARTE ELECTRONICO

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    El documento describe los elementos estructurales de un programa como órdenes e instrucciones que deben finalizar con ";" y comentarios que comienzan con "//" o "/* */". También describe atributos de líneas como el color RGB y HSB, formas geométricas como triángulos, cuadriláteros y formas curvas como arcos, y variables que almacenan valores para ser usados en el programa.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    69 vistas42 páginas

    Processing Cap.2 Arte Electronico

    Cargado por

    Ariel Mercocha
    El documento describe los elementos estructurales de un programa como órdenes e instrucciones que deben finalizar con ";" y comentarios que comienzan con "//" o "/* */". También describe atributos de líneas como el color RGB y HSB, formas geométricas como triángulos, cuadriláteros y formas curvas como arcos, y variables que almacenan valores para ser usados en el programa.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 42

    SINTAXIS DEL PROGRAMA

    • ÓRDENES O INSTRUCCIONES:
    Son los elementos estructurales del programa. Todas las
    instrucciones deben finalizar con “;”
    Ejemplo:
    point (50,100);

    • COMENTARIOS EN EL CÓDIGO:
    Son usados para hacer notas (apuntes) entre las líneas de
    código para aclarar y facilitar la comprensión. Localizar formas.
    - Para hacer comentarios de una línea se debe iniciar el
    comentario con “//”
    //int v - velocidad de desplazamiento.
    (activar o desactivar la función)

    - Para hacer comentarios que requieren más de una línea, se


    debe iniciar el comentario con “/*” y finalizarlo con “*/”
    Ejemplo:
    /* Esta instrucción dibuja 20 líneas y modifica
    el color según con la posición en el eje y */
    ALGUNOS ATRIBUTOS DE LA LÍNEA
    EL COLOR (RGB)
    - Se representa por 3 canales = RGB (rojo, verde,
    azul).
    - Escala que va de 0 a 255.

    - Canal alfa o transparencia.

    COLORES PRIMARIOS y secundarios

    RGB(0,255,255)= cian claro (verde +azul)


    RGB(255,0,255)= magenta (rojo+azul)
    RGB(255,255,0)= amarillo (rojo+verde)

    Tonos grises
    EL COLOR (HSB)

    Hue = el tono o el color en el espectro cuyo rango va de


    0 to 255.
    Saturation = saturación del color o cantidad de color.
    De 0 a 255.
    Brightness = el brillo o luminosidad del color.
    De 0 a 255. (de totalmente oscuro a la máxima
    luminosidad)
    MODOS DE EXPRESAR EL COLOR:
    OTRAS FORMAS:

    - triangle (triángulo) conecta tres puntos.


    triangle(0,90,45,45,70,70);

    - quad (cuadrilátero) 4 coordenadas diferentes


    con lo que el número de parámetros es 8.
    quad(90,60,130,45,180,90,150,85);

    - Formas personalizadas:
    El orden de posición de los vértices, cambia la
    manera en que la figura se dibuja.
    Con LINES, va contando de dos en dos vértices.

    Con TRIANGLES; dibujará cada tres vértices un


    triángulo diferente.
    Con TRIANGLE_STRIP; conecta los triángulos que se
    han dibujado.

    Con TRIANGLE_FAN; dibuja triángulos todos


    conectados desde el primer vértice.
    Con QUADS; dibujamos cuadriláteros cada 4
    vértices.

    Con QUAD_STRIP, se conectan los cuadriláteros.


    Invertir los dos últimos vértices del cuadrángulo.
    FORMAS CURVAS:

    - arc (arcos). Usamos la función arc con 6


    parámetros.
    - X,Y para determinar el centro
    - Ancho y alto en el 3º y
    4º parámetro
    - Comienzo del arco en
    el 5º parámetro
    - Fin del arco en el sexto
    parámetro.
    Processing mide los ángulos en radianes, que son el
    sistema de medida de las coordenadas polares.

    ÁNGULOS BASADOS EN

    Define los arcos en la dirección de las agujas del reloj


    PI, es igual a la mitad de la rotación, y PI dividido
    entre dos es igual a ¼ de la rotación.
    3 formas de dibujar un arco:
    OPEN- se rellenará desde comienzo hasta fin del arco
    PIE- se rellena la forma y añade una línea alrededor de
    todo el arco.
    CHORD- es parecido a open, además añade una línea
    que cierra el arco.
    OPEN

    PIE

    CHORD
    size(500,200);
    arc(100,100,75,75,0,PI);

    arc(233,100,75,75,0,PI);

    arc(367,100,75,75,0,radians(270));

    **ACTIVIDAD en clase: arcos y color


    Establece un grosor de línea para el
    primero, un arco sin relleno de color
    para el segundo, pero línea
    coloreada y un arco con forma
    coloreada y sin línea para el tercer
    ejemplo.
    CURVAS BEZIER:

    La función bezier permite dibujar curvas definidas


    por puntos de control y puntos de ancla.

    La curva es dibujada entre el 1º y 4º punto, y el control


    de la curva es definido por el 2º y 3ºde los puntos.
    BEZIER VERTEX:
    Cuando hemos iniciado la curva, cada posterior
    llamada de bezierVertex, continuará con otra
    curva y por tanto la forma con la conexión de
    nuevo punto con el anterior.
    VARIABLES
    ¿Qué es?
    Un espacio en la memoria y que almacena un VALOR,
    para ser utilizado por un programa.
    CONTENEDOR DE UN VALOR, y el ordenador lo
    memoriza como un dato, y volver a él cuando se quiera

    1º DECLARAR LA VARIABLE:
    Indicamos el tipo de variable seguido por el nombre.

    Los nombres:
    - Una sola palabra
    - Sin espacios
    - Comenzar por una letra aunque incluyan números
    - No incluir carácteres especiales de puntuación salvo
    GUION BAJO _
    El tipo: int, float, char….
    TIPOS:
    2º INICIALIZAR LA VARIABLE:
    Se le asigna un valor con el signo =.

    - Podemos declarar e inicializar la variable con una


    o dos líneas de código:
    - Elegir un tipo, separar los nombres por comas y
    luego asignar el valor por separado.
    - Las variables evitan que tengamos que repetirnos
    en el código.

    1º creamos una variable de números enteros para darle el


    valor al diámetro.
    int diametro = 150

    2º sustituimos los valores de ancho y alto por la variable


    creada, y pasa a ser un parámetro en nuestras elipses.

    3º con la variable creada si modificamos su valor cambia


    automáticamente en los parámetros donde se sitúa esa
    variable.

    **ACTIVIDAD: ejemplo de arriba. Creamos la variable para la


    posición y. comprobamos a cambiar parámetros.
    MODO ESTÁTICO Y MODO DINÁMICO:

    - void setup: las instrucciones se ejecutan una sola


    vez.
    - void draw: el código escrito dentro de este bloque se
    repite en un ciclo continúo hasta que cierra la
    aplicación.
    SINTÁXIS DE LOS MODOS
    - Después de las palabras setup y draw hay que escribir ()
    - Antes de las palabras setup y draw se escribe la palabra
    void en ambos casos.
    - Todas las instrucciones que forman parte de setup y draw
    hay que escribirlas entre { }

    ** posición de background
    ** posición mouseX, mouseY
    Estas variables devuelven unos valores en
    pixeles que permiten interactuar en nuestra
    pantalla.
    ** mouseX, mouseY
    (posición horizontal y vertical del mouse)

    ACTIVIDADES en clase:
    - Cambia la posición de background en los
    dos bloques setup y draw.

    - Cambia la posición de mouseX ,mouseY en


    los parámetros de alto y ancho del
    rectángulo.

    - Dibuja una línea, uno de sus puntos es fijo


    en el centro de un lienzo de (300,300), el
    otro punto varia siguiendo las coordenadas
    del mouse.

    - ** Veamos como la línea cambia de color.


    ACTIVIDAD DE ENTREGA:

    - Que el punto central donde coinciden los vértices


    siga a la posición del mouse.
    mouseReleased cuando soltamos el ratón
    mouseDragged cuando el ratón es arrastrado.
    mousePressed: es un bloque de código que ejecuta todo lo que
    está dentro cada vez que el botón del mouse es apretado.

    mouseReleased: el código dentro de este bloque se ejecuta


    cuando el botón del ratón es liberado.
    mouseDragged: es ejecutado cuando el botón del mouse es
    apretado y arrastrado.

    pmouseX, pmouseY: toman la posición previa del mouseX,


    mouseY, es decir, las coordenadas del mouse en el ciclo anterior
    para ejecutar una continuidad en el trazo.

    ACTIVIDAD en clase:

    Sobre una composición fija, crea un código


    interactivo con las variables vistas.
    Key, keyPressed, keyCode:
    VARIABLES: Números enteros: int (integer)
    0,1,2,3,-1,-2-3……

    **ACTIVIDAD en clase: en el mismo ejercicio


    introducir otra elipse con una velocidad diferente.

    También podría gustarte