Merge branch 'main' into feature/film-timeline

This commit is contained in:
imohkay 2021-10-22 16:23:57 +05:30
commit cc365baf88
6 changed files with 61 additions and 54 deletions

View file

@ -1,6 +1,6 @@
.topnav { .topnav {
background-color: #333; background-color: #333e;
position: relative; position: relative;
height: 68px; height: 68px;
padding: var(--spacing-2); padding: var(--spacing-2);

View file

@ -1,4 +1,9 @@
:root {
--animated-title-color-1: #6666ff;
--animated-title-color-2: #0099ff;
--animated-title-color-3: #ffff00;
--animated-title-color-4: #ff3399;
}
@keyframes animated_title_animation { @keyframes animated_title_animation {
0%,100% { 0%,100% {
background-position: 0 0; background-position: 0 0;
@ -12,7 +17,8 @@
.animated-title { .animated-title {
.text { .text {
//background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); //background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4)); background: linear-gradient(to right, var(--animated-title-color-1), var(--animated-title-color-2) , var(--animated-title-color-3), var(--animated-title-color-4));
-webkit-background-clip: text;
background-clip: text; background-clip: text;
color: transparent; color: transparent;
animation: animated_title_animation 60s ease-in-out infinite; animation: animated_title_animation 60s ease-in-out infinite;

View file

@ -8,5 +8,5 @@ document.querySelectorAll('.animated-title').forEach(element => {
var randomDuration = Math.random() * animationDuration; var randomDuration = Math.random() * animationDuration;
element.querySelectorAll('.text').forEach(text => { element.querySelectorAll('.text').forEach(text => {
text.style.animationDelay = -randomDuration + 's'; text.style.animationDelay = -randomDuration + 's';
} })
}) })

View file

@ -2,6 +2,7 @@ var cache = cache || {}
var layer = 'descriptions' var layer = 'descriptions'
var baseURL = 'https://pad.ma' var baseURL = 'https://pad.ma'
var imageResolution = 480 var imageResolution = 480
var videoExtension
async function pandoraAPI(action, data) { async function pandoraAPI(action, data) {
var url = baseURL + '/api/' var url = baseURL + '/api/'
@ -21,13 +22,29 @@ async function pandoraAPI(action, data) {
return cache[key] return cache[key]
} }
function setVideoSrc(video, src) {
var ext
if (!videoExtension) {
[
['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
['video/webm; codecs="vp8, vorbis"', '.webm'],
].forEach(opt => {
if (videoExtension) { return }
if (video.canPlayType(opt[0]).replace('no', '')) {
videoExtension = opt[1]
}
})
}
video.src = src.replace('.webm', videoExtension)
}
function updatePlayer(video, frame, currentTime, out, src) { function updatePlayer(video, frame, currentTime, out, src) {
var rect = frame.getBoundingClientRect(); var rect = frame.getBoundingClientRect();
video.style.opacity = 0 video.style.opacity = 0
video.style.top = (rect.top + window.scrollY) + 'px' video.style.top = (rect.top + window.scrollY) + 'px'
video.style.display = 'block'; video.style.display = 'block';
if (src) { if (src) {
video.src = src setVideoSrc(video, src)
} }
//video.poster = frame.querySelector('img').src //video.poster = frame.querySelector('img').src
var muted = video.muted var muted = video.muted
@ -225,7 +242,7 @@ function loadItem(config) {
var video = document.createElement('video') var video = document.createElement('video')
video.classList.add('player') video.classList.add('player')
video.muted = true video.muted = true
video.src = `${baseURL}/${config.item}/480p.webm` setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
video.addEventListener('timeupdate', timeupdate) video.addEventListener('timeupdate', timeupdate)
video.addEventListener('touchstart', showOverlay) video.addEventListener('touchstart', showOverlay)
video.addEventListener('mouseover', showOverlay) video.addEventListener('mouseover', showOverlay)

View file

@ -1,7 +1,28 @@
var videoExtension
function setVideoSrc(video, src) {
var ext
if (!videoExtension) {
[
['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
['video/webm; codecs="vp8, vorbis"', '.webm'],
].forEach(opt => {
if (videoExtension) { return }
if (video.canPlayType(opt[0]).replace('no', '')) {
videoExtension = opt[1]
}
})
}
video.src = src.replace('.webm', videoExtension)
}
document.querySelector('a#play-fullscreen').addEventListener('click', event => { document.querySelector('a#play-fullscreen').addEventListener('click', event => {
event.preventDefault()
event.stopPropagation()
var video = document.createElement('video') var video = document.createElement('video')
video.classList.add('player') video.classList.add('player')
video.src = 'https://pad.ma/' + film.id + '/480p.webm' setVideoSrc(video, 'https://pad.ma/' + film.id + '/480p.webm')
console.log(video.src)
video.controls = true video.controls = true
document.querySelector('main').appendChild(video) document.querySelector('main').appendChild(video)
video.style.display = 'none' video.style.display = 'none'
@ -32,7 +53,4 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
} }
}); });
video.play() video.play()
event.preventDefault()
event.stopPropagation()
}) })

View file

@ -4,53 +4,36 @@
{% block main %} {% block main %}
<div class="about"> <div class="about">
<p> <p>
The title Phantasmopolis is a newly coined Greek word comprising “phantasma” (phantom) and “polis” (city-state) inspired by Phantasmagoria, an English sci-fi novel by architect Wang Dahong. Treating “Asian futurisms” as its main theme, the 2021 Asia Art Biennial “Phantasmapolis” seeks to review Asias past and present from the perspective of science fiction. The title Phantasmapolis is a newly coined Greek word comprising “phantasma” (phantom) and “polis” (city-state) inspired by Phantasmagoria, an English sci-fi novel by architect Wang Dahong. Treating “Asian futurisms” as its main theme, the 2021 Asia Art Biennial “Phantasmapolis” seeks to review Asias past and present from the perspective of science fiction.
</p><p> </p><p>
展覽標題「Phantasmapolis」一詞是新造的希臘字分別由「Phantasma」幻影、魅影及「Polis」城邦所組構而成。「Phantasmapolis」一詞的靈感來自於建築家王大閎所撰寫的英文科幻小說《Phantasmagoria》中譯《幻城》。2021亞洲藝術雙年展「未至之城」嘗試以「亞洲未來主義」作為主軸透過科幻文學視角重新省視亞洲的過去與當下。
「Phantasmapolis」一詞是新造的希臘字分別由「Phantasma」幻影、魅影及「Polis」城邦所組構而成。
<br>
「Phantasmapolis」一詞的靈感來自於建築家王大閎所撰寫的英文科幻小說《Phantasmagoria》中譯《幻城》
</p><p> </p><p>
The 8 edition of the Asian Art Biennial hosted by the National Taiwan Museum of Fine Arts (NTMoFA) invites Independent curator Nobuo Takamori (Taiwan) as the chief curator with a transnational curatorial team that also includes curators Tessa Maria Guazon (Philippines), Anushka Rajendran (India), Ho Yu-Kuan (Taiwan), and curator and art historian Thanavi Chotpradit (Thailand). The 8 edition of the Asian Art Biennial hosted by the National Taiwan Museum of Fine Arts (NTMoFA) invites Independent curator Nobuo Takamori (Taiwan) as the chief curator with a transnational curatorial team that also includes curators Tessa Maria Guazon (Philippines), Anushka Rajendran (India), Ho Yu-Kuan (Taiwan), and curator and art historian Thanavi Chotpradit (Thailand).
</p><p> </p><p>
第八屆2021亞洲藝術雙年展將以「Phantasmapolis未至之城」為題由臺灣獨立策展人高森信男擔綱本次展覽總策劃邀請菲律賓策展人泰莎瑪莉亞奎松Tessa Maria Guazon、印度策展人安努舒卡拉堅德蘭Anushka Rajendran、臺灣策展人侯昱寬與泰國策展人暨藝術史學者唐娜維恰卜瑞蒂Thanavi Chotpradit組成多國跨域的策展團隊。
第八屆2021亞洲藝術雙年展將以「Phantasmapolis未至之城」為題由臺灣獨立策展人高森信男擔綱本次展覽總策劃邀請臺灣策展人侯昱寬、菲律賓策展人泰莎瑪莉亞奎松Tessa Maria Guazon、印度策展人安努舒卡拉堅德蘭Anushka Rajendran、泰國策展人暨藝術史學者唐娜維恰卜瑞蒂Thanavi Chotpradit組成多國跨域的策展團隊。
</p><p> </p><p>
Phantas.ma/polis, is the new location for the video art programme of the biennial, “Looking Back to the Future”. Using the time-based annotation, timeline views and edit features of Pad.ma, Phantas.ma/polis showcases the participating artists videos along with extended commentaries by the curator, artists and critics. Over the duration of the biennial, Phantas.ma/polis, is the new location for the video art programme of the biennial, “Looking Back to the Future”. Using the time-based annotation, timeline views and edit features of Pad.ma, Phantas.ma/polis showcases the participating artists videos along with extended commentaries by the curator, artists and critics. Over the duration of the biennial,
Phantas.ma/polis will evolve to bring the artworks in conversation with each other through both formal and interpretative recombinations of the featured works. Phantas.ma/polis will evolve to bring the artworks in conversation with each other through both formal and interpretative recombinations of the featured works.
</p><p> </p><p>
Phantas.ma/polis 為本屆亞洲藝術雙年展的錄像藝術單元「回望未來」Looking Back to the Future的專屬網站其時基注釋、時間軸、剪輯等特色於線上呈現參展藝術家的錄像作品並搭配策展人、藝術家、藝評家的深度評論和活潑精彩的每日節目規畫。雙年展期間Phantas.ma/polis 將會持續演化,藉由將展出作品在形式上和詮釋面上的重新組合,讓作品間產生對話。 Phantas.ma/polis 為本屆亞洲藝術雙年展的錄像藝術單元「回望未來」Looking Back to the Future的專屬網站其時基注釋、時間軸、剪輯等特色於線上呈現參展藝術家的錄像作品並搭配策展人、藝術家、藝評家的深度評論和活潑精彩的每日節目規畫。雙年展期間Phantas.ma/polis 將會持續演化,藉由將展出作品在形式上和詮釋面上的重新組合,讓作品間產生對話。
</p><p> </p><p>
Curated by Anushka Rajendran, “Phantasmapolis: Looking back to the future” considers alterities and futurisms whose traces endure in our present—often inherited from the past—that were denied existence, or threatened by various dominant apparatuses of power. A series of moving image works articulate their concerns in the grammatical premise determined by the future-past tense, excavating the cyclical nature of time and latencies residing in the interstices of time as experienced in the contemporary. Curated by Anushka Rajendran, “Phantasmapolis: Looking back to the future” considers alterities and futurisms whose traces endure in our present—often inherited from the past—that were denied existence, or threatened by various dominant apparatuses of power. A series of moving image works articulate their concerns in the grammatical premise determined by the future-past tense, excavating the cyclical nature of time and latencies residing in the interstices of time as experienced in the contemporary.
</p><p> </p><p>
錄像計畫「未至之城:回望未來」由安努舒卡.拉堅德蘭策展,該計劃想像各種被主流勢力所阻擋、威脅的未來景觀,而許多的「未來」在當前世界裡已出現蛛絲馬跡。展覽中一系列的動態影像以「未來過去式」探索各種議題,深掘當代時間感知的循環特性,以及時間間隙當中的潛在可能。 錄像計畫「未至之城:回望未來」由安努舒卡.拉堅德蘭策展,該計劃想像各種被主流勢力所阻擋、威脅的未來景觀,而許多的「未來」在當前世界裡已出現蛛絲馬跡。展覽中一系列的動態影像以「未來過去式」探索各種議題,深掘當代時間感知的循環特性,以及時間間隙當中的潛在可能。
</p><p>
</p><p>
The artworks present in this exhibition, even as they maintain scepticism towards techno-fetishistic, development-philic, heteronormative, non-inclusive paradigms for the future, propelled in the interest of capital and by the anaemic premise inscribed by the idea of progress, they do not deny the possibility of reorienting civilizational creativity and resilience towards reconsiderations. The artworks present in this exhibition, even as they maintain scepticism towards techno-fetishistic, development-philic, heteronormative, non-inclusive paradigms for the future, propelled in the interest of capital and by the anaemic premise inscribed by the idea of progress, they do not deny the possibility of reorienting civilizational creativity and resilience towards reconsiderations.
</p><p>
</p><p>
雖然展覽中的作品對於科技迷戀、發展導向、異性戀觀點、對未來的排他敘事、受資本驅動、進步導向的貧乏敘事提出質疑,藝術家仍然願意透過文明創造力與韌性,重新探索不同未來可能。 雖然展覽中的作品對於科技迷戀、發展導向、異性戀觀點、對未來的排他敘事、受資本驅動、進步導向的貧乏敘事提出質疑,藝術家仍然願意透過文明創造力與韌性,重新探索不同未來可能。
</p><p> </p><p>
The online platform that hosts this exhibition conceptualized and drawn from pad.ma proposes alternative ways of deepening the connectivity and democratic possibilities that can exist vis-à-vis the internet towards ethical digital infrastructures to engage intimately with art. The online platform that hosts this exhibition conceptualized and drawn from pad.ma proposes alternative ways of deepening the connectivity and democratic possibilities that can exist vis-à-vis the internet towards ethical digital infrastructures to engage intimately with art.
</p><p> </p><p>
呈現此計畫的網路平台之發想與概念來自 pad.ma該平台提倡以另類的方式讓數位介面的藝術體驗更具有連結性也更民主。 呈現此計畫的網路平台之發想與概念來自 pad.ma該平台提倡以另類的方式讓數位介面的藝術體驗更具有連結性也更民主。
</p><p> </p><p>
Bios Bios
</p><p> </p><p>
@ -72,20 +55,14 @@ Pad.ma
<br> <br>
公眾存取數位媒體檔案庫Public Access Digital Media Archive 簡稱Pad.ma是一個為密集文字標注影片素材所設立的線上檔案庫。其營運團隊成員皆為藝術家彙整內容主要為電影創作者、藝術家、文化工作者提供的影片資料帶和未完成的影片。2008年正式上線的Pad.ma為CAMP、0x2620、另類法律論壇、Majlis共同合作而成而其激進、以未來為導向的思考模式多年來始終如一並積極投入檔案資料的素材與理論的研究團隊成員亦常於世界各地發表演講或舉辦工作坊。 公眾存取數位媒體檔案庫Public Access Digital Media Archive 簡稱Pad.ma是一個為密集文字標注影片素材所設立的線上檔案庫。其營運團隊成員皆為藝術家彙整內容主要為電影創作者、藝術家、文化工作者提供的影片資料帶和未完成的影片。2008年正式上線的Pad.ma為CAMP、0x2620、另類法律論壇、Majlis共同合作而成而其激進、以未來為導向的思考模式多年來始終如一並積極投入檔案資料的素材與理論的研究團隊成員亦常於世界各地發表演講或舉辦工作坊。
</p><p> </p><p>
CAMP CAMP
<br> <br>
is a collaborative studio founded in Bombay in 2007. It has been producing fundamental new work in film and video, electronic media, and public art forms, in a practice characterised by a hand-dirtying, non-alienated relation to technology. From their home base in Mumbai, they co-host the online archives pad.ma and indiancine.ma and run a rooftop cinema for the past 14 years. is a collaborative studio founded in Bombay in 2007. It has been producing fundamental new work in film and video, electronic media, and public art forms, in a practice characterised by a hand-dirtying, non-alienated relation to technology. From their home base in Mumbai, they co-host the online archives pad.ma and indiancine.ma and run a rooftop cinema for the past 14 years.
</p><p> </p><p>
CAMP CAMP
<br> <br>
為2007年成立於孟買的合作型工作室。其創作一向與技術維持近距親身的接觸和不排斥不疏離的關係並秉持此一精神與作法不斷推出電影及錄像、電子媒體、公共藝術等類型的全新作品。他們以設址於孟買的總部為據點執行線上資料庫Pad.ma和Indiancine.ma的聯合運作其於14年前開辦的屋頂電影院至今依舊照常營運。 為2007年成立於孟買的合作型工作室。其創作一向與技術維持近距親身的接觸和不排斥不疏離的關係並秉持此一精神與作法不斷推出電影及錄像、電子媒體、公共藝術等類型的全新作品。他們以設址於孟買的總部為據點執行線上資料庫Pad.ma和Indiancine.ma的聯合運作其於14年前開辦的屋頂電影院至今依舊照常營運。
</p><p> </p><p>
0x2620 0x2620
<br> <br>
Founded in 2010 in Berlin, is an artist-run agency for the advancement of the international exchange of information, and usually operates at the intersections of art, politics and technology. Its activities include extensive research on intellectual property and piracy, the development of open-source software tools and web applications, and the production of both technological and social infrastructure for the collaborative creation, maintenance and use of relatively large data sets. Founded in 2010 in Berlin, is an artist-run agency for the advancement of the international exchange of information, and usually operates at the intersections of art, politics and technology. Its activities include extensive research on intellectual property and piracy, the development of open-source software tools and web applications, and the production of both technological and social infrastructure for the collaborative creation, maintenance and use of relatively large data sets.
@ -94,44 +71,33 @@ Founded in 2010 in Berlin, is an artist-run agency for the advancement of the in
0x2620 0x2620
<br> <br>
2010年成立於柏林是一個為促進國際資訊交流而建立的藝術家營運機構擅長處理藝術、政治、技術之間所產生的交集與碰撞塊。活動包括在智慧財產與盜版、開放源軟體工具及網路應用程式的開發、合作性創作、相對巨量數據集的維護及使用等多方面的研究。 2010年成立於柏林是一個為促進國際資訊交流而建立的藝術家營運機構擅長處理藝術、政治、技術之間所產生的交集與碰撞塊。活動包括在智慧財產與盜版、開放源軟體工具及網路應用程式的開發、合作性創作、相對巨量數據集的維護及使用等多方面的研究。
</p><p> </p><p>
Annotation Collaborators: <br> Annotation Collaborators:<br>
影片評論共筆: 影片評論共筆:
</p><p> </p><p>
Yang Yu-Chiao is a researcher on oral literature, narratology and folktale poetics, and is also a narrator of Taiwanese folktales in the oral tradition. Yu-Chiao also created several performances drawing from storytelling, poetry, writing actions, and experimental sounds with artists working with different media including digital, film, and classical music since 2017. Yu-Chiao has published several works including a series of tales that demonstrate characters in oracle bone script. Yang Yu-Chiao is a researcher on oral literature, narratology and folktale poetics, and is also a narrator of Taiwanese folktales in the oral tradition. Yu-Chiao also created several performances drawing from storytelling, poetry, writing actions, and experimental sounds with artists working with different media including digital, film, and classical music since 2017. Yu-Chiao has published several works including a series of tales that demonstrate characters in oracle bone script.
</p><p> </p><p>
楊雨樵喜歡散步喜歡樹的屍骨。專職為口頭傳統民間譚的言說藝術表演者與獨立撰稿人並從事口傳文學、戲劇與電影的敘事學、故事詩學與比較故事學研究。除開設「世界民間譚」展演式講座外2017 年開始以言說藝術表演者身份和聲音、影像領域的藝術家合作發展如《聲熔質變——Anamorphosis & Anatexis》的實驗性系列演出至今。出版過數本以甲骨文為對象的文學創作其他文章散見於紙本刊物與網路平台。 楊雨樵喜歡散步喜歡樹的屍骨。專職為口頭傳統民間譚的言說藝術表演者與獨立撰稿人並從事口傳文學、戲劇與電影的敘事學、故事詩學與比較故事學研究。除開設「世界民間譚」展演式講座外2017 年開始以言說藝術表演者身份和聲音、影像領域的藝術家合作發展如《聲熔質變——Anamorphosis & Anatexis》的實驗性系列演出至今。出版過數本以甲骨文為對象的文學創作其他文章散見於紙本刊物與網路平台。
</p><p> </p><p>
Chen Wan-Yin is an art critic and a writer. She is currently a Ph.D. researcher on media aesthetics and East Asian contemporary art at Vrije Universiteit Amsterdam. She previously worked as an editor of Artist Magazine (Taipei) from 2014 to 2017 and since 2015, she has also been working as a scriptwriter with video artist Hsu Che-Yu. Chen Wan-Yin is an art critic and a writer. She is currently a Ph.D. researcher on media aesthetics and East Asian contemporary art at Vrije Universiteit Amsterdam. She previously worked as an editor of Artist Magazine (Taipei) from 2014 to 2017 and since 2015, she has also been working as a scriptwriter with video artist Hsu Che-Yu.
</p><p> </p><p>
陳琬尹,現為阿姆斯特丹自由大學藝術史與文化學系博士生,研究關注東亞現當代藝術史與媒介美學,曾任多年藝術雜誌編輯。 陳琬尹,現為阿姆斯特丹自由大學藝術史與文化學系博士生,研究關注東亞現當代藝術史與媒介美學,曾任多年藝術雜誌編輯。
</p><p>
Acknowledgements: Nobuo Takamori, Zinnia Ambapardiwala, Karen Menezes, Sanjay Bhangar, Ho Yu-Kuan, Ye Renyu and Liao Chia-Cheng.
</p><p> </p><p>
Acknowledgements: Nobuo Takamori, Zinnia Ambapardiwala, Karen Menezes, Sanjay Bhangar, Ho Yu-Kuan, Renyu Ye please add here Chia-cheng Liao* 致謝高森信男、Zinnia Ambapardiwala、Karen Menezes、Sanjay Bhangar、侯昱寬、葉人瑜與廖嘉誠
</p><p> </p><p>
致謝高森信男、Zinnia Ambapardiwala、Karen Menezes、Sanjay Bhangar、葉人瑜
</p><p>
Project "Phantas.ma/polis" is organized by National Taiwan Museum of Fine Arts, supervised by the Ministry of Culture, and is co-organized by the Cultural Taiwan Foundation and in partnership with SEA Plateau. Project "Phantas.ma/polis" is organized by National Taiwan Museum of Fine Arts, supervised by the Ministry of Culture, and is co-organized by the Cultural Taiwan Foundation and in partnership with SEA Plateau.
</p><p> </p><p>
本計畫由國立臺灣美術館策劃文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。 本計畫由國立臺灣美術館策劃文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。
</p> </p>
</div> </div>
{% endblock %} {% endblock %}