alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added newindex

Browse Source
This commit is contained in:
alicestrt 2020-11-10 13:45:35 +01:00
parent 60746a1b39
commit 64a65ca6d0
11 changed files with 415 additions and 623 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
hello.py
View File

@ -4,26 +4,8 @@ from flask import render_template, jsonify
app = Flask(__name__)
@app.context_processor
def override_url_for():
return dict(url_for=dated_url_for)
def dated_url_for(endpoint, **values):
if endpoint == 'static':
filename = values.get('filename', None)
if filename:
file_path = os.path.join(app.root_path,
endpoint, filename)
values['q'] = int(os.stat(file_path).st_mtime)
return url_for(endpoint, **values)
@app.route('/')
def hello_world():
return render_template('hello.html')
@app.route('/hello/<name>')
@app.route("/get-data")
def get_data():
return jsonify({"a": 1, "b": 2})

83
index.html
View File

@ -1,83 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
svg{ width:100%; height:100%; }
path{
fill: transparent;
stroke: #000;
stroke-dasharray:6px;
}
div{
position:absolute;
top:20px;
left:0;
right:0;
margin:auto;
height:500px;
width:700px;
}
p{ position:absolute; padding:30px; top:200px; width:0; height:0; border-radius:50%; }
.c1{ padding:20px; top:220px; left:10%; background:red; }
.c2{ left:50%; background:blue; }
.c3{ left:30%; background: yellow;}
</style>
</head>
<body>
<div>
<svg>
<path class='p1'></path>
<path class='p2'></path>
</svg>
<p class='c1'>bha</b>
<p class='c2'>etc</b>
<p class='c3'>hello</p>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<script type="text/javascript">
var path1 = document.querySelector(".p1"),
path2 = document.querySelector(".p2");
var c1 = document.querySelector(".c1"),
c1Pos = getPointPos(c1),
c2 = document.querySelector(".c2"),
c2Pos = getPointPos(c2),
c3 = document.querySelector(".c3"),
c3Pos = getPointPos(c3);
function getPointPos(point){
var pos = $(point).position();
pos.left += point.clientWidth/2;
return pos;
}
path1.setAttribute('d', createLine([c1Pos.left, c1Pos.top], [c2Pos.left, c2Pos.top]));
path2.setAttribute('d', createLine([c3Pos.left, c3Pos.top], [c2Pos.left, c2Pos.top]));
function createLine(source, target){
var dx = target[0] - source[0],
dy = target[1] - source[1],
dr = Math.sqrt(dx * dx + dy * dy)/1.5;
return "M" +
source[0] + "," +
source[1] + "A" +
dr + "," + dr + " 0 0,1 " +
target[0] + "," +
target[1];
}
</script>
</body>
</html>

82
index2.html
View File

