Drawing with JS part 1

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.

Prosjekt Glitchboks

 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!
 

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

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

Open source flash-based sound sequenzer

I’ve been thinking alot about making a soundbased installation in Adobe Flash, using sensors and switches, and I’ve gotten around to making a few small eksperiments/prototypes as research, which I’m planning to share on this site later.

But I also found this old experiment I wrote in Flash 5 (!) and wanted to share it. It is a visual sequenzer (*) / sound toy that lets you drag icons onto a “soundstage”, each icon representing a sample. As you press play a line starts moving vertically, and as the line hits one of the icons, the corresponding sound is played. You can also click, drag and hold an icon, and move it on top of the moving line to trigger the sound. There are two types of sounds. The yellow icons trigger different “wet finger on glass” sounds, and the greywhite icons trigger sonar ping sounds.

Open Source

The code is pretty old, and there are WAY better ways of making something like this with AS3, but still, here is the source code (fla) for it (it also includes the samples, which you are free to use in any way you like).

I still think it is a pretty nice little project, but I am toying with the idea of replacing the click and drag with a webcam mounted in the ceiling, and letting people moving around on the floor trigger the sounds. I have quite a lot to learn before I can make something like that, but I’ll get there!

* Ok, so I guess it is a stretch to call this a sequenzer, but I wanted to create a fun, easy and interesting way to generate a sound collage.

Pixelpeople

Pixelpeople is a series of digital portraits I made many years ago, back when I still had time to frolick. Some of them are stillframes grabbed from heavily compressed Real Video, which where know for creating rather strange artifacts in their encoding. Others are still frames from television, I believe one of them is even based on a still from Baywatch :). I was inspired by Dave McKean at the time, so that is where the layers of textures came from on some of the portraits.