Lire la suite…

De Computer Graphics and Art vol2 n°3 page 10

 // This sketch is part of the ReCode Project - http://recodeproject.com
 // From Computer Graphics and Art vol2 no3 pg 10
 // by William Kolomyjec
 // "Boxes"
 // 
 // Sermad Buni
 // 2012
 // Creative Commons license CC BY-SA 3.0

function setup() {
 
 var canvaswidth = 17;
 var canvasheight = 17;
 var square_size = 40;
 var randomness = 0.03;
 var iw, jh;
 smooth(8);
 createCanvas( (canvaswidth+2)*square_size, (canvasheight+2)*square_size);
 background(255);
 noFill();
 
 for(var i=0; i < canvaswidth; i++) {
 for(var j=0; j < canvasheight; j++) {
 push();
 translate((square_size*i), (square_size*j));
 if(canvasheight % 2 == 0) {
 iw = canvaswidth/2 - Math.abs(i - canvaswidth/2);
 } else {
 iw = canvaswidth/2 - 0.5 - Math.abs(i - canvaswidth/2 - 0.5);
 }
 
 if(canvasheight % 2 == 0) {
 jh = canvasheight/2 - 0.5 - Math.abs(j - canvasheight/2 + 0.5);
 } else {
 jh = canvasheight/2 - Math.abs(j - canvasheight/2);
 }
 if( jh != 0 || iw != 0) {
 rotate( radians(iw * iw * jh * jh * random(-randomness,randomness)) );
 }
 rect(square_size, square_size, square_size, square_size);
 pop();
 }
 } 
}

De Computer Graphics and Art vol2 n°3 page 28

// This sketch is part of the ReCode Project - http://recodeproject.com
// From Computer Graphics and Art vol2 no3 pg 28
// Segrid
// by John Roy
// 
// Quin Kennedy
// 2012
// Creative Commons license CC BY-SA 3.0

//Since there are 
//8 sets of images plus a center empty image plus a 1/2 width of black border
//this gives a canvas size of 8*2+1+.5*2 = 9*2 = 18 cells
//each cell is 20 pixels wide (see comment in drawTile(...))
var pixelSize = 1.5;
var linesPerQuadrant = 5;
//the tile size is the 
//(lines per quadrant + spaces per quadrant) * 2 quadrants per side * pixelSize
var tileSize = linesPerQuadrant*2*2;
var visualTileSize = tileSize*pixelSize;
//subtract 1 because the center is not doubled
//subtract another 1 because we only see half of the last tiles
var numTiles = linesPerQuadrant*4-1-1;
var windowSize = numTiles*tileSize;
var visualWinSize = numTiles*visualTileSize;

function setup(){
 createCanvas(ceil(visualWinSize), ceil(visualWinSize));
 noLoop();
}

function draw(){
 background(255);
 stroke(0);
 fill(0);
 strokeWeight(1);
 strokeCap(SQUARE);
 push();
 scale(pixelSize);
 //translate(-tileSize/2., -tileSize/2.);
 //pick a random grid cell to be the focal point
 //for now we will restrict it to have at most one row/column of empty squares
 var focusX = numTiles/2;
 var focusY = numTiles/2;
 //for each grid cell...
 for(var i = 0, gi = 0; i <= numTiles; i++, gi += tileSize){
 for(var j = 0, gj = 0; j <= numTiles; j++, gj += tileSize){
 push();
 translate(gi,gj);
 var num = min(max(abs(focusX-i), abs(focusY-j)), linesPerQuadrant*2);
 drawTile(num);
 pop();
 }
 }
 pop();
}

function drawTile(iteration){
 //there are two versions of the tile, the first where 5 lines (with 5 spaces)
 //grow in,
 //and the second where each consecutive space gets filled in.
 if (iteration == 0){
 return;
 }
 push();
 for(var i = 0; i < 4; i++){
 push();
 translate(-linesPerQuadrant*2, -linesPerQuadrant*2);
 drawQuadrant(iteration);
 pop();
 rotate(HALF_PI);
 }
 pop();
}

function drawQuadrant(iteration){
 if (iteration < linesPerQuadrant){
 push();
 for(var i = 0; i < linesPerQuadrant; i++){
 line(0, .5, iteration*linesPerQuadrant*2.0/(linesPerQuadrant-1.0), 0.5);
 translate(0, 2);
 }
 pop();
 } else {
 drawQuadrant(linesPerQuadrant - 1);
 var lines = iteration - linesPerQuadrant;
 push();
 translate(0, linesPerQuadrant*2-1);
 for(var i = 0; i <= lines; i++){
 line(0, .5, linesPerQuadrant*2, .5);
 translate(0, -2);
 }
 pop();
 }
}

var tiles = [7];
var windowSize = 780;
var tileSize = windowSize/15;

function setup(){
 createCanvas(windowSize,windowSize);
 createTiles();
 noLoop();

}

function draw(){
 background(255);
 imageMode(CENTER);
 for(var i = 0; i < width; i+=tileSize){
 for(var j = 0; j < height; j+=tileSize){
 var tile = floor(random(tiles.length));
 //boolean bw = (random(2) >= 1);
 var rotation = floor(random(4));
 push();
 translate(i,j);
 translate(tileSize/2, tileSize/2);
 rotate(PI*rotation/2);
 image(tiles[tile], 0, 0);
 pop();
 }
 }
}

