Author: Yingyang Zhou

Yingyang Zhou-Project-07-Curves

Curves

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//Project-07


function setup() {
  createCanvas(480, 480);
}

function draw() {
  background(250);
  drawAstroid();
  drawEpispiral();
  drawRadialCurve();
  frameRate(20);

function drawAstroid(){
  push();
  translate(width/2, height/2);
  var a = 200;
  var b = 200;
  for(r = 0; r < 5; r++){
    rotate(r);
    noFill();
    strokeWeight(0.1);
    var red = map(r, 0, 3.14, 0, 255);
    stroke(red,0,255-red);
    beginShape();
    for (var t = 0; t < mouseX; t++){
      x = a*cos(t)*cos(t)*cos(t);
      y = a*sin(t)*sin(t)*sin(t);
      curveVertex(x + random(0, 1),y + random(0, 1));
    }
    endShape();
  }
  pop();
}
}

function drawEpispiral(){
  push();
  translate(width/2, height/2);
  var a = 60;
  var b = 20;
  var h = constrain(mouseX/2, 0, width/2);
  var r = mouseX/50;
  noFill();
  strokeWeight(0.5);
  stroke("red");
  beginShape();
  for (c = 0; c < 200; c++){
    var t = map(c, 0, 180, 0, TWO_PI);
    x = (a+b)*cos(t)-h*cos(c+t*(a+b)/b);
    y = (a+b)*sin(t)-h*sin(c+t*(a+b)/b);
    curveVertex(x, y);
  }
  endShape();
  pop();
}

function drawRadialCurve(){
  push();
  translate(width/2, height/2);
  beginShape();
  var angle = map(mouseX,0, width, 0, 360);
  rotate(radians(angle));
  var a = 50;
  for (var t = 0; t < 200; t +=2){
    stroke(t, 0, 0);
    strokeWeight(0.5);
    var x = 1/3*a*(2*cos(t)+cos(2*t));
    var y = 1/3*a*(2*sin(t)-sin(2*t));
    curveVertex(x,y);
  }
  endShape();
  pop();

}

In this project, I start using functions which make the code more readable and easier to revise if needed. I use three types of curves in this project all involving sin and cos but different from each other and have different movement along the changes of mouse position.

Yingyang Zhou-LookingOutwards-7

screenshot of the web page

This is an exercice on representation done by Santiago Ortiz, remiscent of the Histomap, which is a visualization of 4000 years of History, created in 1931 by John B. Sparks.

Timeline of chronoligcal articles from Wikipedia: millenia (10 000 BC – 5 000 BC), centuries (40th BC – XIX), decades (1990s – 1990s), years (2000 – 2019), decades (2020s – 2090s) and centuries (22nd – 30th).

On this website histomap revisited, you could view the map zoomed in and click on the map, it would direct you to the wikipage.

This viedo is santiago ortiz talking about different ways to represent time.

What I admire of this project is all the theories behind to make data visulized especially focusing on the theme of time. It’s interesting to see the history not only in a linear way but you can ‘map’ it.

Yingyang Zhou-LookingOutwards-6

This is a collection of work of a course happened during 2015 spring in RISD led by Carl Lostritto who is a Graduate Program Director and Assistant Professor of Architecture at RISD.

Aaron Tobey

Rami Hammour: A text of random meaning!

Matthew Solomon

 

 

These work are inspired by the most reliable source of randomness universally available on the computer, random.org, which samples natural phenomena and digitally records and processes it to achieve “true” randomness, many students are inclined to operate physically, and experiment with material media to generate random values. Students find themselves facing the same quandary raised by Bishop Derry. Something like a splatter of paint may be unpredictable at first, but as the mechanism for splattering paint becomes more controlled–and less contingent, it becomes clear that randomness can be rarely achieved by physical means–at least on the scale of paint. But it can certainly be done. Lavarand is one example in which the behavior of Lava Lites helps to generate random numbers. Another related example entails creating a manually-operated random machine with geometry. In a course I once taught, Matthew Solomon created a random number generator with a triangle as a seed. A line bounces within the triangle based on a set of rules. Numbers are generated based on where the line intersects the edge of the triangle. Aaron Tobey wrote a script to execute a similar though slightly more complex series of geometric operations and logical rules to build a random sequence.

