Лабораторная работа по теме "Графики функций"

1. Введите скрипт, который был дан на лекции.
2. Измените его так, чтобы выводился график функции y=x³-3x
3. Добавьте на оси координат насечки, отмечающие целые значения х и у.
4. Подумайте, что нужно изменить в скрипте, чтобы точки соединялись линией, а не рисовались отдельно
5. Особенно интересные графики получаются, если задаётся выражение не у от х, а и х, и у выражаются от некоторого t. Зайдите в исходный код страницы, и разберитесь, как этот код работает и зарисуйте в конспект блок-схему его алгоритма.

Циклы на Javascript

Часто в программе нужно выполнить много однотипных действий. Например, нарисовать ряд из девяти окружностей. 

Допустим для определённости, что радиус каждой окружности должен быть равен 30 пикселей, координаты центра самой левой окружности равны (100, 50) и все расстояния между центрами должны быть по 50 пикселей по горизонтали.

Как решать эту задачу "в лоб"? Очень просто: написав такой скрипт (первый две стандартный строки, с которых должно начинаться рисование, я тут не пишу - вспоминайте!)

ctx.strokeStyle="#ff0000";//задали красный цвет линий
ctx.beginPath(); 
ctx.arc(50, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (50, 100) и радиусом 30
ctx.stroke();//обводим её

ctx.beginPath(); 
ctx.arc(100, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (100, 100) и радиусом 30
ctx.stroke();//обводим её

ctx.beginPath(); 
ctx.arc(150, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (150, 100) и радиусом 30
ctx.stroke();//обводим её

ctx.beginPath(); 
ctx.arc(200, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (200, 100) и радиусом 30
ctx.stroke();//обводим её

ctx.beginPath(); 
ctx.arc(250, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (250, 100) и радиусом 30
ctx.stroke();//обводим её

ctx.beginPath(); 
ctx.arc(300, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (300, 100) и радиусом 30
ctx.stroke();//обводим её

ctx.beginPath(); 
ctx.arc(350, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (350, 100) и радиусом 30
ctx.stroke();//обводим её

ctx.beginPath(); 
ctx.arc(400, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (400, 100) и радиусом 30
ctx.stroke();//обводим её

ctx.beginPath(); 
ctx.arc(450, 100, 30, 0, 2*Math.PI);//рисуем полную окружность с центром в (450, 100) и радиусом 30
ctx.stroke();//обводим её

Этот скрипт выдаст нам желаемый результат. Более того, некоторые недобросовестные программисты, которые получают деньги за объём кода, а не за эффективность решения, что-то подобное и делают.

В чём недостатки такого подхода?

1. Большой объём программного кода, в котором сложно разобраться и немудрено сделать ошибку

2. Большая сложность модификаций (если бы мы решили уменьшить радиус всех окружностей, то понадобилось бы вносить исправления в 9-ти строках)

Поэтому нужно применить другой подход – зацикливание программы. Чтобы составить циклический алгоритм, следует ответить на 3 вопроса:

1. Что общего в командах?
2. Чем они отличаются?
3. До каких пор нужно продолжать выполнять команды?

Для нашего конкретного случая общее здесь то, что рисуются окружности, у них равны радиусы и координаты Y. Различаются же они координатами X. Рисовать их нужно до тех пор, пока координата X не превышает значение 450 пикселей.

Вот, как будет выглядеть блок-схема циклического алгоритма.

Теперь можно приступить к написанию более эффективной программы. Начинается она с двух стандартных строк:

var canvas=document.getElementById("C1");//получаем сам холст из тела документа 
var ctx = canvas.getContext("2d");//получаем контекст этого холста, к которому далее будем обращаться с командами

Теперь производим инициализацию переменных, задаём их начальные значения.

var x = 50
var y = 100
var r = 30

Теперь нужно проверить, не превысило ли х значения 450. Но нужно использовать не if, а другое ключевое слово: while, так как это вход не в ветку, а в цикл.

while (x<=450){

Теперь рисуем окружность с центром в (х, у) и радиусом r.
ctx.strokeStyle="#ff0000";//задали красный цвет линий
ctx.beginPath(); 
ctx.arc(x, y, y, 0, 2*Math.PI);//рисуем полную окружность с центром 
ctx.stroke();//обводим её

Теперь увеличиваем х на 50 и закрываем цикл
x = x+50
}

Вот и всё! Этот короткий скрипт нарисует то же самое, что и предыдущий длинный.

Самостоятельные задания:
1. Как сделать так, чтобы радиус окружностей был 20 пикселей?
2. Как сделать так, чтобы окружности были внутри сиреневого цвета?
3. Как сделать так, чтобы окружности шли не в ряд, а в столбик?

В шаге цикла можно менять сразу несколько параметров.

Допустим, нужно нарисовать вот такую картину:

Тогда, кроме
x = x+50
нужно дописать:
y = y+35;
r = r+10;

и всё будет работать так, как надо.

Пример 2.

Обратив внимание, что это пучок отрезков. Отрезок задаётся четырьмя числами: x1, y1, x2, y2. У всех отрезков координаты у неизменны, координата х1 увеличивается, а х2 – уменьшается.

Вот как будет выглядеть цикл

Пишем скрипт.

var x1 = 0
var y1 = 0
var x2 = 800
var y2 = 600

ctx.strokeStyle="#ff00ff";//цвет линий можно задать один раз, вне цикла
while (x1<=800){
ctx.beginPath(); 
ctx.moveTo(x1, y1);//ставим карандаш в точку (х1, у1)
ctx.lineTo(x2, y2);//ведём его в точку (х2, у2)
ctx.stroke();//прорисовываем линию

x1 = x1+10
x2 = x2-10
}

Задания для самостоятельной работы (для каждого из них в конспекте должна быть составлена программа)