Gradients are hard in Processing

This took a while. Yesterday while watching the E3 2021 live stream I tried to work through how to create a gradient in Processing, specifically how I could apply it to an ellipse. I found a few ways to create them while searching but I wanted to try and see if I could work it out myself.

In order to get this to work, I had to draw 1px rectangles from the top to the bottom of the ellipse. I had already worked out a bit of the work in a previous sketch to get arcs of an ellipse and plot points on them. Using lerpColor I could tween between two colors at each pixel to get the gradient. From the top left arc, I found the mirror point on the top right arc and drew a rectangle from those two points, then continued down the arc to the middle. Then the same was done from the bottom left arc to the right.

Fair warning I’m still a bit new at Java programming and I’m sure there could be some improvements. If you have any suggestions on how I could improve this method I’m all ears.

Getting into Generative Art via Processing

Lately, I started getting into Generative art. The idea that I can use code to generate artwork appeals to me. I’ve only got into working in Processing, a language for generative art (Java-based), for about two weeks now and already I can see its possibilities.

At first, I just tried to get the basics down. The documentation and tutorials on the Processing got me started, as well as watching a bunch of videos off of The Coding Train and reading Generative Art: A Practical Guide Using Processing to get my head around what Processing was able to do. It’s Java-based, but there are forks of it in Python and Javascript.

With a loop and varied-sized rectangles, I pumped this out. Not too interesting yet but it’s a start. Then I tried the same thing but trying dimension with ellipses.

It’s a mess, but it’s my mess.

Then I started to play with spirals and transformations.

The other night I couldn’t sleep and started working on this one with lines and mountain-like peaks.

Processing makes it pretty easy to “sketch” ideas, building off one idea to another. It reminds me a bit of Design I at CVA where we’d use layout bond to duplicate and tweak iconography. I can create a basic framework for a sketch and then run it several times to get varying results. Small changes to variables can result in completely new visuals.

I saw this posted to the Generative Discord server and thought it was pretty interesting and gave it a go.

Version 1, I created a grid and made rules of how the grid shapes are filled in.

Version 2, adding texture, varying the size of the grid.

Then Loki aired yesterday I gave the carpet at the TVA a try. This uses a similar grid system to the two above, just with arcs in alternating patterns.

That’s it for now. I’ve been working on a few of these sketches a day so more on the way.

Get them early with Source Control!

This semester I’m an adjunct at Bemidji State University! I’m teaching BUAD 3283 E-Commerce Web Development (3 credits) to a mix of business and computer science majors.

We’ve had many interns from BSU in the web development department at PBC, and two things that we emphasize with them is source control management (SCM) and test-driven development (TDD). So for my curriculum, I wanted to add at least SCM.

I briefly touched on SCM in one of the first classes, going over how to use Git get code pushed to GitHub for assignments. My students were struggling with getting their code pushed to their repositories so today I let my students have the class to ask questions.

Originally I’d demoed using Atom for writing code then using SourceTree for pushing to their repositories like we do at work. One of my students was using GitHub Desktop (kind of by accident). I’d forgotten about that tool and it seemed to make more sense to use since Atom, GitHub, and GitHub Desktop dovetail nicely together.

 

I have used GitHub Desktop for a few projects before but I tend to use SourceTree or just command line:

$ git add --all; git commit -m "add all the things"; git push;

 

.env environment variables when working with Apache

I’m getting in the habit of using a .env file for loading environment variables. Laravel already uses them for setting up configuration. It’s a nice way to setup variables that can be used in bash or through a php library like vlucas/phpdotenv.

For a site I’m working on I wanted the environment variable APP_ENV set to “local” in development and set to “production” on the live site (each environment has it’s own .env file). My configuration keep on getting overridden somewhere and returning “dev”.

What happened was the APP_ENV environment variable was already set in the Apache virtual host configuration and phpdotenv will not override variable set in Apache virtual host configuration.

If you are running into this same issue a pretty easy fix. Unset the variable in you .htaccess file and then the correct value will load from your .env file. At the top of my .htaccess file in the public root I have this then:

<IfModule mod_env.c>
    # unset the APP_ENV variable since it might have been set in Apache's vhost file and needs to be used from .env
     UnsetEnv APP_ENV
</IfModule>

Hope that helps!

Installing WordPress Plugins with Composer

I found out a cool usage for composer that I didn’t know about; use it for installing WordPress plugins. I use Phing to do all my deployments (slowly moving towards continuous integration with Jenkins). I wanted a way to get the plugin files and include them with my deployment automagicly. Composer can download and extracting the plugin archive file rather than using the gui in the wordpress admin. This task can be done when all your other required libraries are installed.

I wanted to install Contact Form 7. In order for this to work you need to download the plugin from a custom repository, so I setup my composer.json file something like this:

{
  "repositories": [
    {
      "type": "package",
      "package": {
        "name": "takayukister/contact-form-7",
        "type": "wordpress-plugin",
        "version": "4.3.1",
        "dist": {
          "type": "zip",
          "url": "https://downloads.wordpress.org/plugin/contact-form-7.4.3.1.zip"
        },
        "require": {
          "composer/installers": "v1.0.7"
        }
      }
    }
  ],
  "require": {
    "takayukister/contact-form-7": "4.3.1"
  },
  "extra": {
    "installer-paths": {
      "public_html/wp-content/plugins/{$name}/": [
        "type:wordpress-plugin"
      ],
      "public_html/wp-content/themes/{$name}/": [
        "type:wordpress-theme"
      ]
    }
  }
}

I set the name of the repo to the “takayukister/contact-form-7″ and then used that as it’s require name with the current version (right now 4.3.1). The paths in the “extra” section tell composer where to put the plugin once it’s installed.

In my Phing build.xml I could then run this before any packaging tasks:

<exec command="php composer.phar install" level="verbose" passthru="true" />

If there’s a better way to do this I’d like to hear it.

::before and ::after

This is the first in a series of “today I learned” posts. Today it’s all about the pseudo element ::before and ::after.  This isn’t new news to most I’m sure, but I’ve just recently started using these and think they are pretty cool.

Say you are working on a site where you have access to the styles but not the DOM. You need to add an element to the page without actually adding any markup to a page. That’s where ::before and ::after come in. You can add either of these .element::before or .element::after to add extra element to the DOM this way.

I created an example (albeit kinda crude) to show how to use the elements. The snowman’s torso is a DOM element and the head and foot are added via .snowman::before and .snowman::after css elements. Same with the hands, there’s a empty .hand element on the page and the left and right hands are placed with .hands::before and .hands::after.

See the Pen MKVwLg by Nate Nolting (@natenolting) on CodePen.0

One caveat I’ve found is if you want the added ::before or ::after to behave like a block element you must add content: ""; to your css in order for the element to display, otherwise it has no height or width.

It does seem that we can all use it, so go a make some pseudo elements!