Commit 98c73bb9 authored by Gelgon's avatar Gelgon

migration atelier bek -> luuse

parents
Copyright (c) 2011 - 2014, Juerg Lehni & Jonathan Puckey
http://scratchdisk.com/ & http://jonathanpuckey.com/
All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
## prot«O»folio
<h1>Pommes</h1>
<h2>2014</h2>
<p>
Une pierre donnée par un ami est une pomme.
</p>
<iframe src="https://player.vimeo.com/video/10457361"></iframe>
<iframe src="https://player.vimeo.com/video/61472329"></iframe>
<iframe src="https://player.vimeo.com/video/84664455" ></iframe>
d
\ No newline at end of file
<h1>Poivrons</h1>
<h2>2014</h2>
<p>
Le tazou? De la semoule avec des carottes, des piments, des choux, des fèves, des poivrons, des aubergines, des courgettes... - De quoi vous emporter la gueule, quoi!
</p>
<!doctype html>
<head>
<meta charset="utf-8">
<title>Atelier Bek - portfolio</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
</head>
<body>
<div id="bg" class="info">
<?php
$infos = file_get_contents('infos.txt');
echo $infos;
?>
</div>
<?php
// On met les direction de data dans l'array dirProjet
$dirProjet = array();
$MyDirectory = opendir('data') or die('Erreur');
while($Entry = readdir($MyDirectory)) {
if(is_dir($Directory.'/'.$Entry)&& $Entry != '.' && $Entry != '..') {
}
elseif ($Entry !='.' && $Entry != '..') {
array_push($dirProjet,$Entry);
}
}
closedir($MyDirectory);
sort($dirProjet);
//On compte le nombre de repertoire dans le dossier data
$count=count($dirProjet);
// boucle de tout les projets
for ($i = 0; $i < $count; $i++){
?>
<div class="projet projet<?php echo $i; ?>" >
<?php
$dir = 'data/'.$dirProjet[$i];
$load_text = $dir.'/00texte.txt';
$info_read = file_get_contents($load_text);
?>
<div class="legende">
<?php echo $info_read; ?>
<h3><?php echo $i+1; ?>/<?php echo $count;?></h3>
</div>
<div class="slider">
<?php
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
$j=0;
$images=array();
while (($file = readdir($dh)) !== false) {
$images[]=$file;
}
sort($images);
$first = true;
foreach($images as $file){
if( $file != '.' && $file != '..' && preg_match('#\.(jpe?g|gif|png|svg)$#i', $file)) {
if($first){
?>
<img class="<?php echo $j; ?>" src="<?php echo $dir.'/'.$file; ?>" />
<?php
$first = false;
$j++;
} else {
?>
<img class="<?php echo $j; ?>" src="" data-original="<?php echo $dir.'/'.$file; ?>" />
<?php
$j++;
}
}
}
closedir($dh);
}
}
?> </div>
</div>
<?php
}
?>
<script type="text/javascript" src="js/pages.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/imagesizer.js"></script>
<script type="text/javascript" src="js/gabarit.js"></script>
<script type="text/javascript" src="js/sizefont.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
<ul>
<li>Épicerie</li>
</ul>
<h1>De la 2D à la 3D: la reconstruction multiplanaire</h1>
<h2>2015</h2>
<h3>webGL</h3>
<p>Basé sur la structure d'un projet de Nop Jiarathanakul, lui-même inspiré par le travail de VICOMtech, une entreprise spécialisée dans le développement d'outils de visualisation scientifiques, ce projet propose un environnement interactif permettant la manipulation d'objets 3D.
<br><br>
La particularité de cette interface provient de la construction du volume et de son processus. WebGL, permet ici de prototyper et de simuler, ce que pourrait être un outil de construction 3D utilisant le principe de reconstruction multiplanaire. Par exemple, pour obtenir un volume en forme de toupie, il faut préalablement réaliser une séquence d'images de cercles de tailles différentes qui, une fois superposées les une au dessus des autres, formeront le dit volume. De la même façon il est possible par une suite de rectangles qui se déplacent au fur et à mesure des images de la séquences, selon certaines coordonnées, de construire des éléments (comme ici les lettres du mot "MERCI").
<br><br>
Concevoir des formes de la sorte nécessite une certaine gymnastique intellectuelle mais la porosité entre les différentes dimensions, quelque chose que l'on ne retrouve pas dans l'état dans les logiciels de conception 3D surfaciques, me semble avoir des perspectives d'application intéressantes, notamment sur le passage du dessin à la 3D, ou encore de la vidéo au volume.</p>
<iframe src="https://player.vimeo.com/video/157567899"></iframe>
function gabarit(){
var projet = $('.projet');
var legende = projet.children('.legende');
var windowHeight = $(window).height();
var documentHeight = $(document).height();
legende.children('h1').hide();
legende.children('h2').hide();
legende.children('h3').hide();
legende.children('p').hide();
var projetsY = [];
for(var i=0; i<projet.length; i++){
projetsY.push($('.projet'+i).offset().top);
}
$(window).scroll(function(){
var scrollY = $(this).scrollTop();
for (var i=0; i<projet.length; i++){
if (projetsY[i] < scrollY+(windowHeight/2)){
$('.projet').children('.legende').children('h1').hide();
$('.projet').children('.legende').children('h2').hide();
$('.projet').children('.legende').children('h3').hide();
$('.projet').children('.legende').children('p').hide();
$('.projet'+i).children('.legende').children('h1').show();
$('.projet'+i).children('.legende').children('h2').show();
$('.projet'+i).children('.legende').children('h3').show();
$('.projet'+i).children('.legende').children('p').show();
}
}
console.log(scrollY + ' -- ' + (documentHeight-windowHeight));
if(scrollY >= (documentHeight-windowHeight*1.5)){
$('.projet').children('.legende').children('h1').hide();
$('.projet').children('.legende').children('h2').hide();
$('.projet').children('.legende').children('h3').hide();
$('.projet').children('.legende').children('p').hide();
}
})
}
function imagesizer(){
var projet = $('.projet');
var images = projet.children('.slider').children('img');
// Get window width an height
var windowWidth = $(window).width();
var windowHeight = $(window).height();
images.each(function(){
var imageWidth = $(this).width();
var imageHeight = $(this).height();
// Scale image width to window width
if (windowWidth > windowHeight){
$(this).height(windowHeight-180)
$(this).width('auto');
var imageWidth = $(this).width();
$(this).css({'margin-left': (windowWidth-imageWidth)/2})
// Scale image height to window height when window height is greater than image width
} else if (windowWidth < windowHeight){
$(this).width(windowWidth-100)
$(this).height('auto');
var imageHeight = $(this).height();
$(this).css({'margin-top': (windowHeight-imageHeight)/2});
$(this).css({'margin-bottom': (windowHeight-imageHeight)/2});
$(this).css({'margin-left': '50px'});
}
})
}
This diff is collapsed.
$(document).ready(function(){
$('.projet').hide();
//sizefont argument -> class, division, taille minimum
sizefont('pages', 80, 14);
sizefont('info', 55, 20);
var bgH = $('#bg').height();
var windowH = $(window).height();
var projets = $('.projet');
var totalProjets = projets.length;
var lastProjet = totalProjets-1;
// Texte background
$('.projet0').css({'margin-top': bgH-60}); // margin du premier projet en dessous du texte en background
$('.projet'+lastProjet).css({'margin-bottom': windowH}); // margin du dernier projet hauteur fenetre
projets.children('.slider').children('img').mouseleave(function(){
$('#bg').css({'z-index': '1000'});
projets.children('.legende').children('p').css({'z-index': '1000'});
}).mouseenter(function(){
$('#bg').css({'z-index': '-1000'});
projets.children('.legende').children('p').css({'z-index': '-1000'});
})
// Textes projets
$('br').after('<span class="indent"></span>'); // indentation des paragraphes
})
$(window).load(function(){
$('.projet').show();
slider();
//imagesizer();
gabarit();
})
$(window).resize(function(){
//imagesizer();
})
function pages(textInfo){
$('.'+textInfo).hide();
$('.'+textInfo).append('<div class="close_'+textInfo+'">X</div>');
$('#'+textInfo).click(function(){
$('.'+textInfo).toggle();
});
}
function sizefont(block, divis, minSize) {
var sizeWind = $(this).width();
var sizeFont = sizeWind / divis;
if (sizeFont < 14){
$('.'+block).css('font-size', minSize+'px');
}else{
$('.'+block).css('font-size', sizeFont+'px');
};
$(window).resize(function(){
sizeWind = $(this).width();
sizeFont = sizeWind / divis;
if (sizeFont < minSize){
$('.'+block).css('font-size', minSize+'px');
}else{
$('.'+block).css('font-size', sizeFont+'px');
};
});
}
function slider(){
var windHeight = $(window).height();
$('img').height(windHeight/1.2);
var projet = $('.projet');
projet.each(function(){
var slider = $(this).children('.slider');
var total = slider.children().length;
var nb = 0;
var bloc = $(this);
if ($(this).children(".legende").children('iframe').length > 0){
var video = $(bloc).children().children('iframe');
var nm_video = 0;
video.each(function () {
$(slider).append('<div class="video vd'+ nm_video +'"></div>');
$(slider).children('.vd'+ nm_video).prepend('<div class="btn"></div>');
$(slider).children('.vd'+ nm_video).append($(this));
$(slider).children('.vd'+ nm_video).addClass(''+total);
nm_video++;
total++;
});
};
var total2 = slider.children().length;
slider.children().hide();
slider.children('.0').show();
slider.children().click(function(){
if(nb == total2-1){
nb = 0;
} else {
nb=nb+1;
}
var src = $(this).next('img').attr('data-original');
$(this).next('img').attr('src', src);
$(this).hide();
slider.children('.'+nb).show();
//var windowWidth = $(window).width();
//var imageWidth = slider.children('.'+nb).width();
//var marginleft = (windowWidth-imageWidth)/2;
//slider.children('.'+nb).css({'margin-left': marginleft});
//slider.children('.video').css({'margin-left': 0});
})
})
}
function slider(){
var projet = $('.projet');
projet.each(function(){
if ($(this).children(".legende").children('iframe').length > 0){
var video=$(this).children().children('iframe');
$(this).children(".slider").append('<div class="video"></div>');
$(this).children(".slider").children('.video').prepend('<div class="btn"></div>');
var btn_height = $(this).children('.video').children('iframe').height();
$(this).children(".slider").children('.video').children('.btn').height('50%');
$(this).children(".slider").children('.video').append(video);
};
var slider = $(this).children('.slider');
var total = slider.children().length;
var nb = 0;
if ($(this).children(".slider").children('.video').length > 0){
$(this).children(".slider").children('.video').addClass('11');
};
slider.children().hide();
slider.children('.0').show();
slider.children().click(function(){
if(nb == total-1){
nb = 0;
}else {
nb=nb+1;
}
var imagesCount = slider.children('img').length;
for(var i=0; i < 10; i++){
var src = slider.children('.'+i).attr('data-original');
slider.children('.'+i).attr('src', src);
}
$(this).hide();
slider.children('.'+nb).show();
var windowWidth = $(window).width();
var imageWidth = slider.children('.'+nb).width();
var marginleft = (windowWidth-imageWidth)/2;
slider.children('.'+nb).css({'margin-left': marginleft});
})
})
}
@font-face {
font-family: 'hk-light';
src: url('../typo/hkgrotesk/HKGrotesk-Light-webfont.eot');
src: url('../typo/hkgrotesk/HKGrotesk-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../typo/hkgrotesk/HKGrotesk-Light-webfont.woff') format('woff'),
url('../typo/hkgrotesk/HKGrotesk-Light-webfont.ttf') format('truetype'),
url('../typo/hkgrotesk/HKGrotesk-Light-webfont.svg#../typo/hkgrotesk/HKGrotesk-Light-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'hk-regular';
src: url('../typo/hkgrotesk/HKGrotesk-Regular-webfont.eot');
src: url('../typo/hkgrotesk/HKGrotesk-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../typo/hkgrotesk/HKGrotesk-Regular-webfont.woff') format('woff'),
url('../typo/hkgrotesk/HKGrotesk-Regular-webfont.ttf') format('truetype'),
url('../typo/hkgrotesk/HKGrotesk-Regular-webfont.svg#../typo/hkgrotesk/HKGrotesk-Regular-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'hk-Italic';
src: url('../typo/hkgrotesk/HKGrotesk-Italic-webfont.eot');
src: url('../typo/hkgrotesk/HKGrotesk-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../typo/hkgrotesk/HKGrotesk-Italic-webfont.woff') format('woff'),
url('../typo/hkgrotesk/HKGrotesk-Italic-webfont.ttf') format('truetype'),
url('../typo/hkgrotesk/HKGrotesk-Italic-webfont.svg#../typo/hkgrotesk/HKGrotesk-Italic-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'hk-Medium';
src: url('../typo/hkgrotesk/HKGrotesk-Medium-webfont.eot');
src: url('../typo/hkgrotesk/HKGrotesk-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../typo/hkgrotesk/HKGrotesk-Medium-webfont.woff') format('woff'),
url('../typo/hkgrotesk/HKGrotesk-Medium-webfont.ttf') format('truetype'),
url('../typo/hkgrotesk/HKGrotesk-Medium-webfont.svg#../typo/hkgrotesk/HKGrotesk-Medium-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'hk-MediumItalic';
src: url('../typo/hkgrotesk/HKGrotesk-MediumItalic-webfont.eot');
src: url('../typo/hkgrotesk/HKGrotesk-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../typo/hkgrotesk/HKGrotesk-MediumItalic-webfont.woff') format('woff'),
url('../typo/hkgrotesk/HKGrotesk-MediumItalic-webfont.ttf') format('truetype'),
url('../typo/hkgrotesk/HKGrotesk-MediumItalic-webfont.svg#../typo/hkgrotesk/HKGrotesk-Medium-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'hk-bold';
src: url('../typo/hkgrotesk/HKGrotesk-Bold-webfont.eot');
src: url('../typo/hkgrotesk/HKGrotesk-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../typo/hkgrotesk/HKGrotesk-Bold-webfont.woff') format('woff'),
url('../typo/hkgrotesk/HKGrotesk-Bold-webfont.ttf') format('truetype'),
url('../typo/hkgrotesk/HKGrotesk-Bold-webfont.svg#../typo/hkgrotesk/HKGrotesk-Bold-webfont') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'hk-BoldItalic';
src: url('../typo/hkgrotesk/HKGrotesk-BoldItalic-webfont.eot');
src: url('../typo/hkgrotesk/HKGrotesk-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../typo/hkgrotesk/HKGrotesk-BoldItalic-webfont.woff') format('woff'),
url('../typo/hkgrotesk/HKGrotesk-BoldItalic-webfont.ttf') format('truetype'),
url('../typo/hkgrotesk/HKGrotesk-BoldItalic-webfont.svg#../typo/hkgrotesk/HKGrotesk-BoldItalic-webfont') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Archivo-Black';
src: url('../typo/archivo/archivoblack-regular-webfont.eot');
src: url('../typo/archivo/archivoblack-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../typo/archivo/archivoblack-regular-webfont.woff') format('woff'),
url('../typo/archivo/archivoblack-regular-webfont.ttf') format('truetype'),
url('../typo/archivo/archivoblack-regular-webfont.svg#../typo/rchivo/archivoblack-regular-webfont') format('svg');
font-weight: bold;
font-style: normal;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="8.4666662mm"
height="4.9478316mm"
viewBox="0 0 29.999998 17.531687"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
inkscape:export-filename="/var/www/html/Jim/processwire/site/templates/styles/img/droite.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
sodipodi:docname="droite.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9126577"
inkscape:cx="20.910514"
inkscape:cy="4.2776694"
inkscape:document-units="px"
inkscape:current-layer="text4136"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1056"
inkscape:window-x="0"
inkscape:window-y="553"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-251.66341,-241.66445)">
<g
transform="scale(-1,-1)"
style="font-style:normal;font-weight:normal;font-size:40.98732376px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="text4136"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<path
d="m -281.66341,-251.33089 0,1.8012 7.86525,7.86524 2.4016,-2.4016 -4.66311,-4.66311 24.39626,0 0,-3.40227 -24.39626,0 4.66311,-4.6631 -2.4016,-2.40161 -7.86525,7.86525 z"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4234"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
color: inherit;
}
.clear{
clear: both;
display: block;
}
.thinspace, .thinspaceMobile{
letter-spacing: -3px;
}
*:focus {
outline: none;
}
@import 'reset.css';
@import 'fontes.css';
body{
background:black;
font-family: "hk-regular";
color: white;
margin: 0;
padding: 0;
font-size: 20px;
text-align:center;
}