Diferencia entre revisiones de «El enjambre del oficio: Configuración taxonómica de un corpus disciplinar»
De Casiopea
(Página creada con «{{Proyecto de Investigación |Título=El enjambre del oficio: Configuración taxonómica de un corpus disciplinar |Carreras Relacionadas=Diseño, Diseño Gráfico |Año de…») |
Sin resumen de edición |
||
Línea 1: | Línea 1: | ||
'''50 años''' ~ 50 voices polifónicas del Diseño <span style="float:right">2020</span> | |||
{{#widget:P5 | |||
|code = | |||
let init = 1970; | |||
let anno; | |||
let sketch; | |||
let flock; | |||
let col = ["#ffb400", "#e58637", "#d6423b", "#b41039", "#420c30", "#fe60a1", "#c961f7", "#ff734c", "#3bc7ff", "#8089ff"]; | |||
let dash = true; | |||
let connectors = true | |||
let normal = true; | |||
let alfa = 30; | |||
function getCol() { | |||
let i = Math.floor(random(col.length)); | |||
return col[i]; | |||
} | |||
function setup() { | |||
anno = year() - init; | |||
sketch = createCanvas(document.getElementById("p5").offsetWidth, 350); | |||
sketch.parent('p5'); | |||
flock = new Flock(); | |||
strokeCap(SQUARE); | |||
placeGrid(5, 10, 30, 60, 32, 16); | |||
let margin = 100; | |||
let xspacer = 30; | |||
let yspacer = 20; | |||
} | |||
function windowResized() { | |||
sketch = createCanvas(document.getElementById("p5").offsetWidth, 350); | |||
sketch.parent('p5'); | |||
} | |||
function placeGrid(cols, rows, mx, my, xspacer, yspacer) { | |||
for (let y = 0; y < rows; y++) { | |||
for (let x = 0; x < cols; x++) { | |||
let xpos = mx + xspacer * x; | |||
let ypos = my + yspacer * y; | |||
let b = new Boid(xpos, ypos); | |||
flock.addBoid(b); | |||
} | |||
} | |||
} | |||
function keyPressed() { | |||
if (key === '-') { | |||
dash = !dash; | |||
} | |||
if (key === 'c') { | |||
connectors = !connectors; | |||
} | |||
if (key === 'm') { | |||
normal = !normal; | |||
if (normal) { | |||
alfa = 40; | |||
} else { | |||
alfa = 5; | |||
} | |||
} | |||
if (key === '1') { | |||
placeGrid(5, 10, 30, 60, 32, 16); | |||
} | |||
if (key === '2') { | |||
placeGrid(25, 2, 50, height / 2, 32, 16); | |||
} | |||
if (key === '3') { | |||
placeGrid(5, 5, width * .3, height / 2, 16, 16); | |||
placeGrid(5, 5, width * .60, height / 2, 16, 16); | |||
} | |||
if (key === '4') { | |||
placeGrid(2, 5, width * .1, height / 2, 16, 16); | |||
placeGrid(5, 2, width * .25, height / 2, 16, 16); | |||
placeGrid(2, 5, width * .4, height / 2, 16, 16); | |||
placeGrid(5, 2, width * .55, height / 2, 16, 16); | |||
placeGrid(2, 5, width * .7, height / 2, 16, 16); | |||
} | |||
anno = flock.boids.length; | |||
} | |||
function draw() { | |||
background(255); | |||
if (normal) { | |||
blendMode(BLEND); | |||
} else { | |||
blendMode(DARKEST); | |||
} | |||
flock.run(); | |||
} | |||
function mouseDragged() { | |||
flock.addBoid(new Boid(mouseX, mouseY)); | |||
} | |||
function Flock() { | |||
// An array for all the boids | |||
this.boids = []; // Initialize the array | |||
} | |||
Flock.prototype.run = function() { | |||
for (let i = 0; i < this.boids.length; i++) { | |||
this.boids[i].run(this.boids); // Passing the entire list of boids to each boid individually | |||
} | |||
} | |||
Flock.prototype.addBoid = function(b) { | |||
this.boids.push(b); | |||
if (this.boids.length > 50) { | |||
this.boids.splice(0, 1); | |||
} | |||
} | |||
function Boid(x, y) { | |||
this.acceleration = createVector(0, 0); | |||
this.velocity = createVector(1, 0); | |||
this.position = createVector(x, y); | |||
this.r = 7; | |||
this.maxspeed = 1; // Maximum speed | |||
this.maxforce = 0.05; // Maximum steering force | |||
this.c = color(getCol()); | |||
} | |||
Boid.prototype.run = function(boids) { | |||
if (frameCount > 150) { | |||
this.flock(boids); | |||
this.update(); | |||
this.borders(); | |||
} | |||
if (dash) this.render(); | |||
} | |||
Boid.prototype.applyForce = function(force) { | |||
// We could add mass here if we want A = F / M | |||
this.acceleration.add(force); | |||
} | |||
// We accumulate a new acceleration each time based on three rules | |||
Boid.prototype.flock = function(boids) { | |||
let sep = this.separate(boids); // Separation | |||
let ali = this.align(boids); // Alignment | |||
let coh = this.cohesion(boids); // Cohesion | |||
// Arbitrarily weight these forces | |||
sep.mult(1.5); | |||
ali.mult(1.0); | |||
coh.mult(1.0); | |||
// Add the force vectors to acceleration | |||
this.applyForce(sep); | |||
this.applyForce(ali); | |||
this.applyForce(coh); | |||
} | |||
// Method to update location | |||
Boid.prototype.update = function() { | |||
// Update velocity | |||
this.velocity.add(this.acceleration); | |||
// Limit speed | |||
this.velocity.limit(this.maxspeed); | |||
this.position.add(this.velocity); | |||
// Reset accelertion to 0 each cycle | |||
this.acceleration.mult(0); | |||
} | |||
Boid.prototype.seek = function(target) { | |||
let desired = p5.Vector.sub(target, this.position); // A vector pointing from the location to the target | |||
// Normalize desired and scale to maximum speed | |||
desired.normalize(); | |||
desired.mult(this.maxspeed); | |||
// Steering = Desired minus Velocity | |||
let steer = p5.Vector.sub(desired, this.velocity); | |||
steer.limit(this.maxforce); // Limit to maximum steering force | |||
return steer; | |||
} | |||
Boid.prototype.render = function() { | |||
// Draw a triangle rotated in the direction of velocity | |||
let theta = this.velocity.heading(); | |||
noFill(); | |||
stroke(0); | |||
strokeWeight(2); | |||
push(); | |||
translate(this.position.x, this.position.y); | |||
rotate(theta); | |||
line(-this.r, 0, this.r, 0); | |||
pop(); | |||
} | |||
// Wraparound | |||
Boid.prototype.borders = function() { | |||
let t = 5; | |||
if (this.position.x < this.r + t) { | |||
this.position.x = this.r + t; | |||
this.acceleration = p5.Vector.mult(this.acceleration, -1); | |||
} | |||
if (this.position.y < this.r + t) { | |||
this.position.y = this.r + t; | |||
this.acceleration = p5.Vector.mult(this.acceleration, -1); | |||
} | |||
if (this.position.x > width - this.r - t) { | |||
this.position.x = width - this.r - t; | |||
this.acceleration = p5.Vector.mult(this.acceleration, -1); | |||
} | |||
if (this.position.y > height - this.r - t) { | |||
this.position.y = height - this.r - t; | |||
this.acceleration = p5.Vector.mult(this.acceleration, -1); | |||
} | |||
} | |||
// Separation | |||
// Method checks for nearby boids and steers away | |||
Boid.prototype.separate = function(boids) { | |||
let desiredseparation = 25.0; | |||
let steer = createVector(0, 0); | |||
let count = 0; | |||
// For every boid in the system, check if it's too close | |||
for (let i = 0; i < boids.length; i++) { | |||
let d = p5.Vector.dist(this.position, boids[i].position); | |||
// If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself) | |||
if ((d > 0) && (d < desiredseparation)) { | |||
// Calculate vector pointing away from neighbor | |||
let diff = p5.Vector.sub(this.position, boids[i].position); | |||
diff.normalize(); | |||
diff.div(d); // Weight by distance | |||
steer.add(diff); | |||
count++; // Keep track of how many | |||
if (connectors) this.connect(boids[i]); | |||
} | |||
} | |||
// Average -- divide by how many | |||
if (count > 0) { | |||
steer.div(count); | |||
} | |||
// As long as the vector is greater than 0 | |||
if (steer.mag() > 0) { | |||
// Implement Reynolds: Steering = Desired - Velocity | |||
steer.normalize(); | |||
steer.mult(this.maxspeed); | |||
steer.sub(this.velocity); | |||
steer.limit(this.maxforce); | |||
} | |||
return steer; | |||
} | |||
Boid.prototype.connect = function(b) { | |||
let t1 = this.velocity.heading(); | |||
let t2 = b.velocity.heading(); | |||
let x1 = this.position.x + cos(t1) * this.r; | |||
let y1 = this.position.y + sin(t1) * this.r; | |||
let x2 = this.position.x + cos(t1) * -this.r; | |||
let y2 = this.position.y + sin(t1) * -this.r; | |||
let x3 = b.position.x + cos(t2) * this.r; | |||
let y3 = b.position.y + sin(t2) * this.r; | |||
let x4 = b.position.x + cos(t2) * -this.r; | |||
let y4 = b.position.y + sin(t2) * -this.r; | |||
//blendMode(MULTIPLY); | |||
noStroke(); | |||
fill(this.c); | |||
this.c.setAlpha(alfa); | |||
quad(x1, y1, x2, y2, x4, y4, x3, y3, ); | |||
//blendMode(BLEND); | |||
} | |||
// Alignment | |||
// For every nearby boid in the system, calculate the average velocity | |||
Boid.prototype.align = function(boids) { | |||
let neighbordist = 50; | |||
let sum = createVector(0, 0); | |||
let count = 0; | |||
for (let i = 0; i < boids.length; i++) { | |||
let d = p5.Vector.dist(this.position, boids[i].position); | |||
if ((d > 0) && (d < neighbordist)) { | |||
sum.add(boids[i].velocity); | |||
count++; | |||
} | |||
} | |||
if (count > 0) { | |||
sum.div(count); | |||
sum.normalize(); | |||
sum.mult(this.maxspeed); | |||
let steer = p5.Vector.sub(sum, this.velocity); | |||
steer.limit(this.maxforce); | |||
return steer; | |||
} else { | |||
return createVector(0, 0); | |||
} | |||
} | |||
// Cohesion | |||
// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location | |||
Boid.prototype.cohesion = function(boids) { | |||
let neighbordist = 100; | |||
let sum = createVector(0, 0); // Start with empty vector to accumulate all locations | |||
let count = 0; | |||
for (let i = 0; i < boids.length; i++) { | |||
let d = p5.Vector.dist(this.position, boids[i].position); | |||
if ((d > 0) && (d < neighbordist)) { | |||
sum.add(boids[i].position); // Add location | |||
count++; | |||
} | |||
} | |||
if (count > 0) { | |||
sum.div(count); | |||
return this.seek(sum); // Steer towards the location | |||
} else { | |||
return createVector(0, 0); | |||
} | |||
} | |||
}} | |||
1970 | |||
{{Proyecto de Investigación | {{Proyecto de Investigación | ||
|Título=El enjambre del oficio: Configuración taxonómica de un corpus disciplinar | |Título=El enjambre del oficio: Configuración taxonómica de un corpus disciplinar |
Revisión actual - 08:52 31 mar 2021
50 años ~ 50 voices polifónicas del Diseño 2020
1970
Título | El enjambre del oficio: Configuración taxonómica de un corpus disciplinar |
---|---|
Carreras Relacionadas | Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
Período | 2020- |
Financiamiento | PUCV DII |
Investigador Responsable | Sylvia Arriagada |