yoli – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

FinalProject-wildFire

yoli — Sat, 12 Dec 2020 03:26:13 +0000

//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D


//fire
var fireAnim = [];
var fireArr = [];

//particles
var drag = 0.0002;    
var gravity = 0.3;
var particles = [];

//koala
var koalaImg;
var koala;

//var counter
var counter = 5;


function preload(){
 
    //fire animation image
    var filenames = [];
    filenames[0] = "https://i.imgur.com/31vYPuX.png";
    filenames[1] = "https://i.imgur.com/ZhfTftF.png";
    filenames[2] = "https://i.imgur.com/iGSBFBe.png";
    filenames[3] = "https://i.imgur.com/GCq7AjU.png";
    filenames[4] = "https://i.imgur.com/zZGdjbN.png";
    
 
    for (var i = 0; i < filenames.length; i++) {
        fireAnim[i] = loadImage(filenames[i]);
    }

    koalaImg = loadImage("https://i.imgur.com/Xm5QW4o.png");

}

function setup(){
    createCanvas(480,480);
    frameRate(24);
    imageMode(CENTER);

    koala = koalaMake(45,420);
       
}   


function draw(){
    background(144,232,232);  

    //background trees
    var  col = 0; 
    var  row= 0;
    
    var  r = 0;
    for( col = 0; col < 18; col++){ //tree coloe gradation
        var  g = 200;
        var  b = 50;
        for( row = 3; row < 12; row++ ){
           fill(r,g,b);
           b +=5;
           treeDraw(col*28+12,row*38); 
        }
    r +=10;
    }    

    //counter

    textSize(15);
    fill(200,50,0);
    text("fire count ",15,25);
    text(counter.toString(),80,25);

    //intro text
    if(frameCount>0 & frameCount < 24){
        textSize(50);
        fill(255);
        text("Click Mouse",150,200);
    }

    if(frameCount>=24 & frameCount < 48){
        textSize(50);
        fill(255);
        text("Hit Key w",150,200);
    }

    //fire

    if(frameCount % 72 == 0){
        //print(startCount);
        var fire = makeFire(480,410);
        fireArr.push(fire);
    }

    for(var i = 0; i < fireArr.length; i++){
        var f = fireArr[i]
        f.drawFunction();
        f.stepFunction();

        print(f.size);
        //print(counter);

        if (f.size <= 0.2 || f.x <= 0.2){
            print(f.x);
            counter = counter - 1;

        }

        if (f.size<=0.2|| f.x <= 0.2 ){ //Here I choose 0.2 is because 0 is not working, the condition can not run
            fireArr.splice(i,1);
            print("test splice");
        }


 
    }   

     //sun
    fill(223,242,136);
    circle(400,50,50);

    // add new particle to the object
    newParticles = [];
    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
        p.stepFunction();
        p.drawFunction();

    //particle vanishes
        if (p.age < 200) {
            newParticles.push(p);
        }
    }

    particles = newParticles;

   //trunck
    noStroke()
    fill(82,62,41);
    rect(30,280,12,200);

    //koala
    koala.drawFunction();
    koala.stepFunction();

    //ground
    fill(181,170,156);
    rect(0,450,480,30);

    //game ending, win or loose

    if(counter == 0){
        //background (255);
        textSize(40);
        fill(0,100,200,150);
        rect(0,0,width,height);
        fill(255);  
        image(koalaImg,width/2,height/2-100,150,150);           
        text("KOALA SAVED ! ",width/2-130,height/2);
        
        noLoop();
        
    } 

    for(var i = 0; i < fireArr.length; i++){
        var f = fireArr[i]

        if (dist(f.x,f.y,koala.x,koala.y) <= 50){
        background (255,50,0,150);
        textSize(40);
        fill(255);
        text("MISSION FAILED ! ",width/2-150,height/2);

        noLoop();
        }
    }



}


