I was thinking how to show the process of compression visually for almost two weeks and came up nothing. I was freak out at that time and suddenly I realised that my topic is the weight of data and pixel. so I let compression fuck off.

I went back to my topic and think about the pixel. as I mentioned before compression use Sorting algorithm to calculate which pixel carry more important value and throw way those less important ones.

We could say the purpose of compression is to transfer faster and save storage space. so even if some colour data lost, people still recognise the picture, just as same as throw way pixel.




This slideshow requires JavaScript.

I threw away a ‘face’. It doesn’t affect you recognise the original image. the following question would be what if we throw away more and larger pixels?


Wooden Mirror, Daniel Rozin, 1999

The 4 mechanical mirrors are made of various materials but share the same behaviour and interaction; any person standing in front of one of these pieces is instantly reflected on its surface. The mechanical mirrors all have video cameras, motors and computers on board and produce a soothing sound as the viewer interacts with them. It Combined computerised reflection with a meditation on the nature of the pixel.



An ‘online tester’ that allowed the user to upload an image and take away some squares from the original image and convert to a new image, like a thumbnail.

Screen Shot 2018-12-23 at 05.46.46

Screen Shot 2018-12-23 at 05.49.18

I made a short animation to show the process and I’ll show it later, hopefully.

Another prototype I made with p5js that sequentially reads the colour of every pixel of the image and displays this colour to fill the window.


Further possibilities

Ship of Theseus

In the metaphysics of identity, the ship of Theseus — or Theseus’s paradox — is a thought experiment that raises the question of whether a ship—standing for an object in general—that has had all of its components replaced remains fundamentally the same object.

Does data has identity?

If so, how can people feel their identity?


JPEG image compression, for example, splits the image into a patchwork of blocks, applying compression to each block using a discrete cosine transform operation.

This is a pretty sophisticated mathematical process, but in simple terms, colour information is removed, along with subtle changes in brightness, centred on the areas where these changes will be least perceptible to the human eye. As a result, although it may not be immediately obvious until you compare the original to the compressed version, information is lost. If you over-compress using JPEG, the effect is a patchwork, blocky image.

An algorithm that somehow organised all information of colour and hierarchy them from the most important (c1-c4) to the less important and the latter one will be deleted (0). In this case, the image can be compressed.
important: margin, junction
less important: pure colour (highly similar)
Replace these large amounts of repetitive data with a small amount of non-repeating data without destroying the details of the image as much as possible
Numerous experiments in biology have shown that the human brain uses the closest colour nearby to fill the lost colour. For example, for a white cloud on a blue sky background, the lossy compression method is to remove certain color parts of the edge of the scene in the image. When you look at the picture on the screen, the brain fills in the missing color with the color seen on the scene.
when compressed to a certain extent, the quality will not lose anymore. Important one cannot be compressed.
Color optimisation in Photoshop:
switch to the Lab color model, select different regions of color channels and use the Median filter on them, then do some saturation correction.

Rethink how many data lost during the compression while we unconscious.

Explored the internet culture we experience, digital reproduction

visualize the explanation of lossy compression. create steps to let people follow (simulate the process of lossy image compression )

How pixel carries value and Visual outcome

Pixels are a data format that contains a numeric representation of a single colour. Pixels in a grid are images and cultural objects. How would you represent the cultural or psychological weight of a single pixel?



Although one pixel can’t represent anything. but hundreds, thousands, millions of pixels can. That’s very inspired me. pixel carry cultural weight. Sylvie Barco took pictures of the street from every single angle of a particular object, and then realized a photo assembly in a mosaic style, that reveals the making up of a new image. This “Lomoscope” series releases itself from French borders to join Asia. Buddhaindia, and Chinese.



Screen Shot 2018-12-23 at 05.29.01

I resize an image from original to one pixel. Actually, you can see nothing from a pixel. it just a tiny lonely square stand right there and represent nothing. I resize the image from the original size and smaller and smaller finally to one pixel. Any value? No.


Visual outcome:

the other way round
what missed data can do
lost or not

Focusing on coca cola and investigate the cultural significance of pixel bearing.

I made some pictures and I hope these can explain how pixel carries culture values. As mentioned in the previous blog, coca-cola can be seen as a symbol that across cultures and class. Coca-cola can represent many things like equality, politics, popular culture, globalisation, America, etc. everyone has special feelings of coca cola in their cultures. so you can see the cultural weight already.

I hope they can say something for me. like the first one, i want people to think about the vectorgraph, the other way round of jpg image. or the last one can represent 1980s America that economy bloom and everyone happy and freedom.

I understand this might be not enough, but this is something I enjoy to do. So I would love to show them as part of my outcome. And I will develop further and see how people can interact with the process of image compression.

Idea combing and suggestion

As mentioned in the last blog……

On one hand, the resolution of digital screens is increasingly higher and the quality of images are better and better. We can see HD pictures everywhere. Posters on the wall, photographs in the gallery, photos in everyone’s phone. On the other hand, there are things we are familiar with, even if we don’t need clear pictures, we can recognise what it is at a glance. So it doesn’t matter to lost definitions (image quality) because of its reputation and mass dissemination.

