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

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

13.07.2014, 23:33. Показов 2684. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru