Tag Code

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 #3: More Wittgenstein

Again did not have very much time to code and after coding mostly in C for arduino etc. I do find Java & Javascript (the p5.js) to not really fit into my way of thinking. I do still enjoy it and this week I mostly ported the first week’s scipt into vectors. Inspired again (a lot) by Shiffmans Nature of Code-book. It is a recommendable book, if you have some background on programming and Object-oriented programming. Not the most clearly written, but fun. He has done a video tutorials also, which are a joy to watch.

Anyway this weeks code might not work on mobile devices that well, as it does track your mouse position. But who knows if it miraculously detects your touch also… (Did not code that into it, altough p5.js has support for touch controls.) And it’s a one minute loop on the text part. So stick around for the finale..


Wittgenstein and certainty:
[p5js code canvas]void thought1(){
int m = second();
if (m >5 && m <25 ){ fill(0); text("I act with complete certainty. But this certainty is my own.",100,250); } else { fill(255); text("I act with complete certainty. But this certainty is my own.",100,250); } } void thought2(){ int m = second(); if (m >27 && m <55 ){ fill(0); text("At the core of all well-founded belief lies belief that is unfounded.",100,50); } else { fill(255); text("At the core of all well-founded belief lies belief that is unfounded.",100,50); } } class Mover { PVector location; PVector velocity; PVector acceleration; float topspeed; Mover() { location = new PVector(width/2, height/2); velocity = new PVector(0, 0); topspeed = 10; } void update() { acceleration = PVector.random2D(); acceleration.mult(random(2)); velocity.add(acceleration); velocity.limit(topspeed-int(random(10))); location.add(velocity); } void display() { fill(255,50); noStroke(); rect(0,0,640,360); fill(10); ellipse(location.x, location.y, 5, 5); } void checkEdges() { if (location.x > width) {
location.x = 0;
else if (location.x < 0) { location.x = width; } if (location.y > height) {
location.y = 0;
else if (location.y < 0) { location.y = height; } } } class Follower { PVector location2; PVector velocity2; PVector acceleration2; float topspeed2; Follower() { location2 = new PVector(random(width),random(height)); velocity2 = new PVector(0,0); topspeed2 = 4; } void update2() { PVector mouse = new PVector(mouseX,mouseY); PVector dir = PVector.sub(mouse,location2); dir.normalize(); dir.mult(0.5); acceleration2 = dir; velocity2.add(acceleration2); velocity2.limit(topspeed2); location2.add(velocity2); } void display2() { noStroke(); fill(255,0,0,100); ellipse(location2.x,location2.y,4,4); } void checkEdges2() { if (location2.x > width) {
location2.x = 0;
} else if (location2.x < 0) { location2.x = width; } if (location2.y > height) {
location2.y = 0;
} else if (location2.y < 0) { location2.y = height; } } } Mover mover; Follower[] follower = new Follower[20]; void setup() { PFont myFont; myFont = createFont("Georgia", 12); textFont(myFont); size(640,360); mover = new Mover(); for (int i = 0; i < follower.length; i++) { follower[i] = new Follower(); } background(255); } void draw() { thought1(); thought2(); mover.update(); mover.checkEdges(); mover.display(); for (int i = 0; i < follower.length; i++) { follower[i].update2(); follower[i].checkEdges2(); follower[i].display2(); } }[/p5js]

Hackety hack

On the topic of interesting and easy programming platforms,

I just discovered Hackety hack, whichs is programming platform based on ruby on rails.

Just downloaded it, and had a look around, seems like very good place to start to learn any kind of programming on your own. Some easy tutorials and intros are included.

If interested follow the link and give it a shot.


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.

Painting with code

Painting is a process mostly done with brushes and paint. It has certain feeling about it. YOu can feel the canvas, it’s richness, it’s texture etc. You can smell the paint, feel it and see the concrete work you have done. Painting is physical act.

Painting with digital media has not interested me before, because it lacks the feel of the material. Most programs just try to imitate normal medias of painting. But they lack the odor, the richness and also the physical act feels incomplete. There is nothing material in digital painting. only something on the screen.

Lately I have been interested in alternative ways to use the power and capabilites of digital media. And this has been done through coding. Some easy code languages such as processing gives you the basic tools for accesing computer and digital media. This kind of basic components gives you (or at least me) more the feel that I am doing something, that I am in control of the media, or at least understand it. For me coding seems to be the missing brush for digital media.

This blog is somewhat of a diary of thoughts concerning coding, digital art, and art in general seen through the possibilites coding gives me.