@ -1,82 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="600"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("test.json", function(error, graph) {
if (error) throw error;
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
d3.select(canvas)
.call(d3.drag()
.container(canvas)
.subject(dragsubject)
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
function ticked() {
context.clearRect(0, 0, width, height);
context.beginPath();
graph.links.forEach(drawLink);
context.strokeStyle = "#aaa";
context.stroke();
context.beginPath();
graph.nodes.forEach(drawNode);
context.fill();
context.strokeStyle = "#fff";
context.stroke();
}
function dragsubject() {
return simulation.find(d3.event.x, d3.event.y);
}
});
function dragstarted() {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d3.event.subject.fx = d3.event.subject.x;
d3.event.subject.fy = d3.event.subject.y;
}
function dragged() {
d3.event.subject.fx = d3.event.x;
d3.event.subject.fy = d3.event.y;
}
function dragended() {
if (!d3.event.active) simulation.alphaTarget(0);
d3.event.subject.fx = null;
d3.event.subject.fy = null;
}
function drawLink(d) {
context.moveTo(d.source.x, d.source.y);
context.lineTo(d.target.x, d.target.y);
}
function drawNode(d) {
context.moveTo(d.x + 3, d.y);
context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}
</script>

149
static/js/CodeFlower.js
View File

@ -1,149 +0,0 @@
var CodeFlower = function(selector, w, h) {
this.w = w;
this.h = h;
d3.select(selector).selectAll("svg").remove();
this.svg = d3.select(selector).append("svg:svg")
.attr('width', w)
.attr('height', h);
this.svg.append("svg:rect")
.style("stroke", "#999")
.style("fill", "#fff")
.attr('width', w)
.attr('height', h);
this.force = d3.layout.force()
.on("tick", this.tick.bind(this))
.charge(function(d) { return d._children ? -d.size / 100 : -40; })
.linkDistance(function(d) { return d.target._children ? 80 : 25; })
.size([h, w]);
};
CodeFlower.prototype.update = function(json) {
if (json) this.json = json;
this.json.fixed = true;
this.json.x = this.w / 2;
this.json.y = this.h / 2;
var nodes = this.flatten(this.json);
var links = d3.layout.tree().links(nodes);
var total = nodes.length || 1;
// remove existing text (will readd it afterwards to be sure it's on top)
this.svg.selectAll("text").remove();
// Restart the force layout
this.force
.gravity(Math.atan(total / 50) / Math.PI * 0.4)
.nodes(nodes)
.links(links)
.start();
// Update the links
this.link = this.svg.selectAll("line.link")
.data(links, function(d) { return d.target.name; });
// Enter any new links
this.link.enter().insert("svg:line", ".node")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
// Exit any old links.
this.link.exit().remove();
// Update the nodes
this.node = this.svg.selectAll("circle.node")
.data(nodes, function(d) { return d.name; })
.classed("collapsed", function(d) { return d._children ? 1 : 0; });
this.node.transition()
.attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; });
// Enter any new nodes
this.node.enter().append('svg:circle')
.attr("class", "node")
.classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
.attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; })
.style("fill", function color(d) {
return "hsl(" + parseInt(360 / total * d.id, 10) + ",90%,70%)";
})
.call(this.force.drag)
.on("click", this.click.bind(this))
.on("mouseover", this.mouseover.bind(this))
.on("mouseout", this.mouseout.bind(this));
// Exit any old nodes
this.node.exit().remove();
this.text = this.svg.append('svg:text')
.attr('class', 'nodetext')
.attr('dy', 0)
.attr('dx', 0)
.attr('text-anchor', 'middle');
return this;
};
CodeFlower.prototype.flatten = function(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) {
node.size = node.children.reduce(function(p, v) {
return p + recurse(v);
}, 0);
}
if (!node.id) node.id = ++i;
nodes.push(node);
return node.size;
}
root.size = recurse(root);
return nodes;
};
CodeFlower.prototype.click = function(d) {
// Toggle children on click.
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
this.update();
};
CodeFlower.prototype.mouseover = function(d) {
this.text.attr('transform', 'translate(' + d.x + ',' + (d.y - 5 - (d.children ? 3.5 : Math.sqrt(d.size) / 2)) + ')')
.text(d.name + ": " + d.size + " loc")
.style('display', null);
};
CodeFlower.prototype.mouseout = function(d) {
this.text.style('display', 'none');
};
CodeFlower.prototype.tick = function() {
var h = this.h;
var w = this.w;
this.link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
this.node.attr("transform", function(d) {
return "translate(" + Math.max(5, Math.min(w - 5, d.x)) + "," + Math.max(5, Math.min(h - 5, d.y)) + ")";
});
};
CodeFlower.prototype.cleanup = function() {
this.update([]);
this.force.stop();
};

2
static/js/d3_map.js vendored
View File

@ -1,5 +1,5 @@
var width = 500,
height = 380
height = 350
var svg = d3.select(".map_area").append("svg")
.attr("width", width)

1
static/js/example.json
View File

File diff suppressed because one or more lines are too long

51
static/js/test.json
View File

@ -1,51 +0,0 @@
{
"nodes": [
{
"name": "Dadaloglu",
"group": 1,
"id":"dadaloglu"
},
{
"name": "Muharrem Ertas",
"group": 1,
"id":"muharrem"
},
{
"name": "Karacaoğlan",
"group": 2,
"id":"karacaoglan"
},
{
"name": "Ruhi Sun",
"group": 2,
"id":"ruhi"
},
{
"name": "Aşık Veysel",
"group": 2,
"id":"asik"
}
],
"links": [
{
"source": 1,
"target": 0,
"value": 1
},
{
"source": 3,
"target": 2,
"value": 1
},
{
"source": 3,
"target": 4,
"value": 1
},
{
"source": 3,
"target": 0,
"value": 1
}
]
}

115
templates/perspectiveA.html
View File