The work suggests that computing may serve as a medium for art rather than a tool to make art. Because randomness so inhuman, to wield might mean to undermine our humanity, but it also might function as a foil in our efforts to better understand the nature of our own creative instincts.

 

Yingyang Zhou-Project-06-Abstract Clock

Abstract Clock





function setup() {
	createCanvas(400, 400);
	fill(0);
}

function draw() {

	var H = hour();
	var M = minute();
	var S = second();
	var D = day();
	var MO = month();
	if (H>6 & H<18){
		background(243,234,225);
	}
	else{
		background(38, 53, 38);
	}

	for(var i = 10; i <= D*10; i += 10){
		stroke(227, 168, 34);
		line(0, height-i, i, height);
	}

	for(var a = 10; a <= MO*30; a += 30){
		stroke(119, 166, 119);
		line(width, height-a, width-a, height);
	}

	var marginX = 50;
	var marginY = 20;
	var rectH = 50;
	var rectW = 300;
	var space = (width-2*marginY-3*50)/2;
	var mappedH = map(H, 0, 23, 0, 300);
	var mappedM = map(M, 0, 59, 0, 300);
	var mappedS = map(S, 0, 59, 0, 300);

	if(H>6 & H<18){
		fill(243,234,225);
	}
	else{
		fill(38, 53, 38);
	}
	stroke(227,168,82);
	strokeWeight(2);
	rectMode(CORNER);
	rect(marginX, marginY, rectW, rectH, 20);
	stroke(156,111,79);
	rect(marginX, marginY+rectH+space, rectW, rectH, 20);
	stroke(230, 92, 27);
	rect(marginX, marginY+2*rectH+2*space, rectW, rectH, 20);

  noStroke();
	rectMode(CENTER);
	fill(200);
	rect(marginX+mappedH, marginY+rectH/2, 30, 30, 10);
	rect(marginX+mappedM, marginY+3/2*rectH+space, 30, 30, 10);
	rect(marginX+mappedS, marginY+5/2*rectH+2*space, 30, 30, 10);

	print(H);

}

The clock is display time(hour, minute, second) as major information and date(day and month) as background. The background color of day and night is different while it shows a bright color during the day and darker color at night for legibility.

Yingyang Zhou-Project-05-Wallpaper

Wallpaper

//Yingyang Zhou
//yingyanz
//Assignment-05-b

function setup() {
    createCanvas(600, 600);
    background(98, 140, 178);


    for (var y = 0; y <= 600; y+=60) {
        for (var x = 0; x <= 600; x+=60) {
          var n = x/60 % 2;
          if (n == 1){
            noStroke();
            fill(255, 179, 5);
            bezier(
            x-15, y,
            x, y-25,
            x+20, y+30,
            x-15, y);
          }
          else {
            for(i = 10; i < 180; i +=10){
              noFill();
              stroke(255, 75, 27);
              strokeWeight(0.5);
              ellipse(x, y, i, i);
            }
          }
          stroke(0, 0, 255);
          bezier(x-60, y-60, x, y-60, x, y, x+60, y);
        }
    }
    noLoop();
}


function draw() {
    // draw is not called due to noLoop() in setup()
}

This wall paper are consist of small ’tiles’ and it could be a tile of a larger part, The elements are repeat not only horizontally and vertically but also diagonally.

Yingyang Zhou-LookingOutwards-5

This is a the work of  Imaginary Forces NY, the short clip for  HBO, combining all the feature TV series.

The process started with a great edit, and figuring out which 2d clips would breakdown nicely into 3d “pixelized” scenes, figuring out how to move on them, how to tie scenes together, light and render them. Another challenge was pulling off a deep dive into HBO’s iconic ‘static’ id, going through the static and into the promo content.   The idea is to show the audience the 3D world that has always lived within the famous white noise  and ” We hope this new version gives you the same feels you got when hearing the opening growing up!” according to Imaginary Forces NY website.

