dmsc_spring2021

Week 7

Events this week: Auriea Harvey Guest Lecture + WordHack + Livecoding

Part of my goal as a professor is to introduce you to the wider field of New Media art in general, and the world of artists working with code in particular. We have 3 exciting events of this kind this coming week: performances and computational writing tonight, an algorave tomorrow and a lecture by a pioneering diginal new media artist and game designer next Wednesday.

Auriea Harvey next Wednesday at 5pm

Event info and RSVP

For the second of our spring New Media Lecture Series speakers we are pleased to have Auriea Harvey joining us.

Auriea’s work spans every area we teach in New Media, and beyond. She’s a pioneering net artist, a sculptor, and an experimental game designer for Tale of Tales with a focus on storytelling in 3d and XR alongside her partner Michaël Samyn, together making up the duo Entropy8zuper!. Auriea’s solo exhibition Year Zero is currently on view at bitforms gallery in New York.

WordHack Tonight!

Wordhack at 7pm - info - watch via twitch.tv/babycastles

Livecoding TOMORROW!

Livecode.nyc at Currents.fm 7pm to midnight - info/stream

//LINEUP
// Melody Loveless + ColonelPanix
// Kengchakaj + Nitchafame
// Messica Arson
// Maxwell Neely-Cohen + gwenpri.me
// Luisa Mei + Char Stiles
// Dan Gorelick + solquemal
// eeeeaaii + haute.rod
// Sophia Sanborn + Indira Ardolic
// Andrew Cotter + lzkpa
// Codenobi + Wookie

Random movers - objects in an array

var creature = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);

  //fill array
  for (var i = 0; i < 5; i++) { //loop 5 times
    //put an object in the array for each loop
    var d = random(100, 200);
    creature[i] = new Creature(width / 2, height / 2, d, d);

  }
  noStroke();
}

function draw() {
  background(255);
  for (var i = 0; i < 5; i++) { //loop 5 times
    creature[i].display(); //run the display function of the object
    creature[i].move();
  }
}

class Creature {

  constructor(x, y, w, h) { 
    this.position = createVector(x, y);
    this.w = w;
    this.h = h;
    this.color = color(random(255),random(255),random(255),100);
    this.n = createVector(random(2),random(2)); //generate random starting noise variables; 
    this.p = createVector(0,0); //position variable
    this.inc = 0.005; //noise variable increment
  }

  //Functions 
  display() {
    fill(this.color);
    ellipse(this.position.x, this.position.y, this.w, this.h);
    this.w += random(-1, 1);
    this.h += random(-1, 1);
  }

  move() {
    this.p.x = noise(this.n.x);
    this.p.y = noise(this.n.y);

    this.position.x = map(this.p.x, 0, 1, 0, width);
    this.position.y = map(this.p.y, 0, 1, 0, height);

    this.n.x = this.n.x + this.inc;
    this.n.y = this.n.y + this.inc;
  }
}

Code

Notes on Arrays

We have made lots of use of array.length, for example when looping to create new objects in an array, or in our draw to loop through all elements of an erray and run their methods. There are other useful array methods as well.

array.push();
let array = [22, 10, 8, 4, 9];
array.push(300);
  
console.log("last element in the array: " + array[array.length-1]);

This adds a new element to the end of the array.

indexOf(element)

example

print(array.indexOf(8)); //returns 2 because it's the second index in the array set above

Returns the index of given element, or returns -1 if it’s not found.

var array = [2, 5, 9];   
var index = array.indexOf(2); // 0   
index = array.indexOf(7); // -1   
splice()

Unlike in Processing, arrays in Javascript (and p5.js) may change their length. In other words, you can add and remove elements from an array.

Remove one element from an array. In a for loop, start at the end so that array.length doesn’t get confused.

Starter code

let particles = [];

function setup() {
  noCanvas();
  
  for (let i = 0; i < 10; i++){
    particles[i] = new Particle(random());
  }
  
  
//go backwards, counting from end of array to beginning
  for (var i = particles.length-1; i >= 0; i--) {

    var p = particles[i]; //put particle into p   
    
    p.run();    
    
    if (p.isDead()) {   
      //remove the particle   
      particles.splice(i, 1); //remove particle at i   
    }  
  }
  
  print(particles);
}

class Particle{
  constructor(chance){
    this.alive = true;
    this.chance = chance;
  }
  run(){
    
  }
  isDead(){
    if (this.chance>0.5){
      return false;
    } else {
      return true;
    }
  }
  
}

Swarms

caribou

Agent of Chaos

If You Look at Your Phone While Walking, You’re an Agent of Chaos, from The New York Times

Swarm of millipedes

Zombie Crabs

shrimp

These Shrimp Leave the Safety of Water and Walk on Land. But Why?

Swarming and A-life Artworks

some sources orginally from Golan Levin, thank you

Adria Navarro - Generative Play

Conway’s Game of Life - in p5.js

Dan Shiffman’s Boids - in p5.js

zrispo - worm

Resources

classes and objects with ES6 style in p5.js - video on The Coding Train (YouTube)

Homework

Please attend:

Livecode.nyc concert - Friday March 19, 7pm - midnight

Auriea Harvey lecture - Wednesday March 24, 5pm

Bonus:

Wordhack (algorithmic performance, poetry) - TONIGHT