//make new particles by pressing mouse
function mousePressed() {
    var newp = makeParticle(mouseX, mouseY,
        random(-10, 10), random(-10, 0),color(random(1,255),random(1,255),random(1,255),random(5,15)));
    particles.push(newp);


    for(var j = 0; j < fireArr.length; j ++){
        var fire = fireArr[j];
        if(dist(mouseX,mouseY,fire.x,fire.y)<=  400*0.2*fire.size ){
            fire.size -= 0.2;
        }
        if(abs(fire.size -0.1) <=0.0001  || abs(fire.x-0)<0.0001 ){
            //print(fire.size)
            fireArr.splice(j,1);
        }

    }

}

function keyPressed(){
    if (key === "w"){
        koala.y += koala.dy;
    }
}

function counterUpdate(){
    for(var j = 0; j < fireArr.length; j ++){
        var fire = fireArr[j];
    }

    if (fireArr.length > 0  & fire.size <= 0){
        counter = counter - 1;
    }
    
}


function makeFire(fx,fy){
    var p = {x:fx,
         y:fy,
         dx:-8,
         imageNumber:0,
         size:1.0,
         stepFunction:stepFire,
         drawFunction:drawFire,
         }
    return p;

}

function stepFire(){
    this.imageNumber++;
    //print(this.imageNumber);
    if (this.imageNumber > 4){
        this.imageNumber = 0;
    }   
    this.x+=this.dx;
}

function drawFire(){

    push();
    translate(this.x,this.y);
    scale(0.3*this.size);   
    image(fireAnim[this.imageNumber],0,0);
    pop();

    //print("test", this.x,this.y);
}



function treeMake(tx,ty){
    var t = {x:tx,
         y:ty,
         color:c,     
         //stepFunction:stepFire,
         drawFunction:treeDraw,
         }
    return t;

}


function treeDraw(x,y){
    push();
    translate(x, y);
    triangle(-5,0,5,0,0,-15);
    
    beginShape();
    vertex(0,-35);
    vertex(-8,-20);
    vertex(0,-25);
    vertex(8,-20);
    endShape(CLOSE);

    beginShape();
    vertex(0,-25);
    vertex(-12,-12);
    vertex(0,-15);
    vertex(12,-12);
    endShape(CLOSE);

    pop();
}


//particles

function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    this.dy = this.dy + gravity; // force of gravity
    // drag is proportional to velocity squared
    // which is the sum of the squares of dx and dy
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    //limit the speed
    d = min(d, 0.9);
    // scale dx and dy to include drag effect
    this.dx *= (0.8 - d);
    this.dy *= (0.9 - d);
    if(this.age % 40 == 0){
    this.size*= (1-0.2);
    } 

}

 
function particleDraw() {
   
    fill(this.pc);
    circle(this.x, this.y,this.psize);
}


// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy,pc,psize) {

    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         age: 0,
         pc:color(0,random(100,150),random(150,250)),
         psize:random(5,15),
         stepFunction: particleStep,
         drawFunction: particleDraw
        }
    return p;
}

//koala

function koalaMake(kx,ky){
    var k = {
        x:kx,
        y:ky,
        dy:-40, 
        gravityK:3,
        drawFunction:koalaDraw,
        stepFunction:koalaStep,
    }
    return k;
}

function koalaDraw(){

    image(koalaImg,this.x,this.y,70,70);

}

function koalaStep(){
    this.y += this.gravityK;
    this.y = constrain(this.y,280,423);

}

I am inspired by the wildfire this year which both happened in Australia and California. Till now I still can remember the pictures I saw about wildlives. Those pictures made me sad.
Also I would like to write one project a bit gamy which can bring some of the interesting points of 15104 together.

How to Play:
1 Hit right button on the fire to extinguish them
2 Or hit W key to move the koala when you failed in 1#
3 When you save your koala for 5 fireballs, you win.
4 If the fireball hit the koala, you lose.

Improvement:
1 If I have more time, I would add a start button. Now the program runs automatically. With the start button, the player will feel better.
2 Also, maybe I would add a tutorial before the game begins. Like, first one fireball is burning in the middle of the canvas, and the player needs to extinguish it first to start the game. Then, a fireball is coming toward the koala, the player needs to hit W to help the koala escape from the fire then start the game.