I like consistance of the same sophisticated idea through the whole clip, and the transition is very good, it let audience stays in ‘3D’ world instead transit to ‘2D’ world several times in between different clips.

Yingyang Zhou-Project-04-String-Art

string art

function setup() {
    createCanvas(400, 300);
    background(220);
}

function draw() {
  background(220);
    var amt = 0;
    var a = 0;
    var b = 0;
    var x1 = lerp(mouseX, 300, amt);
    var y1 = lerp(mouseY, 300, amt);
    var x2 = width;
    var y2 = height;
    var x1StepSize = 3;
    var y1StepSize = 10;
    var x2StepSize = 7;
    var y2StepSize = 8;
    var x3 = 0;
    var y3 = 0;
    var x3StepSize = 2;
    var x4 = lerp(0,400, amt);
    var y4 = lerp(0,300,amt);
    var r = 240;
    var g = 80;
    var b = 50;
    for(var i =0; i < 400; i++){
      amt += 0.1;
      x3 += x3StepSize;
      line(x3, height, x3+i, 0);
      line(x3, y3, x4, y4);
    }
    for(x1 == 0; x1 < width; x1+=x1StepSize){
      amt += 0.1;
      y1 += y1StepSize;
      x2 -= x2StepSize;
      y2 -= y2StepSize;
      r -= 3;
      b += 1;
      stroke(r, g, b);
      strokeWeight(0.5);
      line(x1, y1, x2, y2);
      line(y1, x1, y2, x2);
      line(0, height, x1, y1);
      line(width,0, x2, y2);
    }

}

By using lerp and for loop, there are ‘curve’ which made by straight lines, with mouse moving the color and position of lines will change with it.

Yingyang Zhou-LookingOutwards-4

Ryoji Ikeda
born in 1966 in Gifu, Japan
lives and works in Paris, France and Kyoto, Japan

Japan’s leading electronic composer and visual artist Ryoji Ikeda focuses on the essential characteristics of sound itself and that of visuals as light by means of both mathematical precision and mathematical aesthetics. Ikeda has gained a reputation as one of the few international artists working convincingly across both visual and sonic media. He elaborately orchestrates sound, visuals, materials, physical phenomena and mathematical notions into immersive live performances and installations.
Alongside of pure musical activity, Ikeda has been working on long-term projects through live performances, installations, books and CD’s such as ‘datamatics’ (2006-), ‘test pattern’ (2008-), ‘spectra’ (2001-), ‘cyclo.’ a collaborative project with Carsten Nicolai, ‘superposition’ (2012-), ‘supersymmetry’ (2014-) and ‘micro | macro’ (2015-).
//Ryoji Ikeda website

‘superposition’

superposition is a project about the way we understand the reality of nature on an atomic scale and is inspired by the mathematical notions of quantum mechanics. Performers will appear in Ikeda’s work for the first time, performing as operator/conductor/observer/examiners. All the components on stage will be in a state of superposition; sound, visuals, physical phenomena, mathematical concepts, human behaviour and randomness – these will be constantly orchestrated and de-orchestrated simultaneously in a single performance piece.

I like the projects of Ryoji Ikeda because it origins from matchmatic element and by extending it to the realm of philosophy , it shows what audiovisual can do to inspire people.

other works of Ryoji like supersymmetry presents an artistic vision of the reality of nature through an immersive and sensory experience.
This project is a series of work conceived as installation versions of the performance work “superposition” (2012-) and as a platform to update the process and outcome of a residency during 2014-15 at CERN in Geneva, the largest centre in the world for particle physics.

Yingyang Zhou-Project-03-Dynamic-Drawing

Dynamic cubes

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//Project-03


var cubeL = 50;
var dark = 150;
var angleA = 0;
var angleB = 0;
var angleC = 0;
var spacing = 50;
var i = 0;


function setup() {
  createCanvas(640, 480);
  background(0);
  frameRate(30);
}

