Alexandre Villares


sketch-a-day

one visual idea a day [on GitHub!]

Hi! I’m Alexandre Villares, let’s see if I can make one small program (sketch) a day. I’m working mostly with Processing Python Mode and sometimes Processing Java Mode andP5JS (JavaScript) or other stuff.

If you enjoy this, make a small donation here or with Patreon


s113

113: code [Py.Processing]


s112

112: code [Py.Processing]

Hexagons!

def hexagon(x, y, r):
    with pushMatrix():
        translate(x, y)
        beginShape()
        for i in range(6):
            vx = cos(i * TWO_PI /6) * r
            vy = sin(i * TWO_PI /6) * r
            vertex(vx, vy)
        endShape(CLOSE)

s111

111: code [Py.Processing]

Now I ‘fixed’ the rotation with propper pushMatrix() and translate()

        with pushMatrix():
            translate(x0,y0)
            rotate(fs0)
            stroke(st0)
            equilateral(0, 0, fs0)
        with pushMatrix():
            translate(x1,y1)
            rotate(fs1)
            stroke(st1)
            equilateral(0, 0, fs1)
        with pushMatrix():
            translate(x2,y2)
            rotate(fs2)
            stroke(st2)
            equilateral(0, 0, fs2)

s110

110: code [Py.Processing]

Just added some rotations to mess things up. It’s “wrong”, but I like it!

        rotate(fs0)
        stroke(st0)
        equilateral(x0, y0, fs0)
        stroke(st1)
        rotate(fs1)
        equilateral(x1, y1, fs1)
        stroke(st2)
        rotate(fs2)
        equilateral(x2, y2, fs2)


s109

109: code [Py.Processing]

colorMode(HSB)
...
C = color(map(final_size,-63 , 63, 0, 255), 255, 255)
                          

s108

108: code [Py.Processing]

colorMode(HSB)
...
C = color(map(abs(final_size), 0, 63, 0, 255), 255, 255)


s107

107: code [Py.Processing]

Inverting odd rows

  v = spac_size * 1.5
    h = spac_size * sqrt(3)
    for ix in range(-1, grid_elem + 1):
        for iy in range(-1, grid_elem + 1):
            if iy % 2:
                x = ix * h + h / 4
                es = elem_size
            else:
                x = ix * h - h / 4
                es = -elem_size
            y = iy * v
            for i in range(3):
                final_size = es * (i + 0.5)
                C = map(final_size, 0, 63, 0, 255)
                oX = rand_posi * random(-1, 1)
                oY = rand_posi * random(-1, 1)
                ELEMENTS.append((C, x + oX, y + oY, final_size))

s106

106: code [Py.Processing]

Lazy triangles

def equilateral(x, y, r):
    with pushMatrix():
        translate(x, y)
        triangle(-0.866 * r, -0.5 * r,
                  0.866 * r, -0.5 * r,
                  0.000 * r,  1.0 * r) 
                  # I know... 0 * r and 1 * r...

s105

105: code [Py.Processing]

Layers now have different “base” sizes (0.5, 1.5 and 2.5 times base size). Removed lines for now.


s104

104: code [Py.Processing]

Back to stroke variation


s103

103: code [Py.Processing]

Layers but only black strokes

    spac_size = width / (grid_elem + 1)
    v = spac_size * 1.5
    h = spac_size * sqrt(3)
    for ix in range(-1, grid_elem + 1):
        for iy in range(-1, grid_elem + 1):
            if iy % 2:
                x = ix * h + h / 4
            else:
                x = ix * h - h / 4
            y = iy * v
            for i in range(3):
                final_size = elem_size + rand_size * random(-1, 1)
                ELEMENTS.append((x, y, final_size))
    # three layers of elements            
    for i in range(3):
        offsetX = rand_posi * random(-1, 1)
        offsetY = rand_posi * random(-1, 1)
        for elem in ELEMENTS[i::3]:
            x, y, es = elem
            ellipse(x + offsetX, y + offsetY, es, es)

    for _ in range(grid_elem):
        x1, y1, es1 = rnd_choice(ELEMENTS)
        x2, y2, es2 = rnd_choice(ELEMENTS)
        line(x1, y1, x2, y2)

s102