Project_11_landscape

yoli — Mon, 16 Nov 2020 05:24:55 +0000

Y-sketch-landscape Download

//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D

// the general idea of this project is presenting an array of buildings 
//which are on the hill and are coverd by trees.

var buildings = [];
var trees = [];
var noiseParam = 0;
var noiseStep = 0.02;
var hillHeight = [];
// var clouds = [];   
// var land = [];
// var cX = random(100,200);
// var cY = random(100,200);


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

    //hill
    for (var i = 0; i <= width/3; i+=1){
       
        var n = noise(noiseParam);

        var value = map(n,0,1,0,width);    

        //hillHeight.shift();

        hillHeight.push(value);

        noiseParam += noiseStep;

        
    }

    //buildings
    for(var i = 0; i < 10; i ++){
        var rx = random(width);
        buildings[i]=makeBuilding(rx);
    }

    frameRate(10);
    
}

function draw(){
    background(144,232,232);

    //sun
    fill(223,242,136);
    circle(400,50,50);

    //hill
    noStroke();

    var n = noise(noiseParam);

    var value = map(n,0,1,0,width);    

    hillHeight.shift(); //update value in array

    hillHeight.push(value);

    noiseParam += noiseStep;
    
    for (var i = 0; i < width/5 ; i += 1){

        fill(50,120,20); //square shape
        beginShape();
        vertex(5*i,hillHeight[i]);
        vertex(5*i+5, hillHeight[i+1]);
        vertex(5*i+5,height);
        vertex(5*i,height);   
        endShape(); 
    }



    //displayHorizon();
    
    //buildings
    updateBuildings();
    removeBuilding();
    addNewBuilding();

    //tree
    
    updateTrees();
    removeTrees();
    addNewTrees();
    
    fill(181,170,156);
    rect(0,460,480,30);
  

}

//horizon

function displayHorizon(){
    stroke(0);
    line(0,height-50,width,height-50);
}



//buildings

function updateBuildings(){
    for (var i = 0; i < buildings.length; i ++){
        buildings[i].move();
        buildings[i].display();
    }
}

