Processing:Примеры/Трансформация - История изменений

Myagkij в 03:55, 27 августа 2023

2023-08-27T03:55:03Z

@@ Строка 1: / Строка 1: @@
 {{Processing панель перехода}}
 {{Перевод от Сubewriter}}
 {{Myagkij-редактор}}
 =Описание<ref>[https://processing.org/examples/morph.html processing.org - Morph]</ref>=
@@ Строка 214: / Строка 211: @@
 <references />
 {{Навигационная таблица/Портал/Processing}}

EducationBot в 08:01, 20 мая 2023

2023-05-20T08:01:47Z

← Предыдущая версия		Версия от 12:01, 20 мая 2023
Строка 4:		Строка 4:
	{{Myagkij-редактор}}		{{Myagkij-редактор}}

	~~{{Черновик}}~~

	=Описание<ref>[https://processing.org/examples/morph.html processing.org - Morph]</ref>=		=Описание<ref>[https://processing.org/examples/morph.html processing.org - Morph]</ref>=
Строка 114:		Строка 114:
	}}		}}

	<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS~~" enclose="div~~">		<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS">
	// Два объекта «ArrayLists» для хранения вершин двух фигур.		// Два объекта «ArrayLists» для хранения вершин двух фигур.
	// Для этого примера нужно, чтобы в обеих фигурах		// Для этого примера нужно, чтобы в обеих фигурах
Строка 230:		Строка 230:
	\|Высота логотипа издателя для schemaNewsArticle=45		\|Высота логотипа издателя для schemaNewsArticle=45
	}}		}}
	{{Навигационная таблица/~~Справочник языка Processing}}~~		{{Навигационная таблица/Портал/Processing}}
	~~{{Навигационная таблица~~/Processing~~/Примеры}}~~
	~~{{Навигационная таблица/Телепорт~~}}

Myagkij: /* Внешние ссылки */

2022-05-07T04:19:34Z

Внешние ссылки

← Предыдущая версия		Версия от 08:19, 7 мая 2022
Строка 232:		Строка 232:
	{{Навигационная таблица/Справочник языка Processing}}		{{Навигационная таблица/Справочник языка Processing}}
	{{Навигационная таблица/Processing/Примеры}}		{{Навигационная таблица/Processing/Примеры}}
			{{Навигационная таблица/Телепорт}}

Myagkij в 14:48, 31 июля 2018

2018-07-31T14:48:47Z

Новая страница

{{Processing панель перехода}}

{{Перевод от Сubewriter}}
{{Myagkij-редактор}}

{{Черновик}}