function createTiles(){
 var i = 0;
 pg = createGraphics(tileSize, tileSize);
 pg.background(0);
 pg.noStroke();
 pg.fill(255);
 pg.ellipse(0, 0, tileSize*2, tileSize*2);
 tiles[i++] = pg;
 
 pg1 = createGraphics(tileSize, tileSize);
 pg1.background(255);
 pg1.noStroke();
 pg1.fill(0);
 pg1.ellipse(0, 0, tileSize*2, tileSize*2);
 tiles[i++] = pg1;
 
 pg2 = createGraphics(tileSize, tileSize);
 pg2.background(0);
 pg2.noStroke();
 pg2.fill(255);
 pg2.rect(0, 0, tileSize, tileSize/2);
 tiles[i++] = pg2;
 
 pg3 = createGraphics(tileSize, tileSize);
 pg3.background(255);
 pg3.noStroke();
 pg3.fill(0);
 pg3.rect(0, 0, tileSize, tileSize/2);
 tiles[i++] = pg3;
 
 pg4 = createGraphics(tileSize, tileSize);
 pg4.background(0);
 pg4.noStroke();
 pg4.fill(255);
 pg4.triangle(0, 0, tileSize, 0, 0, tileSize);
 tiles[i++] = pg4;
 
 pg5 = createGraphics(tileSize, tileSize);
 pg5.background(255);
 pg5.noStroke();
 pg5.fill(0);
 pg5.triangle(0, 0, tileSize, 0, 0, tileSize);
 tiles[i++] = pg5;
 
 //might happen less often than others...
 pg6 = createGraphics(tileSize, tileSize);
 pg6.background(0);
 tiles[i++] = pg6;
 //PGraphics pg2 = createGraphics(width/15, width/15, P2D);
}

Version Simplifiée

var tiles = [2];
var windowSize = 400;
var tileSize = windowSize/5;

function setup(){
  createCanvas(windowSize,windowSize);
  createTiles();
  noLoop();
}

function draw(){
  background(255);
  imageMode(CENTER);
  for(var i = 0; i < width; i+=tileSize){
    for(var j = 0; j < height; j+=tileSize){ var tile = floor(random(tiles.length)); //boolean bw = (random(2) >= 1);
      var rotation = floor(random(4));
      push();
      translate(i,j);
      translate(tileSize/2, tileSize/2);
      rotate(PI*rotation/2);
      image(tiles[tile], 0, 0);
      pop();
    }
  }
}

function createTiles(){
  var i = 0;
  pg = createGraphics(tileSize, tileSize);
  pg.background(0);
  pg.noStroke();
  pg.fill(255);
  pg.ellipse(0, 0, tileSize*2, tileSize*2);
  tiles[i++] = pg;
  
  pg1 = createGraphics(tileSize, tileSize);
  pg1.background(255);
  pg1.noStroke();
  pg1.fill(0);
  pg1.ellipse(0, 0, tileSize*2, tileSize*2);
  tiles[i++] = pg1;
}

Inspiré par Computer Graphics and Art nov 1976 vol1 n°4 page 28

// This sketch is part of the ReCode Project - http://recodeproject.com
// From Computer Graphics and Art vol1 no4 pg 28
// Untitled 1 (Computer graphics at the University of Munich - West Germany)
// by Various (Reiner Schneeberger and unnamed students)
// 
// Nick Santaniello
// 2012
// Creative Commons license CC BY-SA 3.0

var cols = 10;
var rows = 10;
var offsetX;
var offsetY;
var sqSize= 78;
var sizeDifference = 12;

function setup() {
 createCanvas(780, 780);
 offsetX = random(-6, 6);
 offsetY = random(-6, 6);
 rectMode(CENTER);
 strokeWeight(2);
 fill(240);

 //for every row...
 for (var r = 0; r<rows; r++) {
 //for every column...
 for (var c = 0; c<cols; c++) {
 //choose a new offset
 offsetX = random(-7, 7);
 offsetY = random(-7, 7);
 rect(c*sqSize, r*sqSize, sqSize, sqSize);
 for (var i=1; i<6; i++) {
 rect((c*sqSize)+(i*offsetX), (r*sqSize)+(i*offsetY), sqSize - (i*sizeDifference), sqSize - (i*sizeDifference));
 }
 }
 }
}

function draw() {
}

function setup() {
 createCanvas(780,780); 
}

// Draws a single cross.
function drawCross(left, top, dim, thickness) {
 var offset_1 = dim/2 - thickness/2;
 var offset_2 = offset_1 + thickness;
 var offset_3 = dim;
 beginShape();
 vertex(left + offset_1, top);
 vertex(left + offset_2, top);
 vertex(left + offset_2, top + offset_1);
 vertex(left + offset_3, top + offset_1);
 vertex(left + offset_3, top + offset_2);
 vertex(left + offset_2, top + offset_2);
 vertex(left + offset_2, top + offset_3);
 vertex(left + offset_1, top + offset_3);
 vertex(left + offset_1, top + offset_2);
 vertex(left, top + offset_2);
 vertex(left, top + offset_1);
 vertex(left + offset_1, top + offset_1);
 vertex(left + offset_1, top);
 endShape(CLOSE);
}

// Draw a stack of crosses.
function drawCrossWithDecay(left, top, base_dim, num_decay, dpos, ddim, dthickness) {
 var thickness = base_dim/3;
 var dim = base_dim;
 var curleft = left;
 var curtop = top;
 for (var i = 0; i < num_decay; i++) {
 drawCross(curleft, curtop, dim, int(thickness));
 curleft += dpos.x + ddim/2;
 curtop += dpos.y + ddim/2;
 dim -= ddim;
 thickness -= dthickness;
 }
}

