Midterm Project Idea | Automated Interactive Kaleidoscope

Concept, Thoughts and Research

For the midterm project ,I had initially thought of making a game but decided to challenge myself with something different. I thought of making interesting generative art with user interaction and customization. I came across this kaleidoscope piece by Sheenest that uses Perlin noise to automatically generate random kaleidoscopes (without user input) – https://github.com/sheenest/Perlin-Kaleidoscope-Project . This idea of using symmetry to create generative art has always intrigued me . Kaleidoscopes have inspired a lot of art and any way of automating them + making them interactable is something I want to work on . Some cool kaleidoscope art that I found :

Something like this is inspiration for what I want to do. For sound effects, I plan on using my favorite Youtuber Melodysheep’s sound library –

Music Library — Melodysheep

This sound library was originally designed for space /astronomy videos but I believe alternating the tracks will create a very immersive experience for the user .

The user interaction that I want to add to this project would be :

Some way to draw something on the screen
Then play the program, the program uses Perlin noise to change the points and colors of what was drawn to create beautiful patterns
Customizable bars for the user , I found a library on GitHub that automatically generates a GUI for the variables in the program . Here’s the link – https://bitcraftlab.github.io/p5.gui/.
A way to save the image
An option to add your own image instead of drawing something
(maybe) use computer vision in some way to use audio to influence the pattern

Identifying Challenging aspects of the project

Some key challenges that I expect to overcome are :

Adding user interactivity AND applying Perlin noise is something that hasn’t been done before in such projects. Enabling the user to draw something with the mouse(on a graphics buffer that can be hidden later) is going to be challenging to implement .
Thinking about how noise can be used to vary the user input so that it appears different but not too different . The user input should still significantly affect the final result.
Sound effects associated with the project – when to play and pause sounds and if computer vision ends up being a part of it , how should sound influence the noise factor ?

Understanding Code for Kaleidoscope

I started by looking at some classes in Sheenest’s code that I could recycle and modify to integrate user input into. One class that I plan to use after modification is the lin class (which represents a randomly drawn line) :

class lin {

  constructor( maxCurl , maxSpeed , size , sides , strokeMax , strokeMin , steps , fluct = 5 , order = 0.6) {

    // this.keyVel = createVector( 0 , 0 );

    // maxSpeed = 30; 
    this.maxCurl = maxCurl;
    this.maxSpeed = maxSpeed ;
    this.size = size ;
    this.sides = sides; 

    this.strokeMax = strokeMax ;
    this.strokeMin = strokeMin ;

    this.steps = steps ;

    this.trail = [] ; 
    this.vel = new polar ( 0 , 0 );

    this.noiseRad = new perlin( 
      'noiseRad',
      random(100),
      random(10),
      0.2 ,
      this.steps , 
      fluct , // more octaves/fluct , more fluctuation in velcities, default value is 5
      0.5 // 
    );

    this.noiseTheta = new perlin( 
       'noiseTheta', //name
       random(100), //seed 
       random(10), //step 
       0.2 , // counts 
       this.steps , 
       4 , // lod
       order //  order referring to the falloff level of the curves
       // more order/falloff , more persistence in the curves (more circles)
    );


    this.cHSB = []; 

    this.noiseHue = new perlin(
      'noiseHue',
      random( 100 ),
      random( 10 )
    );

    this.noiseSat = new perlin(
      'noiseSat',
      random( 100 ),
      random( 10 )
    );

    this.noiseBright = new perlin(
      'noiseBright',
      random( 100 ),
      random( 10 )
    );
    
    let bound = 1/sqrt(2) * boundary/2 ; 
    this.o_pos = createVector( random( - bound , bound ) , random( -bound, bound ) ); //random start position
    //this.pos is the independent position value that syncs with trail[0] after each iteration
    this.pos = this.o_pos.copy(); 

    //this.hueVal and this.cVal is the independent color value that syncs with cHSB[0] after each iteration
    this.hueVal = random(360) ;//random hue value at the start
    this.cVal = color ( this.hueVal , 0 , 0 );

    this.trailMemory = [] ; 
    this.cHSBMemory = [];
    this.memorySize = 1000;
    this.colormemorySize = this.memorySize * 4 ; //coz max inverse_speed = 4, each iteration of update() adds a max of 4 color values into cHSBMemory

    this.reverseCount = 0 ;
    this.reverseColorCount = 0 ;

    this.inverse_speed = [] ; // first value is for syncing of colors when this.vel is low
    // array size is equal to memmory size, to save past inver_speed values to tally with inverseColorCount

  }

This class creates a line object . I plan on adding simple user interactivity with something like this by creating a line object from user input and making an instance of this class -then manipulating the lines smoothly .

A very simple and primitive example of the kind of code I can use for user interactivity is:

function draw() {
  if (mouseIsPressed) { // check if the mouse button is pressed (preferably the left click button) 
    stroke(0); // set the stroke color 
    strokeWeight(5); // set the stroke weight
    line(pmouseX, pmouseY, mouseX, mouseY); // draw a line from the previous mouse position to the current mouse position
  }

Instead of drawing a line using the line function, I will use the constructor for the lin class to create an instance of the line / multiple lines drawn by the user.

I have spent much time understanding the code generally used to create kaleidoscopes and thinking about design and user interactivity .I look forward to integrating user interactivity to create an intriguing generative art experience.

Leave a Reply Cancel reply