Tag Processing

Code a Week #4 Wittgenstein, my idol.

So this week completes somewhat my dive into processing, at least for a a little while. We salvaged working copies of Canon X-07, which understands the programming language of my childhood: BASIC! WUHUU!!!

Canon X-07

So I am going to be experimenting with that and sharing some results. I am also teaching two eTextile courses in the coming months and using Adafruits Gemma’s and Flora’s in then so some ATTiny code is following also.
But here is Wittgenstein and vectors with force applied into them. The grey dot should be draggable, not sure if it works in the p5.js environment though.
[p5js code canvas]class Attractor {
float mass;
float G;
PVector location;
boolean dragging = false;
boolean rollover = false;
PVector dragOffset;
Attractor() {
location = new PVector(width/2,height/2);
mass = 20;
G = (second()/30);
dragOffset = new PVector(0.0,0.0);

PVector attract(Mover m) {
PVector force = PVector.sub(location,m.location);
float d = force.mag();
d = constrain(d,5.0,25.0);
float strength = (G * mass * m.mass) / (d * d);
return force;

void display() {
if (dragging) fill (second()*4.25,50);
if (dragging) text(“Knowledge is in the end based on acknowledgement.”,350,mouseY+6);
else if (rollover) fill(240,40,40,200);
else fill(175,200);

void clicked(int mx, int my) {
float d = dist(mx,my,location.x,location.y);
if (d < mass) {
dragging = true;

dragOffset.x = location.x-mx;
dragOffset.y = location.y-my;


void hover(int mx, int my) {
float d = dist(mx,my,location.x,location.y);
if (d < mass) {
rollover = true;
text(“One often makes a remark and only later sees how true it is.”,mouseX-80,mouseY+50);

else {
rollover = false;
text(“One often makes a remark and only later sees how true it is.”,100,240);

void stopDragging() {
dragging = false;
text(“Knowledge is in the end based on acknowledgement.”,150,150);

void drag() {
if (dragging) {
location.x = mouseX + dragOffset.x;
location.y = mouseY + dragOffset.y;


class Mover {

PVector location;
PVector velocity;
PVector acceleration;
float mass;

Mover(float m, float x, float y) {
mass = m;
location = new PVector(x, y);
velocity = new PVector(1, 0);
acceleration = new PVector(0, 0);

void applyForce(PVector force) {
PVector f = PVector.div(force, mass);

void update() {

void display() {
ellipse(location.x, location.y, mass*25, mass*25);

Mover[] movers = new Mover[10];

Attractor a;

void setup() {
PFont myFont;
myFont = createFont(“Georgia”, 12);
size(640, 360);
for (int i = 0; i < movers.length; i++) {
movers[i] = new Mover(random(0.1, 2), random(width), random(height));
a = new Attractor();

void draw() {

a.hover(mouseX, mouseY);

for (int i = 0; i < movers.length; i++) {
PVector force = a.attract(movers[i]);


void mousePressed() {
a.clicked(mouseX, mouseY);

void mouseReleased() {


Code a week #1

I have been researching creative coding as a practice in art education for a year now and thinking about much longer. Starting a new year, I realized I have not coded that much during the last year. So I set myself a little challenge -To write a little nifty program every week. – To get myself familiar with the most basic stuff again. These are nothing miraculous or fancy. But something fun for myself. Besides the code, I am exploring the artistic qualities of the code in these little sketches.

Read More

Ohjelmoitua taidettaProgrammed art

Ohjelmoitua taidetta

Tietotekniikka kattaa nykypäivänä yhä kasvavan osan elämämme alueista. Yhteiskunnastamme rakentuukin yhä enemmän tietotekniikan ja ohjelmistojen varaan. Tietotekniikka on ehkä suurin murros sitten kirjapainon keksimisen. Se on mahdollistanut yhteiskuntamme uudistumisen monella tavalla. Paradoksaalista on että tietotekniikan yhä yleistyessä ja vallatessa uusia osa-alueita elämästämme, me ymmärrämme yhä vähemmän miten tietotekniikka toimii.

This post is only in Finnish, and is a copy of article I wrote for Stylus magazine (magazine for art educators in Finland) Read More

Artificial digital art vs. real digital art

Loom, by Tomi Dufva











I have been wondering for quite a long time that why is it thatI prefer programming as a way to create digital drawings and not just simply use some clever drawing programs, like painter or illustrator. And there is some great drawing programs out there, that can mimic real life mediums and go well beyond them. Like Painter with it’s watery watercolors and liquid inks. Somehow digital paintings just feels wrong, even if they are nice programs and the works produced with them fairly good. Come to think of it, I have never seen any convincing abstract piece of art that has been made with such tools. There is some very nice figurative works, Like Mikkö Ijäs’s iPad drawings. But I havent come across some nice abstract paintings or other digital artworks made with such tools. There is some, but they’re probably ment to be just some filling in website or similar.

Obviously the answer is simple: they are just copying real life media. They are not original. And it can be felt. Hardly ever have I seen digitally made paintings that would move me. They cant, because theyre superficial. Abstract art is all about the media, it shows the quality of the media, like the material of oil colours or the light of watercolors and that way it also conveys some larger intents of the artists. Digital copies don’t do that, they are mere copies trying to be original.

Still, coded digital art moves me. I always find and feel it interesting. Painting by code. It feels natural. And that it is: programming is the very core of digital.

Well this is simple thing really. Just something I think of importance to ponder on.


I am always interested
when something new with coding and art comes out. A little time ago
I noticed that the javascript version of Processing (check:
) has
finally hit 1.0 version. I have been testing it a little and Im
quite happy about it. Heres some of my thoughts on the

What Processing?

style=”color: #888888;”>For those that word Processing doesn’t
ring any bells, it’s a fairly simple programming language created
for artists, designers and non-programming people. It skips all the
bit boring parts of programming and focuses on the fancy stuff,
like visuals and interactivity. It’s a great intro to the world of
programming, but also very powerful platform to creat visual art on
its own. Processing has quite large community and different
ecternals and libraries has extended its use in many, many ways. Oh
and it’s free. Check it out

title=”Processing.org” href=”http://processing.org/”

style=”color: #888888;”>Why would I need the javascript

What makes me excited about the javacript version is
that it’s so easy to embed in many different web–based things. For
example in this wordpress post:

style=”color: #888888;”>It’s easy and great way to share some
sketches and also get your work shown. Also it’ll run on any modern
browser and is based on html5 and css.


There is some issues at least Safari and processing.js
and not all the processing sketches work properly. Specially theres
some issues with displaying fonts, specially in WordPress. All in
all, Im glad there’s such an easy way to show your processing
sketches on your own websites. (There is of

href=”http://www.openprocessing.org/”> open processing’s

where its easy to share processing sketches, but I really like the
idea to easily share them on my own.) This way it’s interesting to
make your own online exhibitions with your work and control the
whole user experience.