function removeBuilding(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i ++){
        if (buildings[i].x + buildings[i].breadth > 0){
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep;

}

function addNewBuilding(){
    if(random(0,1)<0.03){
        buildings.push(makeBuilding(width-2));
    }

}

function buildingMove(){
    this.x += this.speed;
}

function makeBuilding(birthLocationX){
    var bldg = {
        x:birthLocationX,
        y:random(400,450),
        breadth:random(30,50),
        r:random(255),
        b:random(255),
        g:random(255),
        speed : -2.0,
        nFloors : round(random(2,6)),
        move:buildingMove,
        display:buildingDisplay
    }
    return bldg;
}



function buildingDisplay(){
    var floorHeight = 25;
    var bHeight = this.nFloors*floorHeight;
    fill(this.r,this.g,this.b);
    stroke(0);
    push();
    translate(this.x,this.y);
    rect (0,-bHeight-10,this.breadth,bHeight);
    stroke(200);
    for(var i = 0; i < this.nFloors; i ++){
        fill(this.r+10,this.g-20,this.b+50);
        //rect(5,-15-(i*floorHeight),this.breadth-10, 10);
        rect(5,-20-(i*floorHeight),this.breadth-10, 10);
    }
    pop();
}

//tree

function updateTrees(){
    for (var i = 0; i < trees.length; i ++){
        trees[i].move();
        trees[i].display();
    }
}

function removeTrees(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i ++){
        if (trees[i].x + trees[i].breadth > 0){
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;

}

function addNewTrees(){
    if(random(0,1)<0.1){
        trees.push(makeTrees(width+30));
    }

}

function treeMove(){
    this.x += this.speed;
}

function makeTrees(birthLocationX){
    var tree = {
        x:birthLocationX,
        y:random(400,450),
        treeHeight:random(30,150),
        breadth:random(10,20),
        width:random(50,80),
        r:random(100,120),
        b:random(120,130),
        g:random(150,255),
        speed : -5.0,
        move:treeMove,
        display:treeDraw,
    }
    return tree;
}



function treeDraw(){
    var treeHeight;
    
    push();
    translate(this.x,this.y);
    fill(128,101,64);
    rect(0,0,10,50);
    fill(this.r,this.g,this.b);
    ellipse (0,0,this.width,treeHeight);

    pop();
}

I would like to present building on hills which are cover by trees.

LO_11_Women Practitioners

yoli — Mon, 16 Nov 2020 05:20:51 +0000

In this week’s topic, I found a very interesting project called “ Clothing for Moderns” created by artist Lea Albaugh.

The link is here : http://www.instamatique.com/clothing-for-moderns.html
And here : https://www.hcii.cmu.edu/people/lea-albaugh

Lea Albaugh is a PhD student in HCI institute of CMU. This is not too much description on the web but I guess her major working field is Human Computer interaction. She is also an augmented fashion designer and game developer.
Her major studying field makes her project very interesting.
In this project, she mainly talked about women’s expression in public space, especially spaces prevailed by male leaders/supervisors. She uses cloth and actuators to build wearables that can potentially “speak”.
I think the general idea of this project is very crucial. As a woman, I frequently found myself judging my personal expression. Sometimes, I felt I speak too much in public and in a team work environment and sometimes I doubt myself speak too little in a conflict situation.
By writing this LO, I doubt males also do the same thing frequently. This is the reason I want to talk about this project. It reminds me, as a female, sometimes, expression itself is not only related to words, facial expressions and actions.
This project offers me a new look for my own situations.

Project_10_sonic-story

yoli — Tue, 10 Nov 2020 04:43:44 +0000

y_sketch_2 Download

//Huijun Shen
//huijuns@andrew.cmu.edu
//Section D

//Story: It is a corner of a house. In the background, there is light music. Then the phone is ringing and the dog 
//hears the ring and bark. Then we can hear the sound of human step. The sound of the dog step. The man stops at
//the phone and pick it up and says "hello".

var frameCount = 0;
var chr,dogPic,bgSound,ringSound,dogSound,helloSound,walkSound,dogBark;



function preload() {
    // call loadImage() and loadSound() for all media files here
    bg = loadImage("https://i.imgur.com/MAsTt65.png");
    chr = loadImage("https://i.imgur.com/1Z57hnP.png");
    dogPic = loadImage("https://i.imgur.com/7h6Oxjz.png");

    // load sound
    bgSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bg_music.wav");
    ringSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/telephone_ring.wav");
    dogSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/dog-on-wooden.wav");
    helloSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hello.mp3");
    walkSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walk-1.wav");
    dogBark = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/puppy_bark.wav");

}


function setup() {
    createCanvas(480,480);
    useSound();
    frameRate(10);

    //create character
    man = new Object();
    man.image = chr;
    man.x=-250;
    man.y=0;
    man.dx=6;
    man.draw = manDraw;

    dog = new Object();
    dog.image = dog;
    dog.x = 0;
    dog.y = 500;
    dog.dx = 10;
    dog.draw = dogDraw;

}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    bgSound.setVolume(0.1);
    ringSound.setVolume(0.3);
    walkSound.setVolume(0.5);
    dogSound.setVolume(0.6);
    helloSound.setVolume(0.7);

}


function draw() {
    // you can replace any of this with your own code:
    background(200);
    image(bg,0,0,600,600);

    //sound play

    if(frameCount == 0){
    bgSound.play();
    }

    if(frameCount == 90 || frameCount ==120 || frameCount ==150){
        ringSound.play();
    }


    if(frameCount == 180 ){
        walkSound.play();
        dogBark.play();
    }

    if(frameCount == 320){
        helloSound.play();
    }


    // man enters and stops
    if(frameCount >180 ){

        man.draw();
        man.x+=man.dx;
        
        if(frameCount >= 300){
            man.dx =0;
        }
    }
    
    // dog goes across the canvas
    if(frameCount > 190 ){
        
        dog.draw();
        dog.x+=dog.dx;

    }



    frameCount ++;

    if(frameCount == 400){
        noLoop();
    }
    

    print(frameCount);
}


function manDraw(){
    image(chr,this.x,this.y);
}


function dogDraw(){    
    image(dogPic,this.x,this.y,60,90);    
}

Story: It is a corner of a house. In the background, there is light music. Then the phone is ringing and the dog hears the ring and bark. Then we can hear the sound of human step. The sound of the dog step. The man stops at the phone and pick it up and says “hello”.

The codes worked for a while on my computer and worked for the first time on the page then it stops working. I spend a lot of time to figure out why but failed.

I basically code the numbers of the sound and the details is not possible for me to refine without hearing them.

I have tried my best.

The size is not right and also the bg sound is not playing even though other sound are playing sometimes.

LO_10_Computer Music

yoli — Tue, 10 Nov 2020 03:44:30 +0000

In this week’s topic, I would like to talk about artist Gottfried Michael Koenig’s work.

Gottfried is a contemporary composer and learnt both music theories and music representations. His work is drastically different from traditional composer’s work. In his presentation in the link above, the music is very suitable for a sci-fi movie background. I admire him for using this avant-garde method to make music in the 1950s, which is a very early stage for even computer and network development. I believe his style and working method had a big impact on the later electronic music. Even though electronic music is not my personal favorite music style, I can still see the art expression in it. This music trend, again as I mentioned before, is very modern and very distinct from all the previous music trends.

I can not guess the algothism and method used in this piece of music, but by guessing, I think he made the basic music elements into variables and borrowed randomness into it.

Basically, I think every Epoch-making work is precious.

Project_09_Portrait

yoli — Sun, 01 Nov 2020 19:05:11 +0000

My portrait Download

//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D

var imgFace;

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


}

