Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2013, 17:42
Интересующийся
Отправить личное сообщение для Zemsky Посмотреть профиль Найти все сообщения от Zemsky
 
Регистрация: 13.12.2013
Сообщений: 15

Canvas. Как сделать или вообще нельзя? Вращение рандомизированно изменяемого объекта.
Как это сделать в canvas? Или вообще не получится?

Пример:
- отрисованный объект (не подгружаемый). Например, стрелка заданного размера, цвета (именно нарисованная как пятиугольник).
- ориентация "вверх-вниз-влево-вправо". 90 град. Random.
- изменение положения объекта (центра) в пределах квадрата со стороной в 2 раза больше длины объекта. Random. Шаг 10 пикселей.
- изменение размера объекта. Увеличение/уменьшение с шагом 0,1 от начального размера до в 2-е увеличенного. Random.
- таймер 1 секунда, счетчик до 10.

Т.е. стрелка каждую секунду меняет свое положение, размер и ориентацию.

Не получаются совместные вращения с перемещением центра вращения в центр рандомизированно построенного смещенного объекта. Учусь... Находил примеры для подгружаемых рисунков. Аналогия не получается.. А может и нельзя сделать? М.б. нужны библиотеки или по-другому как-то?
Ответить с цитированием
  #2 (permalink)  
Старый 13.12.2013, 18:32
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

Я тоже только учусь, но если каждую секунду воздействовать на свойства в CSS (размер, угол вращения), то может получится.. а canvas вроде для цвета, но я точно не утвеждаю.
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2013, 18:57
Интересующийся
Отправить личное сообщение для Zemsky Посмотреть профиль Найти все сообщения от Zemsky
 
Регистрация: 13.12.2013
Сообщений: 15

Вот пытаюсь:

<!DOCTYPE HTML>
<html>                                                
<head>                                                      
<script>

        setInterval(function() {

        var canvas=document.getElementById("myCanvas");
	var context=canvas.getContext("2d");
// Очистка холста        
    context.clearRect(0, 0, canvas.width, canvas.height);    
// Размеры квадрата.        
        var rectWidth = 40;
	var rectHeight = 40;          
// Расчет угла поворота по часовой стрелке
        var q1 = Math.floor((Math.round(Math.random()*10))/4);
        var q2 = Math.floor((Math.round(Math.random()*10))/4);
// Расчет смещения стимула по X и Y 	   
        var x1 = 20+Math.round((Math.random()*10));
        var y1 = 20+Math.round((Math.random()*10));
//        var x2 = 100+Math.round(Math.random()*100)/10);
//        var y2 = 100+Math.round(Math.random()*100)/10);                 

 
 
  
// Смещение начала осей координат в центр фигуры
	context.translate(canvas.width/2,canvas.height/2); 		
// Смещение фигуры
        context.translate(x1,y1);
        //context.translate(-x2,-y2);
// Поворот фигуры
        context.rotate(Math.PI/q1);
        context.rotate(Math.PI/q2);
 
// Рисование квадрата

        context.fillStyle="#ff0000";
	context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);
// Вставка символа
	context.font="30pt Calibri";
	context.textAlign="center";
	context.fillStyle="#0000ff";
	context.fillText("Ю",0,15); }, 200);
 
</script>
</head>
<body>
	<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

Последний раз редактировалось Zemsky, 13.12.2013 в 19:32. Причина: исправления
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2013, 19:33
Интересующийся
Отправить личное сообщение для Zemsky Посмотреть профиль Найти все сообщения от Zemsky
 
Регистрация: 13.12.2013
Сообщений: 15

Сообщение от Дзен-трансгуманист Посмотреть сообщение
Пожалуйста, отформатируйте свой код!
Так сделал?
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2013, 20:02
Профессор
Отправить личное сообщение для Faab Посмотреть профиль Найти все сообщения от Faab
 
Регистрация: 16.04.2012
Сообщений: 310

Наверное он просил это (чистый JS):
setInterval(function() {

        var canvas=document.getElementById("myCanvas");
	var context=canvas.getContext("2d");
// Очистка холста        
    context.clearRect(0, 0, canvas.width, canvas.height);    
// Размеры квадрата.        
        var rectWidth = 40;
	var rectHeight = 40;          
// Расчет угла поворота по часовой стрелке
        var q1 = Math.floor((Math.round(Math.random()*10))/4);
        var q2 = Math.floor((Math.round(Math.random()*10))/4);
// Расчет смещения стимула по X и Y 	   
        var x1 = 20+Math.round((Math.random()*10));
        var y1 = 20+Math.round((Math.random()*10));
//        var x2 = 100+Math.round(Math.random()*100)/10);
//        var y2 = 100+Math.round(Math.random()*100)/10);                 

  
// Смещение начала осей координат в центр фигуры
	context.translate(canvas.width/2,canvas.height/2); 		
// Смещение фигуры
        context.translate(x1,y1);
        //context.translate(-x2,-y2);
// Поворот фигуры
        context.rotate(Math.PI/q1);
        context.rotate(Math.PI/q2);
 
// Рисование квадрата

        context.fillStyle="#ff0000";
	context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);
// Вставка символа
	context.font="30pt Calibri";
	context.textAlign="center";
	context.fillStyle="#0000ff";
	context.fillText("Ю",0,15); }, 200);

