node ui and interaction improvements

src/connection.h

@@ -1,6 +1,7 @@
 #pragma once
 
 #include "button.h"
+#include "datatypes.h"
 #include "node.h"
 #include "raylib.h"
 
@@ -20,7 +21,7 @@ class Connection{
 		bool remove = false;
 		bool config = false;
 
-		float connector_offset = 14.0f;
+		float connector_offset = 8.0f;
 		float switches_offset = 25.0f;
 
 		void flip(){
@@ -34,12 +35,20 @@ class Connection{
 			Vec2D<float> v2_position = nodes->at(v2).position - ((nodes->at(v2).position - nodes->at(v1).position)).norm() * (nodes->at(v2).radius + connector_offset);
 			float v1_v2_distance = v1_position.dist(&v2_position);
 
+			float midi_gate_v1 = Clamp((4.f / 1000.f) * nodes->at(v1).midi_gate, 1.f, 4.f);
+			float midi_gate_v2 = Clamp((4.f / 1000.f) * nodes->at(v2).midi_gate, 1.f, 4.f);
 			// Line with small connector circles
+			
 			Color c = {229, 181, 103, 255};
 			if(active) c = {108, 153, 187, 255};
 			DrawLine(v1_position.x, v1_position.y, v2_position.x, v2_position.y, c);
-			DrawCircle(v1_position.x, v1_position.y, 2.0f, c);
-			DrawCircle(v2_position.x, v2_position.y, 2.0f, c);
+			
+			if(midi_gate_v1 == 4.0f) c = VS_COLOR_RED;
+			DrawCircle(v1_position.x, v1_position.y, midi_gate_v1, c);
+			
+			c = {229, 181, 103, 255};
+			if(midi_gate_v2 == 4.0f) c = VS_COLOR_RED;
+			DrawCircle(v2_position.x, v2_position.y, midi_gate_v2, c);
 			
 			if(v1_v2_distance < 100) switches_offset = v1_v2_distance/2.3f;
 			Vec2D<float> from_to_handle = nodes->at(v1).position - ((nodes->at(v1).position - nodes->at(v2).position)).norm() * (nodes->at(v1).radius + switches_offset);

src/datatypes.h

@@ -6,6 +6,20 @@
 #define _USE_MATH_DEFINES
 #endif
 
+#define VS_COLOR_DARKGREY (Color){46, 46, 46, 255}
+#define VS_COLOR_LIGHTGREY (Color){100, 100, 100, 255}
+#define VS_COLOR_WHITE (Color){214, 214, 214, 255}
+#define VS_COLOR_YELLOW (Color){229, 181, 103, 255}
+#define VS_COLOR_GREEN (Color){180, 210, 115, 255}
+#define VS_COLOR_ORANGE (Color){232, 125, 62, 255}
+#define VS_COLOR_PURPLE (Color){158, 134, 200, 255}
+#define VS_COLOR_PINK (Color){176, 82, 121, 255}
+#define VS_COLOR_BLUE (Color){108, 153, 187, 255}
+
+#define VS_COLOR_RED (Color){195, 83, 85, 255}
+#define VS_COLOR_BROWN (Color){84, 75, 61, 255}
+#define VS_COLOR_SUN (Color){214, 170, 21, 255}
+
 #include <cmath>
 #include <math.h>
 #include "libremidi/libremidi.hpp"

src/main.cpp

@@ -143,6 +143,9 @@ int main(){
 		switch(istate){
 			case InteractionState::HOVER_CANVAS:
 			{
+				for(auto &n : app.nm.nodes | std::ranges::views::values){	
+					n.hover_connect = false;
+				}
 				if(mouse_right_down) {
 		            camera.target = Vector2Add(camera.target, delta);
 				}
@@ -227,6 +230,7 @@ int main(){
 			}
 			case InteractionState::HOVER_CONNECTOR:
 			{
+				hovering_connectors.front().hover_connect = true;
 				if(mouse_clicked) hovering_connectors.front().connecting = true;
 				break;
 			}
@@ -286,10 +290,18 @@ int main(){
 
 		float wheel = GetMouseWheelMove();
 		if(wheel != 0){
-			if(!hovering_nodes.empty() && IsKeyDown(KEY_LEFT_CONTROL)){
+			if(!hovering_nodes.empty() && IsKeyDown(KEY_LEFT_CONTROL) && !IsKeyDown(KEY_LEFT_ALT)){
 				hovering_nodes.front().midi_note += wheel;
 				if(hovering_nodes.front().midi_note < 0 ) hovering_nodes.front().midi_note = app.sm.midi.midiNotes.size()-1;
 				if(hovering_nodes.front().midi_note >= app.sm.midi.midiNotes.size() ) hovering_nodes.front().midi_note = 0; 
+			} else if(!hovering_nodes.empty() && IsKeyDown(KEY_LEFT_SHIFT) && !IsKeyDown(KEY_LEFT_ALT)) {
+				hovering_nodes.front().midi_velocity += wheel;
+				if(hovering_nodes.front().midi_velocity < 0 ) hovering_nodes.front().midi_velocity = 127;
+				if(hovering_nodes.front().midi_velocity > 127 ) hovering_nodes.front().midi_velocity = 0; 
+			} else if(!hovering_nodes.empty() && IsKeyDown(KEY_LEFT_ALT)) {
+				float incr = (float)wheel * (IsKeyDown(KEY_LEFT_SHIFT) ? 100.0f : IsKeyDown(KEY_LEFT_CONTROL) ? 1000.0f : 10.0f);
+				hovering_nodes.front().midi_gate += incr;
+				if(hovering_nodes.front().midi_gate < 0 ) hovering_nodes.front().midi_gate = 0;
 			} else {
 				Vector2 mouseWorldPos = GetScreenToWorld2D(GetMousePosition(), camera);
 				camera.offset = GetMousePosition();

src/midi.h

@@ -86,13 +86,14 @@ class Midi {
 
 		void update(){
 			float time = GetTime();
-			for(auto it = notes.begin(); it != notes.end(); ++it){
-				if(time - it->start >= (float)it->gate / 1000.0f){
-					midi_outs[it->midi_out]->send_message(libremidi::channel_events::note_off(it->channel, it->note, it->velocity));
-					it->erase = true;
+			for(auto &n : notes){
+				if(time - n.start >= (float)n.gate / 1000.0f){
+					midi_outs[n.midi_out]->send_message(libremidi::channel_events::note_off(n.channel, n.note, n.velocity));
+					n.erase = true;
 				}
 			}
 			std::erase_if(notes, [](const auto& item){return item.erase;});
+
 			for(auto& p : midi_out_ports){
 				if(p.enabled) {
 					open_midi_out(&p);

src/node.h

@@ -37,6 +37,7 @@ class Node : public Movable{
 	bool erase = false;
 	bool highlighted = false;
 	bool copied = false;
+	bool triggered = false;
 
 	int midi_out = -1;
 
@@ -49,12 +50,16 @@ class Node : public Movable{
 	bool gui_midi_velocity_edit = false;
 	bool gui_midi_gate_edit = false;
 
-	int midi_channel = 0;
-	int midi_note = 0;
-	int midi_velocity = 0;
-	int midi_gate = 0;
+	int midi_channel = 1;
+	int midi_note = 48;
+	int midi_velocity = 60;
+	int midi_gate = 100;
 
 	int midi_cc = 0;
+	float start = 0;
+	float fade = 0;
+	float time = 0;
+	float last = 0;
 
 	Distribution mode = Distribution::ROUNDROBIN;
 
@@ -62,13 +67,39 @@ class Node : public Movable{
 		midi_outs[midi_port].enabled = state;
 	}
 
+	void trigger(){
+		triggered = true;
+		start = GetTime();
+		fade = midi_gate;
+	}
+
 	void draw(Vec2D<float> *mouse, Camera2D *cam) {
-		if(!dragging && !selected && !in_rect && !hovering) DrawCircle(position.x, position.y, radius, (Color){180, 210, 115, 255});
+		last = time;
+		time = GetTime();
+		if(time - start >= (float)midi_gate / 1000.0f){
+			triggered = false;
+			fade = 0;
+		} else {
+			fade -= (time - last)*1000.0f;
+		}
+
+		DrawRing(position, radius, radius+4, 0, 360, 24, (Color){60, 60, 60, 255});
+		DrawRing(position, radius, radius+4, 0.0f - 90.0f, (360.0f/127.0f) * midi_velocity - 90.0f, 24, (Color){158, 134, 200, 255});
+		DrawCircleLinesV(position, radius + 4, (Color){100, 100, 100, 255});
+
+		float midi_gate_map = round((255.f / midi_gate) * fade);
+		Color gate_color = ColorAlphaBlend(VS_COLOR_RED, (Color){180, 210, 115, (unsigned char)Clamp(255 - midi_gate_map, 0, 255)}, WHITE);
+
+		if(!dragging && !selected && !in_rect && !hovering) DrawCircle(position.x, position.y, radius, gate_color);
 		if(selected || dragging || in_rect || hovering) DrawCircle(position.x, position.y, radius, (Color){108, 153, 187, 255});
-		if(selected) DrawCircleLinesV(position, radius+1, (Color){158, 255, 210, 255});
+
+		if(selected) DrawCircleLinesV(position, radius+8, (Color){158, 255, 210, 255});
 
 		int offset = MeasureText(MIDI::Notes[midi_note].c_str(), 10);
-		DrawText(MIDI::Notes[midi_note].c_str(), position.x-offset/2.0f, position.y-5, 10, WHITE );
+		DrawText(MIDI::Notes[midi_note].c_str(), position.x-offset/2.0f, position.y-9, 10, WHITE );
+		
+		int offset_gate = MeasureText(std::format("{:.2f}", (float)midi_gate/1000.0f).c_str(), 4);
+		DrawText(std::format("{:.2f}",(float)midi_gate/1000.0f).c_str(), position.x-offset_gate/2.0f, position.y-1, 4, WHITE );
 
 		if(mode == Distribution::RANDOM) DrawCircle(position.x, position.y, radius/2.0f, (Color){229, 181, 103, 255});
 
@@ -76,10 +107,8 @@ class Node : public Movable{
 		float opacity = 150.0f - Clamp(position.dist(mouse), 0.0f, 150.0f);
 		
 		if(hover_connect){
-			DrawCircleLines(position.x, position.y, radius + R, (Color){108, 153, 187, 255});
 			DrawCircle(connector.x, connector.y, 8.0f, (Color){108, 153, 187, 255});
 		} else {
-			DrawCircleLines(position.x, position.y, radius + R, (Color){108, 153, 187, (unsigned char)opacity});
 			DrawCircle(connector.x, connector.y, 8.0f, (Color){108, 153, 187, (unsigned char)opacity});
 		}
 		if(highlighted) DrawCircleLinesV(position, radius+2, (Color){255, 0, 0, 200});

src/signal-manager.h

@@ -59,7 +59,7 @@ class SignalManager{
 		}
 	
 		void addSignalAtNode(int node_id){
-			Color c = {(unsigned char)(20 + (rand() % 200)), 50, (unsigned char)(20 + (int)(rand() % 200)), 255};
+			Color c = {(unsigned char)(20 + (rand() % 200)), 100, (unsigned char)(20 + (int)(rand() % 200)), 200};
 			signals.emplace(signals.end(), Signal(nm->nodes[node_id].position.x+1, nm->nodes[node_id].position.y+1, 5.0f, 0, c)); // position + 1 or else it does not render. why? no idea!
 			signals.back().next = node_id;
 			signals.back().last = node_id;
@@ -82,6 +82,7 @@ class SignalManager{
 							s.update(diff.count());
 							if(s.position.dist(&nm->nodes[s.next].position) < 1.0f) {
 								int n = cm->next(s.next, s.last);
+								nm->nodes[s.next].trigger();
 
 								if(n != s.next && n != -1) {
 									for(auto &m : nm->nodes[s.next].midi_outs){

src/state-manager.h

@@ -6,8 +6,8 @@
 #include "connection-manager.h"
 #include "signal-manager.h"
 #include "ui.h"
+
 #include <algorithm>
-#include <iostream>
 #include <iterator>
 #include <ranges>
 #include <vector>

src/ui.h

@@ -82,7 +82,6 @@ class AppUI{
 			GuiLabel((Rectangle){20, (float)s_nodes + 30, 240, 20}, "NODES");
 			if(GuiButton((Rectangle){20, (float)s_nodes + 60, 240, 20}, "ADD RANDOM NODE")){
 				nm->addNode(200.0f, 200.0f);
-//				nm->nodes.emplace_back(200.0f, 200.0f, 15.0f);
 			}
 
 			DrawFPS(20, settings->height - 30);
@@ -133,7 +132,7 @@ class AppUI{
 			GuiLabel((Rectangle){np.x + 20, np.y + y_channel + 210, 100, 20}, "GATE");
 			v = n.midi_gate;
 			GuiLabel((Rectangle){np.x + 210, np.y + y_channel + 210, 20, 20}, std::format("{}",(float)n.midi_gate/1000.0f).c_str());
-			GuiSlider((Rectangle){np.x + 20, np.y + y_channel + 240, 220, 20}, "", "", &v, 0, 5000);
+			GuiSlider((Rectangle){np.x + 20, np.y + y_channel + 240, 220, 20}, "", "", &v, 0, 30000);
 			n.midi_gate = round(v);
 			
 			//if(GuiValueBox((Rectangle){n.position.x + 100, n.position.y + y_channel + 40, 140, 20}, "VELOCITY", &n.midi_velocity, 0, 127, n.gui_midi_velocity_edit)) n.gui_midi_velocity_edit = !n.gui_midi_velocity_edit;