"Once we came to accept the photographic image as reality,
the way to its future simulation was open"
Lev Monovich
Lev Manovich is an artist, an author, and a theorist of digital culture. In his book "Software Takes Command" he talks about how software has fundamentally transformed culture, media, and creativity. He introduces the concept of "softwarization" the idea that all forms of media (text, images, video, and sound) are now created, manipulated, and distributed using software. Traditional media practices have been redefined by tools like Photoshop, After Effects, and 3D modeling software. Manovich discusses the concept of metamedia, where software not only remediates existing media forms but also allows the creation of entirely new ones.
He also wrote an article called "New Media: a User's Guide" and in that article he talks about "Five Principles of New Media Objects." Those principles are: numerical presentation, modularity, automation, variability, and transcoding. This project will be concentrated on the principle of transcoding. Lev Manovich's concept of transcoding refers to the process by which cultural data and media are transformed into computational data, enabling them to be manipulated by software.
That being said, in this project, I will be using code and software application to manipulate conventional photograph into new media. In the first image the "glitch effect" will be added using Photoshop and in the second image the effect will be created by using code within CSS (Cascading Style Sheets).
Youtube tutorial link: "Glitch Effect in Photoshop"
HTML Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Art of Transcoding</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div class="media-author">
<h1>The Art of Transcoding</h1>
</div>
<figure>
<img src="img/lev-monovich.jpg" alt="lev-monovich">
<figcaption>A photograph of Lev Manovich</figcaption>
</figure>
<div id="bio">
<p>"Once we came to accept the photographic image as reality, <br>
the way to its future simulation was open" <br>
<a href="https://manovich.net/" target="_blank"><span>Lev Monovich</span></a>
</p>
</div>
<div class="paragraph-container">
<p>
Lev Manovich is an artist, an author, and a theorist of digital culture. In his book
<a href="https://manovich.net/index.php/projects/software-takes-command" target="_blank"><span>"Software Takes Command"</span></a>
he talks about how software has fundamentally transformed culture, media, and creativity. He introduces the concept of
"softwarization" the idea that all forms of media (text, images, video, and sound) are now created, manipulated, and
distributed using software. Traditional media practices have been redefined by tools like Photoshop, After Effects, and
3D modeling software. Manovich discusses the concept of metamedia, where software not only remediates existing media forms
but also allows the creation of entirely new ones.
</p>
<p>
He also wrote an article called <a href="https://manovich.net/index.php/projects/new-media-a-user-s-guide" target="_blank"><span>"New Media: a User's Guide"</span></a> and in that article he talks about "Five Principles of New Media Objects." Those principles are: numerical presentation, modularity, automation, variability, and transcoding.
This project will be concentrated on the principle of transcoding. Lev Manovich's concept of transcoding refers to the process by which cultural data and media are transformed into computational data, enabling them to be manipulated by
software.
</p>
<p>
That being said, in this project, I will be using code and software application to manipulate conventional photograph into new media. In the first image the "glitch effect" will be added using Photoshop and in the second image the effect will be created by using code within CSS (Cascading Style Sheets).
</p>
</div>
<div class="image-container">
<img src="img/firenze-florence.jpg" alt="firenze-florence">
<img src="img/inception.png" alt="inception">
</div>
<div id="reference">
<p>Youtube tutorial link: <a href="https://www.youtube.com/watch?v=57GQ1rS0yU0&t=293s" target="_blank"><span>"Glitch Effect in Photoshop"</span></a></p>
</div>
<div class="split-effect">
<!-- Bottom image: grayscale -->
<img src="img/firenze-florence.jpg" alt="Florence Cathedral" class="bottom-half">
<!-- Top image: normal color + color-separation via pseudo-elements -->
<img src="img/firenze-florence.jpg" alt="Florence Cathedral" class="top-half">
</div>
<hr>
<h2>HTML Code Example</h2>
<div class="scrollable-container">
<pre><code class="language-markup">
</code></pre>
</div>
<h2>CSS Code Example</h2>
<div class="scrollable-container">
<pre><code class="language-css">
</code></pre>
</div>
<p id="bio-link">Web Design by: Marine Malisetyan <br>
Lev Monovich Biography:<a href="https://en.wikipedia.org/wiki/Lev_Manovich"><span>wikipedia</span></a></p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-css.min.js"></script>
</body>
</html>
CSS Code Example
/* External CSS Example Code */
body {
font-family:helvetica, arial, sans-serif;
background: url("img/background.jpg") no-repeat center center fixed;
background-size: cover;
}
#wrapper {
width: 800px;
margin: 20px auto;
background: whitesmoke;
padding: 60px;
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color:#37089E;
font-size: 3em;
font-family: georgia, "times new roman", serif;
margin-bottom: 100px;
text-shadow: 2px 2px 4px #37089E;
}
figure img {
width: 60%;
display: block;
margin: 0 auto;
}
figure figcaption {
font-size: 0.7em;
display: block;
margin: 0 auto;
text-align: center;
}
#bio {
text-align: center;
margin: 0 auto;
padding: 40spx;
font-family: 'Arial', sans-serif;
margin-bottom: 80px;
}
#bio p {
font-family: 'Arial', sans-serif;
font-size: 1em;
line-height: 1.6;
color: #black;
margin: 0;
font-style: italic;
}
#bio a {
font-family: georgia, "times new roman", serif;
font-size: 1em;
line-height: 1.6;
color: purple;
margin: 0 auto;
font-style: normal;
text-decoration: none;
}
#bio a:hover, a:focus {
color: darkblue;
text-decoration: none;
}
.paragraph-container p {
display:block;
margin: 0 auto;
line-height: 1.6;
padding: 20px;
font-family: georgia, "times new roman", serif;
font-size: 1.2em;
color: black;
}
.paragraph-container span {
font-style: italic;
color: purple;
}
.paragraph-container span:hover, span:focus {
color: darkblue;
}
.paragraph-container a {
text-decoration: none;
}
.image-container {
position: relative;
width: 700px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
margin-top: 100px;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0 auto;
transition: opacity 0.5s ease-in-out;
}
.image-container img:first-child {
opacity: 1;
z-index: 2;
}
.image-container img:nth-child(2) {
opacity: 0;
z-index: 1;
}
.image-container:hover img:first-child {
opacity: 0;
z-index: 1;
}
.image-container:hover img:nth-child(2) {
opacity: 1;
z-index: 2;
}
#reference p {
display: block;
margin-left: 45px;
margin-top: 40px;
font-family: Georgia, "Times New Roman", serif;
font-size: 1em;
color: black;
}
#reference span {
font-family: Georgia, "Times New Roman", serif;
font-size: 1em;
color: purple;
margin: 0 auto;
font-style: normal;
text-decoration: none;
margin-bottom: 100px;
}
#reference a:hover span, a:focus span {
color: darkblue;
}
hr {
height: 6px;
background-color: purple;
margin: auto;
margin-top: 200px;
margin-bottom:50px;
border-radius: 10px;
width: 80%;
}
.split-effect {
position: relative;
width: 700px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
margin-top: 100px;
}
/* All images fill the container and transition smoothly */
.split-effect img {
display: block;
width: 100%;
height: auto;
transition: filter 0.4s ease, transform 0.4s ease;
}
/* Bottom image: starts in color, turns grayscale on hover */
.bottom-half {
/* No filter by default */
}
.split-effect:hover .bottom-half {
filter: grayscale(1);
}
/* Top half: positioned over the bottom */
.top-half {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Ensure it covers the full width */
height: 50%; /* Show only the top half */
overflow: hidden; /* Hide the overflow */
transition: filter 0.4s ease, transform 0.4s ease;
}
/* Use clip-path if supported; otherwise, use height */
.split-effect .top-half {
clip-path: inset(0px 0px 50% 0px);
}
/* On hover, distort colors and scale the top half */
.split-effect:hover .top-half {
filter: hue-rotate(180deg) saturate(200%) contrast(150%);
transform: scale(1.1);
}
/* Pseudo-elements for additional color separation and glitch effects on the top half */
.top-half::before,
.top-half::after {
content: "";
position: absolute;
inset: 0;
background: url("img/firenze-florence.jpg") center/cover no-repeat; /* Ensure the image path is correct */
mix-blend-mode: screen;
opacity: 0;
transition: opacity 0.4s ease;
}
/* Left-shifted pseudo-element for color separation */
.split-effect:hover .top-half::before {
transform: translate(-2px, 0);
filter: hue-rotate(180deg);
opacity: 0.5;
}
/* Right-shifted pseudo-element with glitch animation */
.split-effect:hover .top-half::after {
transform: translate(2px, 0);
filter: hue-rotate(60deg);
opacity: 0.5;
animation: glitch 1s infinite linear;
}
/* Glitch animation keyframes */
@keyframes glitch {
0% {
transform: translate(2px, 0);
}
20% {
transform: translate(-2px, 0);
}
40% {
transform: translate(3px, 0);
}
60% {
transform: translate(-3px, 0);
}
80% {
transform: translate(2px, 0);
}
100% {
transform: translate(0, 0);
}
}
h2 {
text-align: center;
color:#37089E;
font-size: 2em;
font-family: georgia, "times new roman", serif;
margin-top: 100px;
}
.scrollable-container {
max-height: 400px; /* Sets the maximum height of the container */
overflow-y: auto; /* Enables vertical scrolling */
padding: 20px; /* Internal spacing */
box-shadow: 4px 4px 10px rgba(128, 0, 128, 1); /* Border around the container */
background-color: transparent; /* Let PrismJS manage the background */
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
margin-bottom: 200px; /* Preserve formatting */
}
/* Custom scrollbar styling for WebKit-based browsers */
.scrollable-container::-webkit-scrollbar {
width: 8px;
}
.scrollable-container::-webkit-scrollbar-track {
background: #444;
}
.scrollable-container::-webkit-scrollbar-thumb {
background: #666;
border-radius: 4px;
}
.scrollable-container::-webkit-scrollbar-thumb:hover {
background: #888;
}
#bio-link p {
display: block;
margin-left: 45px;
font-family: Georgia, "Times New Roman", serif;
font-size: 1em;
color: black;
}
#bio-link span {
font-family: Georgia, "Times New Roman", serif;
font-size: 1em;
color: purple;
margin: 0 auto;
font-style: normal;
text-decoration: none;
}
#bio-link a:hover span, a:focus span {
color: darkblue;
}
Web Design by: Marine Malisetyan
Lev Monovich Biography:wikipedia