function setup(){
    createCanvas(480,480);
   // imageMode(CENTER);
    imgFace.loadPixels();
    imgFace.resize(480,480);
    noStroke();
    frameRate(200);


}

function draw(){

    //image(imgFace,0,0,width,height);

    var xp = floor(random(imgFace.width));
    var yp = floor(random(imgFace.height));
    var pix = imgFace.get(xp,yp);
    fill(pix);
    print(pix);
    push();
    translate(xp,yp);
    Orthotomic();
    pop();

    
    

}

function Orthotomic(ex,ey){ // Here is the code I reused from my previous work and I made some changes to it so that it fit this painting better.


        var nPoints = 100;

        var x,y;

        beginShape(); // the shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = constrain(mouseX,0,150)/30*cos(t); //the shape size is affected by mouseX
        y = sin(t);
        var x1 =x*cos(2*t)-y*sin(2*t)+2*sin(t);
        var y1 =-x * sin(2*t) - y*cos(2*t) + 2*cos(t);
        vertex(x1+random(5), y1+random(5)); //make the edge a bit random lines
    }


    endShape(CLOSE);

}

In this project, I customized the shape of the “Brush” a bit by reusing previous and made it a bit randomized. The edge of the brush is changing every frame. The size of the brush is controlled by MouseX so that painter can do big stroke at the very beginning and small stroke at the very end to put more details.

LO-09

yoli — Sun, 01 Nov 2020 18:57:12 +0000

https://www.archdaily.com/868540/this-mysterious-3d-printed-grotto-challenges-boundaries-of-computational-geometry-and-human-perception

