Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added svg documentation from doodle-svg to doodle #154

Merged
merged 4 commits into from
Apr 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ docs/src/main/mdoc/api
docs/src/pages/**/*.png



### SublimeText ###
doodle.sublime-project
# cache files for sublime text
Expand Down Expand Up @@ -141,5 +142,6 @@ local.properties
.metals
.bloop
project/metals.sbt
.vscode

.sbt-hydra-history
Binary file added circle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/src/pages/algebra/basic-with-text.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion docs/src/pages/directory.conf
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ laika.navigationOrder = [
interact
algebra
effect
development
svg
development
]
63 changes: 63 additions & 0 deletions docs/src/pages/svg/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# Doodle SVG

Doodle SVG draws Doodle pictures to SVG, both in the browser using [Scala JS](https://scala-js.org/) and to files on the JVM.

## Usage

Firstly, bring everything into scope

```scala
import doodle.svg._
```

Now what you can do depends on whether you are running in the browser or on the JVM.


### Running in the Browser

In the browser you can draw a picture to SVG. To do this, construct a `Frame` with the `id` of the DOM element where you'd like the picture drawn.

For example, if you have the following element in your HTML

``` html
<div id="svg-root"></div>
```

then you can create a `Frame` referring to it with

``` scala mdoc:silent
val frame = Frame("svg-root")
```

Now suppose you have a picture called `thePicture`. You can draw it using the frame you just created like so

``` scala
thePicture.drawWithFrame(frame)
```

The rendered SVG will appear where the element is positioned on your web page.


## Running on the JVM

On the JVM you can't draw SVG to the screen. Use the `java2d` backend for that instead. However you can write SVG output in the usual way.


## Examples

The source for these examples is [in the repository](https://github.com/creativescala/doodle-svg/tree/main/examples/src/main/scala).

### Concentric Circles
@:doodle("concentric-circles", "ConcentricCircles.draw")

### Text Positioning
@:doodle("text-positioning", "TextPositioning.draw")

### Doodle Logo
@:doodle("doodle-logo", "DoodleLogo.draw")

### Pulsing Circle
@:doodle("pulsing-circle", "PulsingCircle.draw")

### Parametric Spiral
@:doodle("parametric-spiral", "ParametricSpiral.draw")
39 changes: 39 additions & 0 deletions examples/js/src/main/scala/doodle/examples/ConcentricCircles.scala
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/*
* Copyright 2015 Creative Scala
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package doodle
package svg

import doodle.core._
import doodle.svg._
import doodle.syntax.all._
import scala.scalajs.js.annotation._
import cats.effect.unsafe.implicits.global

@JSExportTopLevel("ConcentricCircles")
object ConcentricCircles {
def circles(count: Int): Picture[Unit] =
if (count == 0) Picture.circle(20).fillColor(Color.hsl(0.degrees, 0.7, 0.6))
else
Picture
.circle(count.toDouble * 20.0)
.fillColor(Color.hsl((count * 15).degrees, 0.7, 0.6))
.under(circles(count - 1))

@JSExport
def draw(mount: String) =
circles(7).drawWithFrame(Frame(mount))
}
46 changes: 46 additions & 0 deletions examples/js/src/main/scala/doodle/examples/DoodleLogo.scala
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* Copyright 2015 Creative Scala
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package doodle
package svg

import doodle.core._
import doodle.core.font._
import doodle.svg._
import doodle.syntax.all._
import scala.scalajs.js.annotation._
import cats.effect.unsafe.implicits.global

@JSExportTopLevel("DoodleLogo")
object DoodleLogo {
val font =
Font.defaultSansSerif.size(FontSize.points(22)).weight(FontWeight.bold)
val logo: Picture[Unit] =
(0.to(10))
.map(i =>
Picture
.text("Doodle SVG")
.font(font)
.fillColor(Color.hotpink.spin(10.degrees * i.toDouble))
.at(i * 3.0, i * -3.0)
)
.toList
.allOn

@JSExport
def draw(mount: String) =
logo.drawWithFrame(Frame(mount))
}
44 changes: 44 additions & 0 deletions examples/js/src/main/scala/doodle/examples/ParametricSpiral.scala
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import doodle.core._
import doodle.svg._
import doodle.syntax.all._
import scala.scalajs.js.annotation._
import cats.effect.unsafe.implicits.global

@JSExportTopLevel("ParametricSpiral")
object ParametricSpiral {

def parametricSpiral(angle: Angle): Point =
Point((Math.exp(angle.toTurns) - 1) * 200, angle)

def drawCurve(
points: Int,
marker: Point => Picture[Unit],
curve: Angle => Point
): Picture[Unit] = {
// Angle.one is one complete turn. I.e. 360 degrees
val turn = Angle.one / points.toDouble
def loop(count: Int): Picture[Unit] = {
count match {
case 0 =>
val pt = curve(Angle.zero)
marker(pt).at(pt)
case n =>
val pt = curve(turn * count.toDouble)
marker(pt).at(pt).on(loop(n - 1))
}
}

loop(points)
}

@JSExport
def draw(id: String): Unit = {
val marker = (point: Point) =>
Picture
.circle(point.r * 0.125 + 7)
.fillColor(Color.red.spin(point.angle / 4.0))
.noStroke

drawCurve(20, marker, parametricSpiral _).drawWithFrame(Frame(id))
}
}
43 changes: 43 additions & 0 deletions examples/js/src/main/scala/doodle/examples/PulsingCircle.scala
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* Copyright 2015 Creative Scala
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package doodle
package svg

import doodle.core._
import doodle.svg._
import doodle.syntax.all._
import doodle.interact.syntax.all._
import scala.scalajs.js.annotation._
import cats.effect.unsafe.implicits.global

@JSExportTopLevel("PulsingCircle")
object PulsingCircle {
def circle(count: Double): Picture[Unit] =
Picture
.circle(2 * count + 10)
.fillColor(Color.hsl((count * 5).degrees, 0.7, 0.6))

@JSExport
def draw(mount: String) =
0.0
.upToIncluding(72.0)
.map(c => circle(c))
.forSteps(120)
.andThen(_ => 72.0.upToIncluding(0.0).map(c => circle(c)).forSteps(120))
.repeatForever
.animate(Frame(mount).withSize(72 * 2 + 10, 72 * 2 + 10))
}
43 changes: 43 additions & 0 deletions examples/js/src/main/scala/doodle/examples/TextPositioning.scala
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* Copyright 2015 Creative Scala
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package doodle
package svg

import doodle.core._
import doodle.core.font._
import doodle.svg._
import doodle.syntax.all._
import scala.scalajs.js.annotation._
import cats.effect.unsafe.implicits.global

@JSExportTopLevel("TextPositioning")
object TextPositioning {
val font = Font.defaultSansSerif.size(FontSize.points(18))
def text(string: String): Picture[Unit] =
Picture.text(string).font(font).fillColor(Color.hotpink)

val textPositioning: Picture[Unit] =
text("Above")
.above(
text("Center").on(Picture.circle(100).strokeWidth(3.0))
)
.above(text("Below"))

@JSExport
def draw(mount: String) =
textPositioning.drawWithFrame(Frame(mount))
}
13 changes: 13 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 16 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"name": "doodle",
"version": "1.0.0",
"description": "Copyright [Noel Welsh](http://noelwelsh.com).",
"main": "tailwind.config.js",
"directories": {
"doc": "docs",
"example": "examples"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Loading