Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
canvas-sketch-fork-cq
Advanced tools
Readme
canvas-sketch
is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser.
:closed_book: Documentation
:wrench: Examples
example of canvas-sketch
running in Chrome
↓
To jump directly into canvas-sketch
, try the following terminal commands with node@8.x
and npm@5.x
or newer.
# Install the CLI tool globally
npm install canvas-sketch-cli -g
# Make a new folder to hold all your generative sketches
mkdir my-sketches
# Move into that folder
cd my-sketches
# Scaffold a new 'sketch.js' file and open the browser
canvas-sketch sketch.js --new --open
While in the browser, hit Cmd + S
or Ctrl + S
to export a high-resolution PNG of your artwork to your ~/Downloads
folder.
Some other commands to try:
# Start the tool on an existing file and change PNG export folder
canvas-sketch src/foobar.js --output=./tmp/
# Start a new sketch from the Three.js template
canvas-sketch --new --template=three --open
# Build your sketch to a sharable HTML + JS website
canvas-sketch src/foobar.js --build
# Develop with "Hot Reloading" instead of full page reload
canvas-sketch src/foobar.js --hot
For more features and details, see the Documentation.
Once you have the CLI tool running, you can try this example of an A4 print artwork.
const canvasSketch = require('canvas-sketch');
// Sketch parameters
const settings = {
dimensions: 'a4',
pixelsPerInch: 300,
units: 'in'
};
// Artwork function
const sketch = () => {
return ({ context, width, height }) => {
// Margin in inches
const margin = 1 / 4;
// Off-white background
context.fillStyle = 'hsl(0, 0%, 98%)';
context.fillRect(0, 0, width, height);
// Gradient foreground
const fill = context.createLinearGradient(0, 0, width, height);
fill.addColorStop(0, 'cyan');
fill.addColorStop(1, 'orange');
// Fill rectangle
context.fillStyle = fill;
context.fillRect(margin, margin, width - margin * 2, height - margin * 2);
};
};
// Start the sketch
canvasSketch(sketch, settings);
When exporting the image in browser with Cmd + S
or Ctrl + S
keystrokes, the saved PNG file matches 21 x 29.7 cm at 300 DPI, and can be printed with archival ink on quality paper.
Resulting image looks something like this:
There are many features still outstanding, such as:
MIT, see LICENSE.md for details.
FAQs
A utility for quickly prototyping 2D and WebGL sketches
The npm package canvas-sketch-fork-cq receives a total of 2 weekly downloads. As such, canvas-sketch-fork-cq popularity was classified as not popular.
We found that canvas-sketch-fork-cq demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.