/*
Idea
-----------------------------------------------------------
Hemos intentado recrear la página de un periodico de una
manera más dinamica. Introduciendo en la diferentes
partes del artículo elementos interactivos y animados.
El origen de los datos que hemos utilizado ha sido usando
la api de Gnews como se sugeria.
Hemos utilizado 2 parametros de busqueda como
fotografia + arte para que no tuvieramos excesivos
resultados. Cambiando estos parametros en la respectiva
variable la composición se adaptará igualmente.
Igualmente hemos filtrado por resultados en Español en la
propia busqueda de Gnews.
Código
------------------------------------------------------------
Hemos usado diferentes funciones propias (11, con y sin
parametros) para aclarar e independizar las acciones que
queremos. Encargandose cada función de una parte de nuestro
artículo.
Hemos usado un array para contener el titular partido en
palabras y otro array para la descripción del artículo
partido en 2 simulando las columnas de un articulo real.
Del mismo modo mostramos la fotografia (extraida del propio
articulo)cuando el titular partido acaba de mostrarse.
La sección con la tematica del articulo es
extraida de la propia busqueda hecha en Gnews.
Al pie de nuestro articulo mostramos desplanzandose la fecha
y la fuente con desplazamientos incrementales en cada una
de las pasadas del draw.
Hemos usado 3 fuentes importadas en diferentes
partes del articulo.
Todo el muestreo de nuestro articulo viene determinado por
el framerate (2 por defecto) que podemos subir y bajar con
interacción de teclado pudiendo incluso pararlo.
Interacción
------------------------------------------------------------
*Teclado
- Los articulos pueden alternarse al azar usando la
tecla "C" del teclado. Cargandose el nuevo articulo y
reseteandose la animación al pulsarlo.
- El framerate puede incrementarse con la tecla "+" hasta
un máximo de 10, y ralentizarse hasta 0 con la tecla "-"
quedando la animación del articulo parada.
*Ratón
- Movimiento del ratón en el eje X -> Agranda o encoge la
fuente de las columnas
*Slider
- Agranda o encoge la fuente de la sección
*/
var gnews;
var articuloSeleccionado;
var img;
var sliderSecccion;
var tituloArray;
var descriptionArray;
var columna1, columna2;
var colorGradiante1, colorGradiante2;
var fuenteLovin;
var fuenteGalanda;
var fuenteCannu;
var search = "fotografia+arte";
var colorAmarillo = "#D9B242";
var colorVerde = "#728B88";
var margen = 20;
var altoImagen = 300;
var posicionArrayTitular = 0;
var tamañoFuenteSeccion = 16;
var tamañoFuenteTitularMin = 15;
var tamañoFuenteTitularMax = 30;
var tamañoFuenteTitularFijo = 22;
var tamañoFuenteColumnas = 20;
var tamañoFuentePie = 16;
var ctx; // contexto del canvas
var fr = 2; // velocidad de muestreo 1 por segundo por defecto
var fechaPosX = 500;
var fuentePosX = 0;
var velocidadPie = 15;
function preload() {
var apiKey = "4d4ec72fcf8a7f5797352dadca9ec3b2";
var isoPais = "es"; //para traer resultados en español
//traemos los articulos filtrados
gnews = loadJSON("[Link] + search + "&token=" +
apiKey + "&country=" + isoPais);
//incluimos la tipografia
fuenteLovin =
loadFont("[Link]
[Link]");
fuenteGalanda =
loadFont("[Link]
%20Moderna%20W01%[Link]");
fuenteCannu =
loadFont("[Link]
%[Link]")
}
function setup() {
var cnv = createCanvas(500, 750);
ctx = [Link]('2d');
colorGradiante1 = color(114, 139, 126); // #728B88
colorGradiante2 = color(0, 0, 0); // #000000
[Link]([Link] + " articulos cargados de GNews");
randomizarArticulo();
sliderSecccion = createSlider(10, 22, tamañoFuenteSeccion);
[Link](-20, 40);
[Link]('width', '80px');
[Link]("transform","rotate(270deg)");
muestraImagen();
frameRate(fr);
}
function draw() {
aplicaGradiante(0, 0, width, height);
pintaCuadros();
pintaSeccion();
pintaTitular();
pintaColumnas();
stroke(colorAmarillo);
strokeWeight(2);
line(margen, 680, width - margen, 680)
noStroke();
pintaFecha();
pintaFuente();
}
function pintaCuadros() {
stroke(colorAmarillo);
noFill();
rect(-5, -5, 50, 110);
rect((width/2 - margen/2), 110 + margen/2, (width/2 - margen), altoImagen);
rect(width/2 + margen/2, 110 - margen/2, (width/2 - margen), altoImagen);
fill(colorAmarillo);
noStroke();
rect(margen, margen, 460, 50)
fill(colorVerde);
rect(width/2, 110, (width/2 - margen), altoImagen)
}
//Selecciona un articulo random de los precargados
function randomizarArticulo() {
var indexRandom = round(random([Link] - 1), 0);
articuloSeleccionado = [Link][indexRandom];
[Link](articuloSeleccionado);
if (![Link] || ![Link]) {
randomizarArticulo(); // Si el articulo no tiene imagen o titulo tomamos otro
}
else {
columna1 = "";
columna2 = "";
img = createImg([Link], "Imagen no disponible");
[Link]();
partirTitulo([Link]);
partirDescripcion([Link])
}
}
// Segmentar el titular en palabras
function partirTitulo(titulo) {
tituloArray = split(titulo, ' ');
}
// Segmentar el contenido del articulo en 2 columnas
function partirDescripcion(descripcion) {
columnasArray = split(descripcion, ' ');
for(var i = 0; i < [Link]; i++) {
if (i <= ([Link] / 2)) {
if (!columna1) {
columna1 = columnasArray[i];
}
else {
columna1 = columna1 + " " + columnasArray[i];
}
}
else {
if (!columna2) {
columna2 = columnasArray[i];
}
else {
columna2 = columna2 + " " + columnasArray[i];
}
}
}
}
function pintaSeccion() {
fill('black');
textAlign(CENTER, CENTER);
noStroke();
textFont(fuenteLovin);
textSize([Link]());
text("Sección: " + search, margen, margen-3, 460, 50);
}
function pintaTitular() {
fill(random(60, 220), random(60, 220), random(60, 220));
textSize(random(tamañoFuenteTitularMin, tamañoFuenteTitularMax));
textFont(fuenteGalanda);
textAlign(LEFT, CENTER);
if(posicionArrayTitular < [Link]){
stroke('black');
strokeWeight(3);
text(tituloArray[posicionArrayTitular], random(margen, width/2 - margen*2 -
textWidth(tituloArray[posicionArrayTitular])), random(110 , 380));
posicionArrayTitular++;
}
else {
textAlign(CENTER, CENTER)
textSize(tamañoFuenteTitularFijo);
stroke('black');
strokeWeight(3);
text([Link], margen, 110, (width/2 - margen*2), altoImagen)
muestraImagen();
}
}
function pintaColumnas() {
fill('white');
tamañoFuenteColumnas = map (mouseX, 0, width, 14, 22)
textSize(tamañoFuenteColumnas);
textFont(fuenteCannu);
textAlign(LEFT, TOP);
noStroke();
text(columna1, margen, 400 + margen * 2, (width/2 - margen*2), 500);
text(columna2 + ".", width/2 + margen, 400 + margen * 2, (width/2 - margen*2),
500);
}
function pintaFecha() {
var fecha = "Fecha: " + [Link](0, 10);
//corta la fecha para evitar la hora al pintar
fill(colorAmarillo);
textSize(tamañoFuentePie);
textFont(fuenteLovin);
textAlign(LEFT, CENTER);
text(fecha, fechaPosX, 712)
if(fechaPosX > margen) {
fechaPosX -= velocidadPie;
}
}
function pintaFuente() {
var fuente = "Fuente: " + [Link];
fill(colorAmarillo);
textSize(tamañoFuentePie);
textFont(fuenteLovin);
textAlign(RIGHT, CENTER);
text(fuente, fuentePosX, 712);
if(fuentePosX < width-margen) {
fuentePosX += velocidadPie;
}
}
// Pinta la imagen
function muestraImagen(){
image(img, width/2 + margen/2, 110 + margen/2, (width/2 - margen - margen),
altoImagen - margen);
}
//Función para pintar el fondo difuminado
function aplicaGradiante(x, y, w, h) {
noFill();
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1);
var c = lerpColor(colorGradiante1, colorGradiante2, inter);
stroke(c);
line(x, i, x + w, i);
}
}
// C o c -> Cambia a un nuevo articulo randomizado de los existentes
// + -> Aumenta el Frame Rate hasta un máximo de 10
// - -> Reduce el Frame Rate hasta un mínimo de 0 (Animación parada)
function keyReleased() {
if (key == 'C' || key == 'c'){
[Link](0, 0, [Link], [Link]);
background(0);
randomizarArticulo();
posicionArrayTitular = 0;
fechaPosX = 500; //reset la posicion de la fecha para que empiece a desplazarse
de nuevo
fuentePosX = 0; //reset la posicion de la fuente para que empiece a desplazarse
de nuevo
}
else if (key == '+'){
if(fr < 10){
fr++;
frameRate(fr);
}
}
else if (key == '-'){
if(fr > 0){
fr--;
frameRate(fr);
}
}
}
