
Image courtesy of Saranont Limpananont
About Project:
I found this sketch (PT_97) in last year's project folder, and I appreciate it more now. So, I've decided to share it here. This sketch uses Processing code to analyze and create lines to connect points. While creating the lines, I experimented with various methods. Each method, when combined, results in different textures.
This function demonstrates how mathematical concepts and randomness can be combined to create textures and patterns. By adjusting parameters like displacement
, noiseScale
, and amplitude
, different visual effects can be achieved. This might be useful for adding an organic, human touch to your digital drawings or prototypes.
// Function to draw a rough line between points with added noise and displacement.
void drawRoughLine(PVector start, PVector end, float displacement, int depth) {
// Determine when to stop recursion based on segment length and depth.
float threshold = max(2, amplitude + noiseStep * 10);
// Base case: draw the line if the segment is short enough or recursion depth is too great.
if (depth > 20 || dist(start.x, start.y, end.x, end.y) < threshold) {
float variableStroke = map(dist(start.x, start.y, end.x, end.y), 0, width, 1, 9);
variableStroke += random(-0.5, 0.5); // Add randomness to line thickness.
strokeWeight(variableStroke * (2 * mouseYFactor)); // Adjust line thickness.
// Draw the line segment.
line(start.x, start.y, end.x, end.y);
return;
}
// Calculate the midpoint of the line segment.
PVector midpoint = new PVector((start.x + end.x) / 2, (start.y + end.y) / 2);
// Adjust the midpoint using random displacement and noise (a form of randomness).
float noiseValue = noise(midpoint.x * noiseScale, midpoint.y * noiseScale, t);
midpoint.y += (random(-displacement, displacement) + (noiseValue - 0.5) * amplitude) * noiseStep;
// Recursively draw the two halves of the line segment.
drawRoughLine(start, midpoint, displacement / 2, depth + 1);
drawRoughLine(midpoint, end, displacement / 2, depth + 1);
}
Parameter Adjustment:
displacement
: Controls the range of random displacement at the midpoint. Higher values make the line more jagged, while lower values create smoother lines.noiseScale
: Scales input for the noise function. Higher values cause rapid changes, making lines more irregular; lower values produce smoother transitions.amplitude
: Determines displacement extent added by noise. Higher values make lines rougher; lower values result in subtler adjustments.noiseStep
: Controls the overall impact of noise on the midpoint displacement. Higher values increase displacement, while lower values reduce it.depth
: Limits recursion to prevent infinite loops. Higher depth allows more detailed lines, while lower depth results in simpler lines.threshold
: Sets the minimum segment length before recursion stops. Lower values provide finer detail; higher values give coarser detail.variableStroke
: Adjusts line thickness based on segment length, adding randomness for texture. Changes inmap()
andrandom()
values affect line thickness and variation.mouseYFactor
: Multiplies stroke weight by a factor influenced by the mouse's Y position, dynamically controlling line thickness.t
: Time variable for the noise function, enabling dynamic, animated roughness in the line.
Drawing Rough Lines: Sample Usage
This is an example of applying the drawRoughLine
function to create the drawing canvas below.
How to use:
- Draw - Use the mouse on the canvas below.
- Reset - Press the RESET button, or press the 'r' key.
ผมค้นเจองานชิ้นนี้ (PT_A97) ในโฟลเดอร์เก่าของปีที่แล้ว เห็นแล้วชอบกว่าเมื่อครั้งที่ทำเสร็จ (เพราะถ้าตอนนั้นชอบก็คงเก็บไว้ในอีกโฟลเดอร์) เลยนำมาบันทึกเก็บไว้
เป็นงานเสก็ตช์ที่ใช้โค้ดในการวิเคราะห์การสร้างเส้นเพื่อเชื่อมจุดเข้าหากัน เมื่อเส้นเหล่านั้นเกิดการสานกันมากน้อยตามจำนวนจุดที่มีค่าความสว่างใกล้เคียงกันก็จะเกิดเป็นภาพ นอกจากวิธีการเชื่อมโยงเส้น ที่สามารถทำได้หลายแบบ ลักษณะของเส้นเองนั้นผมได้ทำการทดลองไว้หลายประเภทเช่นกัน แต่ละประเภทเมื่อสานกันแล้วก็จะให้พื้นผิวที่แตกต่างกันไป ภาพที่นำเสนอนี้มาจากการสร้างเส้นที่มีลักษณะหยาบ (รายละเอียดอยู่ในตัวอย่างข้างบน)
ผมอยากทดลองหาสมดุลของการสร้างงานจากพื้นฐานคณิตศาสตร์, ศิลปะนามธรรม/รูปธรรม จึงทดลองทำงานลักษณะนี้ขึ้นมา งานที่ทำแล้วชอบก็อาจจะเก็บไว้ส่วนหนึ่ง งานที่ทดลองแล้วไม่ได้สนใจก็อาจจะไม่ได้แยกออกมาเก็บไว้ แต่หลายครั้งที่พอย้อนกลับไป ตัวเราก็เปลี่ยนไป งานที่อาจจะเคยมองข้าม ก็กลับมาน่าสนใจสำหรับเราได้เช่นกัน
ขอบคุณครับ
Saranont Limpananont
2024.06.021
*These sketches were made using Processing, visual art, and interactive media programming language.
