Commit fc5dd1b9 authored by Ludi Loiseau's avatar Ludi Loiseau

Merge branch 'louise-picot-quadri1' into 'master'

new/folder+pdf

See merge request !1
parents cac5c5fd 23e867d3
Pipeline #40485351 failed with stage
in 44 seconds
@font-face {
font-family: "Baskervil";
src: url("/fonts/Baskervil_-Italic.otf") format("otf");
}
canvas {
width: 593mm;
height: 1300px;
}
img {
max-width: 800px;
}
.small {
max-width: 500px;
}
.page {
/* width of the page */
width: 594mm;
/* height of the page */
height: 841mm;
/* shadow to see the page in the browser if the background is transparent*/
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
/* to position the children absolutely, we need to specify the relative position of the page */
position: relative;
overflow: hidden;
margin: 2em auto;
}
/* the @media print to specify this only affect the content when printed*/
@media print {
.page {
width: 594mm;
/* height of the page */
height: 841mm;
/* we remove margin and padding*/
margin: 0;
padding: 0;
/* we position the .page body on the top left angle of the page*/
position: absolute;
left: 0;
top: 0;
}
}
@page {
size: 534mm 791mm;
margin: 0mm;
}
.text-input {
position: absolute;
top: 0;
left: 0;
border-color: brown;
}
.paper-img {
background-image: url('../images/paper.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 800px;
height: 800px;
}
.opentype-img {
background-image: url('../images/opentype.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 1000px;
height: 1150px;
}
.html-img {
background-image: url('../images/html.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 890px;
height: 700px;
}
.css-img {
background-image: url('../images/css.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 790px;
height: 900px;
}
.title {
position: absolute;
}
.input {
font-family: Baskervil;
font-size: 25px;
width: 99.3%;
border: 1px solid gray;
}
.draggable {
position: absolute;
width: fit-content;
top: 0;
left: 0;
}
/* #svg {
display: none;
} */
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="page">
<form>
<input type="file" id="file">
</form>
<svg width="100vw" height="100vh" xmlns="http://www.w3.org/2000/svg" id="svg">
</svg>
<canvas id="myCanvas" width="1000" height="1000" resize></canvas>
<div class="draggable">
<form>
<input type="textarea" class="input">
</form>
<div class="paper-img">
</div>
</div>
<div class="draggable">
<form>
<input type="textarea" class="input">
</form>
<div class="opentype-img">
</div>
</div>
<div class="draggable">
<form>
<input type="textarea" class="input">
</form>
<div class="html-img">
</div>
</div>
<div class="draggable">
<form>
<input type="textarea" class="input">
</form>
<div class="css-img">
</div>
</div>
<img src="assets/images/sara-ahmed-texts/citation-0.png" id="img-drag-0" alt="">
<img src="assets/images/sara-ahmed-texts/citation-1.png" id="img-drag-1" class="small" alt="">
<img src="assets/images/sara-ahmed-texts/citation-2.png" id="img-drag-2" class="small" alt="">
<img src="assets/images/sara-ahmed-texts/citation-3.png" id="img-drag-3" alt="">
<img src="assets/images/sara-ahmed-texts/citation-4.png" id="img-drag-4" alt="">
<img src="assets/images/sara-ahmed-texts/citation-5.png" id="img-drag-5" alt="">
<img src="assets/images/sara-ahmed-texts/citation-6.png" id="img-drag-6" alt="">
<img src="assets/images/sara-ahmed-texts/citation-7.png" id="img-drag-7" class="small" alt="">
<img src="assets/images/sara-ahmed-texts/citation-8.png" id="img-drag-8" class="small" alt="">
<img src="assets/images/sara-ahmed-texts/citation-9.png" id="img-drag-9" class="small" alt="">
<img src="assets/images/sara-ahmed-texts/citation-10.png" id="img-drag-10" class="small" class="title" alt="">
<img src="assets/images/sara-ahmed-texts/citation-11.png" id="img-drag-11" class="small" alt="">
<img src="assets/images/sara-ahmed-texts/citation-12.png" id="img-drag-12" class="small" alt="">
<img src="assets/images/sara-ahmed-texts/citation-13.png" id="img-drag-13" class="small" alt="">
<img src="assets/images/sara-ahmed-texts/citation-14.png" id="img-drag-14" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
<script type="text/javascript" src="librairies/paper-full.js"></script>
<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 type="text/paperscript" src="js/paper-test.js" canvas="myCanvas"></script>
<script type="text/javascript" src="js/glyphs.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
\ No newline at end of file
opentype.load('fonts/Baskervil_-Italic.otf ', function (err, font) {
if (err) {
alert('Could not load font: ' + err);
} else {
//define x y coordinates to position your text in the screen
//define fontsize
let y = 250;
let x = 80;
const fontSize = 150;
//difine all the variable for the flame path
let centreX = 30;
let centreY = 30;
let rayon = 4;
let auteures = 20;
let inclinaison = 10;
let curvature = 10;
let tangente = rayon * 0.6;
// retrieve ligatures glyphs in the glyphs font arraay f
const glyphEE = font.glyphs.glyphs[504];
const glyphTES = font.glyphs.glyphs[507];
//opentype function to create Array of glyphs objects from a string
const glyphsArray = font.stringToGlyphs('Desorientation');
// LOOP over Array of glyphs
glyphsArray.forEach((glyph, index) => {
// For each glyph in the array check if it's a 'ee' ligature,
if (glyph.name === "e" && glyphsArray[index + 1].name === "e") {
//Remove the two followings "e" glyphs
glyphsArray.splice(index + 1, 1);
// Replace it(insert with index) with the ligature
glyphsArray[index] = glyphEE;
}
if (glyph.name === "t" && glyphsArray[index + 1].name === "e" && glyphsArray[index + 2].name === "s") {
glyphsArray.splice(index + 1, 1);
glyphsArray.splice(index + 2, 1);
glyphsArray[index] = glyphTES;
}
});
glyphsArray.forEach((glyph) => {
const pathGlyph = glyph.getPath(x, y, fontSize)
const pathSvg = pathGlyph.toSVG()
const svgGlyph = document.querySelector("#svg")
svgGlyph.insertAdjacentHTML("afterbegin", pathSvg)
x += 120;
})
// record everytime there's a new mouse movement and trigger the callback function with the new event object passed as parameter
// document.addEventListener("mousemove", (event) => {
// //Erase the content of html element with .glyph class /(replace it by empty string)
// document.querySelector("#svg").innerHTML = " ";
// //Reassign x coordinate for position to the initial value
// x = 10;
// //reassign (update) the value of inclinaison variable with new x coordinates of the mouse position taken from event object
// //only reassign inclinaison value every 250 milliseconds using setTimeout function
// setTimeout(function () {
// if (event.clientX < 0) {
// inclinaison = (event.clientX * 0.05)
// } else if (inclinaison >= 0) {
// inclinaison = (event.clientX * 0.05)
// }
// }, 250);
// //Loop on glyphs array and do something with each element (glyph)
// glyphsArray.forEach((glyph) => {
// //Check if the glyph element is not a 'ee' ligature using the name key value inside glyph object
// //if the glyph is not a ligature transform path of the glyph into an svg and insert it in the html element with the .glyph class
// if (glyph.name !== "e_e") {
// const pathGlyph = glyph.getPath(x, y, fontSize)
// const pathSvg = pathGlyph.toSVG()
// const svgGlyph = document.querySelector("#svg")
// svgGlyph.insertAdjacentHTML("afterbegin", pathSvg)
// } else {
// //define center of the flame proportionally to the glyph coordinates
// centreY = y - y * 0.3;
// centreX = x + x * 0.07;
// const pathGlyphFlame = glyph.getPath(x, y, fontSize);
// //Retrieve the command object into the path to add the flame drawing
// const arrayCommands = pathGlyphFlame.commands;
// // add every flame points objects into the array of commands , at the end of it, with the .push() function,
// arrayCommands.push({
// type: "M",
// x: centreX - inclinaison,
// y: centreY - auteures
// })
// arrayCommands.push({
// type: "C",
// x1: centreX - inclinaison + curvature,
// y1: centreY - auteures + curvature * 2,
// x2: centreX - rayon,
// y2: centreY - tangente,
// x: centreX - rayon,
// y: centreY
// })
// arrayCommands.push({
// type: "C",
// x1: centreX - rayon,
// y1: centreY + tangente,
// x2: centreX - tangente,
// y2: centreY + rayon,
// x: centreX,
// y: centreY + rayon
// })
// arrayCommands.push({
// type: "C",
// x1: centreX + tangente,
// y1: centreY + rayon,
// x2: centreX + rayon,
// y2: centreY + tangente,
// x: centreX + rayon,
// y: centreY
// })
// arrayCommands.push({
// type: "C",
// x1: centreX + rayon,
// y1: centreY - tangente,
// x2: centreX - inclinaison + curvature * 2,
// y2: centreY - auteures + curvature,
// x: centreX - inclinaison,
// y: centreY - auteures
// })
// arrayCommands.push({
// type: "Z"
// })
// //transform the new Commands array with the flame into svg and insert it in the html
// const pathSvgFlame = pathGlyphFlame.toSVG();
// const svgGlyphFlame = document.querySelector("#svg");
// svgGlyphFlame.insertAdjacentHTML("afterbegin", pathSvgFlame)
// };
// // Increment x variable every time a glyph is render to do the kerning
// x += 80;
// });
// //CREATE NEW FONT AND DOWNLOAD IT
// // const fontNew = new opentype.Font({
// // familyName: 'Baskervil_-Italic',
// // styleName: 'Medium',
// // unitsPerEm: 1000,
// // ascender: 800,
// // descender: -200,
// // glyphs: glyphsArray
// // });
// // fontNew.download();
// });
};
});
\ No newline at end of file
project.importSVG(document.getElementById('svg'));
document.getElementById('svg').parentNode.removeChild(document.getElementById('svg'));
console.log(project.activeLayer.children.svg.children);
;
var dPath = project.activeLayer.children.svg.children[13].children[1]
var dPath2 = project.activeLayer.children.svg.children[13].children[0]
var rPath = project.activeLayer.children.svg.children[9]
var sPath = project.activeLayer.children.svg.children[11]
// sPath.fillColor = "blue"
sPath.insert(3, new Point(540, 790));
var destination = Point.random() * view.size;
var n = 1;
var x = 1;
var y = 1;
function onFrame(event) {
var vector = destination - dPath.position;
dPath.position += vector / 30;
dPath2.position += vector / 30;
dPath.rotate(1);
rPath.rotate(1);
// lPath.fillColor.hue += 1
if (vector.length < 5) {
destination = Point.random() * view.size;
}
if (x <= 100 && x >= 0) {
x += 1
} else if (x >= 100) {
x -= 1
} else if (x<= 0) {
x += 1
}
if (y <= 100 && y >= 0) {
y += 1
} else if (y >= 100) {
y -= 1
} else if (y <= 0) {
y += 1
}
sPath.insert(n = 190, new Point(x, y));
// n += 1
// y += 10
// x += 10
}
var file = document.getElementById('file');
file.addEventListener('change', function (event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.match('svg')) {
// project.clear();
project.importSVG(file, function (item) {
console.log(item);
});
}
}
});
// console.log(project.activeLayer.children.svg.children[1].children[0])
// var hPath = project.activeLayer.children.svg.children[1].children[0]
// var ePath1 = project.activeLayer.children.svg.children[1].children[1]
// // var ePath2 = project.activeLayer.children.svg.children[9].children[1]
// // var lPath = project.activeLayer.children.svg.children[11]
// ePath1.fillColor = "blue"
// hPath.insert(7, new Point(150, 150));
// var destination = Point.random() * view.size;
// function onFrame(event) {
// var vector = destination - hPath.position;
// hPath.position += vector / 30;
// // Each frame, rotate the path by 3 degrees:
// hPath.rotate(3);
// ePath1.rotate(1);
// ePath1.fillColor.hue += 1
// if (vector.length < 5) {
// destination = Point.random() * view.size;
// }
// }
\ No newline at end of file
$(function () {
$(".draggable").draggable();
// $(".opentype-img").draggable();
// $(".paper-img").draggable();
// $(".html-img").draggable();
// $(".css-img").draggable();
$("#img-drag-0").draggable();
$("#img-drag-1").draggable();
$("#img-drag-2").draggable();
$("#img-drag-3").draggable();
$("#img-drag-4").draggable();
$("#img-drag-5").draggable();
$("#img-drag-6").draggable();
$("#img-drag-7").draggable();
$("#img-drag-8").draggable();
$("#img-drag-9").draggable();
$("#img-drag-10").draggable();
$("#img-drag-11").draggable();
$("#img-drag-12").draggable();
$("#img-drag-13").draggable();
$("#img-drag-14").draggable();
});
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment