Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.69/13: Рейтинг темы: голосов - 13, средняя оценка - 4.69
48 / 87 / 11
Регистрация: 12.08.2013
Сообщений: 474

Как с помощью тригонометрических функций расположить элемент под определённым градусом

13.07.2014, 23:33. Показов 2708. Ответов 12
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
как с помощью тригонометрических функций Math.sin() и Math.cos() можно расположить элемент под определённым градусом, например в какой нибудь точке на окружности?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
13.07.2014, 23:33
Ответы с готовыми решениями:

С помощью тригонометрических функций изобразить подобие пружины
Здравствуйте! Задача стоит такая: нужно с помощью тригонометрических функции или каких-либо других, изобразить подобие пружины (желательно...

Как реализовать бросок тела под заданным градусом?
подскажите простым языком как можно реализовать на builder'e бросок тела с заданным градусом подбрасывания, не прошу готовую программу,...

техника под градусом
Видел по ящику выпуск "авиаторов", где один сюжет начался со взлёта ИЛ-76 градусов за 80 к горизонту, то есть даже не как истребитель, а...

12
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
14.07.2014, 02:26
используя параметрическое уравнение окружности

https://www.cyberforum.ru/cgi-bin/latex.cgi?\begin{cases} & l = {l}_{0} + R \ast \cos \varphi  \\ & t = {t}_{0} - R \ast \sin \varphi \end{cases}

где l0, t0, R и φ - координаты центра, радиус окружности и угол

пример реализации
1
48 / 87 / 11
Регистрация: 12.08.2013
Сообщений: 474
14.07.2014, 04:45  [ТС]
kalabuni, спасибо за пример, а можно ли для начала, что-нибудь полегче, чтобы совсем-совсем простой пример был?

я только начал вспоминать тригонометрию, школу закончил более 10 лет назад... не помню уже ничего, и мне хотелось бы увидеть пример самый простой, если тебя это не затруднит, буду премного благодарен
0
1 / 1 / 1
Регистрация: 09.07.2014
Сообщений: 5
14.07.2014, 10:49
Как я понял у вас сейчас проблема больше с математикой чем с JS?

Нужно вспомнить пару вещей:

1) На плоскости точка может быть задана двумя декартовыми координатами x и y;

2) Уравнение окружности в декартовых координатах имеет вид https://www.cyberforum.ru/cgi-bin/latex.cgi?x^2 + y^2 = R^2, где R - радиус окружности. Те окружность заданного радиуса строится примерно так: для каждого x в интервале от -R до +R вычисляется y по формуле https://www.cyberforum.ru/cgi-bin/latex.cgi?y = \pm sqrt(R^2-x^2)

3) Параметрическое уравнение окружности с центром в начале координат, как было сказано товарищем выше имеет вид
https://www.cyberforum.ru/cgi-bin/latex.cgi?x = R*cos\varphi
https://www.cyberforum.ru/cgi-bin/latex.cgi?y = R*sin\varphi
, где https://www.cyberforum.ru/cgi-bin/latex.cgi?\varphi пробегает значения от 0 до 360 градусов.
1
388 / 275 / 76
Регистрация: 19.09.2011
Сообщений: 828
14.07.2014, 12:06
Justff, http://jsbin.com/norev/1/edit , http://jsbin.com/norev/2/edit

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var canvas = document.createElement("canvas").getContext("2d");
document.body.appendChild(canvas.canvas);
 
var circle = {x: 10, y: 10, r: 10};
var angle = 0; // radian
var offset = {x: 40, y: 40};
var distance = 30;
 
var update = function(){
  canvas.clearRect(0, 0, canvas.canvas.width, canvas.canvas.height);
  canvas.beginPath();
  
  circle.x = Math.sin(angle) * distance + offset.x;
  circle.y = Math.cos(angle) * distance + offset.y;
  canvas.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
  canvas.fill();
  angle += 0.1;
  
  requestAnimationFrame(update);
};
 
update();
если хочешь в градусах:
JavaScript
1
2
  circle.x = Math.sin(angle / 180 * Math.PI) * distance + offset.x;
  circle.y = Math.cos(angle / 180 * Math.PI) * distance + offset.y;
