JavaOne

JavaOne 2016 Videos

JavaOne is a yearly conference about Java in different areas of technology such as big data, cloud, IoT, etc. It is held in San Francisco, California, Sept. 18-22, 2016. If you are from the other side of the earth and still want to catch up with the latest happenings, you can visit /r/javaone for the updated list of videos of sessions that you can watch at home or at work(secretly). You can also subscribe directly to JavaOne youtube channel. Java Rocks!

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

nature of code in javafx canvas

Nature of Code in JavaFX Canvas

If you are torn between programming and physical simulations that give pleasing visual results, you wouldn’t want to miss reading The Nature of Code by Daniel Shiffman. The book covers programming techniques to create simulations of natural systems. The language used in the book is Processing. Since I always wanted to be unique and different, I picked JavaFX Canvas to recreate the examples in the book.
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