accept-and-work/auto-accept
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

draw polygons and WIP flywheel

Browse source
This commit is contained in:
Ruben van de Ven 2020-12-15 17:59:05 +01:00
parent 4868a374b6
commit d920b037fc
1 changed files with 129 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
index.html
View file

@ -14,20 +14,20 @@
width:100vw; width:100vw;
height:100vh; height:100vh;
} }
svg rect{ svg .rect{
stroke: red; stroke: red;
stroke-width: .2cm; stroke-width: .2cm;
fill: none; fill: none;
transition: stroke .5s; transition: stroke .5s;
} }
svg rect.locked{ svg .rect.locked{
stroke:blue; stroke:blue;
opacity: 1; opacity: 1;
transition: opacity .5s; transition: opacity .5s;
} }
svg rect.hide{ svg .rect.hide{
opacity:0; opacity:0;
} }
@ -43,7 +43,10 @@
bottom:0; bottom:0;
right:0; right:0;
z-index: -1; z-index: -1;
opacity:0;
transition:opacity 10s;
} }
</style> </style>
</head> </head>
<body> <body>
@ -57,10 +60,124 @@
<source src="Blue_Sky_and_Clouds_Timelapse_0892__Videvo.mov"> <source src="Blue_Sky_and_Clouds_Timelapse_0892__Videvo.mov">
</video> </video>
<script> <script>
/*
The interface is like a flywheel.
*/
class Flywheel{
constructor() {
this.falloff = .1; // value at which it reduces per second
this.value = 0.; // start at 0 - gradual meter
this.stage = 0.; // start at 0 - the various stages
this.value_min = 0;
this.value_max = 10.99999; // gives stage 10
// this.interval = window.setInterval(this.step, 50)
this.time = null;
window.requestAnimationFrame(this.step.bind(this));
}
step(time){
if(this.time === null){
// first run
this.time = time;
window.requestAnimationFrame(this.step.bind(this));
return;
}
const dt = time - this.time;
this.time = time;
this.value -= this.falloff * dt/1000; // linear falloff
if(this.value < 0){
this.value = 0;
}
// console.log(this.value,this.falloff, dt,this.time);
// TODO: check if this should be different
const stage = Math.floor(this.value);
if (stage != this.stage){
this.changeStage(stage);
}
window.requestAnimationFrame(this.step.bind(this));
}
add(increment){
this.value += typeof increment == 'undefined' ? 1 : increment;
// cap:
if(this.value > this.value_max) this.value = this.value_max;
}
changeStage(stage){
this.stage = stage;
console.log('stage now at', this.stage);
// TODO: handle stage change
}
}
let svgEl = document.getElementById('canvas'); let svgEl = document.getElementById('canvas');
let crosshairXEl = document.getElementById('crosshair_x'); let crosshairXEl = document.getElementById('crosshair_x');
let crosshairYEl = document.getElementById('crosshair_y'); let crosshairYEl = document.getElementById('crosshair_y');
const segmentCount = window.location.search.substr(1) ?? 4;
function getPathShapeBetweenPoints(p1, p2, corners) {
let d = `M ${p1.x},${p1.y} L `;
if(corners == 4){
// draw inbetween p1 & p2.
let minx = Math.min(p1.x, p2.x);
let miny = Math.min(p1.y, p2.y);
let maxx = Math.max(p1.x, p2.x);
let maxy = Math.max(p1.y, p2.y);
d += ` ${p1.x},${p2.y} ${p2.x},${p2.y} ${p2.x},${p1.y} ${p1.x},${p1.y} `;
}
else{
// find center of circle that describes the polygon of which p1 and p2 are part
// it's _not_ the center between the two points, as p1 and p2 are corners on the shape
// distance between p1 and p2
const length = Math.sqrt(Math.pow(p1.x-p2.x,2)+ Math.pow(p1.y - p2.y, 2));
const segmentAngle = Math.PI * 2 / corners;
// we don't want
// const segmentsAngle = Math.floor(180/segmentAngle) * segmentAngle;
const radius = (length*.5)/Math.sin(segmentAngle);
const rotation = Math.atan2((p2.y -p1.y),(p2.x - p1.x)) + (Math.PI/2-segmentAngle);
const dx = Math.cos(rotation) * radius;// * Math.sign(p2.x - p1.x);
const dy = Math.sin(rotation) * radius;// * Math.sign(p2.y - p1.y);
// we now have the center:
const cx = p2.x - dx;
const cy = p2.y - dy;
// startpoint in relation to circle
const sx = cx - p1.x;
const sy = cy - p1.y;
let startRot = Math.asin(sx / radius);
if(sy>0){startRot = -1 * startRot + Math.PI;}
// console.log(sx, radius, startRot);
// animI+= .1;
// console.log(sx, sy, startRot);
for (let a = 0; a < Math.PI*2; a += segmentAngle) {
let x = radius * Math.sin(a-startRot) + cx;
let y = radius * Math.cos(a-startRot) + cy;
d += ` ${x},${y}`;
}
}
return d + ' Z';
}
// canvas position relative to mouse/screen // canvas position relative to mouse/screen
// TODO: update on resize: // TODO: update on resize:
@ -84,29 +201,23 @@
svgEl.addEventListener('mousedown', function(mousedownEv){ svgEl.addEventListener('mousedown', function(mousedownEv){
let shapeEl = document.createElementNS('http://www.w3.org/2000/svg','rect'); let shapeEl = document.createElementNS('http://www.w3.org/2000/svg','path');
shapeEl.classList.add('rect'); shapeEl.classList.add('rect');
let p1 = {'x': mousedownEv.clientX - rect.left, 'y': mousedownEv.clientY - rect.top} let p1 = {'x': mousedownEv.clientX - rect.left, 'y': mousedownEv.clientY - rect.top}
shapeEl.setAttribute('x', p1.x); // shapeEl.setAttribute('x', p1.x);
shapeEl.setAttribute('y', p1.y); // shapeEl.setAttribute('y', p1.y);
shapeEl.setAttribute('width', 0); // shapeEl.setAttribute('width', 0);
shapeEl.setAttribute('height', 0); // shapeEl.setAttribute('height', 0);
let d = getPathShapeBetweenPoints(p1, p1, segmentCount);
svgEl.appendChild(shapeEl); svgEl.appendChild(shapeEl);
shapeEl.setAttribute('d', d);
let mouseMoveEv = function(mousemoveEv) { let mouseMoveEv = function(mousemoveEv) {
let p2 = {'x': mousemoveEv.clientX - rect.left, 'y': mousemoveEv.clientY - rect.top} let p2 = {'x': mousemoveEv.clientX - rect.left, 'y': mousemoveEv.clientY - rect.top}
// draw inbetween p1 & p2. let d = getPathShapeBetweenPoints(p1, p2, segmentCount);
let minx = Math.min(p1.x, p2.x); shapeEl.setAttribute('d', d);
let miny = Math.min(p1.y, p2.y);
let maxx = Math.max(p1.x, p2.x);
let maxy = Math.max(p1.y, p2.y);
shapeEl.setAttribute('x', minx);
shapeEl.setAttribute('y', miny);
shapeEl.setAttribute('width', maxx - minx);
shapeEl.setAttribute('height', maxy - miny);
}; };
let mouseUpEv = function() { let mouseUpEv = function() {
console.log('up'); console.log('up');