Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Здравствуйте, Ильгиз. Математика - царица наук (Карл Гаусс). Изучение математики начинается с детского сада, когда нас учат считать и выполнять простые арифметические операции. Любой, даже самый простейший алгоритм будет связан с арифметическими...
Я хотел узнать математика это обязательно в программирование. Пять лет назад просто из любопытства я увлекся HTML потом изучил CSS и JvaScript потом изучил PHP и Java. Как то не задумывался и начал смотреть форумы и узнал что без математики не...
Все верно, но так же необходимо зайти в: Компоновщик -> Ввод -> Дополнительные зависимости Здесь необходимо нажать изменить и в Дополнительные зависимости прописать это: SDL2.lib SDL2main.lib SDL2test.lib Без этого не заработает. (MVS 2015)
Спасибо за реализацию, она действительно быстрая. Но не все линии отрисовывает в нужную сторону... Необходимо добавить проверку для случая X-линии if(y1 "<" y0) grad=-grad; и аналогично для Y-линии if(x1 "<" x0) grad=-grad; P.S. На...
Отличные уроки(учу GL по ним), только в renderScene нужно добавить очистку буфера цвета и буфера глубины. При изменении размеров треугольники размножаются)

Счетчики и рейтинг

Яндекс.Метрика Рейтинг@Mail.ru
Язык программирования: 
Javascript
Среда программирования: 
HTML5 + JavaScript

ПОСМОТРЕТЬ СПИРАЛЬ

<head>
<meta name="mobile-web-app-capable" content="yes">
</head>
<body style="background: #000">
<canvas id="myCanvas" style="background: #000"></canvas>
<script>
canvas = document.getElementById("myCanvas")
ctx = canvas.getContext("2d")
w = canvas.width = window.innerWidth
h = canvas.height = window.innerHeight
ctx.lineWidth = 2
ctx.fillStyle = '#fff'
ctx.font = '40px Arial'
 
n=1 //начальное количество точек на 360 градусов (на каждый оборот)
scale=1 //для зум-эффекта
l=Math.PI*2/n // угол/шаг
k=0.0005 //коэфициент увеличения точности аппроксимации
s=0.0001 //скорость зума
bits=1
 
function draw(){
	ctx.clearRect(0, 0, w, h)
	ctx.beginPath()
	ctx.moveTo(w/2,h/2)
	for(var t=l;t<=200;t+=l) {
		/*** создаем эффект глубины при помощи градиента яркости ***/
		var x = Math.round(Math.pow(((t+t-l)/2)/200,2)*230+25)
		u=((n*100)%10)*0.2
		if(u>1)u=2-u
 
		/**меням цвет с помощью битовых масок**/
 		if(bits/4>=1) r=Math.round(x*u)
 		else r=x
 		if((bits%4)/2>=1) g=Math.round(x*u)
 		else g=x
 		if(bits%2>=1) b=Math.round(x*u)
 		else b=x
 
		ctx.strokeStyle = 'rgb('+r+','+g+','+b+')'
	    /*****************************************/
		/*** непосредственно прорисовываем спираль в декартовых координатах (соединяем точки)***/
		if(t+l>200){// если точка последняя - прорисовываем линию постепенно во избежание дерганий
			prev={
				x:scale*(t-l)*Math.cos(t-l)+w/2,
				y:scale*(t-l)*Math.sin(t-l)+h/2}
			cur={
				x:scale*t*Math.cos(t)+w/2,
				y:scale*t*Math.sin(t)+h/2}
			c=200/l-Math.floor(200/l)
			ctx.lineTo(prev.x+(cur.x-prev.x)*c, prev.y+(cur.y-prev.y)*c)
			ctx.stroke(); ctx.closePath()
		}
		else{
			ctx.lineTo(scale*t*Math.cos(t)+w/2, scale*t*Math.sin(t)+h/2)
			ctx.stroke(); ctx.closePath();   ctx.beginPath()
			ctx.moveTo(scale*t*Math.cos(t)+w/2, scale*t*Math.sin(t)+h/2)
		}
	}
	n+=k //увеличиваем количество точек на на каждый оборот
	// эффект вращения образуется именно из-за этого. при больших n (к примеру 20) спираль принимает знакомый, более менее округлый вид
	if(((n*100)%10)>=5 && (((n-k)*100)%10)<=5)bits++ //следующая битова маска цвета
	if(bits==7)bits=1
	scale+=100*s*scale //зум
	if(scale>3||scale<1)
		s=-s //обращаем направление зума
	l=Math.PI*2/n
	ctx.fillText((n).toFixed(3)+"",20,50)
	requestAnimationFrame(draw)//переходим к следующему фрейму
}
draw()//начинаем цикл
</script>

Прикрепленный файлРазмер
melnichuk_inSpiral.rar1.09 кб