function drawCrossMatrix(dim, left, top, rows, cols) {
 var thickness = dim/3;
 var dp1 = createVector(0,-1);
 var dp2 = createVector(1,0);
 var dp;
 for (var i = 0; i < rows; i++) {
 var rleft = left + i * thickness;
 var rtop = top + i * 2 * thickness;
 for (var j = 0; j < cols; j++) {
 dp = i%2==0?dp1:dp2;
 dp.mult(-1);
 drawCrossWithDecay(rleft + thickness * 2 *j, rtop - thickness * j, dim, 5, dp, 4, 4.5);
 } 
 }
}

function draw() {
 background(255);
 
 drawCrossMatrix(80, 50, 150, 6, 6);
}

Inspiré par Computer Graphics and Art vol3 n°2 page 16, “Untitled photoprint”, 15″ x 19″ par by Aaron Marcus

// This sketch is part of the ReCode Project - http://recodeproject.com
// From Computer Graphics and Art vol3 no2 pg 16
// by Aaron Marcus
// "Untitled photoprint", 15" x 19"
// Other works in the Hieroglyphs series are "Noise Barrier", and various "Untitled" works.
// 
// Genevieve Hoffman
// 2012
// Creative Commons license CC BY-SA 3.0

function setup() {
 createCanvas(780,780);
 background(0);
 
 var gridSize = width/10;
 
 for (var x = gridSize; x <= width; x += gridSize) {
 for (var y = gridSize; y <= height; y += gridSize) {
 
 //make grid
 stroke(255);
 smooth();
 line(x, 0, x, height);
 line(x-gridSize, y, width, y);
 
 //generate random seed values for location and size
 var randLoc = random(-gridSize/2,gridSize/2);
 var randLoc2 = random(-gridSize/2,gridSize/2);
 var randLoc3 = random(-gridSize/2,gridSize/2);
 var randLoc4 = random(-gridSize/2,gridSize/2);
 var randLoc5 = random(-gridSize/2,gridSize/2);
 var randLoc6 = random(-gridSize/2,gridSize/2);
 var randLoc7 = random(-gridSize/2,gridSize/2);
 var randLoc8 = random(-gridSize/2,gridSize/2);
 var circSize = random(0, gridSize-10);
 var sqSize = random(0, (gridSize-10)/2);
 
 //draw circles
 noFill();
 ellipse(x+randLoc, y+ randLoc2, circSize, circSize);
 
 //draw squares
 push();
 translate(x+randLoc3, y+randLoc4);
 rotate(random(TWO_PI));
 rect(0, 0, sqSize, sqSize);
 pop();
 
 //draw lines
 push();
 translate(x+randLoc5, y+randLoc6);
 rotate(random(TWO_PI));
 line(0,0,randLoc7, randLoc8);
 pop();
 }
 }
}

function draw() {
 
}

function keyPressed() {
 //saveFrame("Aaron_Marcus_Untitled2_###.jpg");
}

Inspiré par Computer Graphics and Art vol3 n°4, 4^e de couverture, “Hex Variations” de William Kolomyjec

// This sketch is part of the ReCode Project - http://recodeproject.com
// From Computer Graphics and Art vol3 no4 Back Cover
// by William Kolomyjec
// "Hex Variations"
// 
// Steve Berrick
// 2012
// Creative Commons license CC BY-SA 3.0

var _width = 600;
var _height = 900;
var _size = 20; // hexagon radius

function setup() {
 
 createCanvas(_width, _height);
 noLoop();
 
 background(255);
 noFill();
 stroke(0);
 strokeWeight(2);

}

function draw() {

 // clear background
 background(255);
 
 // line length (hypotenuse)
 var h = sin(PI/3) * _size;
 
 for (var i = 0; i <= _width / (_size * 3); i++) {
 for (var j = 0; j <= (_height / h) + 1; j++) {

 // reference points (centre of each hexagon)
 var x = i * _size * 3 + (_size / 2);
 var y = j * h;
 // offset each odd row
 if (j % 2 > 0) {
 x += _size * 1.5;
 }

 push();
 
 translate(x, y);
 
 // random hexagon 'rotation' (0, 120, 240 degrees)
 rotate(int(random(0, 3)) * PI/3);
 
 // draw line
 line(0, -h, 0, h);
 
 // draw arcs
 arc(-_size, 0, _size, _size, -PI/3, PI/3);
 arc( _size, 0, _size, _size, PI/3 * 2, PI/3 * 4); 
 
 pop();

 } 
 }

}

function mousePressed() {
 
 redraw();

}

Inspiré par Computer Graphics and Art vol3 n°2 page 31, “Unimaginable Images” (from the “196 Trapeziums Series”) de Vera Molnar

// This sketch is part of the ReCode Project - http://recodeproject.com
// From Computer Graphics and Art vol3 no2 pg 31
// Untitled (from the "196 Trapeziums Series")
// by Vera Molnar
// 
// 
// Quin Kennedy
// 2012
// Creative Commons license CC BY-SA 3.0

var numTiles = 14;
var gutterRelativeSize = 0;
var windowSize = 800;



function setup(){
 var tileSize = floor(windowSize/(numTiles*(1+gutterRelativeSize)+gutterRelativeSize));
 var gutterSize = floor(tileSize*gutterRelativeSize);
 var actualWinSize = (tileSize+gutterSize)*numTiles+gutterSize;
 createCanvas(actualWinSize, actualWinSize);
 noLoop();
}

function draw(){
 background(255);
 stroke(0);
 //strokeWeight(2);
 strokeJoin(ROUND);
 noFill();
 var tileSize = floor(windowSize/(numTiles*(1+gutterRelativeSize)+gutterRelativeSize));
var gutterSize = floor(tileSize*gutterRelativeSize);
 //for each grid cell...
 for(var i = 0, gi = gutterSize; i < numTiles; i++, gi += gutterSize+tileSize){
 for(var j = 0, gj = gutterSize; j < numTiles; j++, gj += gutterSize+tileSize){
 drawTrapezium(random(tileSize, width-tileSize-tileSize), random(tileSize/2., height-tileSize));
 }
 }
}

