Flower_Leaf_Vine.js

//JSON
var params = {
  debugMode: false, //it's ","
  ampAdj: 0.7, //it's ","
  leafScaleRate: 0.25,
  //region:0
};

var gui = new dat.gui.GUI();
gui.add(params, "debugMode");
//gui.add(params, "region").min(1).max(6).step(1);
gui.add(params, "ampAdj").min(0.5).max(2.0).step(0.1);

gui.add(params, "leafScaleRate").min(-0.5).max(0.5).step(0.03);

//data
var table;
var countries = [];

//Teng
var tengs = [];


//loadTable
function preload() {
  //table = loadTable("assets/NOC.DATA.MIDTERM.latest.csv", "csv", "header");
  table = loadTable("assets/NOC.DATA.MIDTERM.latest.csv", "csv");
  mySound = loadSound('assets/Leo-Ludovico Einaudi-2.mp3');
}

function setup() {
  createCanvas(1000, 600);
  background(255);
  imageMode(CENTER);
  //sound
  mySound.setVolume(0.1);
  mySound.loop();


  //data
  loadData();

  for (var i = 0; i < countries.length; i++) {
    var xSetOff = (width / (countries.length + 2)) * (i + 1);
    var len = map(countries[i].birth, 0, 38, 0, 0.7 * height);
    var r = map(countries[i].literacyRate_female, 0, 1, 100, 255);
    var g = map(countries[i].literacyRate_male, 0, 1, 0, 150);
    var ampMax = map(countries[i].gdp, 0, 7.4, 0, 150);

    tengs.push(new Teng(xSetOff, len, 0.05, r, g, ampMax, 0.2, params.leafScaleRate));
    //note:not use leafNumRate
  }
}

function draw() {
  background(255);
  //data
  for (var i = 0; i < tengs.length; i++) {
    var t = tengs[i];
    //visual
    t.displayVine();
    if (mouseIsPressed) {
      if (mouseX > t.x - 30 && mouseX < t.x + 30 && mouseY < t.len) {
        if (!params.debugMode) {
          mySound.setVolume(map(t.flower.amp, 0, t.flower.ampMax, 0.1, 0.7));
        }
        countries[i].display();
        t.displayFlower();
      }
    } else {
      mySound.setVolume(0.1);
      t.createFlower();
    }

    //t.vine.leafNumRate = params.leafNumRate;
    var len = t.vine.leaves.length;
    for (var v = 0; v < len; v++) {
      t.vine.ampAdj = params.ampAdj;
      t.vine.leaves[v].scaleAdj = params.leafScaleRate;
    }

    // debug
    //fill(0);
    //text(round(frameRate()), 10, 20);
    if (params.debugMode) {
      fill(0);
      text(round(frameRate()), 10, 20);
      if (mouseIsPressed) {
        if (mouseX > t.x - 30 && mouseX < t.x + 30 && mouseY < t.len) {
          push();
          translate(mouseX, mouseY);
          text("t.xSetOff:" + " " + t.x, -50, 40);
          text("t.len:" + " " + round(t.len) + "=>" + "Birth:" + countries[i].birth + " " + "million", -50, 60);
          text("t.r:" + " " + round(t.r) + "=>" + "literacyRate_female:" + countries[i].literacyRate_female + "%", -50, 80);
          text("t.g:" + " " + round(t.g) + "=>" + "literacyRate_male:" + countries[i].literacyRate_male + "%", -50, 100);
          text("t.ampMax:" + " " + round(t.ampMax) + "=>" + "GDP:" + countries[i].gdp, -50, 120);
          pop();
        }
      }
    }
  }
}











//data 
function loadData() {
  var columnStart = 3
  for (var c = columnStart; c < table.getColumnCount(); c++) {
    // let's create an object!
    countries.push(new Country());
    // and get the index!
    var index = countries.length - 1;

    // and then let's store the data
    countries[index].name = table.getString(0, c);
    countries[index].birth = table.getNum(1, c);
    countries[index].death = table.getNum(2, c);
    countries[index].literacyRate_male = table.getNum(3, c);
    countries[index].literacyRate_female = table.getNum(4, c);
    countries[index].gdp = table.getNum(5, c);
    countries[index].childLabour_total = table.getNum(6, c);
    countries[index].childLabour_male = table.getNum(7, c);
    countries[index].childLabour_female = table.getNum(8, c);

    // you can print if you want to
    for (var r = 0; r < table.getRowCount(); r++) {
      print(table.getString(r, c));
    }
    print("--------------------------------");
  }
  print("Data Loaded :D ");
}




