3D Modeling

After fiddling around 2D animation using Animate CC, this paved way for me to try 3D modeling using Blender. I really love learning! For those who say that 3D modeling is difficult, they should try to give this tutorial a shot. This tutorial by Blender Guru is a 9-part series that covers all the basics of this trade, including some useful tips and tricks. What I admire about Blender Guru is that his way of teaching is very beginner-friendly, unlike others who just click here and there and you’re on your own to figure out and would leave you even more confused. Try it out! After I finished the tutorial, I was able to do some models of my own:

 

notebook

I think I’ve found a new hobby. 🙂

Long Time No See

Long time no see! I’ve been really busy these days due to my work, and I kinda feel a lil burnt out, aaargh!. So in turn, I want to have a sort of something new and refreshing! (Something that is not related to programming at all)

Lately, I tried to relearn some of my Flash animation skills. *insert flashback-of-sweet-old-memories-when-flash-was-a-badass*.

I’m amazed that I still remember the tricks that I used to do, such as this masking technique:

 

 

I might try more of the coming days, I’m excited. 🙂

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