Wave html, body, canvas { width:100%; height:100%; overflow: hidden; background-color: #fff; cursor: ns-resize; } window.onload = Wave.init; .sidebar { position: absolute; left: 20px; top: 20px; width: 200px; background-color: rgba(0,0,0,0.8); overflow: auto; padding: 12px 15px; border-radius: 6px; overflow: hidden; } .sidebar .container { } .sidebar .detail { clear: both; } .title-bar { position: relative; width: 200px; cursor: move; } .title { position: relative; font-family: ‘Helvetica’, sans-serif; font-size: 12px; font-weight: 400; color: #fff; margin: 2px 0 1px 0; } .title-s { position: relative; font-family: ‘Helvetica’, sans-serif; font-size: 8px; font-weight: 400; color: rgba(255,255,255,0.5); } .my-over { background-color: #555; color: #aaa; cursor: pointer; } .my-over:hover { background-color: #fb2600; color: #fff; } .my-bt { background-color: #444; padding: 5px 0; width: 80px; text-align: center; font-family: ‘Helvetica’, sans-serif; font-size: 9px; font-weight: 400; position: relative; border-radius: 2px; display: inline-block; margin: 0 10px 0 0; } .label { height: 15px; position: relative; font-family: ‘Helvetica’, sans-serif; font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.6); padding: 16px 0 0 0; } .link { cursor: pointer; height: 15px; position: relative; font-family: ‘Helvetica’, sans-serif; font-size: 10px; font-weight: 400; padding: 16px 0 0 0; } .link > a { color: rgba(255,255,255,0.4); text-decoration: none; } .link > a:hover { color: #fb2600; } .slide { background-color: #222; width: 200px; height: 6px; position: relative; margin: 2px 0 7px 0; } .slide .handle { width: 16px; height:10px; position: absolute; left: 0; top: -2px; cursor: col-resize; border-radius: 2px; } .label-gap { padding-bottom: 10px; } .label-s { position: relative; clear: both; } .label-s-txt { width: 45px; position: relative; float: left; font-family: ‘Helvetica’, sans-serif; font-size: 9px; font-weight: 400; color: #555; height: 100%; margin-top: 2px; } .label-s-num { width: 45px; position: relative; font-family: ‘Helvetica’, sans-serif; font-size: 10px; font-weight: 400; margin-bottom: 6px; color: #888; } .name-input { width: 100px; height: 18px; font-family: ‘Helvetica’, sans-serif; font-size: 10px; font-weight: 400; color: #777; position: relative; display: block; float: left; margin: -4px 0 10px 0; padding: 0 0 0 5px; border: 1px #454545 solid; background: #1c1c1c; } .check { display: inline-block; position: relative; } .check .check-box { display: inline-block; margin-right: 4px; vertical-align: middle; } .check .check-text { font-family: ‘Helvetica’, sans-serif; font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.4); display: inline-block; vertical-align: middle; margin: 0 12px 0 0; } .check-title-s { margin-top: 1px; }
var Wave = Wave || ( function () { var $canvas, _ctx, _stageWidth, _stageHeight, _stageWidthHalf, _stageHeightHalf, _maxWidth, _widthGap, _isDown = 0, _mouseX = 0, _mouseY = 0, _points = [], _isShowPoint = 0, _isColor = 0, FRICTION = 0.96, TOTAL_WAVE = 3, TOTAL_POINTS = 8, COLORS = [ [ {h:189, s:100, l:46}, {h:196, s:100, l:39}, {h:207, s:100, l:31} ], [ {h:0, s:100, l:50}, {h:60, s:100, l:50}, {h:180, s:100, l:50} ]], SPRING = [ .04, .06, .03 ], _raf; function init() { $canvas = document.getElementsByTagName(‘canvas’)[0]; window.addEventListener(‘resize’, onResize, true); onResize(); start(); } function onResize() { _stageWidth = window.innerWidth; _stageHeight = window.innerHeight; _stageWidthHalf = _stageWidth >> 1; _stageHeightHalf = _stageHeight >> 1; _widthGap = _stageWidth / TOTAL_POINTS >> 1; _maxWidth = _stageWidth + (_widthGap * 2); $canvas.width = _stageWidth; $canvas.height = _stageHeight; _ctx = $canvas.getContext(‘2d’); build(); } function build() { var i, k, point; for (i=0; i<TOTAL_WAVE; i++) { _points[i] = []; for (k=0; k<TOTAL_POINTS; k++) { point = {x: _maxWidth / (TOTAL_POINTS – 1) * k – _widthGap, y:_stageHeightHalf + (Math.random() * 50), vy:0}; _points[i][k] = point; } } } function start() { $canvas.addEventListener(‘mousedown’, onDown, false); $canvas.addEventListener(‘mouseup’, onUp, false); $canvas.addEventListener(‘mousemove’, onMove, false); if (!!(‘ontouchstart’ in window)) { $canvas.addEventListener(‘touchstart’, touchStart, false); $canvas.addEventListener(‘touchmove’, touchMove, false); $canvas.addEventListener(‘touchend’, touchEnd, false); } initController(); _raf = window.requestAnimationFrame(animate); } function initController() { var signalOpt = { moveControl: new signals.Signal(), pointsNumChanged: new signals.Signal() }; var container = new CMControl.Panel(); container.setClass(‘sidebar’); var titleBar = new CMControl.TitleBar(container, signalOpt); titleBar.setClass(‘title-bar’); container.add(titleBar); var item = new CMControl.Panel(); item.setTextContent(‘WAVE ANIMATION’); item.setClass(‘title’); titleBar.add(item); item = new CMControl.Panel(); item.setTextContent(‘VERSION 1.0 – JONGMIN KIM’); item.setClass(‘title-s’); titleBar.add(item); // points num var pointsCon = new CMControl.Panel(); container.add(pointsCon); var pointsItem = new CMControl.Panel(); pointsItem.setTextContent(‘POINTS NUM : 8’); pointsItem.setClass(‘label’); pointsCon.add(pointsItem); var slidePoints = new CMControl.Slide(CMControl.getCurrent(8, 3, 16, 0, 1)); slidePoints.onChange(function (value) { signalOpt.pointsNumChanged.dispatch({num: value}); }); pointsCon.add(slidePoints); signalOpt.pointsNumChanged.add(function(object) { var num = CMControl.getCurrent(object.num, 0, 1, 3, 16) | 0; TOTAL_POINTS = num; pointsItem.setTextContent(‘POINTS NUM : ‘ + TOTAL_POINTS); onResize(); }); // points show/hide var checkCon = new CMControl.Panel(); checkCon.setClass(‘check’); container.add(checkCon); var checkItem = new CMControl.Panel(); checkItem.setTextContent(‘SHOW POINTS’); checkItem.setClass(‘label’); checkCon.add(checkItem); var checkBack = new CMControl.Radio(true); checkBack.setClass(‘check-box’); checkBack.onChange(function() { if (!_isShowPoint) return; _isShowPoint = 0; checkFront.setValue(0); }); checkCon.add(checkBack); item = new CMControl.Panel(); item.setTextContent(‘HIDE’); item.setClass(‘check-text’); checkCon.add(item); container.add(checkCon); var checkFront = new CMControl.Radio(false); checkFront.setClass(‘check-box’); checkFront.onChange(function() { if (_isShowPoint) return; _isShowPoint = 1; checkBack.setValue(0); }); checkCon.add(checkFront); item = new CMControl.Panel(); item.setTextContent(‘SHOW’); item.setClass(‘check-text’); checkCon.add(item); // color var colorCon = new CMControl.Panel(); colorCon.setClass(‘check’); container.add(colorCon); var colorItem = new CMControl.Panel(); colorItem.setTextContent(‘COLOR’); colorItem.setClass(‘label’); colorCon.add(colorItem); var colorBack = new CMControl.Radio(true); colorBack.setClass(‘check-box’); colorBack.onChange(function() { if (!_isColor) return; _isColor = 0; colorFront.setValue(0); }); colorCon.add(colorBack); item = new CMControl.Panel(); item.setTextContent(‘BLUE’); item.setClass(‘check-text’); colorCon.add(item); var colorFront = new CMControl.Radio(false); colorFront.setClass(‘check-box’); colorFront.onChange(function() { if (_isColor) return; _isColor = 1; colorBack.setValue(0); }); colorCon.add(colorFront); item = new CMControl.Panel(); item.setTextContent(‘COLORFUL’); item.setClass(‘check-text’); colorCon.add(item); // label var labelCon = new CMControl.Panel(); container.add(labelCon); item = new CMControl.Panel(); item.setHTMLContent(‘BLOG.CMISCM.COM‘); item.setClass(‘link’); labelCon.add(item); signalOpt.moveControl.add(function(object) { var tx = object.x; slidePoints.setGap(tx); }); document.body.appendChild(container.dom); } function animate(timestamp) { _raf = window.requestAnimationFrame(animate); loop(); } function loop() { _ctx.clearRect(0, 0, _stageWidth, _stageHeight); var i, arr = [0, 5, -5]; for (i=0; i<TOTAL_WAVE; i++) { draw(_points[i], COLORS[_isColor][i], SPRING[i], arr[i]); } if (_isShowPoint) { drawPoints(_points[0], ‘#ff0000’); } } function draw(point, color, spring, gap) { _ctx.beginPath(); _ctx.fillStyle = ‘hsla(‘ + color.h + ‘, ‘ + color.s + ‘%, ‘ + color.l + ‘%, 0.4)’; var prevx = point[0].x, prevy = point[0].y, i, dx, dy, dist, my, cx, cy; _ctx.moveTo(prevx, prevy); for (i=0; i<TOTAL_POINTS; i++) { dx = _mouseX – point[i].x; dy = (_mouseY – _stageHeight) / 2; dist = Math.sqrt(dx * dx + dy * dy) * 0.01; my = (_mouseY / dist) + _stageHeightHalf; point[i].vy += (my – point[i].y + gap) * spring; point[i].vy *= FRICTION; point[i].y += point[i].vy; cx = (prevx + point[i].x) * .5; cy = (prevy + point[i].y) * .5; _ctx.bezierCurveTo(prevx, prevy, cx, cy, cx, cy, point[i].x, point[i].y); prevx = point[i].x; prevy = point[i].y; } _ctx.lineTo(prevx, prevy); _ctx.lineTo(_maxWidth, _stageHeight); _ctx.lineTo(point[0].x, _stageHeight); _ctx.fill(); _ctx.closePath(); } function drawPoints(point, color) { _ctx.beginPath(); _ctx.fillStyle = color; var i, cx, cy; for (i=0; i<TOTAL_POINTS; i++) { cx = point[i].x; cy = point[i].y; _ctx.beginPath(); _ctx.arc(cx, cy, 4, 0, 2 * Math.PI); _ctx.fill(); } } function touchStart(e) { var touch = e.touches[0]; downFn(touch.pageX, touch.pageY); } function touchMove(e) { e.preventDefault(); var touch = e.touches[0]; moveFn(touch.pageX, touch.pageY); } function touchEnd(e) { upFn(); } function onDown(e) { downFn(e.pageX, e.pageY); } function onMove(e) { moveFn(e.pageX, e.pageY); } function onUp(e) { upFn(); } function downFn(mx, my) { _isDown = 1; _mouseX = mx; _mouseY = my; } function moveFn(mx, my) { if (!_isDown) return; _mouseX = mx; _mouseY = my; } function upFn() { _isDown = 0; _mouseX = 0; _mouseY = 0; } return { init: init } } )(); /* JS Signals Released under the MIT license Author: Miller Medeiros Version: 1.0.0 – Build: 268 (2012/11/29 05:48 PM) */ (function(i){function h(a,b,c,d,e){this._listener=b;this._isOnce=c;this.context=d;this._signal=a;this._priority=e||0}function g(a,b){if(typeof a!==”function”)throw Error(“listener is a required param of {fn}() and should be a Function.”.replace(“{fn}”,b));}function e(){this._bindings=[];this._prevParams=null;var a=this;this.dispatch=function(){e.prototype.dispatch.apply(a,arguments)}}h.prototype={active:!0,params:null,execute:function(a){var b;this.active&&this._listener&&(a=this.params?this.params.concat(a): a,b=this._listener.apply(this.context,a),this._isOnce&&this.detach());return b},detach:function(){return this.isBound()?this._signal.remove(this._listener,this.context):null},isBound:function(){return!!this._signal&&!!this._listener},isOnce:function(){return this._isOnce},getListener:function(){return this._listener},getSignal:function(){return this._signal},_destroy:function(){delete this._signal;delete this._listener;delete this.context},toString:function(){return”[SignalBinding isOnce:”+this._isOnce+ “, isBound:”+this.isBound()+”, active:”+this.active+”]”}};e.prototype={VERSION:”1.0.0″,memorize:!1,_shouldPropagate:!0,active:!0,_registerListener:function(a,b,c,d){var e=this._indexOfListener(a,c);if(e!==-1){if(a=this._bindings[e],a.isOnce()!==b)throw Error(“You cannot add”+(b?””:”Once”)+”() then add”+(!b?””:”Once”)+”() the same listener without removing the relationship first.”);}else a=new h(this,a,b,c,d),this._addBinding(a);this.memorize&&this._prevParams&&a.execute(this._prevParams);return a}, _addBinding:function(a){var b=this._bindings.length;do–b;while(this._bindings[b]&&a._priority<=this._bindings[b]._priority);this._bindings.splice(b+1,0,a)},_indexOfListener:function(a,b){for(var c=this._bindings.length,d;c–;)if(d=this._bindings[c],d._listener===a&&d.context===b)return c;return-1},has:function(a,b){return this._indexOfListener(a,b)!==-1},add:function(a,b,c){g(a,”add”);return this._registerListener(a,!1,b,c)},addOnce:function(a,b,c){g(a,”addOnce”);return this._registerListener(a, !0,b,c)},remove:function(a,b){g(a,”remove”);var c=this._indexOfListener(a,b);c!==-1&&(this._bindings[c]._destroy(),this._bindings.splice(c,1));return a},removeAll:function(){for(var a=this._bindings.length;a–;)this._bindings[a]._destroy();this._bindings.length=0},getNumListeners:function(){return this._bindings.length},halt:function(){this._shouldPropagate=!1},dispatch:function(a){if(this.active){var b=Array.prototype.slice.call(arguments),c=this._bindings.length,d;if(this.memorize)this._prevParams= b;if(c){d=this._bindings.slice();this._shouldPropagate=!0;do c–;while(d[c]&&this._shouldPropagate&&d[c].execute(b)!==!1)}}},forget:function(){this._prevParams=null},dispose:function(){this.removeAll();delete this._bindings;delete this._prevParams},toString:function(){return”[Signal active:”+this.active+” numListeners:”+this.getNumListeners()+”]”}};var f=e;f.Signal=e;typeof define===”function”&&define.amd?define(function(){return f}):typeof module!==”undefined”&&module.exports?module.exports=f:i.signals= f})(this);

Intravista - Altofest2022 on Radioleib

by Giovanni Passariello

Cronache d'arrivo e ambientazione. Gli artisti intervistati dai cittadini di Altofest.

▼ Read More
▲ Read Less