function drawTrapezium(xCenter, yCenter){
 var tileSize = floor(windowSize/(numTiles*(1+gutterRelativeSize)+gutterRelativeSize));
 var topScale = random(-2, 2);
 var bottomScale = random(-2, 2);
 var halfTile = tileSize/2.;
 quad(xCenter - tileSize/2 + random(-tileSize, tileSize), yCenter - halfTile,
 xCenter + tileSize/2 + random(-tileSize, tileSize), yCenter - halfTile,
 xCenter + tileSize/2 + random(-tileSize, tileSize), yCenter + halfTile,
 xCenter - tileSize/2 + random(-tileSize, tileSize), yCenter + halfTile);
}

Inspiré par Computer Graphics and Art vol3 n°2 page 31, “Unimaginable Images” (from the “196 Trapeziums Series”) de Vera Molnar

// This sketch is part of the ReCode Project - http://recodeproject.com
// From Computer Graphics and Art vol3 no2 pg 31
// Unimaginable Images (from the "196 Trapeziums Series")
// by Vera Molnar
// 
// 
// Quin Kennedy
// 2012
// Creative Commons license CC BY-SA 3.0

var numTiles = 14;
var gutterRelativeSize = .5;
var windowSize = 780;
//we need space for each tile, 
//space for each gutter above each tile, 
//and space for the final gutter (below of the bottom row)


function setup(){
 var tileSize = floor(windowSize/(numTiles*(1+gutterRelativeSize)+gutterRelativeSize));
 var gutterSize = floor(tileSize*gutterRelativeSize);
 var actualWinSize = (tileSize+gutterSize)*numTiles+gutterSize;
 createCanvas(actualWinSize, actualWinSize);
 noLoop();
}

function draw(){
 background(255);
 stroke(0);
 var tileSize = floor(windowSize/(numTiles*(1+gutterRelativeSize)+gutterRelativeSize));
 var gutterSize = floor(tileSize*gutterRelativeSize);
 //strokeWeight(2);
 strokeJoin(ROUND);
 noFill();
 //for each grid cell...
 for(var i = 0, gi = gutterSize; i < numTiles; i++, gi += gutterSize+tileSize){
 for(var j = 0, gj = gutterSize; j < numTiles; j++, gj += gutterSize+tileSize){
 drawTrapezium(gi+tileSize/2, gj+tileSize/2);
 }
 }
}

function drawTrapezium(xCenter, yCenter){
 var tileSize = floor(windowSize/(numTiles*(1+gutterRelativeSize)+gutterRelativeSize));

 var topScale = random(-2, 2);
 var bottomScale = random(-2, 2);
 var halfTile = tileSize/2.;
 quad(xCenter - tileSize/2 + random(-tileSize, tileSize), yCenter - halfTile,
 xCenter + tileSize/2 + random(-tileSize, tileSize), yCenter - halfTile,
 xCenter + tileSize/2 + random(-tileSize, tileSize), yCenter + halfTile,
 xCenter - tileSize/2 + random(-tileSize, tileSize), yCenter + halfTile);
}

Inspiré par “Research and Teaching in Art and Science” by Vladimir Bonačić // Computer Graphics and Art Vol. 2, No. 3 pp. 4-8

// This sketch is part of the ReCode Project - http://recodeproject.com

////////////////////////////////////////////////////////////////////////
// //
// "Orbits of Galois Fields" by Vladimir Bonačić //
// //
// ( vareractive version ) //
// //
////////////////////////////////////////////////////////////////////////

// (c) Martin Schneider 2012

// Creative Commons license CC BY-SA 3.0

// These patterns are displayed using 32 x 32 dots.
// They visualize objects from abstract algebra, 
// which are known as orbits of galois fields.

// Source:
// "Research and Teaching in Art and Science" by Vladimir Bonačić
// Computer Graphics and Art Vol. 2, No. 3 pp. 4-8

// See also:
// "Kinetic Art: Application of Abstract Algebra to Objects with Computer-
// Controlled Flashing Lights and Sound Combinations" by Vladimir Bonačić
// Leonardo, Vol. 7, No. 3
// Note: This paper is quite mathematical at times.
// The implementation however is actually really simple.


///////////////////////// varERACTIVE VERSION /////////////////////////

// - Use space to flip through the presets
// - Use the mouse to explore the orbits


////////////////////////////////////////////////////////////////////////

var n = 5; // bits per dimension
var d = 1<<n; // cells per dimension
var led = 20; // size of the dot
var w = led * d + 1; // screen size

var preset = [1087, 1157];
var pick = 0;
var p = preset[pick];

var debug = true;
var i0;
var bg=10;


function setup() {
 createCanvas(w, w);
 ellipseMode(CORNER); 
 noStroke();
}


function draw() {
 
 // adding some afterglow
 fill(bg, 30); 
 rect(0, 0, w, w); 
 fill(255 - bg);

 // use mouse coordinates to get initial cell
 var x = mouseX/led & (d-1);
 var y = mouseY/led & (d-1);
 var i = y * d + x;

 // create empty field
 //boolean[] field = new boolean[d*d];
 
 var field = [d*d];

 // find all cells in the orbit
 i0 = d*d;
 while (!field[i]) {
 i0 = min(i, i0);
 field[i] = true;
 i *= 2; 
 if (i >= d*d ) i ^= p;
 } 

 // draw display
 for (i = 0; i < d*d; i++) {
 if (field[i]) {
 ellipse(led * (i % d), led * floor(i / d), led, led);
 }
 }
}


function keyPressed() {
 switch(key) {
 // switch between presets
 case ' ': pick = (pick + 1) % preset.length; p = preset[pick]; break;
 // next pattern
 case '+': p = (p + 1) | d; break; 
 // previous pattern
 case '-': p = (p - 1) | d; break;
 // toggle debugging
 case 'd': debug = !debug; break;
 // switch background color
 case 'b': bg = 255 - bg; break;
 default: return;
 }
}

De Computer Graphics and Art vol3 n°2 page 20, par Reiner Schneeberger and students

// This sketch is part of the ReCode Project - http://recodeproject.com
// From Computer Graphics and Art vol3 no2 pg 22
// by Reiner Schneeberger
// 
// Untitled #5 is part of a 10 piece series, intended to test viewers
// perception of art and composition. The section is titled "Experimental
// Esthetics with Computer Graphics -- Analyses of Viewers Impressions 
// of Computer Graphics."
// 
// Jonathan Bobrow
// 2012
// Creative Commons license CC BY-SA 3.0
//
// note: .f enforces float division, dividing by an int would automatically round down
// i.e. 1/2 = 0 , 1/2.f = .5

var gridSize = 40;
var density = 10;

function setup(){
 createCanvas(780, 780);
 background(255);
 
 stroke(0);
 strokeWeight(1);
 var padding = gridSize/density; // even spacing for lines
 
 var rows = height/gridSize;
 var cols = width/gridSize;
 
 for(var i = 0; i < rows; i++){ // iterate over the # of rows (top to bottom)
 for(var j = 0; j < cols; j++){ // iterate over the # of columns (left to right)
 
 push();
 translate(j*gridSize, i*gridSize); // move to grid location
 translate(gridSize/2, gridSize/2); // move to rotate around center
 if(random(1) < .5) 
 rotate(PI/2); // rotate vertical or horizontal
 else 
 rotate(PI);
 
 for(var k = 0; k < density; k++){ // draw # of lines based on density with even spacing
 var _x = (k - density/2) * padding; 
 line(_x, -gridSize/2, _x, gridSize/2);
 }
 pop();
 }
 }
}

De Computer Graphics and Art vol1 no4 page 29 // par Reiner Schneeberger and students

// This sketch is part of the ReCode Project - http://recodeproject.com
// From Computer Graphics and Art vol1 no4 pg 29
// by Reiner Schneeberger and students
// Computer graphics made at the University of Munich (West Germany)
// 
// Genevieve Hoffman
// 2012
// Creative Commons license CC BY-SA 3.0


var cols = 10;
var rows = 80;
var counter = 0;

function setup() {
 createCanvas(540, 800);
 background(255);
 stroke(0);

 var horiz = width/cols;
 var vert = horiz/2;

 for (var i = 0; i < rows; i++) {
 for (var j = 0; j < cols; j++) {
 var rand = random(0, 2); 
 if (rand > 1) {
 //draw vertical lines
 for (var k = 0; k < horiz; k+=horiz/8) {
 line(j*horiz+k, i*vert, j*horiz+k, i*vert+vert);
 }
 } 
 else {
 //draw horizontal lines
 for(var k = 0; k < vert; k+=vert/8) {
 line(j*horiz, i*vert+k, j*horiz+horiz, i*vert + k);
 }
 }
 }
 }
}

function draw() {
}

function keyPressed() {
 //saveFrame("Reiner_Schneeberger_Untitled2_####.jpg");
}

 function setup() {
 createCanvas( 400, 400);
 background( 255 );
 stroke( 0 );
 strokeWeight( 2 );
 noFill();
 smooth();
 drawRects();
 }

 function draw() {
 }

 function drawRects() {
 background(255);
 for( var i = 0; i < 400; i++ ) {
 roundedRect( random(-10,width), random(-10,height), random( 5, 40), random(5,40), 5, 5 );
 }
 }

 function mousePressed() {
 drawRects();
 }

 function roundedRect(x, y, w, h, rx, ry) { 
 beginShape();
 vertex(x, y+ry); //top of left side
 bezierVertex(x, y, x, y, x+rx, y); //top left corner
 vertex(x+w-rx, y); //right of top side
 bezierVertex(x+w, y, x+w, y, x+w, y+ry); //top right corner
 vertex(x+w, y+h-ry); //bottom of right side
 bezierVertex(x+w, y+h, x+w, y+h, x+w-rx, y+h); //bottom right corner
 vertex(x+rx, y+h); //left of bottom side
 bezierVertex(x, y+h, x, y+h, x, y+h-ry); //bottom left corner
 endShape(CLOSE);
 }

function setup() {
 createCanvas( 780, 780);
 fill( 0 );
 noStroke();

 pg = createGraphics(780, 780);
 
 drawSquares();
}

function draw() {
}

function drawSquares() {
 background(240 );
 
 pg.background( 240 );
 for( var r = 2; r < 22; r++ ) {
 for( var c = 0; c < 32; c++ ) {
 var rand = int(round(random(0,1)));
 pg.noStroke();
 if( rand == 1 ) {
 pg.fill( 10 );
 } else {
 pg.noFill();
 }
 pg.rect( r*32, c*32, 32, 32 );
 }
 }

 rotate(-0.01);
 translate( -8, 0, 0 );
 image(pg, 0, 0);
}

function mousePressed() {
 drawSquares();
}

var radius = 150;

function setup() {
 createCanvas( 600, 600 );
 background( 255 );
 stroke( 0 );
 noFill();
 strokeWeight( 2 );
 drawCircles();
}

function draw() {}

function drawCircles() {
 background( 255 );
 for(var r = 0; r < 2; r++ ) {
 for(var c = 0; c < 2; c++ ) {
 push();
 translate( 150+(300*r), 150+(300*c));
 for(var i = 0; i < random(100,300); i++ ) {
 var a = random(0, TWO_PI);
 var x1 = radius*cos(a);
 var y1 = radius*sin(a);
 a = random(0, TWO_PI);
 var x2 = radius*cos(a);
 var y2 = radius*sin(a);
 stroke(20); 
 line( x1, y1, x2, y2);
 }
 pop();
 }
 }
}

function mousePressed() {
 drawCircles();
}

Basé sur la “Diamond Theory” de Steven H Cullinane

/* 
Part of the ReCode Project (http://recodeproject.com)
Based on "Diamond Theory" by Steven H Cullinane
Originally published in "Computer Graphics and Art" v2n1, 1977
Copyright (c) 2013 Radames Ajna - OSI/MIT license (http://recodeproject/license).
*/

/* @pjs pauseOnBlur="true"; */

var bits = [
 0, 1, 0, 1, 
 2, 3, 2, 3, 
 0, 1, 0, 1, 
 2, 3, 2, 3
];

var lsize = 10;

function setup() {
 createCanvas(int(lsize*4+100)*5, int(lsize*4+100)*5);
 background(255);
 smooth();
 redraw();
 noStroke();
}

function draw() { 
 background(255);
 for (var i=0; i<10; i++) {
 for (var j=0; j<10; j++) {
 randss();
 push();
 translate(i*(width/lsize)+lsize*3, j*(height/lsize)+lsize*3);
 drawTriangle(bits);
 pop();
 }
 }
 randss();
 if (frameCount>50) {
 noLoop();
 }
}

function drawTriangle(bits) {
 push();
 translate(-lsize*4/2, -lsize*4/2);
 for (var x=0;x<4;x++) {
 for (var y=0;y<4;y++) {
 var i = x + y*4;
 // pushStyle();
 fill(0);
 push();
 translate(x*lsize, y*lsize);
 beginShape(TRIANGLES);
 switch(bits[i]) {
 case 0:
 // bottom right
 //triangle(lsize, lsize, 0, lsize, lsize, 0);
 vertex(lsize, lsize);
 vertex(0, lsize);
 vertex(lsize, 0);
 break;
 case 1:
 ///bottom left
 //triangle(0, 0, 0, lsize, lsize, lsize);
 vertex(0, 0);
 vertex(0, lsize);
 vertex(lsize, lsize);
 break;
 case 2:
 //top right
 //triangle(0, 0, lsize, 0, lsize, lsize);
 vertex(0, 0);
 vertex(lsize, 0);
 vertex(lsize, lsize);
 break;
 case 3:
 //top left
 //triangle(0, 0, lsize, 0, 0, lsize);
 vertex(0, 0);
 vertex(lsize, 0);
 vertex(0, lsize);
 break;
 }
 endShape(CLOSE);
 //popStyle();
 pop();
 }
 }
 pop();
}
/*leva l1 para l2 */
function transposeRow(bits, r0, r1) {
 var temp = [4];
 //temp[i] = new int[4];
 for (var x=0;x<4;x++) {
 //keep the values from row r0 on temp
 var i = x + r0*4;
 temp[x] = bits[i];
 // put on row r0 values from row r1
 var i2 = x + r1*4;
 bits[i] = bits[i2];
 //put on row r1 values from r0 i.e. from temp
 bits[i2] = temp[x];
 }
}

function transposeColumn(bits, c0, c1) {
 var temp = [4];
 for (var y=0;y<4;y++) {
 //keep the values from column c1 on temp
 var i = c0 + y*4;
 temp[y] = bits[i];
 //put on column c0 values from column c1
 var i2 = c1 + y*4;
 bits[i] = bits[i2];
 //put on column c1 values from column c0 i.e. temp
 bits[i2] = temp[y];
 }
}

function transposeQuadrant(bits, q0, q1) {
 var temp = [4];
 //given a q0 - quadrant 0,1,2,3 
 // |0|1|
 // |2|3|
 //returns x,y initial coordinates 
 // |00|10|20|30|
 // |01|11|21|31|
 // |02|12|22|32|
 // |03|13|23|33| 
 var x0q0 = (q0%2)*2;
 var y0q0;
 if (q0>1) {
 y0q0 =2;
 } else {
 y0q0 =0;
 }
 var x0q1 = (q1%2)*2;
 var y0q1;
 if (q1>1) {
 y0q1 =2;
 } else {
 y0q1 =0;
 }
 var c=0; 
 for (var i=0;i<2;i++) {
 for (var j=0;j<2;j++) {
 temp[c] = bits[x0q0+i + (y0q0+j)*4];
 bits[x0q0+i + (y0q0+j)*4] = bits[x0q1+i + (y0q1+j)*4];
 bits[x0q1+i + (y0q1+j)*4] = temp[c];
 c++;
 }
 }
}

function randss() {
 transposeRow(bits, int(random(0, 4)), int(random(0, 4)));
 transposeColumn(bits, int(random(0, 4)), int(random(0, 4)));
 transposeQuadrant(bits, int(random(0, 4)), int(random(0, 4)));
}

function mousePressed() {
 randss();
 redraw();
}

Inspiré par “Structure Square Series Inwards” de Roger Coqart

/* 
Part of the ReCode Project (http://recodeproject.com)
Based on "Structure Square Series Inwards" by Roger Coqart
Originally published in "Computer Graphics and Art" v1n3, 1976
Copyright (c) 2013 Fabien bonnamy - OSI/MIT license (http://recodeproject/license).
*/

