Kotlin and p5.js

Kotlin + p5.js

I have a confession to make. I’m falling in love again with Kotlin.

The last time I used it was December last year and wasn’t able to continue due to the following busy months. And these past days, I’m relearning the language again. I’m still dazzled by the beauty of it!

I’ve also been hacking through P5.js, and this makes me feel confused as what to focus noW. Hence, I thought, why not both? Use Kotlin to create P5.js sketches!
Read More

twitter_header_1407757519

Fun with p5.js


p5.js is a JS library for learning how to code in a visual art perspective. It has a full set of drawing functionalities that can help programmers and artists express their creativity.

The snippets below are based from the book “Processing: a programming handbook for visual designers and artists“. I hand-picked these codes and ported to p5.js.

Source codes are uploaded in Github.



p.background(0);
p.noStroke();
p.smooth();
p.fill(242,    204, 47, 160);
p.ellipse(47, 36, 64, 64);
p.fill(174,    221, 60, 160);
p.ellipse(90, 47, 64, 64);
p.fill(116, 193,    206, 160);
p.ellipse(57, 79, 64, 64); 




for (x = -16; x < 100; x += 10) { 
  p.line(x, 0, x+15, 50);
}
p.strokeWeight(4);
for (x = -8; x < 100; x += 10) { 
  p.line(x, 50, x+15, 100);
}




p.noFill();
for (d = 150; d > 0; d -= 10) { 
  p.ellipse(50, 50, d, d); 
}




for (i = 0; i < 100; i += 2) { 
  p.stroke(255-i);
  p.line(i, 0, i, 200); 
}




p.fill(0, 76);
p.noStroke();
p.smooth();
for ( y = -10; y <= 100; y += 10) {
  for (x = -10; x <= 100; x += 10) {
	p.ellipse(x + y/8.0, y + x/8.0, 15 + x/2, 10);
  }
}




for (y = 20; y <= 80; y += 5) {
  for (x = 20; x <= 80; x += 5) {
	if ((x % 10) == 0) {
	  p.line(x, y, x+3, y-3);
	} else {
	  p.line(x, y, x+3, y+3);
	} 
  }
}



p.noStroke();
for (y = 0; y < 100; y += 10) {
  for (x = 0; x < 100; x += 10) {
	p.fill((x+y) * 1.4);
	p.rect(x, y, 10, 10);
  }
}





p.beginShape(p.TRIANGLE_FAN);
p.vertex(10,    20);    
p.vertex(75, 30);
p.vertex(75, 50);
p.vertex(90, 70);
p.vertex(10,    20);    
p.endShape();




p.noFill();
p.smooth();
for ( x = 0; x < 100; x += 5) {
  n = p.norm(x, 0.0, 100.0);
  y = p.pow(n, 4);
  y *= 100;
  p.strokeWeight(n * 5);
  p.ellipse(x, y, 120, 120);
}




for ( x = 0; x < 100; x++) {
	n = p.norm(x, 0.0, 100.0);

	val = n * 255.0;
	p.stroke(val);
	p.line(x, 0, x, 50);

	valSquare = p.pow(n, 4) * 255.0;
	p.stroke(valSquare);
	p.line(x, 50, x, 100);
}




p.createCanvas(100, 100);
p.background(116, 193,    206);
x = 0;
p.noStroke();
for ( i = 51; i <= 255; i += 51) {
	p.fill(129, 130, 87, i);
	p.rect(x, 20, 20, 60);
	x += 20;
}




p.background(56, 90, 94);
p.smooth();
x = 0;
p.strokeWeight(12);
for ( i = 51; i <= 255; i += 51) {
	p.stroke(242, 204, 47, i);
	p.line(x, 20, x+20, 80);
	x += 20;
}




p.colorMode(p.HSB);
for ( i = 0; i < 100; i++) {
	p.stroke(i*2.5, 255, 255);
	p.line(i, 0, i, 100);
}




p.colorMode(p.HSB, 360, 100, 100);
for (i = 0; i < 100; i++) {
	newHue = 200 - (i*1.2);
	p.stroke(newHue, 70, 80);
	p.line(i, 0, i, 100);
}




p.background(0);
p.smooth();
p.stroke(255, 120);
p.translate(66, 33);
for (i = 0; i < 18; i++) {
	  p.strokeWeight(i);
	  p.rotate(p.PI/12);
	  p.line(0, 0, 55, 0);
}

 

View Code

 

For more p5 sketches, please go to the Gallery