×

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.setMaxSpeed(1000.0);
stepper1.setAcceleration(50.0);
stepper1.setSpeed(200);
stepper1.moveTo(4048); // 2048 = 1 revolution

stepper2.setMaxSpeed(1000.0);
stepper2.setAcceleration(50.0);
stepper2.setSpeed(200);
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:

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

Photo by Sergio Russo

Project: Sculpture made from 2 million oil barrels

Published april 4th, 2018 by

(Featured photo by Sergio Russo)

Keywords: Art, oil, environmentalism, activism, civil disobedience.

Norway produces approximately 2 million barrels of oil per day, 12% of the worlds production. This project seeks financing and formal approval for building and promoting a sculpture built from the same number of used oil barrels.
(mer…)

Posted in Activism, Art, Greener, Ideas, Projects

Glitching

Published januar 18th, 2018 by

Some years ago I worked on a series of images based on glitchy frames from the now defunct RealVideo format. Back in the day when high bandwidth still was something rare, RealVideo was great for compressing streaming and ondemand video, but sometimes it would spit out video with strange artifacts, especially when livestreaming. In the Pixelpeople-series I took screenshots from interesting frames, and worked on them in photoshop, enhancing and smoothing the glitches, using them sort of like a collaborative partner.

With rising bandwidth and better algorithms and formats, such artifacts and glitches are pretty much gone. I’ve sort of missed the surprising unpredictability as an artistic inspiration, so I’ve started to research software and hardware-based ways to generate digital artifacts.

One of the tools I found was Photomosh.
Photomosh lets you upload and image, or use your webcam as an input, and has a ton of cool features to play with.

See the Pen Responsive Codepen Glitch by Morten Skogly (@mskogly) on CodePen.

Uglitch (webtool is dead, needs to run under https)
http://www.uglitch.com/en/uglitch/page/youglitch/glitchamsterdam/glitch-festival-amsterdam#!glitch/2/

See the Pen Glitched Cat by Kevin Smith (@ksmth) on CodePen.

See the Pen glitch glitch glitch by Hadrien Mongouachon (@hmongouachon) on CodePen.

See the Pen Glitch Video by uriuriuriu (@uriuriuriu) on CodePen.

See the Pen Glitch Pop by Noah Blon (@noahblon) on CodePen.

Nice tuts:

Posted in Art

Drawing with JS part 1

Published januar 14th, 2017 by

A few experiments using javascript to draw or generate graphics.


Rune.js

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

Prosjekt Glitchboks

Published oktober 5th, 2015 by

 Gleder meg (nesten) til vinteren, har et par fine små prosjekter på blokka jeg kan koze meg med når snøen kommer.

Fremtidig prosjekt. Fant en enkel radio i søpla og utforsket den, cirquit bending style. Fant noen spennende lyder .

  

Den innebygde høytaleren er ekstremt svak, men kan bruke audiojacken og koble til forsterker.

  

Gudene vet hvorfor Preus foto gir vekk brandede radioer. Weird!

 

Posted in Art, Circuit bending, DIY, Greener

Agurk, rose, kaktus, sneglehus, sjøstjerne

Published november 10th, 2014 by

Makrolinseeksperiment.

Posted in Art, Video

Heldagstegninger

Published september 27th, 2013 by

Heldagsmøter gir en sjelden ro til å tegne.

20130927-165726.jpg

20130927-165823.jpg

20130927-165908.jpg

20130927-165947.jpg

20130927-170135.jpg

20130927-170159.jpg

20130927-170254.jpg

Posted in Art, Personal

Mini DIY: Passive Aggressive Home Decoration

Published april 3rd, 2012 by

Just until we get around to redecorating properly :)

20120403-134755.jpg

Posted in Art, DIY, DIY with kids, Featured, Home and Garden

Processing: Sketch_081001a, and how to embed a sketch in a wordpress post

Published oktober 1st, 2008 by

Screenshot of processing app

I downloaded my first copy of Processing (Processing.org) a few years ago, but I have never gotten past the initial few demos and small tutorials. I’ve been interested in generative computer art for many years, ever since I first saw the work of Marius Watz in the mid nineties and had a stint reading dadaist poetry and cutups, but I’ve never had the time to play with this stuff myself. Or the brains to handle the math, hehe. But then I came across this tutorial in Computer Arts #149 (The June 2008 issue), where there are a few really interesting tutorials, which basically gives you enough info to understand the key consepts that you need to create some very interesting apps, like the one below (slightly modified of course, I added random colors among other things).

(java applets no longer functions in Google Chrome). Nothing you can do about that.)

Oh, and I had quite a hard time finding out how to embed my app in my wordpress blog. I kept getting some heavy errors when I tried to post the html the Processing software generates straight into WordPress, but I eventually got it to work. Since I couldn’t find any tutorials on how to do this, I decided to write my own. So here it is:

How to embed a processing java application in wordpress:

First, you have to turn off the Visual editor for your user, if you don’t, wordpress will 100% garanteed screw up your code. And remember, if you turn the Visual editor back on after finishing editing your post, then DON’T open the post for editing again. When I did this wordpress replaced my embed code for java with a flash embed code!!! Luckily I had saved this article as a Google Docs document, and could simply copypaste it in here again.

(* Update: This might also be related to Adblock plus, but needs to be verified)

Second, paste in this code (just remember to replace the variables with where you’ve put your own .jar file etc. You get all the info you need when you choose File and Export in Processing, and open up the resulting index.html file in an editor of your choice. Note: the applet tag is slightly depricated, so I guess I have to figure out to do this with a “proper” object + embed.

<APPLET name="sketch_081001a" WIDTH="500" HEIGHT="500" archive="https://pappmaskin.no/opensource/processing/sketch_081001a/sketch_081001a.jar" standby="Loading Processing software…" codebase="https://pappmaskin.no/opensource/processing/sketch_081001a/" code="sketch_081001a" mayscript="true" scriptable="true" image="https://pappmaskin.no/opensource/processing/sketch_081001a/loading.gif" boxmessage="Loading Processing software…" boxcolor="#FFFFFF"><IMG SRC="https://pappmaskin.no/opensource/processing/sketch_081001a/loading.gif" WIDTH="1" HEIGHT="1" /></APPLET>

Source Code:

And here is the source code for this lille app, just create a new Sketch in Processing and paste it in and run it. Should work like a charm.
int x1;
int x2;
int x3;
int y1;
int y2;
int y3;

void setup() {
size(500,500);

x1 = width/2;
y2 = height/2;
x2 = x1;
y2 = y1;
x3 = x1;
y3 = y1;
}

void draw(){
//for (int i=0; i<1000; i+=1) {
x2 = constrain( (x2-20+(round(random(40)))), -30, width+30);
y2 = constrain( (y2-20+(round(random(40)))), -30, width+30);
smooth();

//draws a triangle
fill(round(random(255)),50,100);
triangle(x1, y1, x2, y2, x3, y3);

// the triangles are joined here

x3=x2;
y3=y2;
//}
//noLoop();

}

Or get the source code here: sketch_081001a

Posted in Art, Code, Open Source