blob
This commit is contained in:
+2
-1
@@ -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
+1
-1
File diff suppressed because one or more lines are too long
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user