function draw() {
  var x = 0;
  var y = 0;
  var speed = mouseX/width*4;
  var colour = 150 +mouseX/width*255;
  var dia = mouseX/width*20;
  var l = 0;

  //background change as mouse move
  background(max(120, 200-colour), max(30, 200-colour), max(10, 200-colour));
  noStroke();

  // mouse path
  fill(30, 30, 150)
  ellipse(pmouseX,pmouseY, dia, dia);


  if(mouseX < width & mouseY < height){

    push();
    translate(width/2, height/2);
    rotate(radians(angleA))
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleA = angleA + speed;
    pop();

    push();
    translate(width/2+2*cubeL, height/2+2*cubeL);
    rotate(radians(angleB));
    scale(0.8, 0.8);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleB = angleB + 0.9*speed;
    pop();


    push();
    translate(width/2-2*cubeL, height/2+2*cubeL);
    rotate(radians(angleC));
    scale(0.8, 0.8);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleC = angleC + 1.1*speed;
    pop();

    push();
    translate(width/2+2*cubeL, height/2-2*cubeL);
    rotate(radians(angleB));
    scale(0.8, 0.8);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleB = angleB + 0.8*speed;
    pop();

    push();
    translate(width/2-2*cubeL, height/2-2*cubeL);
    rotate(radians(angleC));
    scale(0.8, 0.8);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleC = angleC + 1.2*speed;
    pop();

    push();
    translate(width/2+5*cubeL, height/2);
    rotate(radians(angleA));
    scale(0.5, 0.5);
    fill(colour);
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleA = angleA + speed;
    pop();

    push();
    translate(width/2-5*cubeL, height/2);
    rotate(radians(angleA));
    scale(0.5, 0.5);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleA = angleA + speed;
    pop();


    //circles
    i = i+50
    for (var i = 0; i < 1000; i += 50){
      noFill();
      stroke(0, 0, 255);
      strokeWeight(0.5);
      alpha
      ellipse(mouseX, mouseY, 150+i, 150+i);
      }
  }
}

The way to make this dynamic is using your mouse,  I started from creating images that has kind of 3D affect. All the cube start from the same position, when the mouse moved, they’ll have a rotating speed which various, so they are going to end at different position eventually. When mouse move outside of canvas, it will turn to the circle image.

Yingyang Zhou-LookingOutwards-3

Strand Garden/ Matsys/ 2016

Inspired by the organic curves of Art Nouveau and translated through Matsys’s unique approach to digital craftsmanship, these four new pieces explore the champagne-making process and its emblematic materials.

Strand Garden’s three screens of curved strands, evoking tree trunks or vines, mark out a central area: “You’re in a small clearing,” Andrew Kudless explains. “You get hints of what lies beyond, but it’s an inward-looking, reflective space.”

Strand Garden, Matsys for Perrier-Jouët, DesignMiami/ 2016, Photo © Perrier-Jouët.​

Strand Garden

chiars in organic form

Details of the table

prototype/ 2014

Strand Garden

Strand Screen

Stand Table

Strand Tower Prototype

 

This project prototype explores the capacity of lightweight tubular structures to create an immersive experience for a lighting festival. Due to the short duration of the festival, the structure needs to be both lightweight as well as quickly deployable. Each tube is made from three planar pieces of CNC-cut HDPE. These parts are riveted together causing the planar material to slightly bend which also results in local stiffening of the material. Globally, each tube is twisting along its central axis which also adds a general rigidity to the tube.

In order to create an experience for the festival visitors that is engaging, playful, and innovative, the tubes transition from a bundled network at the top to individual strands at the base that allow visitors to walk between. A LED light strand is positioned at the centre of each tube and reacts to visitors’ movement as well as ambient conditions such as wind. This network of strands resonates with the complexity of local mangrove forests and provides a space for interaction, exploration, and play.

 

what I admire about this project is that it create a great atmosphere and subtly react to people passing through. My guess about the technology is using Arduino programmed to react to the movement of people and wind