Циклы на 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
}

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

Изучаем графический редатор GIMP

Мы начинаем изучать графический редактор GIMP.
Вот по этим урокам: http://gimp.nas2.net/?n=4
Предлагаю начать с урока "Звёздное небо".

Циклы

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

Конечно, такую картинку можно было бы нарисовать, введя 15 команд CIRCLE, но это нерациональный путь. К тому же, если понадобится в такой программе что-то изменить, это будет очень сложно.

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

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

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

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

10 SCREEN 9

20 CLS

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

30 X = 20: Y = 30: R = 15

Здесь мы в одной строке поместили несколько команд, разделив их двоеточиями.

Приступаем к рисованию собственно окружности:

40 CIRCLE(X,Y),R

Эта строка -  то основное, ради чего мы использовали цикл. Она называется телом цикла. В теле цикла может быть много строк.

Теперь производим шаг цикла – увеличиваем координату X окружности:

50 X = X+35

И проверяем, нужно ли вернуться и выполнить цикл ещё раз. Возвращаемся мы если X<550. Возвращаться нужно в 40ю строку. По-русски команда на возврат будет выглядеть так:

Если Х< 550 то перейти к 40й строке программы.

На Бейсике это выглядит так:

60 IF X<550 THEN GOTO 40

Обратите внимание, оператор GOTO пишется слитно.

Программа готова.

В шаге цикла можно изменять несколько параметров. Например, если мы хотим, чтобы окружности шли вот так:

Строка 50 должна выглядеть:

50 X = X+35: Y=Y+35: R=R+5

Пример 2.

Линия задаётся четырьмя числами: X1, Y1, X2, Y2. у всех линий координаты Y неизменны, координата X1 увеличивается, а X2 – уменьшается.

Пишем программу.

10 SCREEN 9

20 CLS

30 X1 = 0: Y1 = 0: X2 = 550: Y2 = 330

40 LINE(X1,Y1)–(X2,Y2)

50 X1 = X1+10: X2 = X2-10

60 IF X1<=550 THEN GOTO 40

Подумайте, как сделать, чтобы линии были разноцветными.

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