Introducción a Processing 1



Descargar 1,94 Mb.
Página1/11
Fecha de conversión04.03.2017
Tamaño1,94 Mb.
  1   2   3   4   5   6   7   8   9   10   11
  • Introducción a Processing v1.2.1
  • Raúl Lacabanne - 2011
  • Versión 41
  • Resumen de los tópicos básicos del libro: “Processing: A Programming Handbook
  • for Visual Designers and Artists”
  • de Casey Reas y Ben Fry. MIT Press, 2007.
  • Design By Numbers
  • Design By Numbers (DBN) fue creado como una plataforma de introducción al diseño asistido por ordenador para diseñadores visuales y artistas. Conceptualizado por John Maeda en el ACG (Aesthetics + Computation Group) del MIT, quien cree que la calidad del diseño y arte de medios sólo puede mejorar a través del establecimiento de infraestructuras educativas en escuelas de arte y tecnología que fomenten la formación de individuos transdiciplinarios competentes.
  • John Maeda. DBN. 1999-2001.
  • Processing
  • Processing es un lenguaje y entorno de programación de código abierto basado en Java, de fácil utilización, y que sirve como instrumento didáctico para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital. Fue iniciado por Ben Fry y Casey Reas. Processing es desarrollado por artistas y diseñadores como una herramienta alternativa al software propietario. Puede ser utilizado tanto para aplicaciones locales así como aplicaciones para la web.
  • Casey Reas & Ben Fry. 2001.
  • Parte 1 Elementos de sintaxis
  • Descarga y descompresión
  • Dirigirse a la siguiente URL: http://www.processing.org/download/ y descargar la versión apropiada a su sistema operativo. Se recomienda a los usuarios de Windows descargar la versión Windows (a secas) y no la versión Windows (Without Java).
  • Una vez descargado el archivo, descomprimirlo en alguna carpeta del disco rígido, ej: el escritorio. Esto quiere decir que el entorno de desarrollo Processing no necesita instalación.
  • A continuación abrirá la carpeta descomprimida y ejecutará el archivo correspondiente al icono:
  • Comentarios
  • En Processing tenemos dos formas de realizar comentarios.
  • El primero es un comentario simple:
  • // esto es un comentario...
  • // ...y esto también lo es
  • el segundo es un bloque de comentario:
    • /*
    • esto
    • también
    • es
    • un
    • comentario
    • */
  • Funciones (I)
  • Las funciones permiten ejecutar algoritmos, es decir, obtener un resultado a partir de un o una serie de pasos lógicos y estructurados.
  • En general, el nombre de una función comienza en minúsculas y es seguido por un par de paréntesis.
  • Los elementos que se encuentran entre los paréntesis se llaman parámetros.
  • Funciones (II)
  • Ejemplo de funciones
    • size(200, 200)
    • background(102)
    • noCursor()
  • Sensibilidad a mayúsculas y minúsculas
  • b =/= B
  • size() =/= Size()
  • Espaciado
  • Processing es flexible a los espaciados. Sin embargo se recomienda ser prudente con los mismos para que la lectura del código sea cómoda.
  • Instrucciones (I)
  • Si utilizamos una metáfora del lenguaje humano, podemos entender a la instrucción como si fuera una oración.
  • Las instrucciones siempre se deben terminan con el signo punto y coma (;).
  • Dentro de una instrucción se pueden realizar las siguientes acciones:
    • definir una variable o array,
    • asignar un valor a una variable (o valores a un array),
    • ejecutar una función,
    • o construir un objeto
  • Instrucciones (II)
  • Ejemplo de un boceto que contiene un conjunto de instrucciones:
    • size(200, 200); // Ejecuta la función size() con dos parámetros
    • background(102); // Ejecuta la función background() con un parámetro
    • noCursor(); // Ejecuta la función noCursor() con ningún parámetro
  • Capítulo “Structure 1: Code Elements” (pag. 17). Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and Artists”, MIT Press, 2007.
  • Información complementaria
  • Utilización de la consola
  • // Para imprimir un valor – Uso de la función print()
  • print(10); // Imprime 10 en la consola
  • // Para imprimir un texto, coloque el mismo entre comillas
  • print(“processing"); // Imprime processing a continuación del dato anterior
  • // Para imprimir en líneas separadas – Uso de la función println()
  • println(10); // Imprime 10 en la consola y salta a una nueva línea
  • println(“processing"); // Imprime processing y salta a una nueva línea
  • Función cursor() y noCursor()
    • cursor()
      • Sintaxis
        • cursor()
        • cursor(MODE)
        • cursor(image, x, y)
      • Parámetros
        • MODE: Puede optar por ARROW, CROSS, HAND, MOVE, TEXT, WAIT
        • image PImage: cualquier variable del tipo PImage
        • x int: el punto activo horizontal del cursor
        • y int: el punto activo vertical del cursor
    • noCursor()
  • Parte 2 Coordenadas y figuras primitivas
  • Coordenadas
  • En Processing, el origen se encuentra en el margen superior izquierdo.
  • 0, 0
  • +100
  • +100
  • Primitivas: punto
  • point(20, 20);
  • point(30, 30);
  • point(40, 40);
  • point(50, 50);
  • point(60, 60);
  • Primitivas: línea
  • line(25, 90, 80, 60);
  • line(50, 12, 42, 90);
  • line(45, 30, 18, 36);
  • Primitivas: elipse
  • ellipse(40, 40, 60, 60); // círculo grande
  • ellipse(75, 75, 32, 32); // círculo pequeño
  • Primitivas: rectángulo
  • rect(15, 15, 40, 40); // cuadrado grande
  • rect(55, 55, 25, 25); // cuadrado pequeño
  • Orden de dibujo
  • En Processing, el orden de dibujo siempre es secuencial, es decir, la primer instrucción se representa primero, las siguientes por encima, y la última por sobre todas estas.
  • rect(15, 15, 60, 60); // cuadrado inferior
  • rect(20, 20, 40, 40); // cuadrado intermedio
  • rect(25, 25, 20, 20); // cuadrado superior
  • Suavizado
    • smooth()
    • noSmooth()
    • smooth();
    • strokeWeight(1); // por defecto
    • line(20, 20, 80, 20);
    • strokeWeight(4); // 4 pixeles
    • line(20, 40, 80, 40);
    • strokeWeight(10); // 10 pixeles
    • line(20, 70, 80, 70);
  • Atributos: strokeCap() extremo de contorno
    • smooth();
    • strokeWeight(12.0);
    • strokeCap(ROUND); // redondeado
    • line(20, 30, 80, 30);
    • strokeCap(SQUARE); // plano
    • line(20, 50, 80, 50);
    • strokeCap(PROJECT); // proyección
    • line(20, 70, 80, 70);
  • Atributos: strokeJoin() extremo de contorno
    • smooth();
    • strokeWeight(10);
    • strokeJoin(MITER); // mitra
    • triangle(50, 20, 80, 80, 20, 80);
    • smooth();
    • strokeWeight(10);
    • strokeJoin(BEVEL); // bisel
    • triangle(50, 20, 80, 80, 20, 80);
    • smooth();
    • strokeWeight(10);
    • strokeJoin(ROUND); // redondeada
    • triangle(50, 20, 80, 80, 20, 80);
  • Lectura recomendada
  • Capítulo “Shape 1: Coordinates, Primitives” (pag. 23).
  • Información complementaria
  • Primitivas: triángulo
  • triangle(60, 10, 25, 60, 75, 65);
  • Primitivas: cuadrilátero
  • quad(38, 31, 86, 20, 69, 63, 30, 76);
  • Primitivas: curva bezier
  • bezier(32, 20, 80, 5, 80, 75, 30, 75);
  • // Dibujo de puntos de control
  • line(32, 20, 80, 5);
  • ellipse(80, 5, 4, 4);
  • line(80, 75, 30, 75);
  • ellipse(80, 75, 4, 4);



Compartir con tus amigos:
  1   2   3   4   5   6   7   8   9   10   11


La base de datos está protegida por derechos de autor ©absta.info 2019
enviar mensaje

    Página principal