As a concept artist, I basically do visual design for games. I am very interested in generative art, so that I checked back to week 2 LO and found Robert’s post about Dillenberger & Hansmeyer’s 3D printer grotto. (Thank you for your post)
I think the working process of computer generative art and concept design are very different but concept art can borrow some essence from computer generative art for sure. Especially about the weird shape and repetitive technology feeling, this aspect is very hard for the human brain to create.
But as always, I don’t think computer generative art can be directly used in concept design. It is very easy to tell the picture is to some extent lack of deep thinking and art re-twist. People’s eyes like to see something that has big, medium, small reads. The problem of computer generative art is that it is very even. I definitely think the 3D work I referenced here is awesome and also I definitely think it is not suitable for any game or film without re-design by designers. It is full of details. Just imagine if audience need to watch a movie and it has so many details for 90 minutes long, they will be so bored after 10 minutes because they don’t know what to look at.
In one sentence, I think computer generative art is awesome as a starting point for design, but it is far from excellent in terms of using it in mature visual products.
( Here is my portfolio just in case someone is curious about what I am literally doing for games: www.yolishen.com)

08_LO_creativePractice

yoli — Mon, 26 Oct 2020 14:15:42 +0000

For this week’s topic, I watched the talk of Christina “Phazero”Curlee about “ from Video Art to Video Game”.
Christina is from a self-taught traditional fine art background and put her interest in art, interaction, game design and programming. She blends different principles of game and art in order to find her own vision in game style. Her work heavily demonstrates symbol and non-verbal experiences.
The purposes of her art mainly focus on communicating with people and facilitate interactions. During her art journey, she tried many things, like painting, installation art, photography, video art and video games.
The way I admire her is about her way to treat her anxiety, depression and stress. She uses video games as a way to communicate with others and she describes game design as setting a room and welcoming people to start a conversation.
She uses video game or video game media to discuss some serious topics which are hard to describe in some other situations, like multisensory interactive experiences, space and human bilateral influences, etc.
Even during the recent day, the game industry, especially the indie game area, has witnessed huge change and improvement. A lot of people still tend to think video games are undesirable things for humans, especially for kids. I would like to see more artists to use video game as a tool to prompt active communication and use the trait of video games in a positive way to inspire other people.

Eyeo 2019 – Christina Phazero Curlee from Eyeo Festival on Vimeo.

Project7_curves

yoli — Sun, 18 Oct 2020 21:32:16 +0000

sketch_curves Download

	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu


var nPoints = 100;
//var lineGroup = [];


function setup() {
    createCanvas(400,400);
    background(180);
    frameRate(10);  
    
}


function draw() {
    background(150);
    noStroke();
    push();
    translate(width/2,height/2);
    rotate(mouseX/30); // make it rotate according to x position
    Orthotomic();
    pop();
    
} 

function Orthotomic(){ //draw the shape

    var x;
    var y;  
    noFill();
    fill(255-mouseY*0.3,mouseY*0.2,100); // make color related to y position
    stroke(3);
   
    beginShape(); // the shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = constrain(mouseX,0,400)/30*cos(t);
        y = sin(t);
        var x1 =20*(x*cos(2*t)-y*sin(2*t)+2*sin(t));
        var y1 =20*(-x * sin(2*t) - y*cos(2*t) + 2*cos(t));
        vertex(x1+random(5), y1+random(5)); //make the edge a bit random lines
    }


    endShape(CLOSE);    
   
    
}

LO_07_Data Visualization

yoli — Sun, 18 Oct 2020 21:28:51 +0000

For this week’s topic, I looked at a chart relating to money- Trillions.

The author is David Macandless, and the source are from New York Times, Bloomberg, UNESCO,WorldBank,Forbes,World Health Organisation, Stanford Uni, Credit Suisse, etc.

Money is a very interesting topic but when the number gets huge, it is very hard to get a real feeling of the amount.

https://informationisbeautiful.net/visualizations/trillions-what-is-a-trillion-dollars/

In this chart, the author raised some very interesting(or not that interesting) topics about what money can do.

By comparing the size of different squares, it is easier to get the idea of how large a concept means or how much money to get one thing to be done.

Among all the topics and comparisons the author can make, those topics shown on the chart silently describe the author’s opinions about some social topics.Also the author secretly implies his/her opinion by gradually changing colors.

I think by visualizing data and deliberately representing data in a certain way, people are easier to get influenced because they tend to think data is object numbers.