=Описание<ref>[https://processing.org/examples/morph.html processing.org - Morph]</ref>=

Трансформация одной фигуры в другую при помощи интерполяции вершин.

==Пример==

{{5pjs
|Код=
<html>
/**
* Morph.
*
* Changing one shape into another by interpolating
* vertices from one to another
*/

// Two ArrayLists to store the vertices for two shapes
// This example assumes that each shape will have the same
// number of vertices, i.e. the size of each ArrayList will be the same
var circle = [];
var square = [];

// An ArrayList for a third set of vertices, the ones we will be drawing
// in the window
var morph = [];

// This boolean variable will control if we are morphing to a circle or square
var state = false;

function setup() {
var canvas = createCanvas(640, 360);
canvas.parent("p5container");

// Create a circle using vectors pointing from center
for (var angle = 0; angle < 360; angle += 9) {
// Note we are not starting from 0 in order to match the
// path of a circle.
var v = p5.Vector.fromAngle(radians(angle-135));
v.mult(100);
circle.push(v);
// Let's fill out morph ArrayList with blank p5.Vectors while we are at it
morph.push(createVector());
}

// A square is a bunch of vertices along straight lines
// Top of square
for (var x = -50; x < 50; x += 10) {
square.push(new p5.Vector(x, -50));
}
// Right side
for (var y = -50; y < 50; y += 10) {
square.push(new p5.Vector(50, y));
}
// Bottom
for (var x = 50; x > -50; x -= 10) {
square.push(new p5.Vector(x, 50));
}
// Left side
for (var y = 50; y > -50; y -= 10) {
square.push(new p5.Vector(-50, y));
}
}

function draw() {
background(51);

// We will keep how far the vertices are from their target
var totalDistance = 0;

// Look at each vertex
for (var i = 0; i < circle.length; i++) {
var v1;
// Are we lerping to the circle or square?
if (state) {
v1 = circle[i];
}
else {
v1 = square[i];
}
// Get the vertex we will draw
var v2 = morph[i];
// Lerp to the target
v2.lerp(v1, 0.1);
// Check how far we are from target
totalDistance += p5.Vector.dist(v1, v2);
}

// If all the vertices are close, switch shape
if (totalDistance < 0.1) {
state = !state;
}

// Draw relative to center
translate(width/2, height/2);
strokeWeight(4);
// Draw a polygon that makes up all the vertices
beginShape();
noFill();
stroke(255);
for (var i = 0; i < morph.length; i++) {
var v = morph[i];
vertex(v.x, v.y);
}
endShape(CLOSE);
}
</html>
}}

<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
// Два объекта «ArrayLists» для хранения вершин двух фигур.
// Для этого примера нужно, чтобы в обеих фигурах
// было одинаковое количество вершин.
// То есть оба объекта ArrayList должны быть одинакового размера.
ArrayList<PVector> circle = new ArrayList<PVector>();
ArrayList<PVector> square = new ArrayList<PVector>();

// Еще один ArrayList для третьего комплекта вершин,
// который и будет нарисован на экране:
ArrayList<PVector> morph = new ArrayList<PVector>();

// Эта булева переменная будет контролировать, будем ли мы
// на старте программы превращаться из круга в квадрат или наоборот:
boolean state = false;

void setup() {
size(640, 360);

// Создаем круг при помощи векторов, направленных от центра:
for (int angle = 0; angle < 360; angle += 9) {
// Обратите внимание, что мы не начинаем с «0»,
// чтобы соответствовать контуру круга:
PVector v = PVector.fromAngle(radians(angle-135));
v.mult(100);
circle.add(v);
// Пока мы в «morph», давайте заполним его пустыми PVector:
morph.add(new PVector());
}

// Квадрат – это несколько вершин и прямых линий.
// Верхняя сторона квадрата:
for (int x = -50; x < 50; x += 10) {
square.add(new PVector(x, -50));
}
// Правая сторона квадрата:
for (int y = -50; y < 50; y += 10) {
square.add(new PVector(50, y));
}
// Нижняя сторона квадрата:
for (int x = 50; x > -50; x -= 10) {
square.add(new PVector(x, 50));
}
// Левая сторона квадрата:
for (int y = 50; y > -50; y -= 10) {
square.add(new PVector(-50, y));
}
}

void draw() {
background(51);

// При помощи этой переменной будем следить,
// как далеко вершины находятся от своей цели:
float totalDistance = 0;

// Проходим через каждую вершину:
for (int i = 0; i < circle.size(); i++) {
PVector v1;
// Мы трансформируемся в круг или квадрат?
if (state) {
v1 = circle.get(i);
}
else {
v1 = square.get(i);
}
// Считываем вершину, которую скоро нарисуем:
PVector v2 = morph.get(i);
// Движемся к цели:
v2.lerp(v1, 0.1);
// Проверяем, как далеко мы от цели:
totalDistance += PVector.dist(v1, v2);
}

// Если все вершины находятся близко,
// переключаемся на другую фигуру:
if (totalDistance < 0.1) {
state = !state;
}

// Рисуем относительно центра:
translate(width/2, height/2);
strokeWeight(4);
// Рисуем полигон, объединяющий в себе все вершины:
beginShape();
noFill();
stroke(255);
for (PVector v : morph) {
vertex(v.x, v.y);
}
endShape(CLOSE);
}
</syntaxhighlight>

=См.также=

=Внешние ссылки=

<references />

{{SEO
|Заголовок статьи=Processing: Трансформация / Онлайн справочник - wikihandbk.com
|Ключевые слова=processing,Трансформация ,Трансформация в processing, пример Трансформация, пример Трансформация в processing
|Описание статьи=
|Изображение статьи для Open Graph=
|Адрес страницы для schemaNewsArticle=<nowiki>http://wikihandbk.com/wiki/Processing:Примеры/Трансформация</nowiki>
|Изображение статьи для schemaNewsArticle=<nowiki></nowiki>
|Высота изображения статьи для schemaNewsArticle=
|Ширина изображения статьи для schemaNewsArticle=
|Дата публикации для schemaNewsArticle=2018-07-31
|Автор=Мякишев Е.А.
|Издатель=myagkij
|Логотип издателя для schemaNewsArticle=<nowiki>http://wikihandbk.com/ruwiki/images/6/61/Tech_geek_logo_1x.jpg</nowiki>
|Ширина логотипа издателя для schemaNewsArticle=60
|Высота логотипа издателя для schemaNewsArticle=45
}}
{{Навигационная таблица/Справочник языка Processing}}
{{Навигационная таблица/Processing/Примеры}}