//
"use strict";

class Country {
  constructor() {
    this.name = "";
    this.birth = 0;
    this.death = 0;
    this.literacyRate_male = 0;
    this.literacyRate_female = 0;
    this.gdp = 0;
    this.childLabour_total = 0;
    this.childLabour_male = 0;
    this.childLabour_female = 0;
  }
  display() {
    push();
    translate(mouseX, mouseY);
    fill(0, 200);
    noStroke();
    text(this.name, 50, 0);
    text("Birth:" + this.birth + " " + "million", 50, 40);
    //text("Death" + this.death, 50, 40);
    text("literacyRate_male:" + this.literacyRate_male + "%", 50, 60);
    text("literacyRate_female:" + this.literacyRate_female + "%", 50, 80);
    text("GDP growth rate:" + this.gdp, 50, 100);
    //text("childLabour_total" + this.childLabour_total, 50, 120);
    //text("childLabour_male" + this.childLabour_male, 50, 140);
    //text("childLabour_female" + this.childLabour_female, 50, 160);
    pop();
  }
}

//
"use strict";

class Leaf {
  constructor(v, r, g, leafScaleRate) {
    this.posOnVine = v;
    this.pos = createVector();
    this.scale = random(0.1, 0.5) * leafScaleRate;
    this.scaleAdj = 0;
    this.angle = random(-PI / 3, PI / 3);
    this.angleFreq = random(0.01, 0.02);
    this.r = r;
    this.g = g;
  }
  updatePosition(x, y) {
    this.pos = createVector(x, y);
  }

  display() {
    fill(this.r, this.g, 255, 255);
    noStroke();
    push();
    translate(this.pos.x, this.pos.y);
    var sinValue = sin(frameCount * this.angleFreq) * 0.4;
    rotate(this.angle + sinValue);
    scale(this.scale + this.scaleAdj);
    beginShape();
    vertex(0, 0);
    bezierVertex(-25, 25, -5, 60, 50, 70);
    vertex(0, 0);
    bezierVertex(50, 15, 55, 45, 50, 70);
    endShape();
    pop();

  }
}
//
"use strict";

class Vine {
  constructor(x, len, freqAdj, maxDia, leafNumRate, leafScaleRate) {

    this.pos = createVector(x, 0);
    this.vineLength = len;

    this.freqAdj = random(-freqAdj, freqAdj);
    this.ampAdj = 0;
    this.maxDia = maxDia;
    this.sinAmp = 0;
    this.sinFreq = 0;
    this.sinValue = 0;
    this.leaves = [];
    for (var i = 0; i < round(this.vineLength * leafNumRate); i++) {
      var leavePos = floor(random(this.vineLength));
      this.leaves.push(new Leaf(leavePos, random(204, 229), random(153, 204), leafScaleRate))
    }

    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);

  }

  updateAmpValue() {
    var freq = frameCount * this.freqAdj;
    var amp = map(mouseY + mouseX, 0, height + width, -100, 100) * this.ampAdj;
    this.sinAmp = sin(freq) * amp;

  }

  updateFreqValue() {
    var freq = frameCount * this.freqAdj;
    var amp = 0.01;
    this.sinFreq = sin(freq) * amp;
  }

  updateMainValue(y) {
      var freq = y * this.sinFreq;
      this.sinValue = sin(freq) * this.sinAmp;

    }
   
  update() {
    this.pos.add(this.vel);

  }
  display() {
    push();
    translate(this.pos.x, 0);
    noStroke();
    //vine
    fill(46, 139, 87, 255);
    for (var y = 0; y < this.vineLength; y++) {
      this.updateAmpValue();
      this.updateFreqValue();
      this.updateMainValue(y);
      var dia = random(1, this.maxDia);
      ellipse(this.sinValue, y, dia, dia);

      for (var i = 0; i < this.leaves.length; i++) {
        if (y == this.leaves[i].posOnVine) {
          this.leaves[i].updatePosition(this.sinValue, y);
        }
      }
    }
    // leaves
    for (var i = 0; i < this.leaves.length; i++) {
      this.leaves[i].display();
    }
    pop();
  }
}



