Creative Technologist, Data Scientist, Generative Artist (generatecoll)
Getting to know canvas (A Tutorial)(Day 1 of 30) Implementing Noise in Vanilla Javascript(Day 2 of 30) Implementing SimplexNoise in Vanilla Javascript(Day 4 of 30) Plain Squares in Vanilla Javascript(Day 5 of 30) Playing with Images in Vanilla Javascript(Day 6 of 30) Drawing Pictures with Custom Pixels in Vanilla Javascript(Day 7 of 30) Building Spirals in Vanilla Javascript(Day 8 of 30) Seamless Patterns in P5.js
(Day 3 of 30) Canvas and Copilot Experiments in Vanilla Javascript
cleanshot20221016At154705 = FileAttachment("CleanShot 2022-10-16 at 15.47.05.gif").image()
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
const n = 8;
// adds
ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI);
ctx.moveTo(80, 80);
ctx.arc(70, 80, 10, 0, 2 * Math.PI);
ctx.moveTo(120, 80);
ctx.arc(110, 80, 10, 0, 2 * Math.PI);
ctx.moveTo(100, 100);
ctx.arc(100, 100, 10, 0, Math.PI);
ctx.stroke();
return canvas;
}
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(100, 100);
ctx.arc(100, 100, 50, 0, Math.PI);
ctx.lineTo(100, 0);
ctx.stroke();
return canvas;
}
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.beginPath();
for (var i = 0; i < 4; i++) {
ctx.moveTo(0, i * 50);
ctx.lineTo(200, i * 50);
ctx.moveTo(i * 50, 0);
ctx.lineTo(i * 50, 200);
}
ctx.stroke();
return canvas;
}
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.beginPath();
for (var i = 0; i < 100; i++) {
ctx.moveTo(Math.random() * 200, Math.random() * 200);
ctx.lineTo(Math.random() * 200, Math.random() * 200);
}
ctx.stroke();
return canvas;
}
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.beginPath();
for (var i = 0; i < 100; i++) {
ctx.moveTo(Math.random() * 200, Math.random() * 200);
ctx.lineTo(Math.random() * 200, Math.random() * 200);
ctx.strokeStyle = "hsl(" + Math.random() * 360 + ", 100%, 50%)";
}
ctx.stroke();
return canvas;
}
{
// 50 shades of red in hex values
function shadesOfRed() {
var colors = [];
colors.push("#FF0000");
colors.push("#E60000");
colors.push("#CC0000");
colors.push("#B30000");
colors.push("#990000");
return colors;
}
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.beginPath();
var colors = shadesOfRed();
for (var i = 0; i < 100; i++) {
ctx.moveTo(Math.random() * 200, Math.random() * 200);
ctx.lineTo(Math.random() * 200, Math.random() * 200);
ctx.strokeStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.lineWidth = Math.random() * 10;
}
ctx.stroke();
return canvas;
}
cleanshot20221016At155737 = FileAttachment("CleanShot 2022-10-16 at 15.57.37.gif").image()
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("NIKE", 50, 100);
return canvas;
}
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("السلام عليكم", 50, 100);
return canvas;
}
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.moveTo(200, 0);
ctx.lineTo(0, 200);
ctx.stroke();
return canvas;
}
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.moveTo(200, 0);
ctx.lineTo(0, 200);
ctx.stroke();
var x1 = 0;
var y1 = 0;
var x2 = 200;
var y2 = 200;
var x3 = 200;
var y3 = 0;
var x4 = 0;
var y4 = 200;
var x = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4);
var y = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4);
var d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
if (d != 0) {
var x = x / d;
var y = y / d;
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.stroke();
}
return canvas;
}
{
const canvas = DOM.canvas(WIDTH, HEIGHT);
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(100, 100);
ctx.moveTo(100, 100);
ctx.lineTo(50, 50);
ctx.moveTo(100, 100);
ctx.lineTo(150, 50);
ctx.moveTo(100, 100);
ctx.lineTo(100, 50);
ctx.moveTo(100, 100);
ctx.lineTo(100, 50);
ctx.moveTo(100, 50);
ctx.lineTo(50, 0);
ctx.moveTo(100, 50);
ctx.lineTo(150, 0);
ctx.stroke();
return canvas;
}
complementaryColors = () => {
var colors = [];
colors.push("#FF0000");
colors.push("#00FF00");
colors.push("#0000FF");
colors.push("#FFFF00");
colors.push("#FF00FF");
return colors;
}
HEIGHT = 250
WIDTH = 1000
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
