Blowing bubbles

Published juni 20th, 2018 by

Discovered the wonderful Daniel Shiffman recently, and fell in love with his beginner tutorials on p5js. What a superb educator!

Click and drag to draw more bubbles. The max number of bubbles is set to 100, so by drawing new ones you can sort of control what part of the canvas they can move. Click once on a bubble to delete it, leaving a white dot. Art by chance kind of thing.

See the Pen Blowing bubbles by Morten Skogly (@mskogly) on CodePen.

Two bubbles with hit detection. If they touch the shrink by 1

See the Pen Blowing bubbles 2 (Pappmaskin.no) by Morten Skogly (@mskogly) on CodePen.

Posted in Art, Code

Ideas for Drawing machine #1

Published mai 2nd, 2018 by

My my how time flies. It’s been two years since I built my first drawing machine, a vertical pen plotter. I’ve since then built two more machines using the same hardware, but different sizes, and made over a hundred drawings and experiements. I even had a one month exibition at a tiny local cafe. Nerd goes artsy.

Currently all three machines as broken, partly from transportation, partly after an “inventors day” at Vitensenteret last year where the kids where a bit too “hands one”, if you know what I mean :) So they’ve been in the basement gathering dust, waiting for inspiration to strike.

Most of the images I’ve drawn on the machines have been based on SVG input, and quite a few have gone through Illustrators scribble effect before printing, converting filled areas into continous lines. I loved the effekt, but sort of lost my moxy. It felt that the machines should be used for something more fun than just drawing the images I gave them. At least the end result might excite ME more. Here is an example of a “scribbled” vector image:

There are so many things I want to do. I’ve been tinkering with computer generated art off and on for years, and I’ve researched complex ideas based on machine vision and artificial intelligence. One idea I’m brewing on is converting input from webcam 1 into paths, and then use machine learning to let the machine itself use webcam 2 to figure out how to control the motors to draw a result similar to input (after filtering, simplification or style transfer). I’d love to take the drawing machines in that direction, but I think I want to go back to basics a little bit first. My first drawings where simple done by giving the two stepper motors commands on rotation individually, and the patterns that came out where just lovely, flowing and organic, repeating infinitely.

Example arduino code:
void setup() /****** SETUP: RUNS ONCE ******/
stepper1.moveTo(4048); // 2048 = 1 revolution

stepper2.moveTo(-2448); // 2048 = 1 revolution minus 400 to make it asymetric asymetric

}//–(end setup )—

This is what came out when using a sponge and ink:

View this post on Instagram

Arduino + steppermotorer + svamp = kunst! #arduino #drawbot #art #diy

A post shared by Morten Skogly (@mskogly) on

Love it!

So I’m thinking of going back to exploring more random and serendipitous ideas. One direction could be a simple “random walk”, as explained in the introduction to the book “The nature of code“, by Daniel Shiffman. Alongside Conway’s Game of life, the random walk is one of the classic beginner examples in generative visual computer art.

Here is an simple example of a picture drawn by random walk-code:

I love the randomness, but also the order that comes from the fact that there are strict and simple rules to be followed. The next point on the path can only be forwards, backwards, up or down one pixel.

Go to my codepen to see the code and to generate your own.

Leave the random walk running for a while longer gave me this.

So I think I’ll try that.

Or perhaps an etch-a-sketch :)

Update: Find a route beween vertices.

See the Pen 9.9: Minimum Spanning Tree (Prim’s Algorithm) – p5.js Tutorial by Morten Skogly (@mskogly) on CodePen.

Posted in Art, Code, DIY

Responsive youtube background limited to div with content on top

Published januar 23rd, 2018 by

See the Pen Responsive youtube background limited to div with content on top by Morten Skogly (@mskogly) on CodePen.

Posted in Code

CSS3 background patterns inspired by Yayoi Kusama

Published januar 17th, 2018 by


Posted in Code

Quickest way to poll a changing json and update a row in a Google spreadsheet

Published november 29th, 2017 by

Aka "a poor mans database".

A user asked for a playlist for one of our streaming radiochannels. We have no official playlist for that channel, and being pressed for time I hastily created a Google Spreadsheet and added a simple script for polling a json-script. It uses Google's inbuilt trigger solution for running the script every five minute. The script lacks any checks and failsafes and is meant for demo purposes.


Posted in Code

ReMorten v0.1 – Part 1 – Remote camera

Published august 23rd, 2017 by

The ReMorten Project: A telepresence robot platform using nodejs running on the Raspberry Pi. Because why not.


Posted in Code, Projects

Linking to a spotify search with both track and artist

Published februar 16th, 2017 by

It seems that Spotify has made some changes to how one should format links when performing more complex searches, causing some problems with one of the services I work on. This post describes my solution.

Posted in Code, Webdev

Jetpack JSON Api – outputting custom fields

Published januar 24th, 2017 by

Instead of using rss to retrieve data from a wordpress site I wanted to try out the Jetpack JSON API, aka WordPress Rest api. I came across some smallish challenges, so just wanted to write a quick post with the solution for those getting stuck on the same.

Posted in Code

Drawing with JS part 1

Published januar 14th, 2017 by

A few experiments using javascript to draw or generate graphics.


Via http://printingcode.runemadsen.com/examples/

See the Pen Rune.js 3 Manipulates the outline of a polygon by changing the position of its vectors. by Morten Skogly (@mskogly) on CodePen.

See the Pen Rune.js 8 Loop by Morten Skogly (@mskogly) on CodePen.

See the Pen Rune.js 4 Noise by Morten Skogly (@mskogly) on CodePen.

See the Pen Rune.js 5 Pintori Noise by Morten Skogly (@mskogly) on CodePen.

Autoruns, generates random polygon. Click rerun to … rerun.

See the Pen Rune by Morten Skogly (@mskogly) on CodePen.

Via http://printingcode.runemadsen.com/lecture-form-2/
Documentation: http://runemadsen.github.io/rune.js/documentation.html

See the Pen Rune.js 2 by Morten Skogly (@mskogly) on CodePen.

Vanilla js using canvas, via https://javascript30.com/

Click and drag to draw.

See the Pen Html5 canvas – Drawing 1 by Morten Skogly (@mskogly) on CodePen.

See the Pen Html5 canvas – Drawing 2 by Morten Skogly (@mskogly) on CodePen.

Posted in Art, Code, Testing

Default startup page on Ubuntu guest session

Published november 19th, 2015 by

I’ve been setting up some salvaged laptops for a local refugee center, running linux, and wanted to open a webpage automatically with useful information when a user logs on as guest. I did some googling, but found the explanations pretty confusing and convoluted.

The solution is pretty simple, when you first figure it out. This is how I did it on my laptops, running Ubuntu 15.10. (It should also work from Ubuntu 14.04):

1. Log in as admin, and start the terminal and enter the /etc directory by typing cd /etc.
2. Create the directory guest-session, by typing sudo mkdir guest-session. Enter the dir by typing cd guest-session.
3. Typed sudo gedit auto.sh. This opens the text editor gedit with an empty document. Enter firefox “pappmaskin.no” and save the document. Close gedit.
4. Log in as guest, and the url you wrote should open.


Posted in Code, Open Source, Repair the planet