This project invited audiences to participate to rethink the commonplace items around us, providing a new perspective to create a new awareness of the mundane. It explored the internet culture we experience, digital reproduction and erotic metaphor.



Show the process of items lost quality (pixelate) and become symbols of specific cultures/minority cultures. Also provide a perspective of seeing these commonplace items in the context, by taking photos from different angles of Coke, Receipt and Body and collage them together.



De-nature it

Real-world – pixelate – symbol, there is more process behind it. find them and test it

Talk to people


Pixel on the screen

Use in image processing to describe the raster elements in a screen or image, as “picture elements”.

PPI for Pixels Per Inch. The same principle: It counts the number of pixels your screen displays per inch.

A pixel has no size and no physical value. The Pixel screen size in itself doesn’t give you any information about how sharp the screen might be.

This slideshow requires JavaScript.


Image Compression

Iterate image simulation:

Android bug: After compressing to a certain number of times, the image will not lose quality, but it will turn green.

Screen Shot 2018-12-23 at 03.16.41Screen Shot 2018-12-23 at 03.15.33

What is image quality:


Pixel Art

Pixel art is a form of digital art, created through the use of software, where images are edited on the pixel level. The aesthetic for this kind of graphics comes from 8-bit and 16-bit computers and video game consoles.

Some traditional art forms, such as counted-thread embroidery (including cross-stitch) and some kinds of mosaic and beadwork, are very similar to pixel art. These art forms construct pictures out of small coloured units similar to the pixels of modern digital computing.



画板 2

  • Some Japanese/Chinese character. For example, 点 (dots) means pixel, and the character 点 looks like consist of some pixels.
  • An image of Coca-cola, even pixelate it, blur it, resize it, you can still know it is coca-cola, due to its colours and shape. It’s so famous and popular. Both you and America president know it tastes good. It’s something across regions, class and culture.


画板 1

Invite audiences to stick dots on an image.

Invite people to interact with the prototype to abstract a clear picture.

Physical: Split a picture into small pieces and take away some pieces and see what left

Video: A thing becomes more and more abstract and minimal until it becomes a symbol/icon. For example, coca-cola 4k image — coca-cola add mosaic — icon (menu)


Challenge / Goal

We get used to the high-quality images everywhere. But sometimes if the images getting blur we still can know what it is.

Provide a new perspective to examine the commonplace item and create a new awareness of the mundane


Qualitative Interfaces and Metaphor

Screen Shot 2018-10-25 at 23.36.55

We largely live and think and act and feel in response to, and in dialogue with, the perceived qualities of people, things and phenomena, and the relationships between them, rather than their number. Much of our experience of—and meaning-making in—the real world is qualitative rather than quantitative.

And yet, quantification has become the default mode of interaction with technology, of display of information, and of interfaces which aim to support decision-making and behaviour change in everyday life: quantified self, personal informatics, data, data, more data.

There is somehow more experiential information contained in watching a windsock move, hearing and watching raindrops falling on a puddle, seeing water trapped in a railway carriage door window sloshing around just as we are also jostled by the train’s movement, feeling how a spoon has worn with use, or seeing how worn the “You Are Here” marker is on a map at a tourist attraction, then we can get from a set of numbers, however engagingly presented they might be.

A metaphor is just a way of expressing one idea in terms of another. This project is a nightmare. The city is a playground. You’re a gem. Interaction design often uses metaphors to introduce people to new ways of doing things, by relating them to familiar ideas, from desktops, files and windows, to the net, web, websites and browsers, cloud storage, even blockchain. Many of these are so familiar now that we perhaps no longer even think of them of as metaphors. But they are not inherently ‘right’; they can be and are being challenged by designers and researchers exploring new approaches—including creating novel metaphors, which can persuade us to think differently and accept new ideas, or help us reframe the ways we think at present.

The potential of novel metaphors as a way of helping people understand big concepts differently—in science, society and politics, global issues, economics and environmental matters.

(It’s worth noting here that assuming “Thing 2 is a metaphor for Thing 1” is the assumed structure, but there are also situations where the reverse might also be interesting: tree bark [Thing 2] might work as a metaphor for insurance [Thing 1], but could insurance work as a metaphor for tree bark? Probably, yes, in this case—but in others, the metaphor might break down.)

One simple reason for metaphors’ prevalence is that by mapping features of an existing or familiar situation onto a new or unknown one, we are enabled to grasp and (be more confident that we can) understand it more quickly.


November interview:

Could              be a metaphor of data?

Could data be a metaphor of           ?


Define the outcome:

qualitative interfaces:positive emotions vs negative emotions

Inviting audiences to type.
邀请观众来打字 有一个词库可以选 都是情绪上的词 观众要选几个当下的心情(积极或消极)
电脑屏幕模拟重力 drag and drop letters into type in box (rethinking the weight of type in 打字不那么容易)
看哪个重咯,重的会下沉(数量多,10% happy = 0.1 happy)
(Even with a quantitative display, how aperson interprets it may have a qualitative dimension)
quantitative calculations help build qualitative interfaces

The purpose of this project to help people explore their own and each other’s thinking, and specifically to help people understand relationships between data and emotions.