Diferencia entre revisiones de «Imagen Escrita»
Sin resumen de edición |
Sin resumen de edición |
||
Línea 1: | Línea 1: | ||
{{Asignatura | {{Asignatura | ||
|Nombre=Imagen Escrita: Introducción a la Programación Gráfica | |Nombre=Imagen Escrita: Introducción a la Programación Gráfica | ||
Línea 92: | Línea 46: | ||
|Horas de Laboratorio=2 | |Horas de Laboratorio=2 | ||
}} | }} | ||
<processingjs> | |||
float spring = 0.09; // resorticidad del sistema | |||
float gravity = 0.08; // gravedad del sistema | |||
Ball[] balls; | |||
int count, temp; // 'count' cuenta las pelotas y 'temp' se usa para los ciclos for, es una copia temporal de count | |||
int TOTAL = 444; | |||
boolean drawLines = false; // dibujar lines de colisiones, se manipula con ESPACIO | |||
//MovieMaker mm; | |||
boolean rec = false; // true para grabar un video | |||
void setup() { | |||
colorMode(HSB); | |||
balls = new Ball[TOTAL]; | |||
count = temp = 0; | |||
size(1170, 400); | |||
noStroke(); | |||
smooth(); | |||
} | |||
void draw() { | |||
background(250); | |||
for (int i = 0; i < temp; i++) { | |||
balls[i].collide(); | |||
balls[i].move(); | |||
balls[i].display(); | |||
} | |||
temp = count; | |||
// if(rec) mm.addFrame(); | |||
} | |||
void mousePressed(){ | |||
} | |||
void mouseReleased(){ | |||
if(count < (TOTAL-1)){ | |||
balls[count] = new Ball(mouseX, mouseY, count); | |||
count ++; | |||
} | |||
} | |||
void keyPressed(){ | |||
if(key == 'r' || key =='R'){ | |||
setup(); | |||
} | |||
if(key == ' '){ | |||
drawLines = !drawLines; | |||
} | |||
if(key == 'q' && rec){ | |||
// mm.finish(); | |||
exit(); | |||
} | |||
} | |||
class Ball { | |||
float x, y; | |||
float maxDiameter, diameter; | |||
float vx = 0; | |||
float vy = 0; | |||
int id; | |||
boolean growing, fertil; | |||
color col; | |||
Ball(float xin, float yin, int idin) { | |||
x = xin; | |||
y = yin; | |||
maxDiameter = random(2, 40); | |||
id = idin; | |||
growing = true; | |||
fertil = false; | |||
diameter = 0; | |||
float h = map(maxDiameter, 2, 40, 0, 255); | |||
col = color(h, 200, 255, 180); | |||
} | |||
void collide() { | |||
for (int i = 0; i < temp; i++) { | |||
if(id != i){ | |||
float dx = balls[i].x - x; | |||
float dy = balls[i].y - y; | |||
float distance = sqrt(dx*dx + dy*dy); | |||
float minDist = balls[i].diameter/2 + diameter/2; | |||
if (distance < minDist) { | |||
float angle = atan2(dy, dx); | |||
float targetX = x + cos(angle) * minDist; | |||
float targetY = y + sin(angle) * minDist; | |||
float ax = (targetX - balls[i].x) * spring; | |||
float ay = (targetY - balls[i].y) * spring; | |||
vx -= ax; | |||
vy -= ay; | |||
balls[i].vx += ax; | |||
balls[i].vy += ay; | |||
pushMatrix(); | |||
translate(x,y); | |||
float ang = atan2(balls[i].x - x, balls[i].y - y) * -1 + HALF_PI; | |||
popMatrix(); | |||
float newX = x + cos(ang) * (diameter/2); | |||
float newY = y + sin(ang) * (diameter/2); | |||
if(drawLines){ | |||
fill(0, 100); | |||
ellipse(newX, newY, 5, 5); | |||
stroke(0, 100); | |||
line(x,y, balls[i].x, balls[i].y); | |||
noStroke(); | |||
} | |||
//////////////////////////////////////////////////// create new ball | |||
if(fertil && count < (TOTAL-1)){ | |||
fertil = false; | |||
balls[i].fertil = false; | |||
balls[count] = new Ball(newX, newY, count); | |||
count ++; | |||
//print("plink! \t"); | |||
} | |||
} | |||
} | |||
} | |||
} | |||
void move() { | |||
vy += gravity; | |||
x += vx; | |||
y += vy; | |||
if (x + diameter/2 > width) { | |||
x = width - diameter/2; | |||
vx += -0.9; | |||
} | |||
else if (x - diameter/2 < 0) { | |||
x = diameter/2; | |||
vx *= -0.9; | |||
} | |||
if (y + diameter/2 > height) { | |||
y = height - diameter/2; | |||
vy *= -0.9; | |||
} | |||
else if (y - diameter/2 < 0) { | |||
y = diameter/2; | |||
vy *= -0.9; | |||
} | |||
} | |||
void display() { | |||
if(growing){ | |||
float dif = maxDiameter - diameter; | |||
diameter += dif * 0.05; | |||
if(dif < 0.01){ | |||
diameter = maxDiameter; | |||
growing = false; | |||
fertil = true; | |||
} | |||
} | |||
fill(col); | |||
ellipse(x, y, diameter, diameter); | |||
if(!fertil && !growing && frameCount % 48 == 0)fertil = true; | |||
} | |||
} | |||
</processingjs> | |||
==Herramietas== | ==Herramietas== | ||
* [http://processing.org Processing.org] | * [http://processing.org Processing.org] | ||
* [http://sketchbook.cc Sketchbook] | * [http://sketchbook.cc Sketchbook] | ||
{{Los Cursos}} | {{Los Cursos}} |
Revisión del 08:31 3 sep 2015
Clave(es) | ARQ 060,EAD 1841 |
---|---|
Créditos | 2 |
Profesor(es) | Herbert Spencer |
Del Programa | Arquitectura,Diseño |
Ciclo Formativo | Ciclo Disciplinar |
Área de Estudio | Área Fundamental, Línea del Lenguaje Tecnológico |
Currículum | Ajuste Curricular 2015 |
Homologada | Gráfica Digital |
Régimen | semestral |
Período Académico | primero |
Horas PUCV | 1 teóricas + 1 de taller + 0 de ayudantía + 2,5 de trabajo autónomo * Las horas PUCV corresponden a periodos académicos de 35 minutos. |
Descripción y Contextualización de la Asignatura en el Currículo
Este curso corresponde a una introducción al diseño de software como una herramienta de expresión plástica; ya sea estática, cinética o interactiva. Aquí trataremos los fundamentos de la forma computacional y los principios de la programación gráfica basándonos en el lenguaje Processing. Los estudiantes se familiarizarán con algoritmos básicos, geometría computacional y simulación cinemática además de los conceptos básicos y necesarios para construir programas; como los diferentes tipos de datos, iteraciones, funciones y el concepto de objeto, entre otros. Este ramo busca equilibrar las nociones matemáticas abstractas de la computación con la expresión plástica y formal de los algoritmos, permitiendo una mirada más amplia, artística y lúdica de la forma computacional. Tener experiencia previa en programación no es un requisito para este curso.
Contenidos o Unidades de Aprendizaje
- Breve historia de la programación
- Contextualización histórica cyberpunk y cultura DIY
- Pensamiento algorítmico en el arte
- Entorno de desarrollo Processing
- Estructuras de datos
- Ciclos y Repeticiones
- Funciones propias
- Arreglos
- Objetos
- Elementos de interactividad
- Proyecciones: formas de extender y continuar el aprendizaje
Resultados de Aprendizaje
Una vez completada la asignatura, el o la estudiante será capaz de:
Competencias Fundamentales |
|
---|---|
Competencias Disciplinares |
|
Competencias Profesionales |
|
Actividades de Aprendizaje
- Presentaciones en modalidad de ponencia
- Talleres prácticos, tomando casos, explicando sus partes y desglosando sus métodos
- Reuniones individuales o grupales con el profesor
- Realización de proyectos individuales o grupales
Evaluación de los Resultados de Aprendizaje
- Constancia y cumplimiento de los encargos periódicos
- Creatividad entendida en este curso como la capacidad de conjeturar y explorar yendo más allá de la literalidad del ejemplo. Al no existir resultados correctos o falsos (como valor mensurable), nos remitiremos a sus dimensiones cualitativas
- ya sean en términos escriturales-estructurales (elegancia) o expresivo-plásticos (formales-idiosincráticos)
- Ciudadanía entendida como el sentido de colaboración y reciprocidad con el taller, manifestándose en disponibilidad y capacidad de entregar conocimientos y compartir código, reconociendo y citando las fuentes según sea el caso.
Bibliografía y Otros Recursos para el Aprendizaje
Processing: A Programming Handbook for Visual Designers and Artists |
The Nature of Code. Daniel Shiffman |
<processingjs>
float spring = 0.09; // resorticidad del sistema
float gravity = 0.08; // gravedad del sistema
Ball[] balls;
int count, temp; // 'count' cuenta las pelotas y 'temp' se usa para los ciclos for, es una copia temporal de count
int TOTAL = 444;
boolean drawLines = false; // dibujar lines de colisiones, se manipula con ESPACIO //MovieMaker mm; boolean rec = false; // true para grabar un video
void setup() {
colorMode(HSB); balls = new Ball[TOTAL]; count = temp = 0; size(1170, 400); noStroke(); smooth();
}
void draw() {
background(250); for (int i = 0; i < temp; i++) { balls[i].collide(); balls[i].move(); balls[i].display(); } temp = count; // if(rec) mm.addFrame();
}
void mousePressed(){ }
void mouseReleased(){
if(count < (TOTAL-1)){ balls[count] = new Ball(mouseX, mouseY, count); count ++; }
}
void keyPressed(){
if(key == 'r' || key =='R'){ setup(); } if(key == ' '){ drawLines = !drawLines; } if(key == 'q' && rec){ // mm.finish(); exit(); }
} class Ball {
float x, y; float maxDiameter, diameter; float vx = 0; float vy = 0; int id; boolean growing, fertil; color col;
Ball(float xin, float yin, int idin) { x = xin; y = yin; maxDiameter = random(2, 40); id = idin; growing = true; fertil = false; diameter = 0; float h = map(maxDiameter, 2, 40, 0, 255); col = color(h, 200, 255, 180); }
void collide() { for (int i = 0; i < temp; i++) { if(id != i){ float dx = balls[i].x - x; float dy = balls[i].y - y; float distance = sqrt(dx*dx + dy*dy); float minDist = balls[i].diameter/2 + diameter/2; if (distance < minDist) { float angle = atan2(dy, dx); float targetX = x + cos(angle) * minDist; float targetY = y + sin(angle) * minDist; float ax = (targetX - balls[i].x) * spring; float ay = (targetY - balls[i].y) * spring; vx -= ax; vy -= ay; balls[i].vx += ax; balls[i].vy += ay;
pushMatrix(); translate(x,y); float ang = atan2(balls[i].x - x, balls[i].y - y) * -1 + HALF_PI; popMatrix(); float newX = x + cos(ang) * (diameter/2); float newY = y + sin(ang) * (diameter/2);
if(drawLines){ fill(0, 100); ellipse(newX, newY, 5, 5); stroke(0, 100); line(x,y, balls[i].x, balls[i].y); noStroke(); }
//////////////////////////////////////////////////// create new ball if(fertil && count < (TOTAL-1)){ fertil = false; balls[i].fertil = false;
balls[count] = new Ball(newX, newY, count); count ++; //print("plink! \t"); } } } } }
void move() { vy += gravity; x += vx; y += vy; if (x + diameter/2 > width) { x = width - diameter/2; vx += -0.9; } else if (x - diameter/2 < 0) { x = diameter/2; vx *= -0.9; } if (y + diameter/2 > height) { y = height - diameter/2; vy *= -0.9; } else if (y - diameter/2 < 0) { y = diameter/2; vy *= -0.9; } }
void display() { if(growing){ float dif = maxDiameter - diameter; diameter += dif * 0.05; if(dif < 0.01){ diameter = maxDiameter; growing = false; fertil = true; } } fill(col); ellipse(x, y, diameter, diameter); if(!fertil && !growing && frameCount % 48 == 0)fertil = true; }
} </processingjs>
Herramietas
Cursos Realizados
- Processing: LC0(Año: 2 007)
- LC0: 2007(Año: 2 007)
- LC0: 2009(Año: 2 009)
- Imagen Escrita 2012(Año: 2 012)
- Imagen Escrita 2013 - ARQ(Año: 2 013)
- Imagen Escrita 2013 - DIS(Año: 2 013)
- Imagen Escrita 2017(Año: 2 017)
- Imagen Escrita 2018(Año: 2 018)
- Imagen Escrita 2019 T1(Año: 2 019)
- Imagen Escrita 2019(Año: 2 019)
- Imagen Escrita 2019 T2(Año: 2 019)
- Imagen Escrita 2020(Año: 2 020)
- Imagen Escrita 2021(Año: 2 021)
- Imagen Escrita 2022(Año: 2 022)
- Imagen Escrita: Espacios de Información(Año: 2 023)
- Imagen Escrita 2023(Año: 2 023)