graficos
abe-
BIN
graficos/data/baleares.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
graficos/data/capa-0.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
graficos/data/capa-1.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
graficos/data/capa-10.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
graficos/data/capa-2.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
graficos/data/capa-3.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
graficos/data/capa-4.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
graficos/data/capa-5.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
graficos/data/capa-6.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
graficos/data/capa-7.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
graficos/data/capa-8.png
Normal file
|
After Width: | Height: | Size: 8.7 KiB |
BIN
graficos/data/capa-9.png
Normal file
|
After Width: | Height: | Size: 7.3 KiB |
BIN
graficos/data/capa-PGC-0.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
graficos/data/capa-PGC-1.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
graficos/data/capa-PGC-10.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
graficos/data/capa-PGC-2.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
graficos/data/capa-PGC-3.png
Normal file
|
After Width: | Height: | Size: 5 KiB |
BIN
graficos/data/capa-PGC-4.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
graficos/data/capa-PGC-5.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
graficos/data/capa-PGC-6.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
graficos/data/capa-PGC-7.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
graficos/data/capa-PGC-8.png
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
BIN
graficos/data/capa-PGC-9.png
Normal file
|
After Width: | Height: | Size: 6 KiB |
BIN
graficos/data/cmap-cuencas.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
graficos/data/cuencas.png
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
graficos/data/duero.png
Normal file
|
After Width: | Height: | Size: 7.6 KiB |
BIN
graficos/data/ebro.png
Normal file
|
After Width: | Height: | Size: 7.4 KiB |
BIN
graficos/data/guadalquivir.png
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
graficos/data/guadiana.png
Normal file
|
After Width: | Height: | Size: 7.2 KiB |
BIN
graficos/data/harvester_1046427_cc.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
graficos/data/harvester_1046427_cc_p.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
graficos/data/jucar.png
Normal file
|
After Width: | Height: | Size: 5.9 KiB |
BIN
graficos/data/norte.png
Normal file
|
After Width: | Height: | Size: 7.3 KiB |
BIN
graficos/data/pirineo.png
Normal file
|
After Width: | Height: | Size: 4 KiB |
BIN
graficos/data/segura.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
graficos/data/sur.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
graficos/data/tajo.png
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
graficos/data/tractor_792349_cc.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
graficos/data/tractor_792349_cc_p.png
Normal file
|
After Width: | Height: | Size: 454 B |
13
graficos/expropiacion.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
||||
<script src="grafica-0.1.0-mod.js"></script>
|
||||
<script src="expropiacion.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style> body {padding: 0; margin: 0;} </style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
64
graficos/expropiacion.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
var exceso, reserva, exceptuadas;
|
||||
var nombres;
|
||||
var plot;
|
||||
|
||||
function setup() {
|
||||
createCanvas(800,519);
|
||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Islas");
|
||||
exceso = new Array(15267,35628,136465,3466,19615,64179,81809,148193,13326,35075,3235);
|
||||
reserva = new Array(12251,62730,131128,24433,54545,68854,82052,140453,20980,131042,5985);
|
||||
exceptuadas = new Array(7094,31194,128457,3289,15734,39460,21419,68830,23782,68386,15675);
|
||||
|
||||
var pointSizes = [];
|
||||
var points = [];
|
||||
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
points[n] = new GPoint(exceso[n], exceptuadas[n], nombres[n]);
|
||||
pointSizes[n] = map(reserva[n],5000,141000,5,100);
|
||||
}
|
||||
|
||||
// Creamos el plot
|
||||
plot = new GPlot(this);
|
||||
plot.setDim(width-230, height-100);
|
||||
plot.setTitleText("Tierras en exceso, reserva y exceptuadas por cuenca hidrografica segun PGC");
|
||||
plot.getXAxis().setAxisLabelText("Tierras en exceso (Has)");
|
||||
plot.getYAxis().setAxisLabelText("Tierras exceptuadas (Has)");
|
||||
plot.setPoints(points);
|
||||
plot.setPointSizes(pointSizes);
|
||||
plot.setPointColor(color(255,0,0,50));
|
||||
plot.setLineColor(color(0));
|
||||
plot.setLabelBgColor(color(255,0));
|
||||
}
|
||||
|
||||
|
||||
function draw() {
|
||||
background(255);
|
||||
|
||||
// Draw the plot
|
||||
plot.beginDraw();
|
||||
plot.drawBox();
|
||||
plot.drawXAxis();
|
||||
plot.drawYAxis();
|
||||
plot.drawTitle();
|
||||
plot.drawGridLines(GPlot.BOTH);
|
||||
plot.drawPoints();
|
||||
plot.drawLabels();
|
||||
plot.drawAllLabels();
|
||||
plot.endDraw();
|
||||
|
||||
textFont("Helvetica");
|
||||
textSize(11);
|
||||
fill(0);
|
||||
textAlign(LEFT);
|
||||
text("Tierras en reserva (Has)", 660, 330);
|
||||
textAlign(CENTER);
|
||||
stroke(100);
|
||||
noFill();
|
||||
ellipse(720, 390, 100, 100);
|
||||
fill(0);
|
||||
text("140000", 720, 390);
|
||||
noFill();
|
||||
ellipse(720, 455, 10, 10);
|
||||
fill(0);
|
||||
text("14000", 720, 475);
|
||||
}
|
||||
5444
graficos/grafica-0.1.0-mod.js
Normal file
5
graficos/grafica-0.1.0-mod.min.js
vendored
Normal file
5
graficos/grafica-0.1.0.min.js
vendored
Normal file
12
graficos/hidraulicas.html
Executable file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
||||
<script src="hidraulicas.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style> body {padding: 0; margin: 0;} </style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
112
graficos/hidraulicas.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
var cuencas, cmap;
|
||||
var nombres,colores,x,y;
|
||||
var canales, acequias;
|
||||
var totCanales = 0,totAcequias = 0;
|
||||
var cuenta = 0, last;
|
||||
|
||||
function setup() {
|
||||
createCanvas(800,519);
|
||||
cuencas = loadImage("data/cuencas.png");
|
||||
cmap = loadImage("data/cmap-cuencas.png");
|
||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
|
||||
colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
|
||||
canales = new Array(157.3,1422.1,810, 132.5,525.7,764.9,360.5,1111.7,266.7,85.7,-1);
|
||||
acequias= new Array(448.1,2215.3,1872.7,258.7,2378,1356.7,1210.5,1215.7,191.7,2004.1,-1);
|
||||
x = new Array(158,243, 449, 597, 432, 308, 236, 263, 362,412, 601);
|
||||
y = new Array(77,158,140, 139,278, 253, 327, 393, 441,368, 322);
|
||||
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
if (canales[n] != -1) totCanales = totCanales + canales[n];
|
||||
if (acequias[n] != -1) totAcequias = totAcequias + acequias[n];
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(200,225,225);
|
||||
image(cuencas,0,0);
|
||||
|
||||
var mc = cmap.get(mouseX,mouseY);
|
||||
var over = [];
|
||||
for (var n = 0; n < colores.length; n++) {
|
||||
over[n] = compara(mc,color(colores[n]));
|
||||
}
|
||||
|
||||
for (var n = 0; n < colores.length; n++) {
|
||||
if (over[n]) {
|
||||
fill(0);
|
||||
textStyle(NORMAL);
|
||||
if (canales[n] != -1) {
|
||||
text("Canales: " + canales[n] + " Km", x[n], y[n]+5);
|
||||
text("Acequias: " + acequias[n] + " Km", x[n], y[n]+20);
|
||||
}
|
||||
else {
|
||||
textSize(10);
|
||||
text("(Sin datos)", x[n], y[n]+5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// nombres
|
||||
textStyle(BOLD);
|
||||
textSize(14);
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
var nbr = String.toUpperCase(nombres[n]);
|
||||
fill(255);
|
||||
noStroke();
|
||||
fill(0);
|
||||
text(nbr, x[n], y[n]-10);
|
||||
}
|
||||
|
||||
cuenta = cuenta + 0.5;
|
||||
|
||||
// Canales
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
if (!over[n]) {
|
||||
if (canales[n] == -1) {
|
||||
textSize(10);
|
||||
fill(0);
|
||||
text("(Sin datos)", x[n], y[n]+5);
|
||||
}
|
||||
var pct = map(canales[n]/totCanales,0,1,0,50);
|
||||
for (var i = 0; i < min(cuenta,pct); i++) {
|
||||
var xi = x[n] + 10*i;
|
||||
stroke(0);
|
||||
line(xi+3, y[n]-4,xi+10+3,y[n]-4);
|
||||
noStroke();
|
||||
fill(0);
|
||||
quad(xi+10+4,y[n]-4,xi+10+4,y[n]-4+7, xi+10,y[n]+7, xi+10,y[n]);
|
||||
fill(0,255,255);
|
||||
quad(xi+3, y[n]-3,xi+10+3,y[n]-3,xi+10,y[n],xi, y[n]);
|
||||
noStroke();
|
||||
fill(0);
|
||||
rect(xi, y[n],10,7)
|
||||
fill(255);
|
||||
arc(xi+5,y[n]+7,7,8,PI,TWO_PI);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Acequias
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
if (!over[n]) {
|
||||
pct = map(acequias[n]/totAcequias,0,1,0,50);
|
||||
for (var i = 0; i < min(cuenta,pct); i++) {
|
||||
var xi = x[n] + 10*i;
|
||||
stroke(0);
|
||||
line(xi, y[n]+15,xi+10,y[n]+15);
|
||||
line(xi+3, y[n]+15-3,xi+10+3,y[n]+15-3);
|
||||
noStroke();
|
||||
fill(0);
|
||||
quad(xi+10+4,y[n]+15-3, xi+10+4,y[n]+15+4-3-1, xi+10, y[n]+15+4, xi+10, y[n]+15);
|
||||
fill(0,255,255);
|
||||
quad(xi+3, y[n]+15-2,xi+10+3,y[n]+15-2, xi+10,y[n]+15,xi, y[n]+15);
|
||||
fill(0);
|
||||
rect(xi, y[n]+15, 10, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function compara(c1, c2) {
|
||||
return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
|
||||
}
|
||||
12
graficos/mecanizacion.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
||||
<script src="mecanizacion.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style> body {padding: 0; margin: 0;} </style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
101
graficos/mecanizacion.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
var cuencas, cmap;
|
||||
var nombres,colores,x,y;
|
||||
var tractores, cosechadoras;
|
||||
var totTractores = 0,totCosechadoras = 0;
|
||||
var cuenta = 0, last;
|
||||
var imgTractor,imgCosechadora;
|
||||
|
||||
function setup() {
|
||||
createCanvas(800,519);
|
||||
cuencas = loadImage("data/cuencas.png");
|
||||
cmap = loadImage("data/cmap-cuencas.png");
|
||||
imgTractor = loadImage("data/tractor_792349_cc_p.png");
|
||||
imgCosechadora = loadImage("data/harvester_1046427_cc_p.png");
|
||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
|
||||
colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
|
||||
tractores = new Array(31.5,32.8,81.4,-1,128.5,37.6,59.1,30.6,11.2,34.6,-1);
|
||||
cosechadoras= new Array(0,1.2,2.8,-1,5,0.6,0.9,2.6,0.2,0.5,-1);
|
||||
|
||||
x = new Array(128,233, 409, 597, 392, 248, 206, 217, 362,402, 651);
|
||||
y = new Array(77,128,110, 139,248, 243, 307, 390, 431,368, 322);
|
||||
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
if (tractores[n] != -1) totTractores = totTractores + tractores[n];
|
||||
if (cosechadoras[n] != -1) totCosechadoras = totCosechadoras + cosechadoras[n];
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(200,225,225);
|
||||
image(cuencas,0,0);
|
||||
|
||||
|
||||
var mc = cmap.get(mouseX,mouseY);
|
||||
var over = [];
|
||||
for (var n = 0; n < colores.length; n++) {
|
||||
over[n] = compara(mc,color(colores[n]));
|
||||
}
|
||||
|
||||
for (var n = 0; n < colores.length; n++) {
|
||||
if (over[n]) {
|
||||
fill(0);
|
||||
textStyle(NORMAL);
|
||||
if (tractores[n] != -1) {
|
||||
text("Tractores: " + tractores[n], x[n], y[n]+10);
|
||||
text("Cosechadoras: " + cosechadoras[n], x[n], y[n]+25);
|
||||
}
|
||||
else {
|
||||
textSize(10);
|
||||
text("(Sin datos)", x[n], y[n]+5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
cuenta = cuenta + 0.5;
|
||||
|
||||
// Cosechadoras
|
||||
var mpct = [];
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
if (!over[n]) {
|
||||
pct = map(cosechadoras[n]/totCosechadoras,0,1,0,40);
|
||||
mpct[n] = floor(pct)+1;
|
||||
for (var i = 0; i < min(cuenta,pct); i++) {
|
||||
var xi = x[n] + 20*(i%4);
|
||||
var yi = y[n] + floor(i/4)*20;
|
||||
image(imgCosechadora,xi,yi,20,20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tractores
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
if (!over[n]) {
|
||||
if (tractores[n] == -1) {
|
||||
textSize(10);
|
||||
textStyle(NORMAL);
|
||||
fill(0);
|
||||
text("(Sin datos)", x[n], y[n]+5);
|
||||
}
|
||||
var pct = map(tractores[n]/totTractores,0,1,0,40);
|
||||
for (var i = 0; i < min(cuenta,pct); i++) {
|
||||
var xi = x[n] + 20*(i%4) + min(4,mpct[n])*20;
|
||||
var yi = y[n] + floor(i/4)*20;
|
||||
image(imgTractor,xi,yi,18,18);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// nombres
|
||||
textStyle(BOLD);
|
||||
textSize(14);
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
var nbr = nombres[n];
|
||||
fill(0);
|
||||
text(nbr, x[n], y[n]-7);
|
||||
}
|
||||
}
|
||||
|
||||
function compara(c1, c2) {
|
||||
return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
|
||||
}
|
||||
94
graficos/parcelas-old.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
var cuencas, cmap;
|
||||
var ids,nombres,colores,x,y;
|
||||
var capas,imgs;
|
||||
var dim;
|
||||
|
||||
function preload() {
|
||||
ids = new Array("norte","duero","ebro","pirineo","jucar","tajo","guadiana","guadalquivir","sur","segura","baleares");
|
||||
imgs = new Array();
|
||||
for (var n = 0; n < ids.length; n++) {
|
||||
imgs[n] = loadImage("data/"+ids[n]+".png");
|
||||
}
|
||||
cuencas = loadImage("data/cuencas.png");
|
||||
cmap = loadImage("data/cmap-cuencas.png");
|
||||
}
|
||||
|
||||
function setup() {
|
||||
createCanvas(800,519);
|
||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
|
||||
colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
|
||||
x = new Array(158,243, 449, 597, 432, 308, 236, 263, 362,432, 651);
|
||||
y = new Array(77,158,140, 139,278, 253, 327, 393, 441,368, 322);
|
||||
dim = new Array(11,8.4,11,-1,6,7.5,8.6,5.3,5.9,6.6,-1);
|
||||
capas = new Array();
|
||||
for (var n = 0; n < ids.length; n++) {
|
||||
capas[n] = createImage(width,height);
|
||||
capas[n].loadPixels();
|
||||
|
||||
if (dim[n] != -1) {
|
||||
var paso = map(dim[n],0, 15, 2, 20);
|
||||
|
||||
colorMode(HSB,360,255,255);
|
||||
var h = random(70,130);
|
||||
var numi = floor(width/paso)+1;
|
||||
var numj = floor(height/paso)+1;
|
||||
var c = [];
|
||||
for (var i = 0; i < numi; i++) {
|
||||
c[i] = [];
|
||||
for (var j = 0; j < numj; j++) {
|
||||
var s = random(100,200);
|
||||
c[i][j] = color(h, s, random(150,200) );
|
||||
}
|
||||
}
|
||||
colorMode(RGB,255,255,255);
|
||||
for (var i = 0; i < width; i++) {
|
||||
var pasoi = floor(i/paso);
|
||||
for (var j = 0; j < height; j++) {
|
||||
var pasoj = floor(j/paso);
|
||||
capas[n].set(i,j,c[pasoi][pasoj]);
|
||||
}
|
||||
}
|
||||
capas[n].updatePixels();
|
||||
capas[n].mask(imgs[n]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(200,225,225);
|
||||
|
||||
// capas
|
||||
for (var n = 0; n < ids.length; n++) {
|
||||
tint(200,180,130);
|
||||
image(imgs[n],0,0);
|
||||
tint(255,min(frameCount*40,255));
|
||||
if (dim[n] != -1) image(capas[n],0,0);
|
||||
else text("(Sin datos)", x[n], y[n]+5);
|
||||
}
|
||||
|
||||
// Mas datos
|
||||
var mc = cmap.get(mouseX,mouseY);
|
||||
for (var n = 0; n < colores.length; n++) {
|
||||
if (compara(mc,color(colores[n]))) {
|
||||
noTint();
|
||||
image(imgs[n],0,0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// nombres
|
||||
textSize(14);
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
var nbr = nombres[n];
|
||||
fill(255);
|
||||
noStroke();
|
||||
fill(0);
|
||||
text(nbr, x[n], y[n]-10);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function compara(c1, c2) {
|
||||
return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
|
||||
}
|
||||
12
graficos/parcelas.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
||||
<script src="parcelas.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style> body {padding: 0; margin: 0;} </style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
78
graficos/parcelas.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
var cuencas, cmap;
|
||||
var ids,nombres,colores,x,y;
|
||||
var capas,capaspg,imgs;
|
||||
var dim, dimr;
|
||||
|
||||
function preload() {
|
||||
ids = new Array("norte","duero","ebro","pirineo","jucar","tajo","guadiana","guadalquivir","sur","segura","baleares");
|
||||
dimr = new Array(11,8.4,11,-1,6,7.5,8.6,5.3,5.9,6.6,-1);
|
||||
dim = new Array(12,10,14.2,8,7.6,8,7.6,10,4.7,10,11);
|
||||
imgs = new Array();
|
||||
capas = new Array();
|
||||
capaspg = new Array();
|
||||
for (var n = 0; n < ids.length; n++) {
|
||||
imgs[n] = loadImage("data/"+ids[n]+".png");
|
||||
capaspg[n] = loadImage("data/capa-PGC-"+n+".png");
|
||||
if (dim[n] != -1) {
|
||||
capas[n] = loadImage("data/capa-"+n+".png");
|
||||
}
|
||||
}
|
||||
cuencas = loadImage("data/cuencas.png");
|
||||
cmap = loadImage("data/cmap-cuencas.png");
|
||||
}
|
||||
|
||||
function setup() {
|
||||
createCanvas(800,519);
|
||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
|
||||
colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
|
||||
x = new Array(158,243, 429, 597, 432, 268, 226, 253, 362,432, 611);
|
||||
y = new Array(77,158,140, 139,278, 263, 327, 393, 441, 368, 322);
|
||||
}
|
||||
|
||||
|
||||
function draw() {
|
||||
background(200,225,225);
|
||||
|
||||
// capas
|
||||
for (var n = 0; n < ids.length; n++) {
|
||||
if (dimr[n] != -1) image(capas[n],0,0);
|
||||
else {
|
||||
image(imgs[n],0,0);
|
||||
}
|
||||
}
|
||||
|
||||
// Parcelas segun PGC
|
||||
var mc = cmap.get(mouseX,mouseY);
|
||||
for (var n = 0; n < colores.length; n++) {
|
||||
if (compara(mc,color(colores[n]))) {
|
||||
tint(255,100);
|
||||
image(capaspg[n],0,0);
|
||||
noTint();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// nombres
|
||||
textSize(14);
|
||||
for (var n = 0; n < nombres.length; n++) {
|
||||
var nbr = String.toUpperCase(nombres[n]);
|
||||
if (dimr[n] != -1 || !compara(mc,color(colores[n]))) fill(0);
|
||||
else fill(0);
|
||||
textStyle(BOLD);
|
||||
text(nbr, x[n], y[n]-10);
|
||||
textStyle(NORMAL);
|
||||
if (compara(mc,color(colores[n]))) {
|
||||
text("Plan inicial: " + dim[n]+" Has", x[n], y[n]+5);
|
||||
}
|
||||
else {
|
||||
if (dimr[n] != -1) text("Parcela media: " + dimr[n]+" Has", x[n], y[n]+5);
|
||||
else text("(Sin datos)", x[n], y[n]+5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function compara(c1, c2) {
|
||||
return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
|
||||
}
|
||||