This commit is contained in:
2018-09-22 14:01:47 +02:00
parent 20f5066c8d
commit 542996f0bb
10 changed files with 46 additions and 40 deletions
@@ -1,4 +1,5 @@
---
title:
image_align: left
id: ''
---
@@ -0,0 +1,5 @@
---
image_align: left
id: ''
---
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -5,7 +5,7 @@
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().distance(200).id(function(d) { return d.id; }))
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
@@ -54,7 +54,7 @@
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.1).restart();
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
+25 -31
View File
@@ -1,58 +1,52 @@
// The amount of segment points we want to create:
var amount = 3;
var amount = [1, 2, 3, 4, 5];
// The maximum height of the wave:
var height = 300;
var height = 200;
var width = 100;
// Create a new path and style it:
var path = new Path({
// 80% black:
strokeColor: [0.8],
strokeWidth: 30,
strokeCap: 'square'
// strokeColor: 'black',
// strokeWidth: 0,
// strokeCap: 'square'
});
var raster = new Raster({
source: 'user/themes/r2c/images/trame.svg',
// source: 'user/themes/r2c/images/trame.svg',
position: view.center
});
path.clipMask = true;
// path.clipMask = true;
// path.selected = true;
path.closed = true;
// path.fullySelected = true;
path.fullySelected = false;
path.fillColor = 'grey';
// Add 5 segment points to the path spread out
// over the width of the view:
for (var i = 0; i <= amount; i++) {
var maxPoint = new Point(300, 300);
var point = maxPoint * Point.random(view.size) + 70;
path.add(point);
// path.add(new Point(500 / 700) * view.size);
for (var i = 0; i <= amount.length; i++) {
var maxPoint = new Point(300, 100);
var point = maxPoint * Point.random(view.size);
path.add(point);
}
// Select the path, so we can see how it is constructed:
function onFrame(event) {
// Loop through the segments of the path:
for (var i = 0; i <= amount; i++) {
for (var i = 0; i <= amount.length; i++) {
var segment = path.segments[i];
// A cylic value between -1 and 1
var sinus = Math.sin(event.time * 0.05+ i);
// Change the y position of the segment point:
segment.point.y = sinus * height + 100;
var pulse = 0.7;
var sinus = Math.sin(event.time * pulse + i);
var cos = Math.cos(event.time * pulse + i);
segment.point.y = sinus * height + 300;
segment.point.x = cos * width + 300;
}
// Uncomment the following line and run the script again
// to smooth the path:
path.rotate(30);
path.smooth();
}
// var copy = path.clone();
// copy.fullySelected = true;
// copy.position.x += 500;
// copy.smooth();
function onMouseDown(event) {
path.fillColor = 'blue';
}
+3 -2
View File
@@ -10,7 +10,6 @@ body{
height: 50px;
}
#start{
width: 100%;
height: calc(100% - 50px);
@@ -113,7 +112,9 @@ body{
width: 100vw;
height: 100vh;
.leaflet-marker-pane{
transform: translate(-25px, -25px);
img{
transform: translate(-25px, -25px);
}
}
}
}
@@ -0,0 +1,5 @@
{% set grid_size = theme_var('grid-size') %}
{% set image = page.media.images|first %}
<h2>{{ header.title }}</h2>
{{ content }}
@@ -3,8 +3,8 @@
{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
{% block body %}
<canvas id="canvas" resize hidpi="on" style="background:white"></canvas>
{% for module in page.collection %}
{{ module.content }}
<canvas id="canvas" resize hidpi="on" style="background:white"></canvas>
{% endfor %}
{% endblock %}