@ -1,115 +0,0 @@
<!doctype html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../static/js/draggable.js"></script>
<head>
<link rel="stylesheet" href="../static/css/style.css?q=1280549780">
<title>Gas</title>
</head>
<body id="background_a">
<div>
<div id="audio1">
<audio controls src="../static/audio/turkish_march.ogg" type="audio/ogg"></audio>
</div>
<div class="draggable">
<iframe id="video1" width="120" height="120" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="draggable">
<iframe id="video2" width="120" height="120" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- youtube pop up -->
<div id="show1" class="draggable scaleable-wrapper">
<span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>
<iframe id="video1" width="120" height="120" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="draggable" style="font-weight: bold; top: 55%; left:40%; width: 500px !important">
<div id="popup">
<a href="#" >Ruhi Su</a>
</div>
</div>
<script>
// draggable video pop up
$("#popup").click(function(){
$("#show1").fadeIn()
console.log("around")
});
</script>
<!-- audio and image pop up -->
<div class="draggable" style="top: 260%; left:0.2%">
<button id="but"><h3>listen</h3></button>
<audio ontimeupdate="playTranscript()" id="a1" controls src="../static/audio/Clip26" class="audio-tag"></audio><a href="" target="_blank">
<div id="transcriptWrapper" class='sub'>
<div id="transcript">
<div><a data-start="0.4" href="#">00:00:00,400</a><img src="../static/images/TheStreamRunsBlurry_scan.png" width='500px' alt="test"></div>
<div><a data-start="8.18" href="#">00:00:08,180</a><img src="../static/images/NilgünMarmara_scan.png" width='500px' alt="test"></div>
</div>
</div>
</body>
<script>
var a1 = document.getElementById("a1"),
but = document.getElementById("but");
but.addEventListener("click", function () {
if (a1.paused) {
a1.play();
} else {
a1.pause();
}
})
a1.addEventListener("play", function(){
but.innerHTML="pause"
})
a1.addEventListener("pause", function(){
but.innerHTML="listen"
})
var links=document.querySelectorAll("div.sub a")
for (var i=0, l=links.length; i<l; i++) {
var a = links[i];
a.addEventListener("click", function(e) {
console.log("CLICK", this);
var t=parseFloat(this.getAttribute("data-start"))
a1.currentTime=t
e.preventDefault()
a1.play();
})
}
</script>
<script>
var dialogueTimings = [0,8],
dialogues = document.querySelectorAll('#transcript>div'),
transcriptWrapper = document.querySelector('#transcriptWrapper'),
audio = document.querySelector('#a1'),
previousDialogueTime = -1;
function playTranscript() {
var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));
if(previousDialogueTime !== currentDialogueTime) {
previousDialogueTime = currentDialogueTime;
var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];
transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50;
var previousDialogue = document.getElementsByClassName('speaking')[0];
if(previousDialogue !== undefined)
previousDialogue.className = previousDialogue.className.replace('speaking','');
currentDialogue.className +=' speaking';
}
}
</script>
</html>

93
templates/perspectiveB.html
View File

@ -1,93 +0,0 @@
<!doctype html>
<html>
<style>
.draggable {
position: absolute;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../static/js/draggable.js"></script>
<script>
// function playAudio(url) {
// new Audio(url).play();
// }
var currentPlayer;
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
if(currentPlayer && currentPlayer != thissound) {
currentPlayer.pause();
}
if (thissound.paused)
thissound.play();
else
thissound.pause();
thissound.currentTime = 0;
currentPlayer = thissound;
}
</script>
<link href="../static/css/style.css" rel="stylesheet" type="text/css">
<head>
<title>Liquid</title>
</head>
<body>
<div class="draggable" id="scan1">
<img src="../static/images/TheStreamRunsBlurry_scan.png" width='40%' onClick="EvalSound('song1'); return true;" alt="test">
<audio id="song1" style="display: none; width: 0px; height: 0px;"
src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" controls preload="auto" autobuffer>
</div>
<div class="draggable" style="top:130px;left:250px">
<img src="../static/images/ShallPass_scan.png" width='40%' onClick="EvalSound('song2'); return true;" alt="test">
<audio id="song2" style="display: none; width: 0px; height: 0px;"
src="../static/audio/HNI_Soundinstall_3tracks_together2.mp3" controls preload="auto" autobuffer>
</div>
<div class="draggable" style="top:140px;left:260px">
<img src="../static/images/NilgünMarmara_scan.png" width='40%' onClick="EvalSound('song3'); return true;" alt="test">
<audio id="song3" style="display: none; width: 0px; height: 0px;"
src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" controls preload="auto" autobuffer>
</div>
<div class="draggable" style="top:150px;left:270px">
<img src="../static/images/fist_Scan.png" width='40%' onClick="EvalSound('song1'); return true;" alt="test">
<audio id="song1" style="display: none; width: 0px; height: 0px;"
src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" controls preload="auto" autobuffer>
</div>
<div class="draggable" style="top:160px;left:280px">
<img src="../static/images/Coveredfigure_scan.png" width='40%' onClick="EvalSound('song2'); return true;" alt="test">
<audio id="song2" style="display: none; width: 0px; height: 0px;"
src="../static/audio/HNI_Soundinstall_3tracks_together2.mp3" controls preload="auto" autobuffer>
</div>
<div class="draggable" style="top:170px;left:290px">
<img src="../static/images/AşıkVeysel_Scan.png" width='40%' onClick="EvalSound('song3'); return true;" alt="test">
<audio id="song3" style="display: none; width: 0px; height: 0px;"
src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" controls preload="auto" autobuffer>
</div>
<!-- <div class="draggable">
<img src="../static/images/test1.jpeg" width='40%' alt="test" onclick="playAudio('../static/audio/FreshMythsDifferentTimes_performance_podcast.mp3')">
</div>
<div class="draggable">
<img src="../static/images/test2.jpeg" width='40%' alt="test" onclick="playAudio('../static/audio/feldenkrais_mai')">
</div>
<div class="draggable">
<img src="../static/images/test3.jpeg" width='40%' alt="test" onclick="playAudio('../static/audio/Clip26')">
</div> -->
</body>
</html>

