Speaking of drawing, I don’t really draw that much lately, which is something that I want to work on. I remember when I first started learning design, I heard that you should always take any opportunity to get outside and draw something. I had basically completely forgotten about that piece of advice until pretty recently. I want to really start taking that seriously, because now I see the value in just taking a break from the screen to be creative in a very primitive way, even if it’s just for your mental health.

Anyways. Does anyone read these things? If you read this leave a message in my guestbook, its on my home page =)

JSDOC I love u <3

Javascript is my first coding language and I am still learning. JSDOC is something that i recently discovered that has been a game changer when it comes to understanding my own code. If you are new-ish to Javascript like me, and have looked at a lot of code, you might have seen something that looks like this:

/**
*description
*@param {any} arg description
*/

This is JSDOC, and it’s a special way to keep track of your functions, objects, variables or pretty much anything that you want to document. The really cool part about JSDOC is that it comes with a program jsdoc that you can run to analyze all of your javascript files, and then spit out a whole ass website with all of this info organized and pre-formatted. It gets even cooler because you can download templates to apply to your outputted site. the one I use comes with a light/dark theme toggle and a search bar. Probably a very basic concept that most people who code would know, but It’s still my first year with Javascript, so its new to me. And if you are completely new coding and have no idea what I’m talking about, lets say I have a function:

// checks if the number is less than another, if so, sets to the second argument.
function reset(num, or){
	if ( num > or ) {
		num = or
	}
}

let startingNumber = 1;
let myNumber = startingNumber + 9;

console.log(myNumber)
// --> 9
reset(myNumber,startingNumber)
// --> 1

This is a completely useless function that reduces the number to a given value if it is less than the current value. But let’s say I want to use this function much later on in my project, and I’ve forgotten which arguments I need to use it, or how the function even works. If I pass in the wrong arguments, Javascript will not complain, you will just not get the result you wanted. I could search through my code and see if I’ve left myself any notes, but that is very inefficient, especially if you have to reference back over and over. That’s why we use JSDOC.

/**
*checks if the number is less than another. if so, sets to the second argument.
*@param {number} num the number to test.
*@param {number} or the original number to reset to.
*@returns {number}
*/
function reset(num, or){
	if ( num > or ) {
		num = or
	}
}

When JSDOC runs on this code, it will check each of the @ tags and map them to the function directly below it. This way, you can document in detail which type each argument expects, as well as what is returned, if anything. You will also notice that after adding this documentation, when you start to type out this function in a IDE like VSCode, it will provide a preview to this information, which makes coding stupidly simple.

My Current Thoughts on AI

I’ve thought a lot about how best to approach this subject, but I guess it all just comes down to one thing:

AI in creative work is lazy

The whole point of being creative is being able to solve problems. And in my opinion, that includes every little tedious detail that goes into creating. You can’t skip any of that.

It Doesn’t Even Look Good

At this point the times that AI is able to create something remotely captivating is an anomaly rather than a feature.

It’s Not Even Fun

I’m sure there is someone out there who enjoys constructing prompts and hoping to get the right output, but for me personally it feels soul sucking, and a little too reminiscent of the book-writing machines from the book 1984. When you consider the fact that LLM technology is literally designed to give the lowest learning curve, LLMs just fail to give that feeling of rigorous learning that you get from learning literally anything.

All in all, I hate it, and I don’t think it’s real Design. You can quote me on that.

Over the summer, as i started getting into coding, I challenged myself to make a interactive ecosystem in p5.js. I got as far as adding in some ‘fish’, coding a basic physics engine with a buoyancy system for the water, and a simple seeking method.

I eventually gave up due to being inexperienced with javascript, and just not having the time or motivation to continue. I got the opportunity to choose a self-guided project for my second year in design school, and I thought it would be a good opportunity to try again.