/* @pjs pauseOnBlur="true"; */

var x1,x2,y1,y2,aleatoire,ecart,marge,taille; 
var h = 36; // Mettre un multiple de 3
var check = [0,1,2,3,4,5,6,7];
var lines = [ [0,0,h,h], [h,0,0,h], [h/2,0,h/2,h], [0,h/2,h,h/2], [0,h/2,h/2,0], [0,h/2,h/2,h], [h/2,0,h,h/2], [h,h/2,h/2,h] ]; 

function setup(){
 noLoop(); // j'utilise le noLoop car je ne souhaite pas la fonction draw() soit executée plus d'une fois 
 smooth(); // pour que mes traits soient plus net
 aleatoire = 0; //
 marge = h/3; // l'espace entre les carrés
 ecart = h+marge; // la place dans laquelle evelue un carré
 taille = ((h+marge)*13); // la taille de mon carré
 createCanvas(taille +marge , taille + marge); // notez que rajoute marge encore une fois afin dessiner la border droit et bas
}

function draw(){
 background(255);
 translate(marge,marge);// je deplace le point initial de mon ecran pour creer une marge en haut et à gauche
 stroke(0);
 strokeWeight(2); // traits sont noir

 // j'utilise une double bouble for pour placé chaque carrés sur l'ecran. 
 // Ici je place 15 carrés en long (i) et 15 en large (j)
 for (var i = 0; i <15; i++){
 for (var j = 0; j < 15; j++){
 //Je deplace le point 0,0 de mon ecran à chaque tour de boucle. cela me permet de toujour utilser 0,0 comme point de reference.
 // pour ce faire je vais un translate encapsuluer avec mon code dans un pushMatrix, popMatrix
 push();
 translate(i*ecart, j*ecart);
 fill(255,255,255);

 //maintenant en fonction de l'emplacement de mon carré je dessine plus ou moins de trais à l'interieur

 // carré est au centre
 if(j == 6 && i == 6){
 rect(0, 0, h, h);
 }
 // carrés sont 1 carré du centre
 else if(j>=5 && j<8 && i>=5 && i<8){
 rect(0, 0, h, h); 
 strokeWeight(2);
 generateLines(2);
 }
 // carrés sont 2 carrés du centre
 else if(j>=4 && j<9 && i>=4 && i<9){
 rect(0, 0, h, h); 
 strokeWeight(2);
 generateLines(3);
 }
 // carrés sont 3 carrés du centre
 else if(j>=3 && j<10 && i>=3 && i<10){
 rect(0, 0, h, h); 
 strokeWeight(2);
 generateLines(4);
 }
 // carrés sont 4 carré du centre
 else if(j>=2 && j<11 && i>=2 && i<11){
 rect(0, 0, h, h); 
 strokeWeight(2);
 generateLines(5);
 }
 // carrés sont 5 carré du centre
 else if(j>=1 && j<12 && i>=1 && i<12){
 rect(0, 0, h, h); 
 strokeWeight(2);
 generateLines(6);
 }
 // carrés sont 6 carré du centre
 else if(j>=0 && j<13 && i>=0 && i<13){
 rect(0, 0, h, h); 
 strokeWeight(2);
 generateLines(7);
 }
 pop();
 } 
 }
 //decommenter pour enregistrer l'image produite
 //saveFrame("squareColor"+h+".jpg");
}

// fonction qui recoit un nombre de lignes en arguments
// Cette dessine les trais et fait aussi attention ne pas en dessiner les uns sur les autres
function generateLines(numberOfLines) {
 // nous avons un tableau initial allant de 0 à 7
 // on echange quelques valeurs 
 for (var i = 0; i<numberOfLines-1; i++){
 var rand1 = int(random(8));
 var rand2 = int(random(8));
 var temp;

 temp = check[rand1];
 check[rand1] = check[rand2];
 check[rand2] = temp;
 }

 // puis on lit un nombre d'entrées egale à l'argument passé
 for (var i = 0; i< numberOfLines; i++){
 aleatoire = check[i];
 line(lines[aleatoire][0], lines[aleatoire][1], lines[aleatoire][2], lines[aleatoire][3]); 
 }
}

Hommage to Zdeňek Sýkora

/*
 * Untitled, Hommage to Zdeňek Sýkora (1920 - 2011)
 * 
 * Kof / Kryštof Pešek 2012
 *
 */
 
var theta = [];
var moznosti = [0,90,180,270];
var rot = [1,2,4];
var r;

function preload(){
 plny = loadImage("plny.png");
}
 
function setup(){
 createCanvas(576,704,P2D);
 imageMode(CENTER);
 for (var i = 0 ; i < 3000 ; i ++){
 theta[i] = moznosti[int(random(4))];
 }
}
 
function draw(){
 background(0);
 r = plny.width;
 
 var idx = 0;
 for(var y = 0;y <= height/plny.height;y++){
 for(var x = 0;x <= width/plny.width;x++){
 push();
 translate(x*r+plny.width/2,y*r+plny.height/2);
 rotate(radians(theta[idx]));
 theta[idx] += 0.004*degrees(frameCount/200.0*atan2(mouseY-y*r,mouseX-x*r));
 image (plny,0,0);
 pop();
 idx += 1;
 }
 }
}

Inspiré par “From the Square Series” de Roger Coqart

/* 
Part of the ReCode Project (http://recodeproject.com)
Based on "From the Square Series" by Roger Coqart
Originally published in "Computer Graphics and Art" v3n2, 1978
Copyright (c) 2015 Haydn Edgvaron-King - OSI/MIT license (http://recodeproject/license).
*/

/* @pjs pauseOnBlur="true"; */

