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