blob
This commit is contained in:
+2
-1
@@ -1,4 +1,5 @@
|
|||||||
---
|
---
|
||||||
title:
|
|
||||||
image_align: left
|
image_align: left
|
||||||
|
id: ''
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
image_align: left
|
||||||
|
id: ''
|
||||||
|
---
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -5,7 +5,7 @@
|
|||||||
var color = d3.scaleOrdinal(d3.schemeCategory20);
|
var color = d3.scaleOrdinal(d3.schemeCategory20);
|
||||||
|
|
||||||
var simulation = d3.forceSimulation()
|
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("charge", d3.forceManyBody())
|
||||||
.force("center", d3.forceCenter(width / 2, height / 2));
|
.force("center", d3.forceCenter(width / 2, height / 2));
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
function dragstarted(d) {
|
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.fx = d.x;
|
||||||
d.fy = d.y;
|
d.fy = d.y;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,58 +1,52 @@
|
|||||||
|
|
||||||
// The amount of segment points we want to create:
|
// 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 = 200;
|
||||||
var height = 300;
|
var width = 100;
|
||||||
|
|
||||||
// Create a new path and style it:
|
// Create a new path and style it:
|
||||||
var path = new Path({
|
var path = new Path({
|
||||||
// 80% black:
|
// 80% black:
|
||||||
strokeColor: [0.8],
|
// strokeColor: 'black',
|
||||||
strokeWidth: 30,
|
// strokeWidth: 0,
|
||||||
strokeCap: 'square'
|
// strokeCap: 'square'
|
||||||
});
|
});
|
||||||
|
|
||||||
var raster = new Raster({
|
var raster = new Raster({
|
||||||
source: 'user/themes/r2c/images/trame.svg',
|
// source: 'user/themes/r2c/images/trame.svg',
|
||||||
position: view.center
|
position: view.center
|
||||||
});
|
});
|
||||||
|
|
||||||
path.clipMask = true;
|
// path.clipMask = true;
|
||||||
// path.selected = true;
|
// path.selected = true;
|
||||||
path.closed = true;
|
path.closed = true;
|
||||||
// path.fullySelected = true;
|
path.fullySelected = false;
|
||||||
|
path.fillColor = 'grey';
|
||||||
|
|
||||||
// Add 5 segment points to the path spread out
|
// Add 5 segment points to the path spread out
|
||||||
// over the width of the view:
|
// over the width of the view:
|
||||||
for (var i = 0; i <= amount; i++) {
|
for (var i = 0; i <= amount.length; i++) {
|
||||||
var maxPoint = new Point(300, 300);
|
var maxPoint = new Point(300, 100);
|
||||||
|
var point = maxPoint * Point.random(view.size);
|
||||||
var point = maxPoint * Point.random(view.size) + 70;
|
path.add(point);
|
||||||
path.add(point);
|
|
||||||
|
|
||||||
// path.add(new Point(500 / 700) * view.size);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Select the path, so we can see how it is constructed:
|
// Select the path, so we can see how it is constructed:
|
||||||
|
|
||||||
function onFrame(event) {
|
function onFrame(event) {
|
||||||
// Loop through the segments of the path:
|
// 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];
|
var segment = path.segments[i];
|
||||||
// A cylic value between -1 and 1
|
var pulse = 0.7;
|
||||||
|
var sinus = Math.sin(event.time * pulse + i);
|
||||||
var sinus = Math.sin(event.time * 0.05+ i);
|
var cos = Math.cos(event.time * pulse + i);
|
||||||
|
segment.point.y = sinus * height + 300;
|
||||||
// Change the y position of the segment point:
|
segment.point.x = cos * width + 300;
|
||||||
segment.point.y = sinus * height + 100;
|
|
||||||
}
|
}
|
||||||
// Uncomment the following line and run the script again
|
|
||||||
// to smooth the path:
|
path.rotate(30);
|
||||||
path.smooth();
|
path.smooth();
|
||||||
}
|
}
|
||||||
|
|
||||||
// var copy = path.clone();
|
function onMouseDown(event) {
|
||||||
// copy.fullySelected = true;
|
path.fillColor = 'blue';
|
||||||
// copy.position.x += 500;
|
}
|
||||||
// copy.smooth();
|
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ body{
|
|||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#start{
|
#start{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
@@ -113,7 +112,9 @@ body{
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
.leaflet-marker-pane{
|
.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 %}
|
{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
|
<canvas id="canvas" resize hidpi="on" style="background:white"></canvas>
|
||||||
{% for module in page.collection %}
|
{% for module in page.collection %}
|
||||||
{{ module.content }}
|
{{ module.content }}
|
||||||
<canvas id="canvas" resize hidpi="on" style="background:white"></canvas>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user