In my first critique session, as I presented my project, I got a lot of interesting ideas, like having the simulation project on a large screen, or having users be able to submit their own drawings as fish. This got me excited about the project again, but I had to figure out how to actually make that, which was much more complicated than I thought it would be. To make a long story short, I had to create my p5.js sketch as a node.js app so that I could access a directory of image files on a local server. It was my first time using node.js, and my experience with it so far tells me I probably will not be touching it again for a good while. I eventually achieved what I needed to do, but looking back I probably should have just move over to Processing instead.

After finally figuring that out, I needed a few weeks to just not think about coding at all. This weekend I sat down to add some new features.

The first thing I wanted to do was to upgrade the physics library. I tried matter.js first, thinking it would be fun to have some collisions, but it got slow quickly. This definitely would not work for the amount of complexity im imagining for this project (schools of fish swimming on screen). I then tried toxiclibs.js, as recommended in Nature of Code, and althought it took a good while of digging to figure out how to use this library, I eventually was able to set up each fish as a particle with physics and boundary collision. So yeah, basically I spent about a whole lot of time just to end up back where I started. But I did learn a lot, and I think the additions I have in my code now will make things more manageable.

I also created a system that allows objects to seek out other objects. Right now, I am trying to fix some of the movement animations. I am working on making the fish rotate to follow the direction it’s headed, but the issue I’m having is that the Verlet physics integration is registering the current and the previous positions as being the same, which means I am not able to accurately calculate the velocity. Oh, and I’ve started to notice things gradually slowing as there are more and more particles, so either I’m going to have to look into how to optimize my code eventually, or I’m going to have to rewrite it in Processing(Java) at some point…

Anyways. This is just me trying to write down what I’m struggling with so I can maybe figure it out eventually. For now, I am going to take a break, enjoy the cozy weather and work on some other projects that I’ve been procrastinating.

Thanks for reading, If you’d like to check out the current state of this project check it out here on Github.

Feel free to reach out to connect and chat, or if maybe you have a solution to my problem!

The first thing I’m going to do is create a basic sketch with p5.js. I have a concept in mind of a 3D floating sphere that changes colors when different buttons on the page are pressed. To start off, I create a basic html page with all of the basic things I need:

<html>
    <head>
        <meta charset="UTF-8">
        <title>My Sketch</title>
        <!-- The p5.js Library -->
        <script src="p5.min.js"></script>
    </head>
    <body>
        <!-- Div element for the p5.js sketch. -->
        <div id="sketch-div"></div>
    </body>
    <!-- Script element for the sketch. -->
    <script>
  	// Sketch goes here.
    </script>
</html>

I attach a script element at the bottom, and this is where I will write my custom sketch. Don’t forget to embed the p5.js library. I also added a custom div that I will later use to contain my sketch. This is the basic sketch that I start with:

        function setup(){
            createCanvas(300, 300, WEBGL)
        }

        function draw() {
            sphere()
        }

This calls two functions, draw(), and setup(), which every p5.js needs to display. This is what I get when I launch my html file in the browser, so I know everything is working correctly:

Using the sphere() function inside of the draw() function will draw a sphere of a default size directly in the center of the canvas. Now that everything is working properly, It’s time to add some styling. I add this code directly before my sphere() function:

// Lighting and Styling
            lights()
            noStroke()
            ambientMaterial('green')
            
            sphere()

)

I kept thing simple with just a simple ambient material which sets a general color for the 3D object. I removed the wireframe with noStroke(), and added some lighting with lights(), which is neccesary or your sphere will be in pitch black darkness.

Now, time to program Interactivity. I want to create a function that allows me to change the color of the object. The first thing I need to do, since I know the color argument of ambientMaterial() will be changing, I will make this value a variable mycolor, which i can manipulate using a function:

function setColor(string) {
            myColor = string
        }

when I call this function in draw() with setColor([color]), I can change the color. But now I want to create code that changes this variable based on the input recieved from html buttons. First, I create the buttons:

  <p>Click a button to update the color!</p>

        <!-- Buttons to Control the Color -->
        <button id = "yellow-button">Yellow</button>
        <button id = "red-button">Red</button>
        <button id = "green-button">Green</button>

