Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 19.03.2023, 09:31   #1
Qbinik
Пользователь
 
Регистрация: 08.10.2022
Сообщений: 25
По умолчанию Диффузия

Мне надо доделать диффузию.
У меня слева есть шары зеленого цвета, мне надо чтобы справа было так же но другого цвета и по середине была линия
Код:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        background: #222;
      }
      
      .toolbar {
        width: 150px;
        height: 75px;
        background: #222;
        padding: 5px;
      }
 
      input[type="color"], button {
        width: 90%;
        margin: 0 auto;
        display: block;
      }
 
      input[type="range"] {
        width: 70%;
      }
 
      span {
         position: relative;
         bottom: 5px;
      }
    </style>
  </head>
  <body>
    <div class="toolbar">
      <!-- <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> -->
      <button class="reset">Reset</button>
      <button class="start">Start</button>
      <button class="stop">Stop</button>
    </div>
    <canvas class="myCanvas">
      <p>Add suitable fallback here.</p>
    </canvas>
 
    <script>
 
const canvas = document.querySelector('.myCanvas');
const ctx = canvas.getContext('2d');
 
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight-85;
 
const startBtn = document.querySelector('.start');
const stopBtn = document.querySelector('.stop');
const resetBtn = document.querySelector('.reset');
 
let balls = [];
 
// function to generate random number
 
function random(min, max) {
  const num = Math.floor(Math.random() * (max - min + 1)) + min;
  return num;
}
 
// define Ball constructor
 
function Ball(x, y, velX, velY, color, size) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.color = color;
  this.size = size;
}
 
// define ball draw method
 
Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
};
 
// define ball update method
 
Ball.prototype.update = function() {
  if((this.x + this.size) >= width) {
    this.velX = -(this.velX);
  }
 
  if((this.x - this.size) <= 0) {
    this.velX = -(this.velX);
  }
 
  if((this.y + this.size) >= height) {
    this.velY = -(this.velY);
  }
 
  if((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }
 
  this.x += this.velX;
  this.y += this.velY;
};
 
// define ball collision detection
 
/*Ball.prototype.collisionDetect = function() {
  for(let j = 0; j < balls.length; j++) {
    if(!(this === balls[j])) {
      const dx = this.x - balls[j].x;
      const dy = this.y - balls[j].y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      if (distance < this.size + balls[j].size) {
        balls[j].color = this.color = 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')';
      }
    }
  }
};*/
 
let pressed = false;
 
startBtn.onclick = function() {
    pressed = true;
}
 
stopBtn.onclick = function() {
    pressed = false;
}
 
// define array to store balls and populate it
 
reset = function() {
    ctx.fillStyle = 'rgba(0,0,0,1)';
    ctx.fillRect(0,0,width,height);
    balls = [];
    while(balls.length < 25) {
      const size = 10;
      let ball = new Ball(
        // ball position always drawn at least one ball width
        // away from the edge of the canvas, to avoid drawing errors
        random(0 + size,width/2 - size),
        random(0 + size,height - size),
        random(-7,7),
        random(-7,7),
        'rgb(' + 100 + ',' + 255 + ',' + 100 +')',
        size
      );
      ball.draw();
      balls.push(ball);
    }
}
 
reset();
 
 
resetBtn.onclick = function() {
    reset();
}
 
 
// define loop that keeps drawing the scene constantly
 
function loop() {
  if(pressed) {
      ctx.fillStyle = 'rgba(0,0,0,1)';
      ctx.fillRect(0,0,width,height);
 
      for(let i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].update();
        // balls[i].collisionDetect();
      }
  }
 
  requestAnimationFrame(loop);
}
 
loop();
 
    </script>
  </body>
</html>
Qbinik вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Pascal. Броуновское движение молекул (диффузия) vzik Помощь студентам 2 19.05.2012 11:19