102: code [Py.Processing]

    spac_size = width / (grid_elem + 1)
    v = spac_size * 1.5
    h = spac_size * sqrt(3)
    for ix in range(-1, grid_elem + 1):
        for iy in range(-1, grid_elem + 1):
            if iy % 2:
                x = ix * h + h / 4
            else:
                x = ix * h - h / 4
            y = iy * v
            final_size = elem_size + rand_size * random(-1, 1)
            offsetX = rand_posi * random(-1, 1)
            offsetY = rand_posi * random(-1, 1)
            C = map(final_size, 0, 63, 0, 255)
            ELEMENTS.append((C,
                             x + offsetX,
                             y + offsetY,
                             final_size
                             ))
    for elem in ELEMENTS:
        stroke1, x1, y1, es1 = elem
        ellipse(x1, y1, es1, es1)

    for _ in range(grid_elem):
        stroke1, x1, y1, es1 = rnd_choice(ELEMENTS)
        stroke2, x2, y2, es2 = rnd_choice(ELEMENTS)
        stroke(stroke2)
        line(x1, y1, x2, y2)


s101

101: code [Py.Processing]

    for _ in range(grid_elem * 2):        
        stroke1, x1, y1, es1 = rnd_choice(ELEMENTS)
        stroke(stroke1)
        ellipse(x1, y1, es1, es1)
        stroke2, x2, y2, es2 = rnd_choice(ELEMENTS)
        stroke(stroke2)
        # line
        ellipse(x2, y2, es2, es2)
        line(x1, y1, x2, y2)

s100

100: code [Py.Processing]

    spac_size = int(width / (grid_elem + 1))
    for _ in range(2):
        for x in range(spac_size / 2, width, spac_size): 
            for y in range(spac_size / 2, width, spac_size):
                final_size = elem_size + rand_size * random(-1, 1)
                offsetX = rand_posi * random(-1, 1)
                offsetY = rand_posi * random(-1, 1)
                C = map(final_size, 0, 63, 0, 255)
                ELEMENTS.append((C,
                                x + offsetX,
                                y + offsetY,
                                final_size
                                ))
    for stroke_c, x, y, el_size in ELEMENTS:
        stroke(stroke_c)
        ellipse(x, y, el_size, el_size)
    for _ in range(grid_elem):
        stroke_c, x1, y1, _ = rnd_choice(ELEMENTS)
        ________, x2, y2, _ = rnd_choice(ELEMENTS)
        stroke(stroke_c)
        line(x1, y1, x2, y2)

s099

099: code [Py.Processing]

    spac_size = int(width / (grid_elem + 1))
    for x in range(spac_size / 2, width, spac_size):  
        for y in range(spac_size / 2, width, spac_size): 
            final_size = elem_size + rand_size * random(-1, 1)
            offsetX = rand_posi * random(-1, 1)
            offsetY = rand_posi * random(-1, 1)
            GREY = map(final_size, 0, 63, 0, 255)
            stroke(GREY)
            ellipse(x + offsetX,  # desenha um círculo
                 y + offsetY,
                 final_size,
                 final_size)

s098

098: code [Py.Processing]

    spac_size = int(width / (grid_elem + 1))
    for x in range(spac_size / 2, width, spac_size):  
        for y in range(spac_size / 2, width, spac_size): 
            square_size = elem_size + rand_size * random(-1, 1)
            offsetX = rand_posi * random(-1, 1)
            offsetY = rand_posi * random(-1, 1)
            HUE = map(offsetX + offsetY, -128, 127, 0, 255)
            SAT = map(square_size, 0, 63, 0, 255)
            fill(HUE, SAT, 255, 200)
            rect(x + offsetX,  # desenha um quadrado
                 y + offsetY,
                 square_size,
                 square_size)

s097

097: code [Py.Processing]

    spac_size = int(width / (grid_elem + 1))
    for x in range(spac_size / 2, width, spac_size):
        for y in range(spac_size / 2, width, spac_size):
            # sorteia um tamanho (se o rand_size > 0)
            square_size = elem_size + rand_size * random(-1, 1)
            rect(x + rand_posi * random(-1, 1),  # desenha um quadrado
                 y + rand_posi * random(-1, 1),  
                 square_size,
                 square_size)

s096

096: code [Py.Processing]

More ‘Inputs’ helper changes (WASD & arrows for sliders). New GIF export helper actually works now! More lone nodes and edge creation changes…


s095

095: code [Py.Processing]

Complete rewrite of the ‘Inputs’ helper

# Ask user for Arduino port, uses slider if none is selected, use on `setup()`
global input
input = Input(Arduino)

# on `draw()`read analog pins 1, 2, 3, 4 or sliders
pot1 = input.analog(1)
pot2 = input.analog(2)
pot3 = input.analog(3)
pot4 = input.analog(4)

tilt = input.digital(13) # also triggered by [space bar]

# When on sliders, this draws them and checks mouse dragging / keystrokes
input.update()


s094

094: code [Py.Processing]

Connection ‘rate’ can be less than 1, prevents less than 2 nodes


s093

093: code [Py.Processing]

Nodes without connection are now removed

    COM_ARESTAS = set()  # para guardar pontos com aresta
    for aresta in Aresta.ARESTAS:
        if (aresta.p1 not in Ponto.SET) or (aresta.p2 not in Ponto.SET)\
                or (aresta.p1 is aresta.p2):  # arestas degeneradas
            Aresta.ARESTAS.remove(aresta)   # remove a aresta
        else:                # senão, tudo OK!
            aresta.desenha()  # desenha a linha
            aresta.puxa_empurra(TAM_ARESTA)  # altera a velocidade dos pontos
            # Adiciona ao conjunto de pontos com aresta
            COM_ARESTAS.update([aresta.p1, aresta.p2])
    Ponto.SET = COM_ARESTAS  # isto remove pontos sem nenhuma aresta
 

s092

092: code [Py.Processing]

Dynamic change of connection rate

if NUM_PONTOS * NUM_CONNECT > len(Aresta.ARESTAS):
        rnd_choice(list(Ponto.SET)).cria_arestas()
    elif NUM_PONTOS * NUM_CONNECT < len(Aresta.ARESTAS):
        Aresta.ARESTAS.remove(rnd_choice(Aresta.ARESTAS))

s091

091: code [Py.Processing]

Major rethink of my Arduino/Firmata code. I can now choose on start between sliders and potentiometers.


s090

090: code [Py.Processing]

Opaque strokes, no fill, randomized colours by column.


s089

089: code [Py.Processing]

X stroke now is translucent and grid elements have random colour inside grids.


s088

088: code [Py.Processing]

Filled rects, ellipses and losangles (without sktroke) and Xs


s087

087: code [Py.Processing]

No fill again, less colours. Variable/random number of elements per grid.


s086

086: code [Py.Processing]

Translucent fill & some stroke weight


s085

085: code [Py.Processing]

Some colour, and some crazy meddling with the Slider class…


s084

084: code [Py.Processing]

Make the grid’s position/origin align based on the spacing size (super- grid)


s083

083: code [Py.Processing]

Xs and rotated rectangles


s082

082: code [Py.Processing]

Squares and ellipses


s081

081: code [Py.Processing]

Let’s try some grids


s080

080: code [Py.Processing]

More arrows (black and white alternate by generation)


s079

079: code [Py.Processing]

Arrows (right black, left white)


s078

078: code [Py.Processing]

Color


s077

077: code [Py.Processing]

Random branch reduction is now less simmetric, and random seed changes on depth change.


s076

076: code [Py.Processing]

Stroke weight and some transparency


s075

075: code [Py.Processing]

… and slightly different parameters and recursion level control instead of lenght


s074

074: code [Py.Processing]

Adaptomg Shiffmans recusive Tree, with sliders or Pots…


s073

073: code [Py.Processing]

The code remains ugly :(


s072

072: code [Py.Processing]

Let’s mix some arrows?


s071

071: code [Py.Processing]

Thicker and with a saturation slider (no more scale offset)


s070

070: code [Py.Processing]

Thicker and with a saturation slider (no more scale offset)


s069

069: code [Py.Processing]

Added rotation.


s068

068: code [Py.Processing]

… and with sliders (by Peter Farell)


s067

067: code [Py.Processing]

Something else.


s066

066: code [Py.Processing]

Arrow grid networks can be sized and placed…


s065

065: code [Py.Processing]

Arrow grid networks are now objects…


s064

064: code [Py.Processing]

Revisiting yet an older graph, adding arrows…


s063

063: code [Py.Processing]

Revisiting an older graph adding arrows…


s062

062: code [Py.Processing]

+ and - keys control the distange/range of targes in 0.5 * SPACING increments


s061

061: code [Py.Processing]

Sometimes we have multiple arrows now out of each node…But I reduced the range (distance) they can point to.


s060

060: code [Py.Processing]

Complete Object Oriented refactor…


s059

059: code [Py.Processing]

Back to a list of points, now every point of the grid has a node. Limited points_to random each.


s058

058: code [Py.Processing]

Now with some deepcopy of changeable imutable namedtuples (containing mutable lists), and some lerp()


s057

057: code [Py.Processing]

Revisited 54 and now I’m re-selecting random points_to nodes…


s056

056: code [Py.Processing]

Arrow grid moving in HSB colour space


s055

055: code [Py.Processing]

Grid revisited


s054

054: code [Py.Processing]

New arrows! With a “Tail” parameter…


s053

053: code [Py.Processing]

Big invisible refactor (no more point-grid to select from, now a list of possible X and Y positons to choose). On the visible side, fewer elements, and non-pointing elements redrawn in red on top.


s052

052: code [Py.Processing]

White lines first, black arrows on top.


s051

051: code [Py.Processing]

Points now on a grid.


s050

050: code [Py.Processing]

Arrows now…


s049

049: code [Py.Processing] Yet more graphs


s048

048: code [Py.Processing] Yet more graphs


s047

047: code [Py.Processing] Yet more graphs


s046

046: code [Py.Processing] Yet more graphs


s045

045: code [Py.Processing] Yet more graphs


s044

044: code [Py.Processing] More graphs


s043

043: code [Py.Processing] More graphs


s042

042: code [Py.Processing] Yet another interactive recursive thingy, the image on the right is shown with a key pressed


s041

041: code [Py.Processing] Yet another interactive recursive thingy, the image on the right is shown with a key pressed


040 040

040: sketch_180209a [Py.Processing] More recursion


039

039: sketch_180208e [Py.Processing] Manoloide inspired recursion


038

038: sketch_180208d [Py.Processing] Saskia Freeke inspired grid


037

037: sketch_180206b [Py.Processing] “Carnahacking is near!”


036

036: sketch_180205b [Py.Processing] Added some mouse disturbance


035

035: sketch_180204b [Py.Processing] Preparing for “Carnahacking”


034

034: sketch_180203c [Py.Processing] Like 33 but again with “w squared” circles


033

033: sketch_180202c [Py.Processing] Like 32 but again with lines


032

032: sketch_180201c [Py.Processing] Like 29 but with moving points after the gesture is done


031

031: sketch_180130c [Py.Processing] Like 29 but with moving points after the gesture is done


030

030: sketch_180130c [Py.Processing] Like 29 but with 3D and PeasyCam orbit…


29c

029: sketch_180129c [Py.Processing] Like 27 but with circles


28c

028: sketch_180128c [Py.Processing] Like 27 but on grayscale


27c

027: sketch_180127c [Py.Processing]YouTube

Saving a list of points to animate colour… Mouse speed changes recorded colour & strokeWeight()


26

026: sketch_180126c [Py.Processing] Mouse speed changing colour & strokeWeight()


25

025c: sketch_180125b [Py.Processing] Mouse speed changing strokeWeight()


24

024b: sketch_180124b [Py.Processing] Maybe tomorrow I’ll try adding some sliders & movement to this graph ? [nah…]


23

023b: sketch_180123b [Py.Processing] Farrel’s Sliders adding random displacement


022: missed :(


21b

021b: sketch_180121b [Py.Processing] Playing with Peter “Hacking Math Class” Farrel’s Sliders!


20b

020b: sketch_180120b [Py.Processing] I was stuck on my DBN conversion sketch 20a, so this HSB shape play is 20b…

20a

020a: sketch_180120a [Py.Processing] Refactored the code generation, removed most of the repeated vertices… C D E G O R not nice yet…


19a

019: sketch_180119a [Py.Processing] DBN Letters: Now working on a new approach, generating vertex/Shape code, not there yet…


18a

018: sketch_180118a [Py.Processing] DBN Color font? Nah…


17a

017: sketch_180117a [Py.Processing] John Maeda’s dbnletters.dbn code from Design by Numbers on Processing Python Mode


16a

016: 16a [Py.Processing] Converting some Typography code from Design by Numbers, almost there!


15a

015: sketch_180115a [Py.Processing] Converting some Typography code from Design by Numbers, first trials


14a

014: sketch_180114a [Py.Processing] Another 3D Graph


13a

013: s180113 [Py.Processing] 3D Graph


s180112

012: s180112 [Py.Processing] Another Graph Take


s180111

011: s180111 [Py.Processing] A Graph Take


s180110

010: s180110 [Py.Processing] More Manoloide inspired balls PNG (derived from a sketch by Manuel Gamboa Naon)


GIF

009: s180109 [Py.Processing] Balls for Manoloide GIF (derived from a sketch by Manuel Gamboa Naon)


GIF

008: s180108 [Py.Processing] Grid of Platonic Solids in Python Mode GIF


GIF

007: s180107 [Processing Java] Another grid of Platonic Solids in Java Mode GIF


GIF

006: s180106 [Processing Java] Grid of Platonic Solids in Java Mode GIF


005: s180105 [p5js] Line Tetrahedrons in p5*js - interactive


GIF

004: s180104 [Processing Java] Tetrahedrons in Java Mode- GIF


GIF

003: s180103 [Py.Processing] Tetrahedrons Python Mode- GIF


002: s180102 [Py.Processing] Many Stars 3D - YouTube


001: s180101[Py.Processing] Many Stars - YouTube (inspired by my own p5js Xmas & New Year card code)