logikblok-blog

[logikblok-blog]

Sketching out particles and testing some positive affirmations.

```javascript let particles = []; let messages = [<br> "Believe in yourself!",<br> "You are amazing!",<br> "Keep shining!",<br> "Dream big!",<br> "You can do it!",<br> "Stay positive!",<br> "Embrace the journey!",<br> "Big up to you!",<br> "You're doing great"<br> ]; let explosions = []; function setup() {<br> createCanvas(800, 800);<br> noStroke();<br> } ``` function draw() {<br> background(0, 0, 1, 60); // Fading trail effect // Continuously spawn explosions at random intervals<br> if (frameCount % 60 === 0) {<br> // Constraining the space for the explosions<br> createExplosion(random(width - 50), random(height - 50));<br> } // Update and display particles<br> for (let i = particles.length - 1; i >= 0; i--) {<br> particles[i].update();<br> particles[i].show();<br> if (particles[i].finished()) {<br> particles.splice(i, 1);<br> }<br> } // Update and display messages<br> for (let i = explosions.length - 1; i >= 0; i--) {<br> explosions[i].update();<br> explosions[i].show();<br> if (explosions[i].finished()) {<br> explosions.splice(i, 1);<br> }<br> }<br> } function createExplosion(x, y) {<br> let numParticles = random(50, 200);<br> let colors = [random(255), random(255), random(255)];<br> let message = random(messages); // Select a random life-affirming message // Create particles<br> for (let i = 0; i < numParticles; i++) {<br> particles.push(new Particle(x, y, colors));<br> } // Create the message<br> explosions.push(new ExplosionMessage(x, y, message, colors));<br> } class Particle {<br> constructor(x, y, colors) {<br> this.x = x;<br> this.y = y;<br> this.vx = random(-3, 3);<br> this.vy = random(-3, 3);<br> this.alpha = 255;<br> this.colors = colors;<br> } update() {<br> this.x += this.vx;<br> this.y += this.vy;<br> this.alpha -= 5; // Fade out over time<br> } finished() {<br> return this.alpha <= 0;<br> } show() {<br> fill(this.colors[0], this.colors[1], this.colors[2], this.alpha);<br> ellipse(this.x, this.y, 8);<br> rect(this.x + random(2, 5), this.y + random(2, 10), 8);<br> }<br> } class ExplosionMessage {<br> constructor(x, y, message, colors) {<br> this.x = x;<br> this.y = y;<br> this.message = message;<br> this.colors = colors;<br> this.alpha = 255;<br> } update() {<br> this.alpha -= 5; // Fade out over time<br> } finished() {<br> return this.alpha <= 0;<br> } show() {<br> textAlign(CENTER, CENTER);<br> textSize(20);<br> fill(this.colors[0], this.colors[1], this.colors[2], this.alpha);<br> text(this.message, this.x, this.y);<br> }<br> }

[logikblok-blog]

[logikblok-blog]

City roads

This website renders every single road within a city.

Roads cut and connect a city. The patterns of their layouts can define the domain of millions of people. When viewed from above they are only lines but we know that each line serves, links and potentially can frustrate its inhabitants. 

You might like to explore your previous cities. Explore them here: https://anvaka.github.io/city-roads/

[logikblok-blog]

Experimenting with the site generaaaaaative.com. Fast and aesthetically pleasing.

[logikblok-blog]

Passing Planets

Small sketch generating circles, moving them across the screen at random speeds. There’s something aesthetically pleasing about it.

Try it out here: https://logikblok.github.io/sketches/passingplanets/

[logikblok-blog]

Fixed String Sketches

A quick sketch using p5.js mixing random colours, mouse interactions and the line function. It restricts the movement of a users interaction to draw these layered colourful masses.

The fixed point anchors our “string” to a central location, the movement of our mouse or finger causes lines to be drawn, clicking our mouse causes the colour and width of the line to change randomly.

line(fixedpoint, fixedpoint, mouseX, mouseY);

Try it our for yourself here: https://logikblok.github.io/sketches/fixedstring/.

Future iterations could allow for the placement of the fixed point, choice of colour palette and width.

For lots more interactive creative coding sketches head here.

[logikblok-blog]

Open Letter

A quick sketch using p5.js mixing random text elements, mouse interactions and a few shapes for fun. Try it our for yourself here: https://logikblok.github.io/sketches/openletter/

For more interactive creative coding sketches head here.

[logikblok-blog]

Digital Interactive history - Below the Surface

What could we learn about a society from things thrown away? The objects curated here aren’t guaranteed to have thrown away, but we can say that they've been found as part of excavations along the banks of the river Amstel in the City of Amsterdam.

The river is not only a carrier of material and cultural data in the form of archaeological finds, it also forms a physical part of the city and as such embodies information about the landscape.

These excavations yielded a huge amount of amazing finds, most of which can be seen here, digitally captured and annotated. Additional details of these of objects can also be explored here.

What makes the project excellent is the opportunity for users anywhere to interact and knit these objects together into new creative fusions. Previous curation/creations can be seen here. Users can collect objects across time, use, material and location. The new creations look great quickly, the additions of editable lines and text mean almost limitless new productions.

Every find is a frozen moment in time, connecting the past and the present. The picture they paint of their era is extremely detailed and yet entirely random due to the chance of objects or remains sinking down into the riverbed and being retrieved from there. This is what makes this archaeological collection so fascinating, so poetically breathtaking and abstract at one and the same time.

Explore the project here: https://belowthesurface.amsterdam/

[logikblok-blog]

Robots with wings.

Flight can support access to highly inaccessible areas or even dangerous ones for humans. Additionally giving the flying object a programmable body with limbs for manipulation then you can gain a whole new variety of uses. 

The gifs above are of prototypes taken from a 2017 interview with a researcher at the French National Center for Scientific Research. They show demonstrations of flying robots that can handle objects and interact with their environment.

The problems involved in adding a manipulating tool or arm to an aerial vehicle are chiefly theoretical. The whole design has to be rethought in terms of mechatronics (reconfiguring the robot’s geometry, materials, types of actuators, etc.). We also have to develop new methods for calculating trajectories and command functions; what works very well for fixed robots or wheeled robots simply does not apply when flying. Juan Cotes.

One to keep watching as they develop further versions including an autonomous helicopter and further flying platform types. 

Source. Aeroarms project.

More posts like this.

[logikblok-blog]

Drawing with Ellipses.

Experiment using ellipses to expand and contract whilst following your mouse movements. Pressing any key would restart the sketch.

Online to experiment with here.

More online sketches to experiment with here. Twitter

[logikblok-blog]

Fast Forest Maker

I made a sketch to make trees quickly. The open question is when do enough trees become a forest. 

Code below to use in processing or try it online here using P5.JS.

void setup() {  size(1000, 450);  background(79, 121, 66);  rectMode(CENTER);  noStroke(); }

void draw() {  if(keyPressed){   background(79, 121, 66);  } }

void mousePressed() {  fill(0,255,0);  triangle(mouseX-30,mouseY-20,mouseX,mouseY-70,mouseX+30,mouseY-20);  fill(100,81,14);  rect(mouseX, mouseY, 10, 50);  //Just in case you want to save your glorious forest.  //saveFrame("f-######.png"); }

[logikblok-blog]

The rectangle and the mouse.

Experimental sketch using rectangles, colours and mouse functions. Moving the mouse results in different layers of rectangles being drawn and moved. Experimenting with colours, initial starting conditions and shapes can result in lots of new generative designs.

Code to experiment with is below and place to experiment online is here.

//giving the initial values starting points. (can always rest back to 0);

int x = 300;

int y = 300;

void setup() {

 size(800, 600);

 background(0);

 noStroke();

}

void draw() {

 //experiment with the fill values

 fill(random(120+x), x+y+x, 255*x);

 //experiment with the values adding to the x and y variables

 rect(2+x, 2+y, 1+x, y);

 if (mouseY > 300) {

   y--;

 }

 if (mouseY < 300) {

   y++;

 }

 if (mouseX > 300) {

   x--;

 }

 if (mouseX < 300) {

   x++;

 }

 if (x > 600) {

   x = 0;

 }

 if (y > 600) {

   y = 0;

 }

}

void keyPressed() {

 //saves your output

saveFrame("sketch-###.png");

 //redraws the background

 background(0);

}

[logikblok-blog]

Consistent coloured stalactites / chroma

A stalactite is a formation that hangs from the ceiling of a cave and is produced by precipitation of minerals. Here we’ve got a similar concept but with colours, consistently precipitating towards the bottom of the screen. 

Code to experiment online is here and using Processing is below:

int x = 500; int y = 500;

void setup () {  size(600, 600);  noStroke();  background(0); }

void draw() { }

void mouseClicked() {  float value = random(0, 100);  if (value < 5) {    fill(#F23838);  } else if (value < 10) {    fill(#3A38F0);  } else if (value < 15) {    fill(#38F0EB);  } else if (value < 20) {    fill(#F038ED);  } else if (value < 25) {    fill(#46F038);  } else if (value < 30) {    fill(#E9F038); //add any more lines like the above and below to have further colours/rectangles.  } else if (value < 90) {    fill(#0AFAE8);  } else if (value < 95) {    fill(#FA0A62);  }  for (int i = 0; i < 16; i++) {    rect(80 * i, (frameCount%height), 40, 40);  }  //uncomment out the line below if you'd like to save the frames;  saveFrame("paint-######.png"); }

//pressing your key will reset it by redrawing the background over the rectangles.

void keyPressed() {  background(0); }

[logikblok-blog]

Letter Rain.

Experimenting with typography and haiku. The code below shifts positions and sizes of text that’s pressed. 

Comparing with the original haiku the letters without context make almost no sense however if ordered by animation we can see some semblance to the original poem. 

Dispersing the waves of words into letter droplets shifts the original context for newer visual experience.

The functions below to randomise the position of the letters whilst making their colours and size change as the sketch progresses. 

Made with processing, haiku’s selected from here and presented using notegraphy.  

--

int x = 40; boolean xsize = false; //change fonts here to modify typography aesthetics I went with these three. PFont Adobe; PFont Conersation; PFont Goudy; //un comment this part of code if you'd like the letters to dissapear after a while. //int timer;

void setup() {  size(600, 600);  background(0); }

void draw() { //uncomment this part of code if you'd like the letters to dissapear after a while.  //if (millis()-timer>=10000) {    //background(random(57,173),random(54,167),random(54,167));    //timer=millis();    //} //Change this part of the code if you'd like to modify the sizes of the text.    if (xsize) {    x = x + 10;    if (x > 90) {      xsize = false;    }  } else {    x = x - 5;    if ( x < 10) {      xsize = true;    }  } } void keyPressed() {  //change this for different colours.  //R/G/B  fill(224, 20, random(0,255)); }

void keyReleased() {  //font LOAD slectors un comment out the corresponding font to pick one.  //Adobe = loadFont("Adobe.vlw");  Conersation = loadFont("Conersation.vlw");  //Goudy = loadFont("Goudy.vlw");  //fonts un comment out the corresponding line.  //textFont(Adobe);  textFont(Conersation);  //textFont(Goudy);  textSize(x);  //the letters come out in random locations based the size of the sketch.  text(key, random(0, width), random(0, height));  //save frame incase you'd like to record the outcomes of the letter rain.  //saveFrame("letter-####.png"); }

[logikblok-blog]

Good Gradients.

This is a sketch allowing users to cycle rapidly through gradients of full screen colour. “Hold down your mouse” is the only instruction. 

Letting go of your mouse takes you back to the original instruction screen. 

Code below.

// Constants

int X_AXIS = 2;

color c1, c2;

int value = 0;

 void setup() {

 fullScreen();

}

 void draw() {

 setGradient(0, 0, width, height, c2, c1, X_AXIS);

 if (mousePressed == true) {

   c1 = color(random(0, 255), random(0, 255), random(0, 255));

   c2 = color(random(0, 255), random(0, 255), random(0, 255));

 } else {

   c1 = color(#710012);

   c2 = color(#FF0000);

   textSize(60);

   text("HOLD DOWN YOUR MOUSE", width/3, height/2);

   fill(255, 255, 255);

 }

//uncomment this to save frames.

//saveFrame("colour.######.png");

}

 void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {

 noFill();

 for (int i = x; i <= x+w; i++) {

   float inter = map(i, x, x+w, 0, 1);

   color c = lerpColor(c1, c2, inter);

   stroke(c);

   line(i, y, i, y+h);

 }

}

[logikblok-blog]

BLOOM v1

I came across functions to create flowers over time. These are variations of the animations that are created. The next step is to look at creating new repetitions of the flowers without restarting the sketch.

Code along below with comments. Additional link to rose mathematics.

float [] num1 = {2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0} ; float [] num2 = {1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0} ; //call a number from the array of numbers setup above. float k1 = int(random(num1.length)); float k2 = int(random(num2.length)); //Timer for the timer background redraw. int timer; void setup() {  //fullScreen();  size(600, 600);  background(0);  strokeWeight(0.03); } void draw() {  if (millis()-timer>=10000) {    background(0);    timer=millis();  }

 translate(width/2, height/2);  scale(100, 100);    float k = k1/k2;  float t = frameCount / 10.0;  float x = cos(k*t) * sin(t);  float y = cos(k*t) * cos(t);  //Print lines to see the k values going into the equation.  print(k1);  print(k2);  stroke(#FACD17);  point(x, y);  //save frames  saveFrame("bloom-######.png"); }

[logikblok-blog]

Line Tests

Making lines move using processing. The aim here was to experiment making things appear complex and simple. The animations feature elements of colour, patterns and repetition. 

Code to experiment below. Also with comments if you would like to test.

int xval = 600;

boolean move = true;

 void setup() {

  size(600, 600);

  stroke(0);

  smooth();

}

 void draw() {

 background(255); 

 //Print line to show the values of xval

  println(xval);

 //this makes things move. Experiment with all the numbers here. + 10 or - 10 changes the speed of change of xval.

 if (move) {

 xval = xval + 10;

 if (xval > 600) {

      move = false;

    }

  } else {

    xval = xval - 10;

    if (xval < 100) {

      move = true;

    }

  }

 //this generates lots of lines. Experiment with all the values here. Comment out lines if you like.

  for (int i = 0; i < width; i++) {

    //line(i, 10+width, 600, 0);

    stroke(#E86315+i+i);

    //line(0, 600, 10+width, i);

    //line(0, 0+xval, 600, i+600);

    line(width/2,height/3,i+xval,i);

    stroke(#E815B7+i+i);

    line(i,i+xval,height/3,width/2);

    stroke(random(0,255));

    rotate(PI/3.0);

    line(i,i+xval,height/3,width/2);

    rotate(PI/2.0);

    line(i,i+xval,height/3,width/2);

    //stroke(#3E15E8+i);

    //line(0, random(height, width), height+100, i+xval);

    //line(0, random(0, 600), 10+width, i);

  }

   //Un comment to save the frames.

  //saveFrame("line-###.png");

}