Yingyang Zhou-Final Project

-press blank space for next line
-press “a” when you see the line you like
-press “g” for generating your poem
(your poem will be on top but you can press blank space to keep skimming the rest of the poem)
//running this on website, you probably need to click the canvas first because the blank space key is conflict with the scrolling down on web page.


//Yingyang Zhou
//Final Project
//section A

var poemRilke = "After_the summer's_yield_Lord_it is_time_to let_your shadow_lengthen_on the sundials_and in the pastures_let_the rough winds_fly_As for_the final fruits_coax them_to roundness_Direct_on them_two days of warmer light_to hale them golden_toward their term_and harry_the last few drops_of sweetness_through the wine.";
var words = poemRilke.split("_");
var num = 0;
var numMy = 0;
var l = 0;
var speed = 1;
var myPoem = [];

var inc = 0.1;
var scl = 10;
var cols, rows;
var zoff = 0;
var particles = [];
var flowfield;

// function preload(){
//      whiteNoise = loadSound("forestsurroundings.wav"); 
// }

function setup() {
    createCanvas(400, 400);
    colorMode(RGB, 255);
    cols = floor(width / scl);
    rows = floor(height / scl);

    flowfield = new Array(cols * rows);

    for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();

    // var button = createButton("generate my poem");
    // button.mousePressed(generatePoem);

function draw() {

  var yoff = 0;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      var index = x + y * cols;
      var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      var v = p5.Vector.fromAngle(angle);
      flowfield[index] = v;
      xoff += inc;
    yoff += inc;
    zoff += 0.0003;

  for (var i = 0; i < particles.length; i++) {
    for(var i = 0; i < words.length; i++){
        textAlign(CENTER, CENTER); 
        fill(50, 50, 50, random(10));
        textFont("Segoe Script");  
        // stroke(50, 50, 50, random(10));
        text(words[l-1], width/2, 20*(num+1) - speed);

    if(num > 18){
      num = 0;
    if(l > words.length){
      l = 0;

    // whiteNoise.play();
function reset(){
  flowfield = new Array(cols * rows);

  for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();

function generatePoem(){
  // var randomLine;
  for(var i = 0; i < myPoem.length; i++){
    text(myPoem[i], width/2, 20*(i+1));


function Particle() {
  this.pos = createVector(random(width), random(height));
  this.vel = createVector(0, 0);
  this.acc = createVector(0, 0);
  this.maxspeed = 4;
  this.h = 0;

  this.prevPos = this.pos.copy();

  this.update = function() {

  this.follow = function(vectors) {
    var x = floor(this.pos.x / scl);
    var y = floor(this.pos.y / scl);
    var index = x + y * cols;
    var force = vectors[index];

  this.applyForce = function(force) {

  this.show = function() {
    stroke(this.h, 5);
    this.h = this.h + 1;
    if (this.h > 255) {
      this.h = 0;
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);

  this.updatePrev = function() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;

  this.edges = function() {
    if (this.pos.x > width) {
      this.pos.x = 0;
    if (this.pos.x < 0) {
      this.pos.x = width;
    if (this.pos.y > height) {
      this.pos.y = 0;
    if (this.pos.y < 0) {
      this.pos.y = height;



function keyTyped(){ 
  if(key === ' '){
    num ++;
    numMy ++;
    l ++;
  if(key === 'a'){
    for(var i = 0; i < 5; i++){

  if(key ==='g'){


For the final, I was initially had idea doing something more related to sound but realized that would be hard on WordPress website, so I change the idea a little bit.

I was always interested the what random can do for programming, it always turn out surprising. I had idea of gerating a poem of my own, from the pecies of poem/sentence/paragraph, poem is sometime a collection of different fragaments.

This program shows here as from an example, it is a poem I like very much from Rilke, a germany poet.

I use perlin noise keep running as a dynamic background, which I am very pleased I had it working.

Yingyang Zhou-LookingOutwards-12

I look specifically for the visual presentation of sound effect (audiovisual art) which I’ll design for my final project. I found many interesting art work related in generative art realm. One of them I apprecited is the work of  Leander Herzog.

For this project, sound will be automatically played but you can interact with it too, as you clicked, different rythm of same sound effect will be played, it is amazing because it makes you wondering the connection of the sound and visual effect.



This project is not related to sound but still interested to me because the strong effect of perpective changing as your mouse move, possibly similiar element could be applied to my final project.


Another artist that interest me is Tina Frank.


The description of this project:

“This 6,5-minute long video of Tina Frank focuses on the threshold of spatial perception. Like a chromographic pendulum yellow-black patterns contract, unfold and overlap. They evoke rapid speed mementos of Brion Gysin’s Dreamachines aswell as Tony Conrad’s The Flicker or of Gestalt Theory from the early 20th century. After an induction period of some minutes the viewer can no longer tell if what he sees are afterimages from the color space or if these psychedelic visions are part of the videosequence.

This experience is intensified by the four-channel-soundtrack from Florian Hecker. Dynamic pulsating rhythms bring narrative cartesian coordinates from front, back, left and right into a permanent oscillation. Binaural stereophonic and quadrophonic arrangements add up to an acoustic whole which consolidates a timebased déjà vu together with an acoustic déjà entendu.”

I’m interested in the layersof sound it display and yet the visual is simple but enough to show the relation of the sound.


Yingyang Zhou-Project-12-Proposal

For the final project, I would like to play with the sound effect since I’m very interested in it and we don’t have a chance to do a project on sound.

I would like to a game that is similiar to keyboard instrument. The idea is you need to press the right key of the instrument that is playing right now, the legend of keys will be given on screen. Also the score will be cumulated and shown on screen. Ideally, the level will be harder when you get to a certain amount of score.

Yingyang Zhou-LookingOutwards-11

For week 4 looking outwards, I wrote about Ryoji Ikeda, I really appreciate his work with full of beauty of math. His work is more “sound art” than music, becuase there are a lot of visual element invovled and it needs you to “interpretate” it instead of only “listen” to it. I want to talk about another piece of his work I really like, “datamatics [prototype-ver.2.0]”.

Using pure data as a source for sound and visuals, datamatics combines abstract and mimetic presentations of matter, time and space. datamatics is the second audiovisual concert in the datamatics series. Projecting dynamic computer-generated imagery in pared down black and white with striking colour accents, the intense yet minimal graphic renderings of data progress through multiple dimensions. From 2D sequences of patterns derived from hard drive errors and studies of software code, the imagery transforms into dramatic rotating views of the universe in 3D, whilst in the final scenes four-dimensional mathematical processing opens up spectacular and seemingly infinite vistas. A powerful and hypnotic soundtrack reflects the imagery through a meticulous layering of sonic components to produce immense and apparently boundless acoustic spaces.

datamatics [ver 2.0] is the full–length version of this audiovisual concert. With a commissioned second part added, datamatics [ver.2.0] is significantly developed from the earlier version of this piece which premiered in March 2006. Driven by the primary principles of datamatics, but objectively deconstructing its original elements – sound, visuals and even source codes – this work creates a kind of meta–datamatics. Real–time program computations and data scanning are employed to create an extended new sequence that is a further abstraction of the original work. The technical dynamics of the piece, such as its extremely fast frame rates and variable bit depths, continue to challenge and explore the thresholds of our perceptions.

Yingyang Zhou-Project-11-Composition

click to plant trees!

//Yingyang Zhou
//Project 11
//section A

var turtle;

var treeX = 300;
var treeY = 400;

function setup() {
    createCanvas(600, 400);
    background(224, 216, 208);


function draw(){
    turtle = makeTurtle(treeX, treeY);
    turtle.setColor(color(84, 60, 43));

    var trunkRandomDegree = random(5);
  	var trunkRandomHeight = random(minTrunk,maxTrunk);

  	turtle.setColor(color(119, 166+random(-20,20), 119));
  	branch(turtle, floor(random(1, 5)), 10, 3, random(5), random(5));

var height = 400;
var minTrunk = height/4;
var maxTrunk = height/3;
var minBranch = height/10;
var maxBranch = height/3;
var minDegree = 3;
var maxDegree = 45;

function branch(turtle, number, length, width, left, right){
  var number = floor(random(1, 5));
  var length = 7;
  var width = 0.5;
  for(var i = 0; i < number; i++){
  		branch(turtle, number/i, length, width, random(5), random(5));
  		length = length/i;
  		width = width/i;




  for(var i = 0; i < 6; i++){

function mousePressed(){
	treeX = mouseX;
	treeY = mouseY;
	// setup();

function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

I enjoyed doing this project and the randomness turned out a little surprising but I like it! The idea is when you click on the canvas, there would be a tree grow from where you clicked.

Yingyang Zhou-LookingOutwards-10

For this week looking outwards, I would like to looking into Neri Oxman who is well-known in computation design filed especially in architecture, an excellent designer in MIT Media Lab.

Her work embodies environmental design and digital morphogenesis, with shapes and properties that are determined by their context. She coined the phrase “material ecology” to define her work, placing materials in context. Stylistic trademarks include brightly colored and textured surfaces with structure at many scales, and composite materials whose hardness, color, and shape vary over an object. The results are often designed to be worn or touched, and inspired by nature and biology.

Detail of 3D printing

Designer and architect Neri Oxman, working with the Mediated Matter group, has unveiled “Mushtari”: a 3D-printed wearable that can convert sunlight into usable products. Joining the “Wanderer” collection, Mushtari was designed as a relationship between the most primitive and most sophisticated life forms. The wearable contains 58 meters of internal fluid channels and functions as a microbial factory, using synthetic biology to convert sunlight into items for the wearer.

Using a symbiotic relationship between a photosynthetic microbe (e.g. microalgae or cyanobacteria) and compatible microbes (e.g. baker’s yeast or E.coli), Mushtari mimics phenomenon found in nature. The wearer triggers the photosynthetic microbe to produce sucrose (table sugar) using sunlight, which is then converted by the compatible microbes into the desired products, including pigments, drugs, food, fuel or scents.

The 3D printing of Mushtari was accomplished with the collaboration of the Mediated Matter Group and Stratasys, makers of the Object Connex3. The Objet Connex3, a color, multi-material 3D printer typically would dispense gel-like support material which could not be cleared. To create the hollow channels necessary for Mushtari, a liquid support which could be dispensed into channels during printing and subsequently cleared was developed.

What I admire about her project is that she is integrating biometric technologies into what could be developed and the project I chose is close related to undergoing project.

Yingyang Zhou-Project-10-Landscape

Yingyang’s Landscape

//Yingyang Zhou
//project 10
//section A

var pikachu;
var pikachuSpeed = 0.0005;
var clouds = [];

function preload(){
  pikachu = loadImage("https://i.imgur.com/pDhuoY9.png");

function setup(){
  createCanvas(360, 480);
  for(var i = 0; i < 10; i++){
    var cloudX = random(width);
    clouds[i] = makeCloud(cloudX);

function draw(){
  background(238, 168, 180);



function airfoil(){
  fill(200, 92, 27);
  triangle(240, 250, 250, 210, 280, 270);
  fill(230, 92, 27);
  triangle(360, 400, 240, 250, 360, 300);

function windowFrame(){
  rect(width/2, height/2, width+20, height+20,120);
  rect(width/2, height/2, width-30, height-30, 130);

function updateAndDisplayClouds(){
    for(var i = 0; i < clouds.length; i++){

function removeCloudsSlippedOut(){
  var cloudsToKeep = [];
  for(var i = 0; i < clouds.length; i++){
    if(clouds[i].x + clouds[i].breadth+500 > 0){
    clouds = cloudsToKeep;

function addNewClouds(){
  var newCloudsLikelyhood = 0.005;
  if (random(0,1) < newCloudsLikelyhood){

function cloudsMove(){
  this.x += this.speed;

function cloudsDisplay(){
  var terrainSpeed = 0.00125;
  var terrainDetail = 0.01;
  stroke(45, 100, 40, 90);
  for (var l = 0; l < width; l++) {
      var v = (l * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(v), 0,1, 110, height - 50);
  fill(0, 0, 222, 45);
  translate(this.x, height);
  ellipse(80, -30, 100, 30);
  ellipse(15, -80, 100, 50);
  ellipse(0, -200, 240, 30);
  ellipse(20, -300, 200,10);
  ellipse(50, -240, 100, 40);
  ellipse(0, -220, 300, 50);
  ellipse(500, -30, 100, 30);
  ellipse(200, -80, 100, 50);
  ellipse(100, -200, 240, 30);
  ellipse(200, -300, 200,10);
  ellipse(500, -240, 100, 40);
  ellipse(800, -220, 300, 50);
  image(pikachu, 30, -height/2+random(-2,2), pikachu.width/10, pikachu.height/10);

function makeCloud(birthLocationX){
  var cloud = {x: birthLocationX,
               breadth: 50,
               size:round(random(30, 240)),
               speed: -5.0,
  return cloud;

My original idea is to make a sunrise and sunset scene and I changed my mind later thinking that it might be an interesting idea to engaged with some image elements so I picked a pikachu to be flying outside my airplane cabin.

Yingyang Zhou-Project-09-Portraits


//Yingyang Zhou
//section A

var img;
var randomPos = 0;

function preload(){
  img = loadImage("https://i.imgur.com/GvPS1Fr.jpg");

function setup() {
    createCanvas(360, 480);
    // imageMode(CORNER);
function draw(){

  //image(img, 0, 0, width, height);
  var px = random(width);
  var py = random(height);
  var ix = constrain(floor(px), 0, width-1);
  var iy = constrain(floor(py), 0, height-1);
  var col = img.get(ix, iy);

  var randomSize = random(10);
  ellipse(px, py, randomSize, randomSize);
  line(px+random(10), py+random(10), px+random(10), py+random(10));
  line(px+random(10), py+random(10), px+random(10), py+random(10));


I like this project for a chance to envolve with something we are familiar in our daily life and it provide an interesting to way to look at the common thing in a different way.

Yingyang Zhou-LookingOutwards-9

This week looking outwards is about one post I found interesting and couldb be furthur looking into. It’s a sonic playground by Yuri Suzuki, original posted on Robert Oh’s post in looking outwards 4.

Sonic Playground continues the High Museum’s multiyear initiative to animate its outdoor space with commissions that engage visitors in participatory art experiences. It is the High’s first venture into exploring the notion of audible play—how the sounds all around us can be constructed, altered and experienced. The installation transforms the piazza into a welcoming atmosphere for socializing and recreation and serves as a stage for performances and art-making activities the High is co-organizing with local arts organizations.

孩子们在Yuri Suzuki周围玩彩色雕塑,在High's广场上修改和传递声音。

The project targeted on childeren but also the public because of the scale and apperance of it to get more attention on the soundwave that happning in our daily life, you’ll find something different just hearing more into detail by this device.

One of the most intriguing pieces will be the Parabolic dishes. These require a certain amount of exploring, finding the exact spot where you can hear the reflection of sound at its most prominent.

Working alongside the engineers the design was tweaked to make the piece acoustically sound as well as structurally safe. This required changing the sound horns to faceted horns and adding extra supports to enhance the structural sterdyness.

Yingyang Zhou-LookingOutwards-8

Chris is a media artist whose artistic practice reflects his beliefs in Chinese Philosophy. His works combine traditional and futuristic ideas, constantly exploring new mediums and finding aesthetics in technological intervention.

In 2007, Chris founded XEX / XCEED, an interdisciplinary creative studio and new media art collective based in Hong Kong, who’s works have been showcased worldwide. In 2014, he was appointed as the Artistic Director and Curator of the 1st HK-SZ Design Biennale. His creations have won awards from Reddot, TDC, GDC11, Taipei Golden Pin, Design for Asia, and The YG11 of New York Art Director’s Club. Lately, the “RadianceScape” project was selected in Linz Ars Electronica and the live performance was toured in Sónar Festival and WRO Art Biennale.

By the artist:

I’ll present the creative process behind the highly IG-able immersive installation “Prismverse”. The metaphor of the Battle Royale like wearable device “Collar AG”. Using data to intervent an audiovisual performance as Observatory’s live broadcast. We’ll address questions including How mediums shape our behavior and experience? Why open data is essential for a future citizen? And how could a creator design deeply for a minority audience and yet win the appreciation from general public?



Prismverse is an installation inspired by light rays travelling in a diamond with Brilliant cut – a form that produces phenomenal brilliance with maximized light directed through its top. With a 10 meters LED floor and the complex geometrical tessellated mirror wall, the highly illuminated interior becomes a metaphor for the instant tone-up effect of Dr.Jart+ V7 Toning Light.

A journey to unprecedented sceneries of glimmers begins at the touch of the product centered in the space. Audience will be immersed in splendors of our mother nature, ranging from the galaxy and distant stars, rare gemstones, glistens of flowing water, and refracted light beams. These resembles the brightening, moisturizing, protective and vitalizing effects of the product once applied on skin.

other recent work:

• VaporScape by h0nh1m (Chris Cheung) x NikeLab
• Collar AG by Chris Cheung / XCEED