но в графике обычно применяются матрицы, их тоже придется "вспоминать"
1
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
14.07.2014, 17:08
Вот ещё простой пример на дивах:
HTML5
1
2
<div style="position:absolute;left:20;top:20;width:200;height:200;border-radius:100;border-style:solid;border-width:1px;border-color:black"></div>
<div id=tochka style="position:absolute;left:20;top:20;background:blue;width:10;height:10;border-radius:5;"></div>
JavaScript
1
2
3
4
5
6
7
8
9
10
<script>
var a=0; // Угол в радианах
var t=document.getElementById("tochka");
 
setInterval(function(){
    t.style.left=115+100*Math.sin(a)+"px";
    t.style.top =115+100*Math.cos(a)+"px";
    a=a+0.1},200);
 
</script>
1
Модератор
 Аватар для Thisman
771 / 352 / 142
Регистрация: 17.07.2013
Сообщений: 992
15.07.2014, 11:06
Justff, http://jsbin.com/loquneju/14 вот откопал свой пример, когда то давно делал. Поворачивается картинка на угол, между курсором мышкой, и осью x, проходящая через центр круга, и параллельная ширине монитора. Может поможет
2
388 / 275 / 76
Регистрация: 19.09.2011
Сообщений: 828
15.07.2014, 11:18
Thisman, обнови на Math.atan2(y, x)
JavaScript
1
2
3
4
5
6
7
function getConer (x,y) {
  var oX = (x - x0);
  var oY = (y - y0);
  var angle = Math.atan2(oY, oX);
  
  crl.css('-webkit-transform', 'rotate('+angle+'rad)');
}
0
Модератор
 Аватар для Thisman
771 / 352 / 142
Регистрация: 17.07.2013
Сообщений: 992
15.07.2014, 11:39
nubideus, обновил)
0
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
16.07.2014, 01:31
А вот я когда-то экспериментировал - эфект отбрасывания динамических теней о текста через дымовое пронстранство в сторону, обратную от курсора мыши. Т. е., курсор, как бы, освещает фонарём текст где-то в прокуренном подвале: http://raya.16mb.com/59/index.htm Ссылку лучше открывать в первой половине дня,так как на бесплатном хостинге по вечерам часто перегрузки сервера.
0
Модератор
 Аватар для Thisman
771 / 352 / 142
Регистрация: 17.07.2013
Сообщений: 992
16.07.2014, 05:52
Опан, лучше использовать box-shadow, есть библиотека, очень крутая, как раз делает это. название сейчас не вспомню, к сожалению(
0
Юзер с абсолютным слухом
 Аватар для Опан
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
16.07.2014, 15:48
Я так пробовал, выходит такой недостаток - тень объекта может иметь среднюю прозрачность по отношению к объекту, но при этом её прозрачность остаётся нулевой (или видимость - стопроцентной) по отношению ко всему остальному. И второе - тень была статической и без прохождения через дым, я не знал, как её анимироть. (Хотя думаю, что это можно с помощь библиотеки.)
0
Модератор
 Аватар для Thisman
771 / 352 / 142
Регистрация: 17.07.2013
Сообщений: 992
16.07.2014, 15:52
Опан, http://bigspaceship.github.io/shine.js/ вот либа
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
16.07.2014, 15:52
Помогаю со студенческими работами здесь

Найти средину радиуса эллипса под определенным градусом
В общем задача следующая: нужно найти средину радиуса под определенным градусом, имея в наличии значение центра, длины радиуса и...

Как разработать приложение для вычисления интегралов тригонометрических функций?
Помогите пожалуйста? Как разработать приложение для вычисления интегралов тригонометрических функций?

Как подключить dll, в которой реализуется вычисления тригонометрических функций
Проект на C# (CLR) в Visual Studio 10... using System; using System.Collections.Generic; using System.ComponentModel; using...

Как создать в Word программу для вычислений значений тригонометрических функций
Как создать в Word программу для вычислений значений тригонометрических функций. Программа должна уметь вычислять тригонометрические...

Как нарисовать линию под определённым углом?
Подскажите как рисуют по координатам? Язык не знаю какой, возможно OpenCV итп. Вот нарисовал линии соответственно ноль, девяносто, сто...


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

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Новые блоги и статьи
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики.
Hrethgir 07.04.2026
Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума
kumehtar 07.04.2026
Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами
Maks 07.04.2026
1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию
Maks 07.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
Уведомление о неверно выбранном значении справочника
Maks 06.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt
8Observer8 05.04.2026
Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .
AkelPad-скрипты, структуры, и немного лирики..
testuser2 05.04.2026
Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru