1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < html >
4+
5+ < head >
6+ < meta charset ="UTF-8 ">
7+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js "> </ script >
8+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js "> </ script >
9+ < script src ="https://unpkg.com/p5.js-svg@1.5.1 "> </ script >
10+ < style >
11+ body {
12+ padding : 0 ;
13+ margin : 0 ;
14+ }
15+ </ style >
16+ </ head >
17+
18+ < body >
19+ < script >
20+ //this is a template p5.js sketch that draws on a letter format canvas, fit for plotting on letter paper
21+ //replace the placeholderforgenart() function by your own gen art code
22+ //use the save svg button when you're happy with the art
23+
24+ //letter: 8.5in x 11in
25+ //96dpi is for plotting on the UUNA TEK iDraw
26+ //which gives this width and height for a letter format paper
27+ //w=96*8.5=816
28+ //h=96*11=1056
29+ var echelle = 1
30+ var w = 816 * echelle
31+ var h = 1056 * echelle
32+ //I suggest to keep a bit of white space on the sides of page when plotting.
33+ //so plot within the area leftmargin - rightmargin on the x-axis and topmargin - bottommargin on the y axis
34+ var rightmargin = 0.9 * w
35+ var leftmargin = 0.1 * w
36+ var topmargin = 0.1 * h
37+ var bottommargin = 0.9 * h
38+ var actualwidth = rightmargin - leftmargin
39+ var actualheight = bottommargin - topmargin
40+
41+ var cnv , imgbtn , font
42+
43+ function setup ( ) {
44+ getsvg ( )
45+ centerCanvas ( ) ;
46+ colorMode ( HSB , 360 , 100 , 100 , 250 ) ;
47+ strokeCap ( SQUARE )
48+ noFill ( )
49+ }
50+
51+ function getsvg ( ) {
52+ cnv = createCanvas ( w , h , SVG ) ;
53+ imgbtn = createButton ( "save svg" ) ;
54+ placebtn ( ) ;
55+ imgbtn . mouseClicked ( savesvg ) ;
56+ }
57+
58+ function centerCanvas ( ) {
59+ var x = ( windowWidth - w ) / 2 ;
60+ var y = ( windowHeight - h ) / 2 ;
61+ cnv . position ( x , y ) ;
62+ }
63+
64+ function placebtn ( ) {
65+ var x = ( windowWidth - w ) / 2 ;
66+ var y = ( windowHeight - h ) / 2 ;
67+ imgbtn . position ( x - 200 , y + h / 2 + 42 )
68+ }
69+
70+ function savesvg ( ) {
71+ save ( "uunatek-udem-003.svg" ) ;
72+ }
73+
74+ function preload ( ) {
75+ font = loadFont ( "./fonts/1CamBam_Stick_0.ttf" ) ;
76+ }
77+
78+ function draw ( ) {
79+ background ( 0 , 0 , 100 )
80+ placeholderforgenart ( )
81+ noLoop ( )
82+ }
83+
84+ function placeholderforgenart ( ) {
85+ stroke ( 0 , 0 , 0 )
86+ quad ( leftmargin , topmargin , rightmargin , topmargin , rightmargin , bottommargin , leftmargin , bottommargin )
87+ textFont ( font )
88+ var fSize = 184
89+ textSize ( fSize )
90+ var message = "art"
91+ var xtxt = leftmargin + ( actualwidth - textWidth ( message ) ) / 2
92+ var ytxt = topmargin + actualheight * 0.5
93+ text ( message , xtxt , ytxt )
94+ message = "ici"
95+ xtxt = leftmargin + ( actualwidth - textWidth ( message ) ) / 2
96+ ytxt += fSize + 7
97+ text ( message , xtxt , ytxt )
98+ fSize = 18
99+ textSize ( fSize )
100+ message = "this is the bottom part of the area where to draw"
101+ xtxt = leftmargin + ( actualwidth - textWidth ( message ) ) / 2
102+ ytxt = bottommargin
103+ text ( message , xtxt , ytxt )
104+ }
105+
106+
107+ </ script >
108+ </ body >
109+
110+ </ html >
0 commit comments