//
"use strict";
var p;

class Flower {
  constructor(x, y, r, g, ampMax) {
    this.pos = createVector(x, y);
    this.color = color(r, g, 255);
    this.freq;

    this.amp = 0;
    this.ampMax = ampMax;

    this.angle;
    this.value;
    this.penPos = 0;

    //graphic
    p = createGraphics(500, 500);
  }
  updateAngle() {
    this.amp = lerp(this.amp, this.ampMax, 0.002);
    this.freq = frameCount * 0.01;
    this.angle = radians(frameCount);
    this.value = noise(this.freq) * this.amp;
  }
  updatePosition() {
    this.pos.x = mouseX;
    this.pos.y = mouseY;
    this.penPos = p5.Vector.fromAngle(this.angle);
    this.penPos.mult(this.value);
  }

  updateGraphic(a) {
    p.push();
    p.translate(p.width / 4, p.height / 4);
    
    if (params.debugMode) {
      p.background(255, 255, 0, 10);
      p.fill(255);
      p.ellipse(0, 0, 3, 3);
      text("this.pos.x" + " " + this.pos.x, 40, 20);
      text("this.pos.y" + " " + this.pos.y, 40, 50);
    }
    
    // improve color
    var rSin = sin(frameCount*0.1) * 20;
    var gSin= sin(frameCount*0.03) * 20;
    
    var r = red(this.color) + rSin;
    var g = green(this.color) + gSin;
    var b = blue(this.color);
    
    p.rotate(radians(a));
    p.fill(r,g,b);
    p.noStroke();
    p.ellipse(this.penPos.x, this.penPos.y, 1, 1);
    p.stroke(r,g,b,20);
    p.strokeWeight(1);
    p.line(0, 0, this.penPos.x, this.penPos.y);

    p.pop();


  }
  display() {
    push();
    translate(this.pos.x, this.pos.y);
    image(p, 0, 0);
    pop();
  }
}



//
"use strict";

class Teng {
  constructor(xSetOff, len, freqAdj, r, g, ampMax, leafNumRate, leafScaleRate) {
    this.x = xSetOff;
    this.len = len;
    this.freqAdj = random(-freqAdj, freqAdj);
    this.flower;
    this.r = r;
    this.g = g;
    this.ampMax = ampMax;
    this.createFlower();
    this.vine = new Vine(xSetOff, len, this.freqAdj, random(1, 5), leafNumRate, leafScaleRate); // one
  }

  createFlower() {
    //flower
    this.flower = new Flower(width / 2, random(this.len), this.r, this.g, this.ampMax);
  }

  //flower
  displayFlower() {
    //flowers
    for (var a = 0; a < 360; a += 72) {
      this.flower.updateAngle();
      this.flower.updatePosition();
      this.flower.updateGraphic(a);
      this.flower.display();

    }
  }
  displayVine(freqAdj) {

    //vine
    push();
    this.vine.display(freqAdj);
    pop();

  }

}
//
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>flower</title>
  <script src="libraries/p5.js" type="text/javascript"></script>

  <script src="libraries/p5.dom.js" type="text/javascript"></script>
  <script src="libraries/p5.sound.js" type="text/javascript"></script>
  
  <script defer src="libraries/dat.gui.min.js" type="text/javascript"></script>
  <script defer src="sketch.js" type="text/javascript"></script>
  
   <script src="Country.js" type="text/javascript"></script>
  <script src="Flower.js" type="text/javascript"></script>
  <script src="Leaf.js" type="text/javascript"></script>
  <script src="Vine.js" type="text/javascript"></script>
  <script src="System.js" type="text/javascript"></script>



  <style>
    body {
      padding: 0;
      margin: 0;
    }
    
    canvas {
      vertical-align: top;
    }
  </style>
</head>

<body>
</body>

</html>