KPACHODAP
DELETED
- Регистрация
- 21 Дек 2009
- Сообщения
- 675
- Реакции
- 274
- Автор темы
- #1
Второй день ломаю голову, нашел много вариантов разлиных фишек на JS, но припаять все вместе не выходит(((( Нужна помощь профи! но суть такая что мне нужно чтобы обьект(фура.png) на сайте вылетал к примеру: сначала справа в промежутке там с 1-30 секунд, прокрутив ниже или пройдя там например пол минуты или 2 минуты обьект опять вылетает слева произвольно и пролетает дальше по сайту зигзагом и т.д. за ранее благодарен!
первый более похожий но скорость и какие то странноватые линии движения очень! а также при движении как зафиксить нос грубо говоря машины чтобы она ехала по траектории!
ну и сама фишка хочется чтобы он как бы сам жил по сути! тоесть произвольные перещения! как то так! чтобы не сильно назойлево для клиентов сайта!
вот что то сделал! но как вместо шара машинку сделать из png или svg?
и верно ли это прописал?
готов заплатить симвролически за подсказку!
Скрытое содержимое доступно для зарегистрированных пользователей!
первый более похожий но скорость и какие то странноватые линии движения очень! а также при движении как зафиксить нос грубо говоря машины чтобы она ехала по траектории!
ну и сама фишка хочется чтобы он как бы сам жил по сути! тоесть произвольные перещения! как то так! чтобы не сильно назойлево для клиентов сайта!
вот что то сделал! но как вместо шара машинку сделать из png или svg?
JavaScript:
/**
* для вопроса https://toster.ru/q/455772
* Какой алгоритм подойдет для описания полета насекомого?
* Insect flight simulator.
*/
// create canvas
var canvas = document.createElement('canvas')
, ctx = canvas.getContext('2d')
, divCanvas = document.createElement('div')
, i
, Point = function( x, y) { this.x = x || 0, this.y = y || 0 }
, n = 28
, chain = [] // Target is [0], fly is the last element of chain
, radius = 160 // min distance to create a link, in px
, getRnd = function( max){ return Math.floor( max * Math.random()); }
;
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', divCanvas, false);
// setup canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
divCanvas.appendChild(canvas);
divCanvas.className = "centered";
document.body.appendChild(divCanvas);
// initialize points
for( i = 0; i < n; i++) chain.push( new Point( 0, 0));
function render() {
var target
, fly
, dx
, dy
, i
, point
, k = 0.09
;
window.requestAnimationFrame(render);
target = chain[0];
fly = chain[ chain.length - 1];
// check distance from fly to target
dx = target.x - fly.x;
dy = target.y - fly.y;
if( Math.sqrt( dx * dx + dy * dy) <= radius) {
// get a new target
do {
target.x = getRnd( canvas.width);
target.y = getRnd( canvas.height);
dx = target.x - fly.x;
dy = target.y - fly.y;
} while( Math.sqrt( dx * dx + dy * dy) <= radius);
}
// update chain
for( i = 1; i < chain.length; i++) {
point = chain[i];
target = chain[i-1];
point.x += k * (target.x - point.x);
point.y += k * (target.y - point.y);
}
// erase canvas
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect( 0, 0, canvas.width, canvas.height);
// draw
//target = chain[0];
//ctx.fillStyle = "rgb(128,128,128)";
//ctx.fillRect( target.x - 5, target.y, 10, 1);
//ctx.fillRect( target.x, target.y - 5, 1, 10);
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc( fly.x, fly.y, 3, 0, Math.PI * 2);
ctx.fill();
}
render();и верно ли это прописал?
Код:
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', divCanvas, false);
// setup canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;готов заплатить симвролически за подсказку!
Последнее редактирование:
