Creative Code ทำ Op Art ด้วย openFrameWorks C++ การจัดการ MouseMovement

ในบทเรียนนี้เราจะมาศึกษาการใช้งานร่วมกับ Interactive กัน นั่นคือ MouseMovement ร่วมกับ openFrameWorks ที่จะมี C++ ฟังก์ชันอย่าง ofApp::mouseMoved(int x, int y ) ให้เรียกใช้ทำงานอยู่แล้วนั่นเอง

หลังจากที่เราเรียนรู้บทเรียนก่อนหน้า
Creative Coding ด้วย C++ และ openFrameworks การเขียนโปรแกรมเบื้องต้น
Creative Coding ด้วย C++ บน Visual Studio 2022 และ openFrameWorks

รอบนี้เราจะมาเรียนรู้การทำงานร่วมกับ Mouse Cursor กัน

ในงานนี้จะลองเอาแรงบันดาลใจจากศิลปิน Bridget Riley เป็นศิลปินชาวอังกฤษที่มีชื่อเสียงในการสร้างงานศิลปะที่เรียกว่า Op Art (Optical Art) ซึ่งเป็นรูปแบบศิลปะที่ใช้ลวดลายและสีที่ทำให้เกิดภาพลวงตาทางสายตา งานของเธอมักใช้รูปทรงเรขาคณิต เส้น และสีสันที่จัดจ้านในการจัดวางที่ซับซ้อน ทำให้ผู้ชมรู้สึกถึงการเคลื่อนไหว ความสั่นสะเทือน หรือการบิดเบือนของภาพ แม้ว่าจะเป็นเพียงภาพนิ่งก็ตาม

Bridget Riley ได้รับการยอมรับว่าเป็นหนึ่งในศิลปินสำคัญที่มีบทบาทในการพัฒนาศิลปะสมัยใหม่และ Op Art เธอได้รับรางวัลและเกียรติคุณมากมายจากผลงานของเธอ และยังคงเป็นที่ชื่นชอบในวงการศิลปะทั่วโลกจนถึงปัจจุบัน ผลงานของเธอยังคงถูกจัดแสดงในพิพิธภัณฑ์และแกลเลอรีชั้นนำหลายแห่ง

โอเค เราจะมาทำงาน Op Art กัน 1 งานให้มัน Movement ตาม Mouse ให้ทำการเปิด Project Generator ขึ้นมา

สำหรับ JS ก็มีวิธีการนะครับ อ่านที่นี่: How to Create Op Art Inspired by Bridget Riley with JavaScript

พอโปรเจ็คพร้อมให้เปิดไฟล์ ofApp.h

ให้เพิ่มตัวแปร mousePos ลงไปเพื่อเก็บตำแหน่งของ Mouse Position

#pragma once
#include "ofMain.h"
class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();

		void keyPressed(int key);
		void keyReleased(int key);
		void mouseMoved(int x, int y );
		void mouseDragged(int x, int y, int button);
		void mousePressed(int x, int y, int button);
		void mouseReleased(int x, int y, int button);
		void mouseEntered(int x, int y);
		void mouseExited(int x, int y);
		void windowResized(int w, int h);
		void dragEvent(ofDragInfo dragInfo);
		void gotMessage(ofMessage msg);

		float mouseXPos;
		
};

หลังจากนั้นเปิดไฟล์ ofApp.cpp ขึ้นมา เพื่อไปฟังก์ชัน ofAppSetup()

void ofApp::setup(){
	ofBackground(255);  // White background
	mouseXPos = 0;      // Initialize mouse X position
        ofHideCursor();
}

Code นี้เป็นโปรแกรมที่เขียนด้วย openFrameworks เพื่อสร้างภาพที่ประกอบไปด้วยจุด (dots) บนหน้าจอ โดยตำแหน่งและขนาดของจุดจะเปลี่ยนแปลงตามการเคลื่อนไหวของเมาส์ เพื่อสร้างเอฟเฟกต์คล้ายภาพลวงตาทางสายตา (optical illusion)

ตั้งค่าพื้นหลังให้เป็นสีขาวโดยใช้ ofBackground(255), โดย 255 หมายถึงค่าสีขาวในระบบ RGBกำหนดค่าเริ่มต้นให้ตัวแปร mouseXPos เท่ากับ 0 เพื่อติดตามตำแหน่งแกน X ของเมาส์ใช้ ofHideCursor() เพื่อซ่อนเคอร์เซอร์ของเมาส์บนหน้าจอ

void ofApp::draw(){
    float dotSpacing = 30;                  // ระยะห่างระหว่างจุด
    int rows = ofGetHeight() / dotSpacing;  // จำนวนแถว
    int cols = ofGetWidth() / dotSpacing;   // จำนวนคอลัมน์
    float waveIntensity = (mouseXPos / (float)ofGetWidth()) * 15; // ความเข้มของเอฟเฟกต์คลื่น

    for (int y = 0; y < rows; y++) {
        for (int x = 0; x < cols; x++) {
            float size = 8 + sin((x + y) * 0.5 + waveIntensity) * 6; // ขนาดของจุดที่เปลี่ยนแปลง
            ofSetColor(200 - y * 5, 200 - x * 5, 200);               // กำหนดสีของจุด
            ofDrawCircle(x * dotSpacing, y * dotSpacing, size);      // วาดจุดในตำแหน่งที่กำหนด
        }
    }
}

dotSpacing กำหนดระยะห่างระหว่างจุดเป็น 30 หน่วยrows และ cols คำนวณจำนวนแถวและคอลัมน์ของจุด โดยอ้างอิงจากความสูงและความกว้างของหน้าจอwaveIntensity คำนวณความเข้มของเอฟเฟกต์คลื่น โดยพิจารณาจากตำแหน่งแกน X ของเมาส์ (mouseXPos) ซึ่งจะทำให้ภาพดูมีการเคลื่อนไหวตามเมาส์ในการวนลูป for ซ้อนกัน จะวาดจุดในตำแหน่งที่กำหนด (x และ y) โดย:

• ขนาดของจุด (size) จะเปลี่ยนแปลงไปตามฟังก์ชัน sine เพื่อสร้างเอฟเฟกต์คลื่น
• สีของจุด (ofSetColor) จะเปลี่ยนแปลงตามตำแหน่งของจุด เพื่อสร้างลักษณะของการเลือนสี

ฟังก์ชัน mouseMove() นี้จะถูกเรียกเมื่อเมาส์เคลื่อนที่ อัปเดตค่าของ mouseXPos ให้เท่ากับตำแหน่งแกน X ของเมาส์ (x)

void ofApp::mouseMoved(int x, int y ){
    mouseXPos = x;
}

ภาพรวม code เป็นดังนี้:

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
	ofBackground(255);  // White background
	mouseXPos = 0;      // Initialize mouse X position
        ofHideCursor();
}

//--------------------------------------------------------------
void ofApp::update(){

}

//--------------------------------------------------------------
void ofApp::draw(){
    float dotSpacing = 30;                  // Space between dots
    int rows = ofGetHeight() / dotSpacing;  // Number of rows
    int cols = ofGetWidth() / dotSpacing;   // Number of columns
    float waveIntensity = (mouseXPos / (float)ofGetWidth()) * 15; // Wave effect

    for (int y = 0; y < rows; y++) {
        for (int x = 0; x < cols; x++) {
            float size = 8 + sin((x + y) * 0.5 + waveIntensity) * 6; // Dot size variation
            ofSetColor(200 - y * 5, 200 - x * 5, 200);               // Color variation
            ofDrawCircle(x * dotSpacing, y * dotSpacing, size);      // Draw dot
        }
    }
}
//--------------------------------------------------------------
void ofApp::mouseMoved(int x, int y ){
    mouseXPos = x;
}

ทำการ Run งานของเราจะได้ตามนี้