Creative Coding

Creating Code that Looks Good

I’m a huge fan of the visualization style of code that Daniel Shiffman creates. (Also an excellent teacher, if you’re looking to learn relatively simple to complex topics in rather fun, energetic style).

Anyways, he tends to post his creations and code challenges in p5.js and processing, a javascript and java visual processing environment, respectively. Which is awesome! I’ve recently started the 100 Days of Code challenge. So I thought, why not try and replicate his work, but in the most random and fun way I can think of, in a new framework, or library whenever or wherever I can.

Challenge 4:

For this challenge, Daniel Shiffman pays tribute to Prince by creating a visualization of one of Prince’s songs, Purple Rain.

The code can be found in the Videos description, and it’s encouraged that you take the code and try to make something cool, or at the very least learn something new.

For this version, Processing is used. The Rain itself is created using lines (Processing Construct/ object) which draws, as the name implies, a line on the screen. The speed of the rain is varied, and this creates a really cool effect.

My Solution:

For this challenge, I decided to learn about the c#/.net framework - Monogame. Which is really simple to get up and running with. If you want to setup an environment for developing Monogame games, and you can’t come right - just drop me a message and I’ll try my best to help you out.

The difference in my solution, well the main difference, is that I used a particle generator, and loaded a single sprite that acted as the individual rain drops. Less than Ideal, when compared to Processing as a viable solution. But still a really cool effect, that I enjoyed creating.

Regardless - the solution can be found on [my github].

Challenge 76:

This challenge was awesome, super simple - but the results are phenomenal. In this challenge - Daniel Shiffman attempts to create the classic one-line Commodore 64 BASIC program that generates a maze like output.

My Solution:

I almost didn’t do this challenge because I thought that it would be either too easy (On something like processing/ or p5.js), or that it would drive me mad if I attempted it in Monogame. I ended up changing my mind when I stumbled on an article that shows how to draw lines on a windows form application, reference. Which is not something that I do in my day to day career. So I thought, let me give it a bash - and this was the result:

With the code on [my github], of course.

I actually found the Math component on this quite challenging - if you look at the logic section in my solution, compared to Daniels - You’ll note distinct differences, where mine comes off worse in the comparison… Still, I had a lot of fun with this one, and really enjoy the output.

Also, note that you can change most of the configuration, such as line length, width, screen size, probability of a forward slash vs a backslash and vice versa. Which creates a different pattern. If you modify the code by commenting out the line that adds either a forward slash, or a backslash - you get this almost rain like appearance.

The core logic for this - is this messy bit of code, Please judge me, I deserve it for this one:

//Setting window size
int width = 1920;
int height = 1080;
this.Size = new Size(width, height);

//To Start fullscreen
WindowState = FormWindowState.Maximized;

System.Drawing.Graphics graphics;
graphics = this.CreateGraphics();

int lineSize = 20;
int level = 0;
int count = 0;
int levelCount = 0;
Random rand = new Random(42); //Change the seed

//You need a pen to draw lines on a windows form
Pen pen = new Pen(System.Drawing.Color.Black, 2); //Change line width, second param

//Use this to run the effect for half the screen (Replace the condition on the while loop with it)
//Half screen for testing (levelCount <= ((height/lineSize) /2))

while (levelCount <= (height/lineSize))
{
    if (!((count + 1) < (width / lineSize)))
    {
        levelCount = ((lineSize + count * lineSize) / lineSize) / (width / lineSize);
        level = lineSize * levelCount;
    }

    //Create the line
    if (rand.Next(0, 2) == 1) // 50/50
    {

        graphics.DrawLine(pen, ((count * lineSize) - width * levelCount), lineSize + level, lineSize + ((count * lineSize) - width * levelCount), level); // /
    }
    else
    {
        graphics.DrawLine(pen, (count * lineSize) - width * levelCount, level, (lineSize + count * lineSize) - width * levelCount, lineSize + level); // \
    }
    count++;
    //System.Threading.Thread.Sleep(10); //Can remove, just for buildup
}

Thanks for Reading !