var lin = 0;
var col = 0;
var taille = 12;
var lin2 = 0;
var col2 = 0;
var taille2 = 36;
 
function setup() {
createCanvas(780, 780);
background(0);
stroke(255);
strokeWeight(3.2);
strokeCap(ROUND);
}
 
function draw() {
 var sorte = round(random(0,5));
 //println(#5ea19a + sorte);
 if (sorte == 0) {
 line(lin * taille, col * taille, taille + (lin * taille), taille + (col * taille));
 }
 if (sorte == 1) {
 line(lin * taille + taille, col * taille, lin * taille, col * taille + taille);
 }
 if (sorte == 2) {
 line(lin * taille, col * taille, taille + (lin * taille), taille + (col * taille));
 }
 if (sorte == 3) {
 line(lin * taille + taille, col * taille, lin * taille, col * taille + taille);
 }
 if (sorte == 4) {
 }
lin++;
if (lin * 12 > width) {
col++;
lin = 0;
}
if (col * 12 > height) {
 noLoop();
}
 var sorte2 = round(random(0,5));
// println(#5ea19a + sorte2);
 strokeCap(ROUND);
 if (sorte2 == 0) {
 line(lin2 * taille2, col2 * taille2, lin2 * taille2 + taille2, col2 * taille2);
 }
 if (sorte2 == 1) {
 line(lin2 * taille2, col2 * taille2, lin2 * taille2, col2 * taille2 + taille2);
 }
 if (sorte2 == 2) {
 line(lin2 * taille2, col2 * taille2, lin2 * taille2 + taille2, col2 * taille2);
 }
 if (sorte2 == 3) {
 line(lin2 * taille2, col2 * taille2, lin2 * taille2, col2 * taille2 + taille2);
 }
 if (sorte2 == 4) {
 }
lin2++;
if (lin2 * 36 > width) {
col2++;
lin2 = 0;
}
if (col2 * 36 > height) {
}
}

Inspiré par “From the Square Series” de Roger Coqart

/* 
Part of the ReCode Project (http://recodeproject.com)
Based on "From the Square Series" by Roger Coqart
Originally published in "Computer Graphics and Art" v3n2, 1978
Copyright (c) 2015 Haydn Edginton-King - OSI/MIT license (http://recodeproject/license).
*/
/* @pjs pauseOnBlur="true"; */
var lin = 0;
var col = 0;
var sizer = 6;
var lin2 = 0;
var col2 = 0;
var sizer2 = 24;
var lin3 = 0;
var col3 = 0;
var sizer3 = 12;
var lin4 = 0;
var col4 = 0;
var sizer4 = 48;
 
function setup() {
createCanvas(400, 400);
background(0);
stroke(255);
strokeWeight(1);
strokeCap(ROUND);
}
 
function draw() {
 var sorte = round(random(0,5));
  if (sorte == 0) {
 line(lin * sizer, col * sizer, sizer + (lin * sizer), sizer + (col * sizer));
 }
 if (sorte == 1) {
 line(lin * sizer + sizer, col * sizer, lin * sizer, col * sizer + sizer);
 }
 if (sorte == 2) {
 }
 if (sorte == 3) {
 }
 if (sorte == 4) {
 }
 lin++;
 if (lin * sizer > width) {
col++;
lin = 0;
}
 if (col * sizer > height) {
 noLoop();
}
 var sorte2 = round(random(0,5));
  if (sorte2 == 0) {
 line(lin2 * sizer2, col2 * sizer2, sizer2 + (lin2 * sizer2), sizer2 + (col2 * sizer2));
 }
 if (sorte2 == 1) {
 line(lin2 * sizer2 + sizer2, col2 * sizer2, lin2 * sizer2, col2 * sizer2 + sizer2);
 }
 if (sorte2 == 2) {
 }
 if (sorte2 == 3) {
 }
 if (sorte2 == 4) {
 }
 lin2++;
 if (lin2 * sizer2 > width) {
col2++;
lin2 = 0;
}
 if (col2 * sizer2 > height) {
}
var sorte3 = round(random(0,5));
  if (sorte3 == 0) {
 line(lin3 * sizer3, col3 * sizer3, sizer3 + (lin3 * sizer3), sizer3 + (col3 * sizer3));
 }
 if (sorte3 == 1) {
 line(lin3 * sizer3 + sizer3, col3 * sizer3, lin3 * sizer3, col3 * sizer3 + sizer3);
 }
 if (sorte3 == 2) {
 line(lin3 * sizer3, col3 * sizer3, sizer3 + (lin3 * sizer3), sizer3 + (col3 * sizer3));
 }
 if (sorte3 == 3) {
 line(lin3 * sizer3 + sizer3, col3 * sizer3, lin3 * sizer3, col3 * sizer3 + sizer3);
 }
 if (sorte3 == 4) {
 }
 lin3++;
 if (lin3 * sizer3 > width) {
col3++;
lin3 = 0;
}
 if (col3 * sizer3 > height) {
}
var sorte4 = round(random(0,5));
  if (sorte4 == 0) {
 line(lin4 * sizer4 + sizer4, col4 * sizer4, lin4 * sizer4, col4 * sizer4 + sizer4);
 }
 if (sorte4 == 1) {
 line(lin4 * sizer4 + sizer4, col4 * sizer4, lin4 * sizer4, col4 * sizer4 + sizer4);
 }
 if (sorte4 == 2) {
 }
 if (sorte4 == 3) {
 }
 if (sorte4 == 4) {
 } 
lin4++;
 if (lin4 * sizer4 > width) {
col4++;
lin4 = 0;
}
 if (col4 * sizer4 > height) {
}
}