Подсказки появятся тут.
Hints after video one. This may never be seen?

Нарисуй картинку с помощью окружностей и прямоугольнков!

Ты можешь сделать автопортрет, пришельца или что-то более абстрактное. Пока пусть все будет черно-белое, работать с цветом мы научимся чуть позже.

Ты можешь потратить на задание сколько угодно времени, но мы рекомендуем уложиться в 10 минут.

Шпаргалка
Чтобы нарисовать прямоугольник: rect(a,b,c,d);
Чтобы нарисовать окружность: ellipse(a,b,c,d);

a — X (горизонтальная) координата верхного левого угла фигуры
b — Y (вертикальная) координата верхного левого угла фигуры
c — ширина фигуры
d — высота фигуры

Более подробное описание функций работы с прямоугольниками и окружностями смотри на processing.org (информация на английском).

Добавь цвета в свой проект!

Ты можешь работать с примером ниже или загрузить свой предыдущий проект с помощью пункта "Мой последний проект" ниже.

Ты можешь потратить на задание сколько угодно времени, но мы рекомендуем уложиться в 10 минут.

Шпаргалка
Задать цвет фона: background(r,g,b);
Задать цвет обводки: stroke(r,g,b);
Задать цвет заливки: fill(r,g,b);

Не забудь вызвать функции stroke() и fill() прежде чем рисовать фигуры!

r — величина красной компоненты, от 0 (нет) до 255 (максимум)
g — величина зеленой компоненты, от 0 (нет) до 255 (максимум)
b — величина синей компоненты, от 0 (нет) до 255 (максимум)

Чтобы узнать больше смотри описание функций background, stroke и fill на сайте processing.org.

Сделай анимацию с помощью переменных mouseX и mouseY!

Ты можешь работать с примером ниже или загрузить свой предыдущий проект с помощью пункта "Мой последний проект" ниже.

Ты можешь потратить на задание сколько угодно времени, но мы рекомендуем уложиться в 10 минут.

Если ты забыл правила записи setup() и draw() вот пример!

void setup() {
  size(500,400);
}

void draw() {
  background(0,0,0);
  fill(255,255,255);
  ellipse(mouseX,mouseY,60,60);
}

Для этого упражениния мы рекоммендуем установить размер холста 500 на 400 пикселей, но ты всегда можешь поэкспериментировать с размерами больше и меньше!

Чтобы узнать больше смотри описание mouseX и mouseY на сайте processing.org.

Используй нажатие кнопки мыши для изменения действий программы!

Ты можешь работать с примером ниже или загрузить свой предыдущий проект с помощью пункта "Мой последний проект" ниже.

Ты можешь потратить на задание сколько угодно времени, но мы рекомендуем уложиться в 10 минут.

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

void setup() {
  size(500,400);
}

void draw() {
  background(0);
  if (mousePressed) {
    fill(0,255,0);
  } else {
    fill(255,0,0);
  }
  ellipse(mouseX,mouseY,60,60);
}

Также ты можешь сделать заливку на весь фон когда кнопка мышки нажата:

void setup() {
  size(500,400);
  background(0);
}

void draw() {
  if (mousePressed) {
    background(0);
  }
  ellipse(mouseX,mouseY,60,60);
}

Спасибо за участие!

Если ты хочешь знать больше обязательно зайди на сайт Processing. Также ты можешь посмотреть другие не менее интересные уроки на code.org. Если у тебя есть вопросы или отзывы по нашим урокам ты можешь написать нам здесь!



Этот самоучитель был создан в рамках проекта Computer Science Education Week. Если ты хочешь принять в нем участие пожалуйста зарегистрируйся на code.org.

rect(250, 200, 150, 100);
rect(250, 200, 150, 100); rect(50, 80, 40, 25);
rect(250, 200, 150, 100); rect(50, 80, 40, 25); rect(400, 10, 15, 100);
rect(250, 200, 150, 100);
rect(250, 200, 150, 100); ellipse(250,200,200,200);
ellipse(250,200,200,200); rect(250, 200, 150, 100);
rect(250,200,100,75);
stroke(0); rect(250,200,100,75);
stroke(0); fill(128); rect(250,200,100,75);
stroke(255,0,0); fill(128); rect(250,200,100,75);
stroke(255,0,0); fill(0,0,255); rect(250,200,100,75);
background(216,225,149); stroke(255,0,0); fill(0,0,255); rect(250,200,100,75);
void setup() { }
void setup() { } void draw() { }
void setup() { size(500,400); } void draw() { }
void setup() { size(500,400); } void draw() { background(0); }
void setup() { size(500,400); } void draw() { background(0); stroke(255, 255, 255); fill(160, 220, 90); ellipse(250, 200, 300, 300); fill(160, 210, 230); rect(250, 200, 100, 75); }
void setup() { size(500,400); } void draw() { background(0); stroke(255); fill(128); ellipse(250, 200, 100, 100); }
void setup() { size(500,400); } void draw() { background(0); stroke(255); fill(128); ellipse(mouseX, mouseY, 100, 100); }
void setup() { size(500,400); background(0); } void draw() { stroke(255); fill(128); ellipse(mouseX, mouseY, 100, 100); }
void setup() { size(500,400); } void draw() { background(0); stroke(255); fill(128); ellipse(250, 200, 100, 100); }
void setup() { size(500,400); } void draw() { background(0); stroke(255); fill(128); ellipse(250, 200, 100, 100); if (mousePressed) { rect(250,200,100,100); } }
void setup() { size(500,400); } void draw() { background(0); stroke(255); fill(128); ellipse(250, 200, 100, 100); if (mousePressed) { rect(250,200,100,100); } }
void setup() { size(500,400); } void draw() { background(0); stroke(255); fill(128); if (mousePressed) { rect(250,200,100,100); } else { ellipse(250, 200, 100, 100); } }
void setup() { size(500,400); background(0); } void draw() { stroke(255); fill(128); ellipse(mouseX, mouseY, 100, 100); }
void setup() { size(500,400); background(0); } void draw() { if (mousePressed) { background(0); } stroke(255); fill(128); ellipse(mouseX, mouseY, 100, 100); }