Code Monkey home page Code Monkey logo

image-explorer's Introduction

๐ŸŒŒ๐Ÿž๐ŸŽ‘๐ŸŒ‡๐ŸŒ๐Ÿ”ญ

The poor image is a copy in motion. Its quality is bad, its resolution substandard. As it accelerates, it deteriorates. It is a ghost of an image, a preview, a thumbnail, an errant idea, an itinerant image distributed for free, squeezed through slow digital connections, compressed, reproduced, ripped, remixed, as well as copied and pasted into other channels of distribution.

โ€“โ€“ Steyerl, H. (2012). In Defense of the Poor Image. In The Wretched of the Screen. Berlin: Sternberg Press.


Image Explorer is a set of browser-based tools for the visual exploration of image collections.

๐Ÿฅž Image Stack

Enables the creation of an "image stack" from a set of image URLs.

Follows from recent work on "composite images" (Pearce et al, 2018; Niederer & Colombo, 2019).

๐Ÿ‰ Image Slice

Enables the creation of an "image slice" from a set of image URLs.

๐Ÿน Image Blend

Enables the creation of an "image blend" from a set of image URLs, including experimentation with different P5 blend modes.

๐Ÿฑ Image Grid

To do: Enables the creation of an "image grid" from a set of image URLs, including the display of a larger version of the image on click/rollover. See roadmap.

๐ŸŽ’ How to use

๐Ÿ˜ธ On Github

You can use on the web at https://image-explorer.publicdatalab.org/

๐Ÿงฎ On P5 web editor

You can run on P5 web editor, where you can login/create an account and duplicate and customise the code to add your own URLs and change variables.

๐Ÿ“ฆ Download and run locally

You can download the repository, modify P5 files and open using a web browser.

๐ŸดFork the code on GitHub

You can fork the repository, modify accordingly, preview using GitHub Pages and suggest changes with a pull request.

๐ŸŽ How to help

You can see the roadmap here.

๐Ÿ™ˆ If you get stuck

You can add an issue here.

๐Ÿ™ Inspiration, acknowledgments and contributors

Image Explorer is inspired by recent work on visual methods in the context of internet studies and new media research. It is created using P5.js and intended to work alongside other web-based tools and libraries for repurposing web and social media data such as those from the Digital Methods Initiative and the mรฉdialab, Sciences Po, Paris.

The project was prompted by a set of visual methods recipes from Gabriele Colombo drawing on his doctoral work exploring the design of composite images. These recipes were documented and refined for a module on Digital Methods for Internet Studies: Concepts, Devices and Data convened by Liliana Bounegru and Jonathan Gray at the Department of Digital Humanities, King's College London, leading to a set of collaborative group projects with their students and the European Forest Institute. The approaches behind these recipes draw on several years of experimentation with images in the context of research and teaching at the Visual Methodologies Collective (Amsterdam University of Applied Sciences), the Digital Methods Initiative (University of Amsterdam), DensityDesign Lab (Politecnico di Milano), the mรฉdialab (Sciences Po, Paris) and beyond. You can read more about this in the readings listed below, in particular Colombo, 2019; Niederer, 2018; and Niederer & Colombo, 2019.

This initial prototype was developed by Jonathan Gray thanks to support from the Arts & Humanities Research Institute at King's College London and through collaborations and conversations with Gabriele Colombo, Liliana Bounegru and Michele Mauri.

๐Ÿ“– Readings and links

Further readings can be found in the visual methods Zotero bibliography. Further visual methods recipes can be found here.

image-explorer's People

Contributors

jwyg avatar

Watchers

 avatar  avatar

image-explorer's Issues

Update save image function to export image without surrounding border ๐Ÿœ

In Firebox the saveCanvas function saves a file with dimension of stacksize (width and height of the image), whereas in Chrome it seems to includes a black band around the outside, presumably canvassize which is currently defined as stacksize + canvasspace.

Update: Behaviour now appears consistent across browsers (perhaps issue identified above was a caching problem): both Firefox and Chrome save canvas based on canvassize (which is what you'd expect from the code). Ideally the save function should only export stacksize as per the following.

Current behaviour

When users click on "save image" button saveCanvas function exports canvassize which is currently defined as stacksize + canvasspace.

Desired behaviour

When users click on "save image" button they should ideally be able to export the area currently defined as stacksize, excluding the canvasspace area which has been included to allow space for save button, sliders, dropdown menus and other user interface features to customise and adjust the image.

This could possibly be addressed by splitting into two phases and/or screen areas:

  1. A configuration, including inputting image URLs and adjusting settings;
  2. Image canvas, for previewing image and showing what would be saved with the "save image" button.

Add image grid ๐Ÿฑ

Desired behaviour

  • Input csv with list of 10 image URLs in one column and frequency (shares/likes/etc) in second column
  • Resize images so that width/height (whichever large) are same size
  • Organise them into a grid - with several possible options:
    • Sorted by frequency
    • Scaled by frequency (so most shared is scaled to max square width and others are scaled down in proportion to frequency)

Optional:

  • Setting to allow clicking/hovering over image shows larger version (particularly useful for ones scaled down by frequency)
  • Setting to allow tinting those sorted by frequency (but not scaled) to indicate how much they are shared

Create text box to display and edit slider value for Image Stack ๐ŸŽš

Current behaviour

The slider can be adjusted to set image transparency between 0 and 255 (using P5 tint function), but these values are not displayed.

Desired behaviour

Ideally there should be a text box which:

  • displays the current value so users can see and document the transparency value for the images they export, for example to ensure consistency across images that they are generating;
  • enables users to edit the current value which would then update the slider accordingly, again so users can generate multiple images with the same transparency value.

Create image stack from URLs in a CSV file ๐Ÿ“ฆ

Current behaviour

At the moment images are provided by URLs in the function preload() section of the sketch.js file. See here for an example.

Desired behaviour

Ideally users could provide a set of image URLs in the browser, for example by:

This could also mean that the same set of URLs (and subsets thereof) could be transformed in different ways using different functions, possibly by converting what are currently separate scripts into a single library, and having different phases or different areas of the screen for configuring and previewing the outputs (as mentioned in issue #9).

Examples of text input fields and CSV upload interfaces from other digital methods tools

DMI Triangulation tool

DMI Google Reverse Image scraper tool

Bernhard Rieder's Rankflow tool

Density Design et al's RawGraphs tool

mรฉdialab Science Po's CSV, Rinse, Repeat tool

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.