Spiral Easing Visualizer

By oliver @pixelchipcode

Name: Spiral Easing Visualizer

Description: This code generates a mesmerizing spiral animation that transitions smoothly between predefined positions using easing functions. In the Step event, the position transitions are controlled by an easing function, moving between coordinates stored in an array. As the position updates, a dynamic spiral with pulsing and color-shifting effects is drawn in the Draw event. The spiral consists of thousands of points that move in a hypnotic motion, with two counter-rotating spirals adding depth and complexity. Users can change the easing function and advance to the next position by pressing the 'Q' key.


= = = = =

function EaseLinear(time,start,dest,duration){
	return dest * time / duration + start;
}

function EaseInOutQuad(time,start,dest,duration){
	time /= duration * 0.5;
	if (time < 1){
	    return dest * 0.5 * time * time + start;
	}
	return dest * -0.5 * (--time * (time - 2) - 1) + start;
}

//create event
positions = [[0,0],[1,8],[34,220],[68,0],[90,5],[120,15],[47,62]];
current_position = 0; next_position = 1; time = 0; duration = 60;
use_easing_function = EaseLinear; xx = 0; yy = 0;

//step event
var x_start = positions[current_position][0];
var y_start = positions[current_position][1];
var x_dest = positions[next_position][0] - x_start;
var y_dest = positions[next_position][1] - y_start;

xx = time < duration ? use_easing_function(time++, x_start, x_dest, duration) : positions[next_position][0];
yy = time < duration ? use_easing_function(time, y_start, y_dest, duration) : positions[next_position][1];

if (keyboard_check_pressed(ord("Q"))) {
    current_position = (current_position + 1) mod array_length(positions);
    next_position = (current_position + 1) mod array_length(positions);
    time = 0; use_easing_function = EaseInOutQuad;
}

//draw event
var point_count = 5000, spiral_speed = 0.01, base_radius = xx, time_offset = current_time * spiral_speed, pulse = 1 + sin(current_time * 0.01) * 0.01;
gpu_set_blendmode(bm_add);

for (var i = 0; i < point_count; i++) {
    var radius = base_radius * pulse, angle = i * yy / 500 + time_offset, x_pos = room_width / 2 + lengthdir_x(radius + sin(i * 0.1) * 50, angle);
    var y_pos = room_height / 2 + lengthdir_y(radius + cos(i * 0.1) * 50, angle), hue_shift = (current_time * 0.02 + i * 0.1) % 360;
    draw_set_color(make_color_hsv(hue_shift, 200, 255));
    draw_set_alpha(0.5 + cos(i * 0.02 + current_time * 0.05) * 0.5 * (1 - i / point_count));
    draw_circle(x_pos, y_pos, .7, false);
}

for (var i = 0; i < point_count; i++) {
    var radius = base_radius * 0.8 * pulse, angle = i * 100 - time_offset, x_pos = room_width / 2 + lengthdir_x(radius + cos(i * 0.1) * 40, angle);
    var y_pos = room_height / 2 + lengthdir_y(radius + sin(i * 0.1) * 40, angle), hue_shift = (current_time * 0.02 + i * 0.1 + 180) % 360;
    draw_set_color(make_color_hsv(hue_shift, 200, 255));
    draw_set_alpha(0.5 + sin(i * 0.02 + current_time * 0.05) * 0.5 * (1 - i / point_count));
    draw_circle(x_pos, y_pos, .6, false);
}

gpu_set_blendmode(bm_normal); draw_set_alpha(1);