0 / 0 / 0
Регистрация: 30.10.2022
Сообщений: 2
1

Изменение цвета объектов для анимации "пузырьков"

30.10.2022, 14:25. Показов 561. Ответов 1
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Изучаю Canvas и программирование в целом чуть меньше недели.
По уроку одного из курсов сделал нехитрую анимацию кружков.
Захотел от себя добавить свойство, благодаря которому бы каждый из 100 объектов имел свой рандомный цвет по заданным параметрам, но при этом цвет каждого отдельного объекта после первого появления больше не изменялся.
В общем не понимаю что же я сделал не так, потому что анимация работает, но цвет остается дефолтно черным



Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
 
function Circle (x, y, dx, dy, radius, color) {
    this.x = x;  
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.color = color; //попытка добавить переменную для цвета
 
    this.draw = function() {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        context.stroke();
    
    }
 
    this.update = function() {
        if (this.x +
             this.radius > innerWidth || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }
    
        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
            this.dy = -this.dy;
        }
        
        this.x += this.dx;
        this.y += this.dy;
        
        this.draw();
    }
}
 
 
var circleArray = [];
 
for (var i = 0; i < 100; i++) {
    var radius = 30;
    var x = Math.random() * (innerWidth - radius * 2) + radius;
    var y = Math.random() * (innerHeight- radius * 2) + radius;
    var dx = (Math.random() - 0.5) * 2;
    var dy = (Math.random() - 0.5) * 2;
    var color = context.strokeStyle = 'rgb(' + 0 + ',' + Math.random() * 255 + ',' + Math.random * 255 + ')'; // думал может оно будет обновлять цвета для нового объекта
    
    circleArray.push(new Circle(x, y, dx, dy, radius, color));
}
 
function animate() {
    requestAnimationFrame(animate);
    context.clearRect(0, 0, innerWidth, innerHeight);
    
    for (var i = 0; i < circleArray.length; i++) {
        circleArray[i].update();
    }
}
 
animate();
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.10.2022, 14:25
Ответы с готовыми решениями:

Изменение цвета у объектов
Вопрос мой таков. У меня имеется объект-родитель, у которого имеются несколько пустых дочерних...

Классы, изменение цвета объектов
Добрый день, не могу понять как с помощью классов менять цвет, когда заранее не известно какой...

Изменение цвета при столкновении объектов
Есть статичная кнопка, и есть кнопка, которая движется по горизонтали. При соприкосновении фигуры...

Параллельное выполнение анимации для разных объектов
есть такой скрипт: jQuery(document).ready(function($){ $('.zagolovok').click(function(){...

1
Модератор
Эксперт JS
6279 / 3518 / 1050
Регистрация: 07.09.2019
Сообщений: 5,664
Записей в блоге: 1
30.10.2022, 14:41 2
Генерируем случайный цвет:
Javascript
1
2
3
const color = `rgb(0, ${Math.floor(Math.random() * 255)}, ${Math.floor(
    Math.random() * 255
  )})`;
Рисуем:
Javascript
1
2
3
4
5
6
this.draw = function () {
  context.strokeStyle = color; //используем цвет
  context.beginPath();
  context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
  context.stroke();
};
0
30.10.2022, 14:41
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.10.2022, 14:41
Помогаю со студенческими работами здесь

Опишите тип объектов – линия с параметрами: координаты вершин, стороны, цвет. Пусть методами будут А) порождение линии; Б) изменение ее цвета; В) и
Опишите тип объектов – линия с параметрами: координаты вершин, стороны, цвет. Пусть методами будут...

Опишите тип объектов – круг с параметрами: координаты центра, радиус, цвет. Пусть методами будут А) порождение круга; Б) изменение его цвета; В) и
Опишите тип объектов – круг с параметрами: координаты центра, радиус, цвет. Пусть методами будут А)...

Изменение цвета текстбокса и изменение цвета текста внутри текстбокса в процессе работы программы
Добрый вечер! У меня такой вопрос Есть такое задание Написать программу, которая будет...

Различия смен цвета и замена цвета материала у всех объектов
В чем разница если менять цвет напрямую и менять цвет материала? Эффект вроде один и тот же....

Изменение цвета фона группы для УФ.
Добрый ноч! Стоит задача разрисовать группу в УФ. Группа из двух полей ввода(недоступных для...

Изменение цвета фона для TabControl
Не вписывается серый фон tabControl в мой GUI. Обычно это свойства BackColor но именно для этого...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru