Ricksmuseum

ArcText, text on a circle / arc

Category: Math, Processing — Rick Companje — 11 January 2008 @ 03:58

ArcText, Text on Arc / circle, Processing / FlashTekst op een boog. Niet moeilijk op zich, maar omdat elke letter een andere breedte heeft moest ik om het helemaal perfect te krijgen qua spatiering weer even wat oude goniometri regeltjes boven halen. De truuk is namelijk voordat je een letter print alvast een beetje te roteren met een hoek die je berekent op basis van de halve breedte van de letter. Dan voeg je eventueel nog een beetje tracking toe als je wilt dat de letters dichterbij over verder uit elkaar staan. Dat doe ik relatief t.o.v. het gekozen lettertype en de fontgrootte volgens de ‘em’ eenheid waarbij 1em de breedte van de letter ‘m’ is. Vervolgens roteer je weer een halve letterbreedte en begin je opnieuw voor de volgende letter.

Dat met die hoek zie je goed in het bovenste plaatje. Je berekent heel gemakkelijk hoek alpha door de inverse tangens te nemen van de overstaande zijde (halve letterbreedte) gedeeld door de aanliggende zijde (straal van de cirkel).

Klik op het onderstaande screenshot voor een interactieve versie waarbij je met de slidertjes de variabelen kunt instellen.

ArcText, Text on Arc / circle, Processing / Flash

View demo
View source
Download source as PDF

Alternatieve Sinus Functie

Category: Math, Information Esthetics, Processing, Science, Art — Rick Companje — 20 November 2007 @ 21:15

Over het algemeen kost het aanroepen van een sinusfunctie binnen een programmeertaal een hoop clock-cycles. Daarvoor krijg je wel een hele nette benadering van de sinus van een getal. Vaak veel te netjes als het mij vraagt. Zijn er alternatieven voor wanneer je wat minder detail nodig hebt? Ja, en die zijn een stuk sneller. [1].

Wat dacht je van:

sinX = 1.2732395*x + (0.4052847*x*x) * (x<0?1:-1);

Het is een aardige benadering van de sinusfunctie die op mijn vaste computer wel even 20x zo snel is als de ingebouwde Processing/Java sinus functie.

Wil je nou iets meer detail dan kun je ‘m nog finetunen door met het resultaat van de vorige berekening nog even het volgende uit te halen.

sinX= .225*((x<0?-1:1)*sinX*sinX-sinX)+sinX;

Die is nog steeds 9x zo snel als de standaard sinus functie.

Ben je benieuwd hoe dit werkt zoek dan even op Taylor reeksen want volgens mij hebben we het oorspronkelijk aan hem te danken.

Taylor wilde iedere willekeurige functie schrijven als een polynoom.
Eventueel met graad oneindig, oftewel: als een oneindige reeks.
De gedachte achter dit polynoom is, dat hij voor het punt x=0 de
zelfde waarde heeft als f(x), maar ook dezelfde afgeleide en 2e
afgeleide, enz. [2]

Fijn om te weten is misschien waar die twee getalletjes (1.2732395 en 0.4052847) precies vandaan komen. Waarom weet ik niet maar de eerste staat voor 4/PI en de tweede voor 4/PI2.

Sourcecode
Zie source Alternatieve-Sinus-Functie
Zie source qSin-Color-Wave-Demo

Zoals je ziet is voor zoiets als het onderstaande de grove benadering prima voldoende:
Cool Sinus

Quick Sine

Cool Sine

Externe links
* http://home.wanadoo.nl/rule-off/wis/reeksen.htm
* http://lab.polygonal.de/
* http://lab.polygonal.de/wp-content/articles/fast_trig/fastTrig.as

Icosahedron, de 12-hoek

Category: Math, Processing — Rick Companje — 2 October 2007 @ 10:21

IcosahedraIk ben even bezig geweest met Triangulation: 3D objecten opbouwen uit driehoekjes. Ben nu aanbeland bij de Icosahedron, een 12-hoekig object met 20 vlakken en 30 kanten en bestaande uit allemaal gelijkbenige driehoeken. Iedere driehoek daarbinnen kun je weer opdelen in nieuwe driehoeken zodat je steeds meer detail krijgt en uiteindelijk op iets uitkomt dat bijna een bol is. De Icosahedron is een van de 5 ‘platonic solids’. Een platonic solid is een vorm waarvan alle hoeken en vlakken gelijk en plat zijn.

Platonic Solids

Video: Globe4D @ TodaysArt 2007

Category: C++, Information Esthetics, Math, Data, Globe4D, Multimedia, Events, Art, Science, Interaction — Rick Companje — 27 September 2007 @ 01:01

TodaysArt in Den Haag was bizar cool! Bedankt iedereen!
Check de video en zie een aantal nieuwe apps. Let ff op bij het einde, daar experimenteren we namelijk met het tonen van fMRI data (hersenscans) op de globe! Vrijdag moet dat af zijn, want dan staan we ermee op de lustrumdag van het F.C. Donders Centrum in Nijmegen.

Hersenen op Globe4D @ Radboud Universiteit

Category: Information Esthetics, Math, Design, Data, Media Tech, Making Art of Databases, Events, Art, Multimedia, Globe4D, Interaction — Rick Companje — 24 September 2007 @ 00:44

FMRI imageVrijdag 28 september is er spectaculaire opendag bij F.C. Donderscentrum van de Radboud Universiteit in Nijmegen vanwege hun vijf jarig bestaan.

Globe4D is samen met De Spullenmannen van het Knopjesmuseum uit Amersfoort vertegenwoordigd met een wel heel vreemde setting. Een ‘EEG fluitketel‘ en een globe waarmee je in het brein kunt kijken. In plaats van het veranderingsproces van planeten te projecteren wordt Globe4D dit keer ingezet om laagjes af te pellen van een menselijk brein, althans van de fMRI data daarvan.

Komt dat zien! Klik hier voor meer info

“Sinds 2002 doen wij onderzoek naar de werking van de hersenen. Wij nodigen u graag uit om dit met ons te vieren. 10.000.000.000.00 zenuwcellen die via 100.000 km aan verbindingen met elkaar samenwerken maken het mogelijk dat wij TV kijken, fietsen, spreken, studeren en al het andere doen wat ons mens maakt. Door de modernste technieken kunnen wij het brein nu live in actie zien, iets wat dertig jaar geleden nog onvoorstelbaar was. Wilden we in de 20ste eeuw zo ver mogelijk de ruimte inkijken, in de 21ste eeuw richten wij ons naar binnen. Hoogste tijd om u een kijkje in onze keuken te geven!” [www.ru.nl/fcdonders/lustrum]

Areas of conflu(x)ence - Art, Space & Technology in the Digital Age

The Interactive Morphogenesis project I did together with Ralph Kok and Irad Lee is accepted for the international art conference: Areas of conflu(x)ence - Art, Space & Technology in the Digital Age.

Location : Sibiu, Romania
Dates : October 4-7, 2007

In our project we demonstrated a concept for interacting with 3-dimensional Lindenmayer Systems (L-systems) models using live sound. Using the dynamics of L-systems, methods for visualizing and synthesizing sound are examined through recursive generation of virtual-artificial organisms. The project shows how L-systems can be used to visualize elements in sound and vice-versa, to demonstrate how sound can be used to grow L-system based, interactive artificial morphogenesis.

More info about the conference at: Mediamatic.net and www.2580association.info

Interactive Morphogenesis

Areas of conflu(x)ence proposes an international debate on the relationship between art and technology in the present digital era, focusing on the impact of the new media in our lives.

Today’s digital technologies have created a new model of understanding different aspects of reality. The change they produced compels us to reconsider the conditioning of our modern lives while their potential demands to be explored. Post-modernist syntax is today reevaluated and there are positions that support the thesis of a hyper-industrialized society.

Science and technology are expected to push forward the frontiers of knowledge, while art is asked to mirror these new experiences. The way we handle our lives and our expectations is changing continuously according to these new frontiers. The place we give to the different aspects of our lives and the spatial articulation of our activities are subjected to constant conceptualization based on a continuous flux of discoveries. What kind of models are we using in perceiving and understanding our new environment? If the tools we use have an influence on the way we deal with our environment,
how do we use their potentiality? What traps are to be avoided? What do we expect from technology? Should the new technologies be a matter of concern? By trying to answer all these questions, the conference intends to identify the present condition of our data driven lives and the factors that influence it.

On the basis of artistic and aesthetic experiences, we will study the ways in which image, sound and space are today affected by the digital technologies.

The conference will also include multimedia performances, an exhibit hall of innovative projects and tours of the art installations. [Mediamatic.net]

interactive-morphogenesis.jpg

Flex Image Zoom Drag Component

Category: TravelTrace, Flex, Math, Programming, Multimedia, New Zealand, Tech, General — Rick Companje — 28 June 2007 @ 10:23

I finally managed to create a good Image Zoom Component with zooming, dragging, navigator and keyboard functionality. It’s build in Flex / ActionScript 3 and I think it’s a nice example of using the MVC (model view controller) pattern to prevent spaghetti code. The model doesn’t know anything about the size of the viewport and the image because that’s something only the view and the controller need to know. The model only knows the aspect ratio of the image and the viewport. When you want to zoom or move, you change the model and after that you update the view based on the values in the model. The model stores the position and size of the viewport in values between 0 and 1. This makes it very easy for the controller / view to scale it to the real size.
I also used the new ScrollRect feature and I like that thing a lot! Tip: Don’t use scaleX and scaleY to resize the large image because than you need to compensate the scale of the viewport. Resizing the image is done by changing its width and height.

I think there are still some things to be done. Depending on the shape of the viewport and image you might want to have the full image visible by adding empty space on the sides. But that’s some which should be easy to implement because of the clear MVC separation. Good luck if you try it and let me know! [rick /at/ companje /dot/ nl]

watch demo
view source

flex-image-zoom-drag-navigator-component

MathoMatic

Category: Math, Media Tech, Science, General — Rick Companje — 7 June 2007 @ 09:03

Ik zocht al een tijdje een computerprogramma die je helpt bij het oplossen van een wiskundige functie voor een bepaalde variabele. Natuurlijk zou ik dat zelf moeten kunnen, maar ja ik kan ook zelf alle propjes van de vloer oprapen maar gebruik ik liever een stofzuiger.

Wat ik wil dus is een programmatje die in het meest simpele geval wanneer er U=I*R staat en ik vraag om I dat ie dan zegt: “Hoi Rick, I=U/R”. Dit is natuurlijk wel een te erg makkelijk voorbeeld maar als functies lastiger worden scheelt ‘t al gauw een hoop tijd.

Nou schijnt het zo te zijn dat Maple hier een heel geschikt programma voor is, die je ook stap voor stap uitlegt hoe ie tot z’n oplossing is gekomen. Mathematica schijnt het ook prima te kunnen. En afgelopen weekend heb ik ook in MatLab dit soort functionaliteit kunnen ontdekken wanneer je syms=on aanzet. Ik geloof wel dat je de Extended Symbolic Math Toolbox nodig om optimaal van de functionaliteit te kunnen genieten en die toolbox schijnt een stukje Maple 10 kernel te bevatten… Anywayz… allemaal dure programma’s voor iets wat volgens mij toch niet zo heel moeilijk zou moeten zijn. Of toch? Blijkbaar wel want het enige freeware tooltje dat ik (of eigenlijk Joris) heeft gevonden heet MathoMatic en is (nog) niet instaat om te gaan met triometri en logaritmen.

MathoMatic is een een open source (LGPL) platform onafhankelijk Computer Algebra System. Het werkt zelfs op een Nintendo DS en is ook via Telnet (probeer maar) te benaderen wat ‘m misschien leuk maakt voor online applicaties (Vanuit Flash/Flex of als een Apollo widget :-). De ontwikkeling loopt al sinds 1986 en eigenlijk ziet het programma er ook uit alsof het sindsdien niet meer bijgewerkt is. Maar dat schijnt niet zo te zijn. De meest recente versie is gisteren verschenen: v12.7.2.

Mathomatic can symbolically:
* combine and solve algebraic equations,
* completely simplify and compare expressions,
* do calculus transformations (derivative, polynomial integral and Laplace, extrema, and Taylor series),
* help with series analysis (sum and product),
* do standard, complex number, and polynomial arithmetic,
* generate efficient C, Java, and Python code from equations,
* and perform quick calculations, all in color, for easier reading.

Een experimentje met een formule waaruit zowel een ellips als een (bijna) rechthoek komt afhankelijk van de macht die je invult:

(x/a)^n+(y/b)^n = 1

Het resultaat voor x of y is te zien in het screenshot van MathoMatic:

Mathomatic

Sierpinski Triangle built with Processing

Category: Math, Processing, Programming, General — Rick Companje — 18 January 2007 @ 15:04

The Sierpinski triangle, also called the Sierpinski gasket, is a fractal, named after Wacław Sierpiński who described it in 1915. Originally constructed as a curve, this is one of the basic examples of self-similar sets. [Wikipedia]

Meestal wordt de Sierpinski triangle door een recursieve functie getekend, het kan ook zo:

[code lang=”Java”]
//Sierpinski Triangle by Rick Companje
//2007-01-18

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

for(int x=0; x < width ; x++)
for(int y=0; y < height; y++)
if ((x&y)!=0) point(x,y);
}
[/code]

Sierpinski Triangle built with Processing

Sierpinski Triangle me L-Systems

[code lang=”Java”]
//Sierpinski Triangle using L-Systems
//18-1-2007 by Rick Companje

int gen = 0;

void setup() {
size(200,200);
frameRate(4);
stroke(255);
}

void draw() {
float angle = radians(120);
float len = width;
String axiom = “F+F+F”; //triangle

background(0);
translate(width,height-10);
rotate(HALF_PI);

for (int i=0; i < gen; i++) {
axiom = axiom.replaceAll("F","F+F-F-F+F");
len/=2;
}

for (int i=0; i < axiom.length(); i++) {
switch (axiom.charAt(i)) {
case 'F': line(0,0,0,len); translate(0,len); break;
case '+': rotate(angle); break;
case '-': rotate(-angle); break;
}
}

if (gen++ > 5) gen=0;

}
[/code]

Deze is toch wel cooler:
3D Sierpinski Triangle

Koch Curve built with Processing

Category: Math, Processing, Programming, Science, General — Rick Companje — @ 02:59

To view this content, you need to install Java from java.com

[code lang=”Java”]
/* Koch Curve, 2007-01-18 by Rick Companje */

int gen = 0;

void setup() {
size(450,150);
frameRate(5);
stroke(255);
}

void draw() {
float angle = PI/3;
float len = width;
String axiom = “F”;

background(0);
translate(0,height-10);
rotate(1.5*PI);

for (int i=0; i < gen; i++) {
axiom = axiom.replaceAll("F","F-F++F-F");
len/=3;
}

for (int i=0; i < axiom.length(); i++) {
switch (axiom.charAt(i)) {
case 'F': line(0,0,0,len); translate(0,len); break;
case '+': rotate(angle); break;
case '-': rotate(-angle); break;
}
}

if (++gen > 5) gen=0;
}
[/code]

Golden Spiral built with Processing

Category: Math, Processing, Science, Art, General — Rick Companje — 7 January 2007 @ 13:54

Golden Spiral built with ProcessingEen klein experimentje met de gulden snede op de meest makkelijke manier die je je maar kunt voorstellen in processing: Relatief roteren, transleren en schalen.

De gulden snede geeft een verhouding weer die veelvuldig in de natuur wordt aangetroffen. Deze deelt een lijn of lengte zodanig in twee ongelijke delen, dat de verhouding van het kleine tot het grote deel dezelfde is als die van het grote deel tot het geheel.

Als men een rechthoek neemt met zijden a en b, die overblijft na verwijdering van het vierkant met zijde a, zodanig dat deze gelijkvormig is met de oorspronkelijke rechthoek, dan wordt de verhouding a/b de gulden snede genoemd. [Wikipedia]

[code lang=”Java”]
//Golden Spiral
//2007-01-06 by Rick Companje

float phi = (sqrt(5)+1)/2;

size(323,200);
translate(height/phi,0);
scale(height);
noStroke();
smooth();

for (float i=0; i < 10; i++) {
fill(i/10*255);
rect(0,0,1,1);
fill(255,255,0,150);
arc(0,0,2,2,0,PI/2);
scale(1/phi);
rotate(PI/2);
translate(1/phi,0);
}
[/code]

Mobius band

Category: Math, Processing, Programming, General — Rick Companje — 6 January 2007 @ 19:16

mobius.pngDe bekende Mobius band in Processing.

“De Mobiusband of band van Mobius is een bijzondere ruimtefiguur. De band bestaat namelijk alleen uit een plat vlak, maar kan alleen in de driedimensionale ruimte bestaan.” (Wikipedia)

for (float u=0; u < TWO_PI ; u+=.025) {
  stroke(u/TWO_PI,1,1);
  for (float v=-1; v < 1; v+=.05) {
    x = r*(1+v/2*cos(u/2))*cos(u);
    y = r*(1+v/2*cos(u/2))*sin(u);
    z = r*(v/2*sin(u/2));
    point(x,y,z);
  }
}

Bekijk hier de complete source