30
templates/perspectiveC.html
View File

@ -1,30 +0,0 @@
<!doctype html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../static/js/draggable.js"></script>
<style>@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');</style>
<head>
<link rel="stylesheet" href="../static/css/style.css?q=1280549780">
<title>Solid</title>
</head>
<body id="background_c">
<div class="draggable">
<img id="poem1" src="../static/images/AşıkVeysel_Scan.png" alt="poem">
</div>
<div class="draggable">
<img id="poem2" src="../static/images/ShallPass_scan.png" alt="poem">
</div>
<div>Play</div>
<div class="nicelist">
<ul>
<li>Strophe 1</li>
<li>Strophe 2</li>
<li>Strophe 3</li>
<li>Strophe 4</li>
</ul>
</div>
</body>
</html>

414
wells/index.html Normal file
View File

@ -0,0 +1,414 @@
<html>
<head>
<title>VVVW</title>
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="../static/js/p5/p5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="../static/js/jquery-1.12.4.js"></script>
<script src="../static/js/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="bg">
<div class="row">
<div class="col-md-7">
<div class="map_area">
<script src="../static/js/d3_map.js"></script>
</div>
<div class="row">
<div class="col-md-12">
<p id="legend_title">Map legend</p>
<div class="map_legend">
<div class="box1"></div> <p>Folklore literature</p>
<div class="box2"></div> <p>Islamic Mysticism</p>
<div class="box3"></div> <p>Contemporary poets</p>
<div class="box4"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="scrollable">
<div class="row">
<div class="col-md-12">
<div class="thesis">
<h1>Wells of Knowledge: <p>Streams of poetry, music and resistance in Turkey</h1>
<h2>Merve Kılıçer</h2>
<p><i>“If history writing does not emancipate, it must be serving tyranny.”
Cemal Kafadar, ‘Kendine ait bir Roma’, pg.1</i><br></p>
<p>
In 2012, rumors started about a shopping mall to be built in the place of Gezi Park 1 near Taksim
Square in İstanbul. This park had not necessarily been in good shape for a while, but it offered a
shaded passage way for passersby, benches for the homeless, a playground for children and most
importantly, it was the last bit of green space in the concrete face of our cosmopolitan home. The
whole project was called ‘Taksim Yayalaştırma Projesi' (Project for The Pedestrianization of Tak-
sim) and the ruling government of AKP was insistent on realizing it despite the oppositions from
TMMOB (the chamber of architects) and solidarity organizations against gentrification like İstanb-
ul Kent Savunması (Istanbul City Defence) and Taksim Dayanışması (Taksim Solidarity). In fact,
many people had already been protesting and showing resistance against such projects that demol-
ished historic buildings of the area in the name of ‘urban transformation’. At first, protests evolving
around such projects were small scale and the police were aggressive enough to diffuse the crowd.
Things started to intensify when Emek Cinema, a historic cinema theatre, was demolished to be-
come a shopping mall in the spring of 2013. Following this event, more people started joining envi-
ronmentalist groups camping and organizing small concerts at Gezi park to raise awareness. On
29th of May, many people including myself were notified through friends and social media that the
trees of the park were being uprooted by the construction company and that police forces attacked
people who tried to resist them. When the police blocked all entrances to the Taksim Square and
the park, it marked the beginning of the biggest protest in the history of the Republic of Turkey.
Demonstrations started in Istanbul, around Taksim and spread across the country with the slogan
‘Her yer Taksim Her yer Direniş’, translating ‘Everywhere is Taksim, Resistance Everywhere’.
I was also with the protestors as I had spent most of my youth in Taksim and the Beyoğlu neigh-
borhood and I wasn't going to sit behind while they destroyed my home town. After two days of
protests and battle with the police, security forces finally stepped out of the square, hence starting
the 2 week long-occupation of Taksim Square. In the days of occupation, the park and square be-came fully pedestrianized because all the roads were blocked with barricades, and money exchange
was not necessary due to the donations the movement had received with emerging solidarity prac-
tices.
The occupation was a historic event for all of the country. It was like falling in love. It was terrify-
ing. It was traumatizing. It took lives. And it brought lives together. It was hopeful. And fearful. It
was a reverberation of the un/under/misrepresented multitude of Turkey. And we were clueless
about where to go from there. I remember an international journalist had asked me if it was a polit-
ical protest. I said, ‘No, there are no political parties behind this movement’ as my understanding
of what politics could be was limited. We were just an ‘apolitical generation’ who rebelled out of
nowhere, surprising the entire country.
After 7 years, I’m still trying to figure out how and why we managed to come together. Surely pro-
tecting a green area that belonged to our home, protecting friends and the increasing level of op-
pression were the instinctive push points but my real question is: how did the spirit of Gezi Park
come to life?
</p>
<p>
The park brought together people from different economic backgrounds, ethnicities and beliefs,
manifesting the idea that when we stand together we are heard. And our voice carried all the tunes,
rhythms and stories of Turkey. To analyze this historic moment, I’ve been listening closely to the
echoes of this voice through researching cultural and folkloric production in the history of this
land. I asked myself: Could the accumulation of these voices and words be the forming substances
of Gezi Spirit? What kind of knowledge do we inherit from the land we feel rooted in? Which are
the stories we were raised with and how did they shape our perception of the world and ‘other’
people we share it with?
</p>
<p>
Learning and unlearning the tenets of our upbringing is a process of growth. At the park, we wit-
nessed the clash of all the false and accurate knowledge we were introduced to throughout our
lives. This clash brought us a little closer to the understanding of what is political and how we can
have a voice in it while building an idea of a different future. Starting this research was not easybecause history is always somehow mystified and obscured. It feels like looking down into a well
with twinkling eyes and trying to see the bottom. Looking at myself on the fluctuating deep dark
surface, I started to ask simple questions about my own history. I looked at memories and mo-
ments of growth that could shed light on what direction I should take after the protests. I started
listening back to the songs of my childhood which I had memorized without questioning their
meaning or understanding when I heard people chanting them. I realized that most of them were
originally poems and that by following such cultural productions I had accessed an abundance of
alternative streams of knowledge that were previously hidden to me.
Poetry and music start their journey together and develop in parallel with each other, rooting into
the culture. The first Turkish poets were shamans, of the nomad Turkish communities, whom were
called Kam, Baksı, Ozan alongside many other names. These shamanic figures were often wander-
ers or minstrels who traveled with their instruments from land to land, chanting their own poems
and those of their predecessor. They were storytellers who narrated with poetry, music, dance and
plays. Such practices are common in many cultures around the world and although the societies
and beliefs went through significant changes over time, this method of carrying knowledge re-
mained part of everyday life.</p><p></p>
<p id="textdadaloglu">
Kalktı Göç Eyledi Avşar Elleri,<br>
Ağır Ağır Giden Eller Bizimdir.<br>
Arap Atlar Yakın Eder ırağı,<br>
Yüce Dağdan Aşan Yollar Bizimdir.<br>
/<br>
Rised and migrated the Avşar tribes,<br>
The folk slowly moving is ours.<br>
Arabic horses render the distances close,<br>
The paths overrunning the mighty mountains are ours.<br>
<i>Dadaloğlu’s (18th cc) epical folk poem was chanted by Ruhi Su in 1960’s</i></p>
<p>Islam started spreading through similar traditions of folkloric chanting and poetry migrating from
regions today known as Iran (Horasan) and Afghanistan. In time, many nomadic tribes of Central
Asia started abandoning their polytheistic beliefs, like the shamanic belief Tengrism 2 , and started
joining Islam. In this process Islam became greatly influenced by previous belief systems and
merged in their ritualistic way of relating with nature and the world beyond. The teachings of the
Sufi leaders, were being carried through dervish followers and minstrels called Ashik who usedsimilar instruments and poetic forms as old shamans. Through these figures who improvised and
chanted stories of the past and present, Islamic myths and epic stories started spreading in Anato-
lia. When Ottoman rule first started spreading through the region (13 th century), they joined forces
with other Turkic dominions and gradually became a powerful empire. The newly-built Sufi
schools and trained minstrels had a key role in educating people and spreading the school's specific
rhetoric. Some of the guiding figures and masters of this process were famous Islamic thinkers and
folk poets such as Yunus Emre, Mevlana Celaleddin Rumi and Hacı Bektaş-i Veli.
A similar version of this musical chanting practice along with poetry made its way into the Ot-
toman Palace and helped create the Ottoman classical music with the initiative of Sultans from dif-
ferent eras. In the palace, men were taught at the Enderun (Palace) School and women received
musical training at the Harem of Topkapı Palace. These two paths of music and literature, in folk-
lore production and in palace music, led my curiosity and this research through different parts of
history. While researching about the history of palace music, I learned about the involvement of
female musicians, poets and their increased presence in the public sphere with the arrival of mod-
ernism. For this essay, I follow the path of folkloric production which relates to the current political
issues and represents different ethnic communities of Anatolia. My family does not belong to a mi-
nority group of Turkey but growing up in a diverse and historic city like Istanbul, one becomes
aware of the misinformation we are taught within the education system. This type of history telling,
which glorifies nationalistic qualities, is common all around the world and eliminates stories of mi-
norities and critical thinking methods. To emancipate myself and my practice, it is meaningful to
investigate the past through folkloric production that has reached our present day. Following Ashik
traditions 3 and practices has been helping me to travel in time and listen to the stories of people
from different centuries. This tradition which has been taught and transferred through mentoring,
allows this volatile knowledge 4 to flow and continue reaching different audiences.</p>
Bize de Banaz'da Pir Sultan derler
Bizi de kem kişi bellemesinler
Paşa hademine tembih eylesin
Kolum çekip elim bağlamasınlar
Hüseyin Gazi Sultan binsin atına
Dayanılmaz çarh-ı felek zatına
Bizden selâm söylen ev külfetineÇıkıp ele karşı ağlamasınlar
/
They call me Pir Sultan in Banaz
Do not suppose I’m the sinister one
Pasha should advice his servants
Not to pull my arm and tie my hands
May Hüseyin Gazi Sultan* ride his horse
Irresistible to his çarh-ı felek** self
Send our salutes to the burdened household
They should not shed tears in presence of strangers
*An important Islamic war hero celebrated by the Bektaş-i Alevi community)
**The navy rifle that turns and sparks when lit
-Pir Sultan Abdal’s poem was chanted by Ashik Veysel in 1961
</p>
<p>
In Anatolian lands, when the majority of people converted to Islam, it influenced the language and
the way people related to their entourage. Gradually, the Islamic lodges became institutional enti-
ties with political power within the Ottoman Empire. Specially the lodge of Hacı Bektaş-ı Veli had
central importance for the Alevi 5 communities with the Ashik tradition playing a key role in com-
municating their beliefs and world views. For instance, Pir Sultan Abdal, a dervish and poet, fol-
lower of Hacı Bektaş-ı Veli, became a political figure and defended social equality with a critical
approach towards the Ottoman Empire. In fact, in Turkey, Alevi culture is often associated with
socialist ideologies due to the similarities in their approach to commonality and has been systemat-
ically silenced for expressing critical views or starting riots against authority. The oppressive atti-
tude of the ruling authorities towards Alevi communities has continued long since the collapse of
the Empire.
After this fall of the Ottoman Empire following the 1st World War, folk of Anatolia, with different
ethnicities and cultures, came together in order to save the land from western colonizers and fight
the War of Independence with the leadership of Atatürk, the founder of the Republic of Turkey.
The republic settled after negotiations with the invaders and reforms were made terminating reli-
gious tariqas 6 in order to start a new secular state. The intention of unifying people, led the new
state to evolve around nationalistic ideologies which gradually eliminated the diverse fabric of the
land. This orientation reflected on the themes of anthems and torch songs that narrated epics
about the independence war and glorified the ‘Turkic’ nation. These ideologies were propagated
faster around the country with the arrival of new sound recording technologies (gramophones,phonographs) and communication lines (telegraph, radio). However, despite the first radio broad-
casting starting in 1927, it was only after the 1950’s that radio and the nationalistic propaganda it
brought along was able to reach all regions of central Anatolia. The westernization in music had
already started in the last decades of Ottoman Empire with European notation techniques being
introduced to archive songs composed in the palace. During the first years of the new republic, ra-
dio broadcasts had an important role in spreading the reforms of westernization and educating the
rural (folk) population. Even though Turkey was a free republic, the geopolitical position of the
country alongside its urgent need to catch up with new technologies and the remaining debts of the
Ottoman rendered it vulnerable towards cultural colonization. With the aim of defining the identity
of ‘national music’, from 1926 till the end of the 1940’s trips were organized to archive (notate,
record on vinyl) the folkloric production in Anatolia. The archived content was used to teach west-
ern educated musicians to perform folkloric tunes on a few of the radio programs that transmitted
folk music. At times, these programs invited Ashik figures to play live. Ashik Veysel, one of the
most famous Ashik of the late Ottoman and early Republic times, was the only Ashik with Alevi
roots to be played on the radio. Even though in the 1930’s he was titled as the national poet of the
state, his Alevi roots, were still not recognized. In the 1940’s he was teaching to play cura at several
Village Institutes 7 (1942-1947) where he encountered Ruhi Su and many other musicians and intel-
lectuals from Istanbul.</p>
<p id="textmuharrem">
The cultural production of those years can serve as a recording of the political climate around the
country. Starting from the 1950’s the western educated musicians, like Ruhi Su, Tülay German,
Sümeyra Çakır or Fikret Kızılok, in order to stay connected to their roots, started combining folk-
loric tunes and themes with popular western instruments and methods. While Tülay German
adopted folklore songs into jazz tunes and collaborated with Ashiks that migrated to the city, Fikret
Kızılok went to study with Ashik Veysel in Anatolia and made records with the songs of his mentor.</p>
<p>
This new approach was the result of the emigration of Anatolian folk (especially the minorities) to-
wards big cities to work in factories or study at the universities and technical schools. The universi-
ties became the meeting point for western educated city youth and the Anatolian youth who were
brought up with local traditions. This possibility of exchange created a synthesis of ideas, traditions
and culture which shaped the political solidarity groups. Influenced by neighboring Soviet Union,leftist movements sided with the Kurdish and Alevi people who already had a history of disobedi-
ence and used their traditional cultural production to propagate ideas of equality. These groups
were showing resistance to the economic sanctions of the U.S. who had been providing financial
support to Turkey and to do so, they were using the folkloric language which created a bridge be-
tween intellectuals, factory workers (in Turkey and in Europe) and farmers of the rural areas.
</p>
<p>
Şenlik dağıldı bir acı yel kaldı bahçede yalnız
O mahur beste çalar Müjgan’la ben ağlaşırız
Gitti dostlar şölen bitti ne eski heyecan ne hız
Yalnız kederli yalnızlığımızda sıralı sırasız
O mahur beste çalar Müjgan’la ben ağlaşırız
Bir yangın ormanından püskürmüş genç fidanlardı
Güneşten ışık yontarlardı sert adamlardı
Hoyrattı gülüşleri aydınlığı çalkalardı
Gittiler akşam olmadan ortalık karardı
Bitmez sazların özlemi daha sonra daha sonra
Sonranın bilinmezliği bir boyut katar ki onlara
Simsiyah bir teselli olur belki kalanlara
Geceler uzar hazırlık sonbahara
/
The carnival has dispersed only a bitter breeze remained in the garden
That Mahur tune plays Müjgan and I keep weeping
Friends are gone the feast has ended old thrills are no more nor is the haste
Solely mournful in our loneliness timely untimely
That Mahur tune plays Müjgan and I keep weeping
Young saplings they were erupted from a forest of fire
They would sculpt the light from the sun they were tough men
Their laughters were wild shaking the brightness of the day
As they left it all went dark before the evening came
The longing of the curas will not end then and then
The obscurity of the afterwards adds a dimension to them
And perhaps they become a pitch black solace for the ones left behind
Nights are getting longer preparation is for the fall
Atilla İlhan’s poem, Mahur 8 (1972) was composed by Ahmet Kaya in 1993</p>
<p>
The resistance included many intellectuals and cultural workers who persistently retold the politi-
cal history of their land through poetry. Musicians who had adopted the folkloric traditions, used
the same method to pass on this knowledge and started to compose contemporary poetry into
songs. Poems of leftist intellectuals like Nazım Hikmet, Ahmed Arif, Atilla İlhan and many more
continued to be composed for decades by famous musicians in response to the local and global pol-itics. Still today young musicians, jazz soloists, rappers and pop singers voice the songs of famous
Ashik figures or folkloric ballads in various styles and spread the voice of the ‘other’ around the
world. These songs carry not only the tunes and world view of important intellectuals but also their
struggle and pain caused by political exiles, imprisonments, tortures and executions in different
stages in history. The poems telling folkloric stories continue living in songs, and reaching new
generations of youth that continue chanting them for future generations. I would like to think of it
as a cycle of growth that happens in our collective consciousness, that suddenly surfaces in mo-
ments like the Gezi Park Occupation. To contribute to this growth I share my research and through
my practice I bring forward poems, poets and composers that continue to teach me about this col-
lective past. </p>
Gezi Park 1 : In 1806, where Gezi Park is located now, Ottoman Military Barracks were built. In 1939, after a process of
abandonment of the structure, it was demolished along with the Armenian grave yard that dated back to 1560. The aim of
this change was to plan a modern, ’healthy’ city with green areas, near the residential districts to be built.
Tengrism 2 : is a shamanistic religion practiced in Central Asia. It is characterized by shamanism, totemism, and ani-
mism. It is both monotheistic and polytheistic. Ancestor worship is also a big part of Tengriism. - https://www.discover-mongolia.mn/blogs/the-ancient-religion-of-tengriism -
Ashik tradition 3 : Ashik are traveling bards with a string instrument. Their knowledge is passed on through mentoring.
Volatile Knowledge 4 : For further expansion on this term in relation to my practice see Kılıçer, M (2019) ‘Volitional
Volutions of the Volatile Waters’ on www.mervekilicer.com
Alevi 5: Alevism is a branch of Shi’a Islam that is practiced in Turkey and the Balkans among ethnic Turks and Kurds.
Alevis make up 20% of Turkish Muslims and comprise Turkey’s largest religious minority community. - https://rlp.hd-
s.harvard.edu/faq/alevism
Village Institute 6 a set of schools in the rural areas of Anatolia, gathered children from near by villages to teach both
western and eastern/local knowledge. They aimed to develop a basic level of education and raise teachers for the society
of the newly established republic. These institutes were terminated with the demand of U.S. because of their socialist
structures.
Tariqa(t) 7: T he Sufi doctrine or path of spiritual learning.
Mahur 8 One of the systems of melody types used in Arabic, Persian and Turkish classical music. - Wikipedia -Bibliography
Books
Kafadar, C., 2017, Kendine Ait Bir Roma - Diyar-ı Rum’da Kültürel Coğrafya ve Kimlik Üzerine. Istanbul: Metis Publish-
ing
Ortaylı, İ., 2008, Tarihimiz ve Biz, 15nd ed., 2018, Istanbul: Timaş Publishing
Sayın, Z., 2016, Kötülük Cemaatleri. Istanbul: Tekhne Publishing
Articles, catalogues and compilations
-Alpyıldız, E., 2012, Yerelden ulusala taşınan müzik belleği ve yurttan sesler. Milli Folklor, year 24, issue 96
-Ayas, O. G., 2014, Kemalist Oryantalizm ve Osmanlı-Türk Müziği. Muhafazakar Düşünce, pg. 189-212
-Azar,B., 2007, Sözlü kültür geleceği açışından türk saz şiiri. Fırat University Journal of Social Science, Volume: 17, Nr: 2,
pg: 119-133. Elazığ
-Bars, Mehmet Emin, 2018, Şamanizmden Tasavvufa. Türkbilig, Nr. 36, pg: 167-186.
-Başer, F.A., 2006, Türk halk ve klasik müziklerinin oluşum ve ilişkilerine tarihten bakmak-1. Uluslararası insan bilimleri
dergisi, ISSN: 1303-5134
-Erensü, S. and Karaman, O. (2017). The Work of a Few Trees: Gezi, Politics and Space. International Journal of Urban
and Regional Research, 41(1), pp.19-36.
-DEPO (Catalogue of exhibition and lecture series), 2012, Kind of Electricity Appeared in Outer Space: Musical Turkey in
the 1960’s. Istanbul: Anadolu Kültür/Depo
N., 2016,Pir Sultan Abdal’ın bir mecmuada yer alan şiirleri I, (Pir Sultan Abdal’s poem in a journal I).
-Kaya, H , Çeti n,
HUMANITAS - Uluslararası Sosyal Bilimler Dergisi , 4 (8) , 131-156 . DOI: 10.20304/humanitas.277542
-Koç, N., 2012, Cumhuriyet’in ilk yıllarında radyo. Cumhuriyet Tarihi Araştırmaları Dergisi, Year:8, Issue: 15.
ISSN: 1305-1458 E-ISSN: 2147-1592
-Kuloğlu, Ü., 2009, Müzik: Türklerin anadolu öncesi müzik gelenekleri ve islamiyet etkisi. T.C. Kültür ve Turizm Bakan-
lığı Türkiye Kültür Portalı Projesi, Ankara
-Özdamar, F., 2014, Dede Korkut Kitabı’nın çağdaş müzik sanatçıları üzerindeki tesiri. Mili Folklor, Year 26, Nr: 101.
ISSN 2146-8087
-Sarı, Ç.G., 2013, Osmanlı’dan Cumhuriyet’e kadın müzisyenler: Taş plak geleceğinde Lale ve Nerkis Hanımlar CD’si.
Toplumsal Cinsiyet, Nr:6
-Tarih Magazine, #1, 2014. Stüdyo Yapım-Proje - Gezi 1 year anniversary print
-Türk Folkloru Araştırmaları Yıllığı, 1975, Ankara University Publishing House, Ankara
-Uluskan, Seda Bayındır, 2010, Atatürk’ün sosyal ve kültürel politikaları. Ankara: AKDTYK Atatürk Araştırma Merkezi
Links
-https://vimeo.com/bibak
-http://www.ottomanhistorypodcast.com/
-http://gezimusic.tumblr.com/
-https://blog.iae.org.tr/sergiler/taksim-gezi-parkinin-tarihcesi-http://www.rusen.org/konargocer-turkler-kim/
-https://www.alevibektasi.eu/
-http://www.musikidergisi.net/
-http://teis.yesevi.edu.tr/madde-detay/asik-veysel-satiroglu
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="media_area">
<!-- <p>Related media</p> -->
<div id="showdadaloglu"><div class='text_audio'>Bio</div>
<!-- <audio id="audiodadaloglu" controls>
<source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio> -->
<img src="../static/images/poem.png">
</div>
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- <img src="../static/images/test_small.jpeg" alt="poem"> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a>
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
</div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
</div>
<script>
var audio = document.getElementById("audioBG");
var btn = document.getElementById("mBtn");
function PSFunction() {
if (audio.paused) {
audio.play();
btn.innerHTML = "(Pause)";
} else {
audio.pause();
btn.innerHTML = "(Play)";
}
}
</script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</body>
</html>