PaperJS#2 (33 Hours 30 Minutes Trained)
Today was my second day working with Paper JavaScript. I mentioned yesterday that in the udemy web dev course I have been taking, there was a circles exercise challenge given by the instructor. The goal is to create 100 purple circles on a black background with Paper JS.
The goal here was NOT to copy the circle code 100 times over as that would become very tedious and clunky to work with. The goal was to accomplish the 100 circles in the shortest amount of code possible.
This was not a code along, so my solution to the problem is 100% original from whatever is zipping around up there in my brain. I will post an image of what the instructor wanted the solution to look like. Afterwards, I will place my codepen with my own results.
Disclaimer: this doesn’t seem like much code for an hours worth of work, but most of my time was spent thinking about solutions to the problem, typing them in, watching them fail, and then trying again. It is also good to note i spent about 20 minutes debugging / troubleshooting why I could not get the initial circle to appear on the canvas in Paper JS. My code for the circle kept appearing as text at the top of the page instead of a circle.
It turns out I did not wrap the code for the circle in the canvas script tag… #lessonlearned.
Anyways, here is the instructor’s circle solution followed by my codepen solution.
Below is my solution. The most difficult part of this problem was wrapping my brain around how to nest a “for loop” inside of another “for loop”.
After trying multiple times, I cannot get codepen to work with paper JS tonight. I did yesterday, and cannot see why it isn’t working today. Anyways, I will post a picture of my result, and the code below the picture!
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>circles</title>
<script type=”text/javascript” src=”paper-full.js”></script>
<link rel=”stylesheet” type=”text/css” href=”circles.css”>
<script type=”text/paperscript” canvas=”myCanvas”>
var circle = new Path.Circle({
center: [0, 0],
radius: 10,
fillColor: ‘purple’
});
for (var j = 0; j < 10; j++) {
for (var i = 0; i < 10; i++) {
var copy = circle.clone();
copy.position.x = j * 100;
copy.position.y += i * 100;
}
}
</script>
<body>
<canvas id=”myCanvas” resize></canvas>
</body>
</html>
CSS CODE
canvas {
height: 100%;
width: 100%;
background: black;
}
body, html {
height: 100%;
margin: 0;
}
33 Hours of training down, only 9,966 hours to go! If you enjoy following along on this journey be sure to clap, follow, etc. (mainly etc.)
