Создайте сетку соседних точек, не используйте функцию line() (Обработка)

Question

Я пытаюсь создать сетку (то есть ряд пересекающихся горизонтальных и вертикальных линий), состоящую из соседних точек (но изменяя расстояние между точкой), а не с помощью функции line().

Это мой код:

int verticalNumberLines=20; 
int horizontalNumberLines=20; 
int space=5; 
size(400, 400); 
background(#99ff66); 
strokeWeight(2); 

for (int i=0; i<width; i+=width/verticalNumberLines) 
{ 
    for (int j=0; j<height; j+=space) // j=j+numero variabile 
    { 
    point(i, j); 
    } 
} 
for (int j=0; j<height; j+=height/horizontalNumberLines) 
{ 
    for (int i=0; i<width; i+=space) 
    { 
    point(i, j); 
    } 
} 

Я хотел бы иметь эту сетку ниже (не цвет) Может кто-нибудь сказать мне, где я делаю ошибки?

Answer 1

Спасибо за улучшение вашего вопроса. На это гораздо легче ответить, чем раньше!

Первым шагом, на который вы должны привыкнуть, является точное описание вашей цели. Вы разместили картинку, и это здорово, но что именно происходит в этой картине? Можете ли вы точно описать, что отличается от этой картины от того, что происходит в вашем коде? Попробуйте написать несколько шагов на английском языке, чтобы создать такую ​​картину. Когда у вас будут эти шаги, гораздо легче начать думать о коде.

Я бы сказал, что линия выглядит так, что каждая точка имеет случайную флуктуацию, добавленную к ней. Таким образом, шаги могут быть следующими:

• Нарисуйте одну строку, начиная с одного конца и немного перемещая перо по линии, чтобы нарисовать точку.
• Прежде чем рисовать каждую точку, передвиньте ручку в случайном порядке немного: если вы рисуете вертикальную линию, переместите перо влево или вправо; если вы рисуете горизонтальную линию, переместите перо вверх или вниз.
• Повторите этот процесс, чтобы нарисовать линии с интервалом на картинке.

Теперь, когда у вас есть эти шаги, вы можете начать думать о коде.

Итак, у вас есть две вложенные петли for. Первый рисует вертикальные линии, а второй рисует горизонтальные линии. Давайте сосредоточимся на одном за раз. Я собираюсь изменить имена переменных, так что это немного яснее.

for (int x=0; x<width; x+=width/verticalNumberLines) 
{ 
    for (int y=0; y<height; y+=space) // j=j+numero variabile 
    { 
    point(x, y); 
    } 
} 

Этот рисунок рисует вертикальные линии. Сначала вы создаете цикл, который выполняет итерацию над значениями x строк, а затем для каждого значения x вы создаете цикл, который выполняет итерацию над значениями y строки. Но заметьте, что это только создаст ровно разнесенные линии, так как нет никакой логики для изменения пространства между точками!

Есть три способа, вы можете подойти к решению проблемы:

• Вы можете добавить случайное значение в каждой точке. Это легко, но непредсказуемо.
• Вы можете использовать sin() или cos(), чтобы добавить флуктуацию к своей строке. Это также довольно легко, но это приводит к предсказуемым шаблонам.
• Вы также можете настроить свою переменную, которую вы изменяете.Это дает вам максимальный контроль, но включает создание другой переменной.

Пойдемте со случайным подходом, и просто добавить случайное значение в каждой точке:

for (int x=0; x<width; x+=width/verticalNumberLines) 
{ 
    for (int y=0; y<height; y+=space) // j=j+numero variabile 
    { 
    point(x + random(-2, 2), y); 
    } 
} 

Единственное, что меняется эта строка:

point(x + random(-2, 2), y); 

Теперь мы добавляя случайное значение между -2 и 2 в значение x значения координаты. Это приведет к случайным левым и правым колебаниям к вашим вертикальным линиям.

Вы могли бы сделать то же самое с вашими горизонтальными линиями:

point(x, y + random(-2, 2)); 

Это приводит к изображению, которое выглядит следующим образом:

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

Answer 2

/* 
This is my solution, thank you, guys! 
Program Description: 16. Use the random() function to create some visually interesting grids (note, a grid is not any 
arbitrary pattern, see exercise 14). 
By Laura Enria 20/02/1017 
*/ 

float verticalNumberLines= 10;             // numero delle linee verticali 
float horizontalNumberLines= 10;             // numero delle linee orizzontali 
float space= random(1, 3); //try random(1 ,5 o 20);         // spazio che viene a crearsi tra i punti casuale 
float R= random(1, 2); 
size(500, 500);                 //dimensione schermo 
background(#00001a);                //colore sfondo 
stroke(#c6ffb3);                 //colore linee e punti 
strokeWeight(R);                 //dimensione linee e punti 

for (int i=0; i<width; i+=width/verticalNumberLines)        //Fin quando i=0 passo al secondo loop 
                       //fin quando j=0 e minore(<) di height(altezza) disegno il primo punto in X0 e J0 con i che ha random 
{                    // -3e+3 e j lo stesso, poi passo a X0 e J1,J2,J3 ect. tra un punto e l'altro c'è lo spazio , 
    for (int j=0; j<height; j+=space)            //il rislutato sono linee di punti poi passo alla variabile i 
    { 
    point(i+random(-3, 3), j+random(-3, 3));                 //disegno il punto 
    } 
} 
for (int j=0; j<height; j+=height/horizontalNumberLines)      //stesso ragionamento 
{ 
    for (int i=0; i<width; i+=space) 
    { 
    point(i+random(-3, 3), j+random(-3, 3));               //incremento la casualità della i e j 
    } 
}