Последний раз редактировалось Faab, 13.12.2013 в 20:05.
Ответить с цитированием
  #6 (permalink)  
Старый 13.12.2013, 21:34
Интересующийся
Отправить личное сообщение для Zemsky Посмотреть профиль Найти все сообщения от Zemsky
 
Регистрация: 13.12.2013
Сообщений: 15

Сообщение от Дзен-трансгуманист Посмотреть сообщение
Zemsky,

Кстати, у вас эффект всех context.translate и context.rotate будет складываться, и получится, что вся картинка через несколько кадров уедет куда-то за экран.
Перед изменениями трансформаций желательно сохранить контекст, а после рендеринга восстановить.
Спасибо. Понял. Буду пробовать.
Ответить с цитированием
  #7 (permalink)  
Старый 18.12.2013, 19:23
Интересующийся
Отправить личное сообщение для Zemsky Посмотреть профиль Найти все сообщения от Zemsky
 
Регистрация: 13.12.2013
Сообщений: 15

Попробовал сделать цикл. Чтобы значение угла поворота квадрата не повторялось подряд. В чем я ошибся?

a=0;
		
		// Первое объявление переменных для проверки неповторения значения q
		var q=0;  
		var qold=0;


	
        b=setInterval (function() {
        var canvas=document.getElementById("myCanvas");
	    var context=canvas.getContext("2d");
// Размеры квадрата.        
        var rectWidth = 40;
	    var rectHeight = 40;          
// Сохранение 
        context.save();
// Очистка холста 
        context.clearRect(0, 0, canvas.width, canvas.height);      
// Смещение начала осей координат в центр фигуры
        context.translate(canvas.width/2+Math.round((Math.random()*100)-50),canvas.height/2+Math.round((Math.random()*100)-50)); 		

		
		// Алгоритм поворота квадрата с проверкой неповторения значения q 
		
		// Расчет угла поворота по часовой стрелке
        if (q==qold) {
		q = Math.floor((Math.random()*10)/3)*0.5;}
		// Поворот  	
		context.rotate(Math.PI*q);
		qold=q;
		
		
		
// Рисование квадрата
        context.fillStyle="#ff0000";
	    context.fillRect(0,0,rectWidth,rectHeight);
// Вставка символа
	    context.font="30pt Calibri";
	    context.textAlign="center";
	    context.fillStyle="#0000ff";
	    context.fillText("W",20,33);
        a++;
        if(a==50){clearInterval(b)};
		// Восстановление
        context.restore(); 
        }, 1000);
Ответить с цитированием
  #8 (permalink)  
Старый 18.12.2013, 19:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Zemsky,
Вариант...
Сообщение от Zemsky
Чтобы значение угла поворота квадрата не повторялось подряд
<!DOCTYPE html>

<html>
<head>
  <title></title>
  <meta charset="utf-8">
</head>

<body>
  <canvas id="myCanvas" width="400" height="400"></canvas> <script>
  var a = 0;

  // Первое объявление переменных для проверки неповторения значения q
  var q = 0;
  var qold = 0;
  var b = setInterval(function () {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // Размеры квадрата.
    var rectWidth = 40;
    var rectHeight = 40;
    // Сохранение
    context.save();
    // Очистка холста
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Смещение начала осей координат в центр фигуры
    context.translate(canvas.width / 2 + Math.round((Math.random() * 100) - 50), canvas.height / 2 + Math.round((Math.random() * 100) - 50));


    // Алгоритм поворота квадрата с проверкой неповторения значения q

    // Расчет угла поворота по часовой стрелке

    do {
        q = Math.floor((Math.random() * 10) / 3) * 0.5
    } while (q == qold)

    // Поворот
    context.rotate(Math.PI * q);
    qold = q;

    // Рисование квадрата
    context.fillStyle = "#ff0000";
    context.fillRect(0, 0, rectWidth, rectHeight);
    // Вставка символа
    context.font = "30pt Calibri";
    context.textAlign = "center";
    context.fillStyle = "#0000ff";
    context.fillText("\u2603", 20, 33);
    a++;
    if (a == 50) {
        clearInterval(b)
    };
    // Восстановление
    context.restore();
  }, 1000);
  </script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 18.12.2013, 20:09
Интересующийся
Отправить личное сообщение для Zemsky Посмотреть профиль Найти все сообщения от Zemsky
 
Регистрация: 13.12.2013
Сообщений: 15

Правильно ли я понял, что надо было применить другой цикл? Сейчас еще раз осмыслю. Спасибо! Продолжаю изучать.
Ответить с цитированием
  #10 (permalink)  
Старый 18.12.2013, 20:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

для вашего варианта сколько раз прежнее значение может повторится за 50 шагов
for (var i = 0, k = 0, q = 0, qold; i < 50; i++) {
      if (q == qold) {
          q = Math.floor((Math.random() * 10) / 3) * 0.5;
      };
      if (q == qold) k++;
      qold = q;
  }
  alert('50 -> ' + k)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 21:24
Как при чтении или записи свойства объекта вызывать функцию danik.js Общие вопросы Javascript 3 16.09.2010 17:57
Как отлаживать события? Или как сделать трассировку вызовов функций? gennad Events/DOM/Window 1 18.08.2010 13:21
Вопрос тупой, как сделать обычное по со списком или combobox иначе ? dennnyk Элементы интерфейса 1 07.07.2010 06:59
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06