31:T191b,{ // канвас var canvasGraphsW = 640; var canvasGraphsH = 320; var canvasGraphs = d3.select("#id-canvas") .attr("width", canvasGraphsW) .attr("height", canvasGraphsH); // запомнить в переменной ссылку на 2Д-растр для отрисовки точек графиков var ctx = canvasGraphs.node().getContext("2d"); //var ctx = DOM.context2d(picW, picH); // alter settings /*var variance = 0.01 var phaseMulti = 4 var phaseStep = 4 var slicesQuant = 50 var accelMulti = 4 var dxMax = 4*/ // видос //------------------------------------------------------- var vid = document.getElementById("id-video"); var timerId1;// = setInterval(onTimerVideoEnd, 3700); var timerId2;// = setInterval(onTimerVideoBit, 850); var timerId2delay; var modifier = 0; // var modifierMax = 50;// var modifierDecrease = 10; var modY0 = 0; var modY = modY0; var modYStep = +10; var initialBitDelay = 190; var videoBitLength = 478; var videoLength = videoBitLength * 8; function onTimerVideoBit() { // показать ритм ctx.rect(0, 0, picW, picH); ctx.fillStyle = "rgba(0, 0, 255, 0.3)";//"#0000FF"; ctx.fill(); modifier = modifierMax; // модификатор шага modY += modYStep; } function startBit() { // начать отсчет ритма modY = modY0; clearInterval(timerId2); timerId2 = setInterval(onTimerVideoBit, videoBitLength); // 917 // показать первый бит сразу onTimerVideoBit(); } function startDelayBit() { // с задержкой включить бит clearTimeout(timerId2delay); // задержать запуск ритма timerId2delay = setTimeout(startBit, initialBitDelay); } function onTimerVideoEnd() { // перемотать видео vid.currentTime = 0; vid.play(); startDelayBit(); } function startMainCycle() { // с задержкой включить бит // запустить основной видео-цикл clearInterval(timerId1); timerId1 = setInterval(onTimerVideoEnd, videoLength); } vid.onpause = function() { if (vid.ended == false) { // не закончено — пользователь остановил clearInterval(timerId1); clearInterval(timerId2); clearTimeout(timerId2delay); } }; vid.onplay = function() { // запустить основной видео-цикл vid.currentTime = 0; //vid.play(); startMainCycle(); startDelayBit(); }; //------------------------------------------------------- class Slice { constructor(_ctx, _i) { this.ctx = _ctx; this.phaseCountdown = _i * phaseMulti; this.i = _i; // одновременно и порядковый номер // настроить this.accelX = +accelMulti; // направо this.sliceX = 0; this.xMin = -this.ctx.canvas.width; this.xMax = this.ctx.canvas.width; this.dX = 0; this.dXMax = dxMax; // подготовить this.setup() } setup() { // сохранить исходное let sliceH = Math.ceil(this.ctx.canvas.height / slicesQuant); let sliceY = sliceH * this.i; this.imgData = this.ctx.getImageData(0, sliceY, this.ctx.canvas.width, sliceH); }; animate() { if (this.phaseCountdown > 0) { // фазовая задержка this.phaseCountdown -= phaseStep; } else { // изменение скорости this.dX += this.accelX; if (this.dX > this.dXMax) { // вышли справа this.dX = this.dXMax; this.accelX = - this.accelX; // развернули ускорение. } if (this.dX < -this.dXMax) { // вышли слева this.dX = -this.dXMax; this.accelX = - this.accelX; // развернули ускорение. } // изменение координаты this.sliceX += this.dX; if (this.sliceX > this.xMax) { this.sliceX = this.xMax } if (this.sliceX < this.xMin) { this.sliceX = this.xMin } // показать полосу let sliceH = Math.ceil(this.ctx.canvas.height / slicesQuant); let sliceY = sliceH * this.i; let jitterY = (Math.random() * jitterYMax - jitterYMax * 0.5) * modifier; this.ctx.putImageData(this.imgData, this.sliceX + modY, sliceY + jitterY + modY); } } } class Drawer { constructor() { this.setup() } setup() { //ctx.rect(0, 0, picW, picH); //ctx.fillStyle = userBGColor //ctx.fill(); let fontLineHeight = 72; let textMarginX = 25; let textMarginY = 10; ctx.fillStyle = userColor ctx.font = "60pt Helvetica Neue"; ctx.fillText(userText1, textMarginX, textMarginY + fontLineHeight - 5 + fontLineHeight * 0); ctx.fillText(userText2, textMarginX, textMarginY + fontLineHeight - 5 + fontLineHeight * 1); ctx.fillText(userText3, textMarginX, textMarginY + fontLineHeight - 5 + fontLineHeight * 2); this.arrSlices = []; for (let i = 0; i < slicesQuant; i++) { this.arrSlices.push(new Slice(ctx, i)); } } drawLoop() { // модификатор бита if (modifier > 0) { modifier -= modifierDecrease; } else { modifier = 0; } for (let i = 0; i < this.arrSlices.length; i++) { let slice = this.arrSlices[i]; slice.animate(); // alter settings /*variance = 0.2 var overrun = 0.22 phaseMulti *= (1 + Math.random() * variance - variance * overrun) phaseStep *= (1 + Math.random() * variance - variance * overrun) //slicesQuant = Math.round(slicesQuant * (1 + Math.random() * variance - variance * overrun)) accelMulti *= (1 + Math.random() * variance - variance * overrun) dxMax *= (1 + Math.random() * variance - variance * overrun)*/ } } } const drawer = new Drawer(); while (true) { drawer.drawLoop(); yield ctx.canvas; } }32:[] 2f:{"title":"Zakharov v5","cells":[{"id":0,"value":"md`# Zakharov v5\n\nWait until video loads and then press play.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"// autoplay loop controls\n\n//

\n\n//

\n\n//78f876f9718944f9d1874bf0bba224e63d0e1bb2/Zakharov03.mp4\n\n//90330352f323c098c27dd5e38b7b6fcfd155c59d/Zakharov04.mp4\n\nhtml`

\n\n

\n \t

\n\n

\n \n

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof userBGColor = color({\n value: '#32009c',\n title: \"Background color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof userColor = color({\n value: '#ffffff',\n title: \"Text color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof userText1 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"viewof userText2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"viewof userText3 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"viewof phaseMulti = slider({\n min: 0.1, \n max: 10, \n step: 0.1, \n value: 1.9, \n title: \"Phase multiplier\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof phaseStep = slider({\n min: 0.1, \n max: 10, \n step: 0.1, \n value: 0.7, \n title: \"Phase step\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"viewof slicesQuant = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 36, \n title: \"Slices\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"viewof accelMulti = slider({\n min: 1, \n max: 10, \n step: 0.1, \n value: 1.9, \n title: \"Acceleration\" \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof dxMax = slider({ \n min: 1, \n max: 100, \n step: 1, \n value: 3, \n title: \"Max velocity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"viewof jitterYMax = slider({ \n min: 0, \n max: 100, \n step: 1, \n value: 10, \n title: \"Vertical jitter\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"viewof picW = slider({\n min: 200, \n max: 800, \n step: 10, \n value: 640, \n title: \"Picture width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"viewof picH = slider({\n min: 200, \n max: 400, \n step: 10, \n value: 320, \n title: \"Picture height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}