With these buttons created and labeled, I go back to my script, and add the following variables to reference them:

// Default variable for sphere color.
 let myColor = ''

        let redButton = document.getElementById('red-button');
        let yellowButton = document.getElementById('yellow-button');
        let greenButton = document.getElementById('green-button');

then comes the new functions to change the color.

         greenButton.addEventListener('click', 
         () => {myColor = 'green'})
        
         redButton.addEventListener('click',
         () => {myColor = 'red'})
        
         yellowButton.addEventListener('click',
         () => {myColor = 'yellow'})

</script>

I delete the function from earlier, and add an Event Listener, which takes two arguments, an event, and the action to be taken. This function waits for the event to take place, then execures the function in the second argument. I input an anymous function that changes the value of myColor to a set string. . and that’s it! Now the only thing left to do is add some styling. I use the custom ID tag to identify and style the p5.js Canvas and attach it to a <div> block using this code:

  function setup(){
            let sketchDiv = document.getElementById('sketch-div')
            let divWidth = sketchDiv.clientWidth;
            let divHeight = sketchDiv.clientHeight;
            let myCanvas = createCanvas(divWidth, divHeight, WEBGL);
            myCanvas.parent('sketch-div'); 
        }

this allows me to fit the p5.js canvas element to the custom div element. Make sure to include this code in your stylesheet:

.p5Canvas {
            position: absolute;
        }

you can style the #sketch-div element however you want. Make sure you add a height and width, otherwise your div and canvas will be empy. I added my final styling and this is what I ended up with:

see the full code below:

<html>
    <head>
        <meta charset="UTF-8">
        <title>My Sketch</title>
        <!-- The p5.js Library -->
        <script src="p5.min.js"></script>
    </head>
    <body>
        <div id ="container">

         <!-- Div element for the p5.js sketch. -->
         <div id="sketch-div"></div>
        </div>
        <p>Click a button to update the color!</p>
        <div id="button-div">
         <!-- Buttons to Control the Color -->
         <button id = "yellow-button">Yellow</button>
         <button id = "red-button">Red</button>
         <button id = "green-button">Green</button>
        </div>

          <!-- Script element for the sketch. -->
    <script>
        // Interactivity:
        //Click and Drag the scene to orbit, click the buttons to change the color of the sphere.


       //    Set the default color
       let myColor = ''
        // Set a reference to each button ID
        let redButton = document.getElementById('red-button');
        let yellowButton = document.getElementById('yellow-button');
        let greenButton = document.getElementById('green-button');

        function setup(){
            // Initiate variables for the sketch-div element dimensions.
            let sketchDiv = document.getElementById('sketch-div')
            let divWidth = sketchDiv.clientWidth;
            let divHeight = sketchDiv.clientHeight;
            let myCanvas = createCanvas(divWidth, divHeight, WEBGL);
            // Attach the parent element.
            myCanvas.parent('sketch-div');
            
            // A description of the sketch, for accesibility.
            description('A 3D sphere on a grey background.')
        }

        function draw() {
        
         background('black')

         // Add orbit control.
         orbitControl()

         
         //  Syle the sphere.
         lights()
         noStroke()
         ambientMaterial(myColor)
         //Model the sphere.
         sphere()
        }

         // check if buttons are clicked with Event Listeners.
         greenButton.addEventListener('click', 
         () => {myColor = 'green'})
        
         redButton.addEventListener('click',
         () => {myColor = 'red'})
        
         yellowButton.addEventListener('click',
         () => {myColor = 'yellow'})

    </script>
    <style>
        body {

            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 15px
        }

        #button-div {
            flex-direction:row;
        }

        button {
            flex-direction: row;
            padding: 10px;
            background-color: grey;
            color:white;
            border:none;
        }
        #sketch-div {
            
        width: 300px;
        height: 300px;

        }
        #container {
            background: grey;
            padding: 15px;
            height:300;
            width: 300;
            
        }
        .p5Canvas {
            position: absolute;
        }
    </style>
    </body> 
</html>