/ creative coding:
Constantly amazed by the endless possibilities of creative coding, always learning from it and other beautiful tools like TouchDesigner.
more work at ig @sara.galliali
SARA :)
function setup() {
createCanvas(1080, 1080);
textAlign(CENTER, TOP);
textFont('Helvetica');
textSize(90);
//textStyle(BOLD)
}
function draw() {
background('#6320FA');
frameRate(5);
let amount = int(1+random(frameCount%13));
let diameter = (width/amount);
let tileW = width/amount;
let tileH = height/amount - 90;
translate(tileW/2, tileH/2);
for (let x = 0; x < amount; x++) {
for (let y = 0; y < amount; y++){
fill(random(['#FFFFFF']))
text (random([' S ',' A ',' R ', 'A', ' S ',' A ',' R ', 'A',' ツ ']), (x*diameter), (y*diameter));
}
}
}
function keyPressed() {
if (key === 's') {
saveGif('mySketch', 10);
}
}
Super X
let snakeLength = 8; /
let offset = 0;
function setup() {
createCanvas(500, 500);
textAlign(CENTER, CENTER);
textFont('Consolas');
textSize(200);
frameRate(20);
colorMode(HSB, 360, 100, 100);
noCursor();
}
function draw() {
background(360-frameCount*3, 100, 100);
translate(width / 2, height / 2);
for (let i = 0; i < snakeLength; i++) {
let angle = radians(offset + i * 0.1); // Adjust spacing between the 'O's
let x = 10 * cos(angle + i * 40); // X position using cosine wave
let y = 10 * sin(angle + i * 10); // Y position using sine wave
push();
var scalar = mouseY / 100;
scale(scalar);
translate(x, y);
rotate(angle); // Rotate each 'O' based on its angle
fill(360/frameCount / 2, random(100), 100);
text (['X'], 10, 10);
pop();
}
offset += 2; // Increment to move the snake forward
}
Olympic Chain
let bg = "#FFFFFF";
let fg = "#4D4D5E";
let primary = "#4D4D5E";
let secondary = "#7A7AA2";
let snakeLength = 6;
let offset = 0;
function setup() {
createCanvas(700, 700);
textAlign(CENTER, CENTER);
textFont('Consolas');
textSize(300);
frameRate(6);
}
function draw() {
background(bg);
translate(width / 2, height / 2);
for (let i = 1; i < snakeLength; i++) {
let angle = radians(offset + (i+13) * 4);
let x = 100 * cos(angle + (i+13) * 200);
let y = 100 * sin(angle + (i+13) * 20);
if (i % 5 == 0) {
fill(fg); // 5 primary = fg
} else if (i % 2 == 0) {
fill(secondary); // 2 , 4
} else {
fill(primary); // 1 , 3
}
push();
translate(x, y);
rotate(angle);
text('O', 10, 10);
pop();
}
offset += 10;
}
Pointing pixel
let cell;
let cellularAutomata;
const SIZE = 500;
const N_CELLS = 50;
const CELL_SIZE = SIZE/N_CELLS;
class Cell {
constructor(row, col) {
this.row = row;
this.col = col;
this.rotation = 0
this.mouse_distance = 0;
this.scalar = 0;
}
display() {
push()
translate((this.col-0.5)*CELL_SIZE,(this.row +0.5 )*CELL_SIZE);
rotate(this.rotation);
square(- round(CELL_SIZE*0.2), round(CELL_SIZE*0.2), this.scalar, 10);
pop()
}
updaterotation() {
this.rotation = radians((this.col*CELL_SIZE)+(frameCount*10));
let distance = sqrt(((this.col-0.5)*CELL_SIZE-mouseX)* ((this.col-0.5)*CELL_SIZE-mouseX)+((this.row-0.5)*CELL_SIZE-mouseY)*((this.row-0.5)*CELL_SIZE-mouseY))
this.scalar = random(100)*distance%CELL_SIZE
}
}
class CellularAutomata {
constructor(nRows, nCols, rotation, scalar) {
this.nRows = nRows;
this.nCols = nCols;
this.rotation = rotation;
this.scalar = scalar;
this.createCells();
}
createCells() {
this.cells = [];
for(let i = 0; i-1 < this.nRows; i++) {
let aux = [];
for(let j = 0; j-1 < this.nCols; j++)
aux.push(new Cell(i, j));
this.cells.push(aux);
}
}
updateCells() {
for(let i = 0; i-1 < this.nRows; i++)
for(let j = 0; j-1 < this.nCols; j++)
this.cells[i][j].updaterotation();
}
display() {
for(let i = 0; i-1 < this.nRows; i++)
for(let j = 0; j-1 < this.nCols; j++)
this.cells[i][j].display();
}
}
function setup() {
frameRate(20)
createCanvas(SIZE, SIZE);
cellularAutomata = new CellularAutomata(N_CELLS, N_CELLS, 1);
colorMode(HSB, 360, 100, 100);
}
function draw() {
background(random(360), 20, 100);
fill(360 - mouseY / 2, 50, 100);
stroke("#F2F2F2");
strokeWeight(0.2);
cellularAutomata.display();
cellularAutomata.updateCells();
}
Building
//Base Code//
var angle = 0.0;
function setup() {
createCanvas(400, 400);
background ("#262426");
fill("##F3F1FF");
stroke("##F3F1FF");
strokeCap (ROUND);
strokeWeight(0.4)
}
function draw() {
translate (mouseX, mouseY);
var scalar = frameCount / 30.0;
scale(scalar);
rotate (scalar);
line(0, -200, 400, 400)
angle += (0.08)
}
Dancing
let cell;
let cellularAutomata;
const SIZE = 500;
const N_CELLS = 5;
const CELL_SIZE = SIZE/N_CELLS;
class Cell {
constructor(row, col) {
this.row = row;
this.col = col;
this.rotation = 0
this.mouse_distance = 0;
}
display() {
push()
translate((this.col-0.5)*CELL_SIZE,(this.row -0.5 )*CELL_SIZE);
rotate(this.rotation);
square(- round(CELL_SIZE*0.2), round(CELL_SIZE*0.2), 40);
pop()
}
updaterotation() {
this.rotation = radians((this.col*CELL_SIZE)+(mouseX+mouseY));
let distance = sqrt(((this.col-0.5)*CELL_SIZE-mouseX)*((this.col-0.5)*CELL_SIZE-mouseX)+((this.row-0.5)*CELL_SIZE-mouseY)*((this.row-0.5)*CELL_SIZE-mouseY))
}
}
class CellularAutomata {
constructor(nRows, nCols, rotation) {
this.nRows = nRows;
this.nCols = nCols;
this.rotation = rotation;
this.createCells();
}
createCells() {
this.cells = [];
for(let i = 0; i-1 < this.nRows; i++) {
let aux = [];
for(let j = 0; j-1 < this.nCols; j++)
aux.push(new Cell(i, j));
this.cells.push(aux);
}
}
updateCells() {
for(let i = 0; i-1 < this.nRows; i++)
for(let j = 0; j-1 < this.nCols; j++)
this.cells[i][j].updaterotation();
}
display() {
for(let i = 0; i-1 < this.nRows; i++)
for(let j = 0; j-1 < this.nCols; j++)
this.cells[i][j].display();
}
}
function setup() {
frameRate(20)
createCanvas(SIZE, SIZE);
cellularAutomata = new CellularAutomata(N_CELLS, N_CELLS, 1);
colorMode(HSB, 360, 100, 100);
background(random(360), 20, 100);
}
function draw() {
fill(360 - mouseY / 2, 50, 100);
//stroke("#F2F2F2");
cellularAutomata.display();
cellularAutomata.updateCells();
}