First Brush with Paper.js


🌺🌻🌼💐🌹🌷🌸🌺🌻🌼💐🌹🌷🌸🌺🌻🌼💐🌹

Assignment 6: Draw a flower in Paper.js.

🌸🌺🌻🌼💐🌹🌷🌸🌺🌻🌼💐🌹🌷🌸🌺🌻🌼💐

Thats it! You can draw the flower however you want :)

Paper.js is a javascript library for designers and artists that have familiarity with Javascript and HTML (YOU!!!!!!). While this assignment is open ended, I definitely want you to get familiar with the Paper.js website, as we will spend a lot of time there. It's made for you to read about the structure of the library, and paste in examples.

For this assignment, if you can...

  • Center the flower on the screen.
  • incorporate a random element so the flower always looks different.

General Tips:

  • Use the Paper.js starter code we discussed in lecture 6
  • Start by testing out drawing lines, circles in different locations.
  • For flower pedals, try using a for loop, and adjusting values/variables to get different effects
  • Reading the docs will save you time and energy!
  • If you get stuck, try starting over! You'll be surprised how little you missed your old code.

Paper.js code tips as you get started with the library:

Recall that in our starter code, we setup our script.js file with the the setting type="text/paperscript". In other words, all of the javascript we write in script.js is actually paperscript now.

Paperscript is a clever way that Paper.js extends what our javascript can do. Everything one normally does in javascript will work 100% fine. Paperscript only adds "conveniences"- it doesnt take anything away that we are used to doing.

Let's go over those main "conveniences". Please read about these things in the paper.js reference as well:

To create paper objects, as you will see in the documentation, we need to use one thing we haven't discussed in class: the new keyword. Here's an example:

Making a shape in paper.js 
1
2let path = new Path(); // the usage of "new" creates a special paper.js Path object
3path.strokeColor = "black"; // By default, paths don't have a fillColor or strokeColor, so will be invisible until we set one.
4
5let firstPoint = new Point(50,100); // Using "new" to create a point
6path.add(firstPoint);
7
8let secondPoint = [100,200]; // We can use an array of x and y values instead!
9path.add(secondPoint); // Paper.js will allow this!!
10
11let thirdPoint = firstPoint + secondPoint; // Paperscript in action! We can add points together with "+", which wouldn't work in plain javascript.
12path.add(thirdPoint);
13

In short, we use new whenever we need to create paper objects like Points, Paths, Groups, and stuff like that.

Paper.js functions

One other thing! Paperscript makes it very easy to respond to user input, or execute code on every frame. All we need to do is create functions in our script.js file with names that Paper.js looks for. Here those functions are. Please feel free to copy these into your assignment:

Functions that paper.js looks for 
1
2function onMouseDown(event){
3  // Any time a user clicks, this runs.
4  //The event object has info about where the click was, and which objects were clicked if any.
5}
6function onMouseMove(event){
7  // Any time a user moves the mouse, this runs.
8  //The event object has info about where the mouse was, and which objects were overlapping if any.
9}
10function onResize(event){
11  // Any time a user resizes the screen, this runs.
12  //The event object has info about the new screen size.
13}
14function onFrame(event){
15  // This function runs on EVERY FRAME!!
16  // The event object includes a counter that increments by 1 on each frame, which is often useful!
17}
18
19//Note: paste this code exactly as it appears above- do not do
20// let onFrame = function(){
21//}
22// We need these functions to be in the global scope, and the above way is how we do that.
23

Good luck and have fun!

Please turn in your code as a google drive attachment to an email, or on Microsoft teams. Due before next class, Monday June 13.

Here is the flower code from class!

Henry's flower code 
1let randomColor = function(){
2	let choices = ["red","green","blue"];
3	let randomNumber = Math.floor(Math.random()*3);
4	return choices[randomNumber];
5}
6
7let createFlower = function(location){
8	let flower = new Group();
9
10	let stem = new Path();
11	stem.strokeColor = "green";
12	stem.add(view.bounds.bottomCenter);
13	stem.add(view.bounds.center);
14	stem.strokeWidth = 4;
15	flower.children.push(stem);
16
17	let bulb = new Path.Circle(view.bounds.center,70);
18	bulb.fillColor = "yellow";
19	bulb.strokeColor = "red";
20	bulb.strokeWidth = 4;
21	flower.children.push(bulb);
22
23	let totalPedals = 30;
24	let rotationAmount = 360 / totalPedals;
25
26	for (var i = 0; i < totalPedals; i++) {
27		let pedal = new Path.Ellipse(100,100,200,50);
28		pedal.bounds.leftCenter = view.bounds.center;
29		pedal.sendToBack();
30		pedal.fillColor = randomColor();
31		pedal.rotate(i*rotationAmount,view.bounds.center);
32		flower.children.push(pedal);
33	}
34
35	stem.sendToBack();
36
37	flower.scale(.2);
38	flower.position = location;
39}
40
41function onMouseDown(event){
42	console.log(event);
43	createFlower(event.point);
44}