My dataset comes from the Museum of Modern Art's API on GitHub. They contain JSON files from over 200,000 artworks which contains attributes of each artwork from Title, Artist, Nationality, Year, Medium, etc. I only used the title, artist, and year in my project.
In my engineering classes, we studied up on image analysis and what information we can get from a digital image. There are many applications of that use this process today, such as Photoshop which obtains the RGB histogram from the photo. I always wondered what were the main colors used in an artwork, and was curious what percentage each color actually made up the artwork. I decided to create a pie chart that would take all the pixel values in the image, and section a piece of it in the circle.
Because 200,000 artworks is very large to process, I shortened it to contain only 101 Most Important Western Painters according to "The Art Wolf." I created a code that would compile a new JSON file for me that contain these painters in "filter.js" that produces "data_compressed.json." This file contains 3,970 artworks.
Code: Select all
fs = require('fs');
let finished = [];
let constituentID = [//url: http://www.theartwolf.com/articles/most-important-painters.htm
4609, //PABLO PICASSO
//GIOTTO DI BONDONE
//LEONARDO DA VINCI
4869, //PAUL CÉZANNE
//REMBRANDT VAN RIJN
//DIEGO VELÁZQUEZ
2981, //WASSILY KANDINSKY
4058, //CLAUDE MONET
//CARAVAGGIO
//JOSEPH MALLORD WILLIAM TURNER
//JAN VAN EYCK
//ALBRECHT DÜRER
4675, //JACKSON POLLOCK
//MICHELANGELO BUONARROTI
2098, //PAUL GAUGUIN
2274, //FRANCISCO DE GOYA //did not find any
2206, //VINCENT VAN GOGH
3721, //ÉDOUARD MANET
5047, //MARK ROTHKO
3832, //HENRI MATISSE
//RAPHAEL
370, //JEAN-MICHEL BASQUIAT
4614, //EDVARD MUNCH
//TITIAN
4057, //PIET MONDRIAN
//PIERO DELLA FRANCESCA
//PETER PAUL RUBENS
6246, //ANDY WARHOL
4016, //JOAN MIRÓ
//TOMMASO MASACCIO
1055, //MARC CHAGALL
//GUSTAVE COURBET
//NICOLAS POUSSIN
3213, //WILLEM DE KOONING
3130, //PAUL KLEE
272, //FRANCIS BACON
3147, //GUSTAV KLIMT
1474, //EUGÈNE DELACROIX //not found
//PAOLO UCCELLO
//WILLIAM BLAKE
3710, //KAZIMIR MALEVICH
//ANDREA MANTEGNA
//JAN VERMEER
//EL GRECO
//CASPAR DAVID FRIEDRICH
//WINSLOW HOMER
1634, //MARCEL DUCHAMP
//GIORGIONE
2963, //FRIDA KAHLO
//HANS HOLBEIN THE YOUNGER
1465, //EDGAR DEGAS
//FRA ANGELICO
5358, //GEORGES SEURAT
//JEAN-ANTOINE WATTEAU
1364, //SALVADOR DALÍ
1752, //MAX ERNST
//TINTORETTO
2923, //JASPER JOHNS
//SANDRO BOTTICELLI
2678, //DAVID HOCKNEY
624, //UMBERTO BOCCIONI
//JOACHIM PATINIR
//DUCCIO DA BUONINSEGNA
//ROGER VAN DER WEYDEN
//JOHN CONSTABLE
//JACQUES-LOUIS DAVID
2252, //ARSHILLE GORKY
//HIERONYMUS BOSCH
//PIETER BRUEGEL THE ELDER
//SIMONE MARTINI
//FREDERIC EDWIN CHURCH
2726, //EDWARD HOPPER
1930, //LUCIO FONTANA
3748, //FRANZ MARC
4869, //PIERRE-AUGUSTE RENOIR
6336, //JAMES MCNEILL WHISTLER
//THEODORE GÉRICAULT
//WILLIAM HOGARTH
1253, //CAMILLE COROT
744, //GEORGES BRAQUE
//HANS MEMLING
4907, //GERHARD RICHTER
4038, //AMEDEO MODIGLIANI
//GEORGES DE LA TOUR
//GENTILESCHI, ARTEMISIA
//JEAN FRANÇOIS MILLET
//FRANCISCO DE ZURBARÁN
//CIMABUE
1739, //JAMES ENSOR
3692, //RENÉ MAGRITTE
3569, //EL LISSITZKY
5215, //EGON SCHIELE
//DANTE GABRIEL ROSSETTI
//FRANS HALS
//CLAUDE LORRAIN
3542, //ROY LICHTENSTEIN
4360, //GEORGIA O'KEEFE
//GUSTAVE MOREAU
//GIORGIO DE CHIRICO
6624, //FERNAND LÉGER
//JEAN-AUGUSTE-DOMINIQUE INGRES
]; //constituentID array
let originalFilePath = 'Artworks.json'; //PUT UR ORIGINAL FILEPATH HERE ie dumbHoney.json
let endFilePath = 'data_compressed.json'; //PUT WHAT YOU WANT YOUR NEW JSON FILE TO BE CALLED HERE ie honeyIsTheBest.json
fs.readFile(originalFilePath, (err, data) => {
if(err){
throw err;
return;
}
artwork = JSON.parse(data);
for(let i = 0; i < artwork.length; i++) {
// this if statement might need changing, if you want more stuff like sculptures and whatnot
if(constituentID.includes(artwork[i].ConstituentID[0])
&& (artwork[i].Classification !== 'Sculpture' || artwork[i].Classification !== 'Architecture')
&& (artwork[i].URL !== null && artwork[i].ThumbnailURL !== null)){
finished.push(artwork[i]);
}
}
fs.writeFile('data_compressed.json', JSON.stringify(finished));
});
Code: Select all
for (int i =0; i<resultCounts; i++)
{
String imageURL = artworks.getJSONObject(i).getString("ThumbnailURL");
covers[i] = loadImage(imageURL);
covers[i].save(str(i)+".png");
println(resultCounts-i); //print countdown
}
In my project, I was able to browse through all artworks and see their large scaled image as well. However, when drawing the Pie Chart, the code takes more processing time, and thus I had to shorten the number of results to prevent excessive lag. On top of that, adding the histograms values of red, green, blue, hue, saturation, value would add more processing power, and thus I had to shorten the number of results again. Although my functions work, my laptop's processing power limits me from easily browsing through all the artworks while getting information about the pie chart and histograms as well.
INTERACTION
Users are able to use the scrollbar on the bottom to look at catalog of art. In addition, when the user hovers over a square image of the art piece, a larger view of the artwork is scaled to size along with its title, artist, and year that was made.
The color wheel is not smoothly transitioning, and I want to believe that when I sorted the color values, it does it by hue first, and then brightness. This would then cause it to be more patchy, making it harder to get the bigger image of what percentage of the color makes up the artwork.
FUTURE IMPLEMENTATION
I created another code called "unique.js" that compiles a string array of unique elements. For example, with "unique.js," I created "uniqNationality.json" that has every unique nationality mentioned in the "data_compressed.json" file.
Code: Select all
const fs = require('fs');
let filepath = 'data_compressed.json';
let writeFilePath = 'uniqDates.json'; //'uniqNationalities.json';
fs.readFile(filepath, 'utf8', (err, data) => {
if(err) {
console.log(err);
} else {
console.log(typeof data);
data = data.slice(1, data.length);
let stuff = JSON.parse(data);
helper(stuff);
}
});
const helper = (bunchOfData) => {
let uniqueStorage = {};
let uniqueNames = [];
bunchOfData.forEach((element) => {
if(!uniqueStorage[element.Date]) { //element.Nationality[0])
uniqueStorage[element.Date] = true;
uniqueNames.push(element.Date);
}
});
uniqueNames.sort();
let data = JSON.stringify(uniqueNames);
fs.writeFile(writeFilePath, data, (err) => {
console.log(err);
});
};
