3D API

// How to upload background image?

// How to add text?

// How to add text without changing the whole text

​

var amountt = 30;

var PLANET = [];

var URLL = 'https://data.cityofnewyork.us/resource/xi7c-iiu2.json';

var textt;

var sizee;

var namee;

​

function preload() {

  imagee = loadImage('Universe.jpg');

  JSONN = loadJSON(URLL);

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  randomizee();

  textt = createGraphics(windowWidth, windowHeight);

  textt.textAlign(CENTER);

  textt.textSize(300);

  textt.fill(255);

  textt.text('test', width/2, height/2);

}

​

function draw() {

  background(0);

  /*push();

  texture(imagee);

  plane(windowWidth, windowHeight);

  pop(); */

  for(let i=0; i<PLANET.length; i++)

  {

    push();

    translate(PLANET[i].x, PLANET[i].y, 30);

    // rotateX(PLANET[i].rx);

    rotateY(PLANET[i].ry);

    rotateZ(PLANET[i].rz);

    // namee = JSONN[i].cd_name;

    // texture(textt);

    fill(255, 255, 0, 150);

    sizee = JSONN[i]._2010_population/500;

    noStroke();

    cylinder(30, sizee);

    // PLANET[i].rx+=0.01;

    PLANET[i].ry+=0.01;

    // PLANET[i].rz+=0.01;

    pop();

  }

}

​

function randomizee() {

  for(let i=0; i<amountt; i++)

  {

    let spheree = {};

    spheree.x = random(-width/2, width/2);

    spheree.y = random(-height/2, height/2);

    spheree.z = random(-height/2, height/2);

    spheree.rx = random(100);

    spheree.ry = random(100);

    spheree.rz = random(100);

    PLANET.push(spheree);

  }

}